COMPARTE ESTE ARTÍCULO

En este ejercicio, crearás una página web simple con un contador dinámico que aumenta o disminuye cuando el usuario hace clic en los botones correspondientes. Este ejercicio te ayudará a practicar el manejo de eventos, la manipulación del DOM y las operaciones con variables en JavaScript.

Objetivo del Ejercicio

Crear una página web con dos botones: uno para incrementar el contador y otro para disminuirlo.
Mostrar el valor actual del contador en la página y actualizarlo cada vez que se haga clic en los botones.

Código HTML y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contador Dinámico con JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #contador {
            font-size: 48px;
            margin: 20px;
        }
        button {
            font-size: 24px;
            padding: 10px 20px;
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>Contador Dinámico</h1>
    <div id="contador">0</div>
    <button onclick="incrementar()">Incrementar</button>
    <button onclick="disminuir()">Disminuir</button>

    <script>
        // Variable para almacenar el valor del contador
        let valorContador = 0;

        // Función para incrementar el contador
        function incrementar() {
            valorContador++;
            actualizarContador();
        }

        // Función para disminuir el contador
        function disminuir() {
            valorContador--;
            actualizarContador();
        }

        // Función para actualizar el valor mostrado en la página
        function actualizarContador() {
            document.getElementById("contador").innerHTML = valorContador;
        }
    </script>

</body>
</html>

Explicación del Código

Estructura HTML:

La página tiene un título h1 que dice “Contador Dinámico”.
El elemento div con el id contador muestra el valor actual del contador.
Hay dos botones: uno para incrementar el valor del contador y otro para disminuirlo. Cada botón tiene un atributo onclick que llama a una función de JavaScript cuando se hace clic en él.

JavaScript:

Variable valorContador: Esta variable almacena el valor actual del contador.
Funciones incrementar() y disminuir(): Estas funciones aumentan o disminuyen el valor de valorContador en 1 cada vez que se hacen clic en los botones correspondientes.
Función actualizarContador(): Esta función actualiza el contenido del div con el nuevo valor del contador cada vez que se hace clic en uno de los botones.

Estilo CSS:

El código incluye un estilo básico para centrar el contenido, ajustar el tamaño del texto del contador y hacer que los botones sean más grandes y visibles.

¿Qué Aprenderás?

Manipulación del DOM: Cambiar el contenido de un elemento HTML (el valor del contador).
Manejo de eventos: Ejecutar funciones en respuesta a eventos de clic en botones.
Operaciones con variables: Incrementar y disminuir el valor de una variable y reflejar los cambios en la página.

Extensión del Ejercicio

Si deseas ampliar este ejercicio, puedes intentar agregar más funcionalidades:

Reiniciar el contador: Añade un botón adicional para restablecer el contador a cero.
Límites en el contador: Añade condiciones para evitar que el contador baje de cero o suba más allá de cierto número.
Estilos adicionales: Experimenta con más estilos CSS para mejorar la apariencia de la página.

Photo by Pavel Danilyuk on Pexels.com
Photo by RealToughCandy.com on Pexels.com
Photo by Andrea Piacquadio on Pexels.com

¿QUÉ TE HA PARECIDO EL ARTÍCULO? Danos tu opinión al final de la página.
Deja tu comentario y ayúdanos a crecer.

¡SÍGUENOS EN TUS REDES FAVORITAS!
AYUDANOS A CRECER Y QUE LLEGUEMOS A TODAS LAS PERSONAS QUE NOS NECESITANA. SÍGUENOS EN TUS REDES.
Entra AQUÍ y elíge donde seguirnos.