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

  1. 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.
  1. 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.
  1. 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.

… … …

¡Coméntanos que te ha parecido este artículo al final de la página!

TÚ OPINIÓN IMPORTA


NUESTRAS ÚLTIMAS PUBLICACIONES

Contenido restringido

Acceso de usuarios existentes
   
Registro de un nuevo usuario
*Campo necesario

Categories:

Tags:

Comments are closed

Estado de acceso
ESTADO DE ACCESO
TRADUCTORES
COMPARTENOS
error: CONTENIDO PROTEGIDO