feat: implement counter functionality with increment and decrement buttons
This commit is contained in:
@@ -1 +1,33 @@
|
|||||||
// Agregar aquí el código javascript
|
// Agregar aquí el código javascript
|
||||||
|
|
||||||
|
const incrementButton = document.getElementById('increment');
|
||||||
|
const decrementButton = document.getElementById('decrement');
|
||||||
|
const counterDisplay = document.getElementById('counter');
|
||||||
|
|
||||||
|
let counter = 0;
|
||||||
|
|
||||||
|
incrementButton.addEventListener('click', () => {
|
||||||
|
if (counter >= 10) {
|
||||||
|
incrementButton.disabled = true;
|
||||||
|
alert('El contador ha alcanzado el valor máximo de 10.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
counter++;
|
||||||
|
if (counter > 0) {
|
||||||
|
decrementButton.disabled = false;
|
||||||
|
}
|
||||||
|
counterDisplay.textContent = counter;
|
||||||
|
});
|
||||||
|
|
||||||
|
decrementButton.addEventListener('click', () => {
|
||||||
|
if (counter <= 0) {
|
||||||
|
decrementButton.disabled = true;
|
||||||
|
alert('El contador ha alcanzado el valor mínimo de 0.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
counter--;
|
||||||
|
if (counter < 10) {
|
||||||
|
incrementButton.disabled = false;
|
||||||
|
}
|
||||||
|
counterDisplay.textContent = counter;
|
||||||
|
});
|
||||||
@@ -8,7 +8,9 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Ejercicio 4</h1>
|
<h1>Ejercicio 4</h1>
|
||||||
|
<p> Contador: <span id="counter">0</span></p>
|
||||||
|
<button id="increment">Incrementar</button>
|
||||||
|
<button id="decrement">Decrementar</button>
|
||||||
<script src="ejercicio4.js"></script>
|
<script src="ejercicio4.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user