1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Contador Interactivo</title>7 8 <style>9 /* Estilos CSS para que se vea bien */10 body {11 font-family: Arial, sans-serif;12 display: flex;13 flex-direction: column;14 align-items: center;15 justify-content: center;16 min-height: 100vh; /* Centra el contenido verticalmente */17 background-color: #f4f4f9;18 }19 20 /* Estilo del contador (el display) */21 #contador {22 font-size: 4em;23 margin: 30px 0;24 padding: 20px 50px;25 border: 3px solid #ccc;26 border-radius: 10px;27 background-color: white;28 min-width: 200px; /* Asegura un ancho mínimo */29 text-align: center;30 }31 32 /* Estilos generales de los botones */33 .contenedor-botones button {34 padding: 15px 30px;35 margin: 10px;36 border: none;37 cursor: pointer;38 font-size: 1.2em;39 color: white;40 border-radius: 8px;41 transition: background-color 0.3s ease;42 }43 44 /* Estilo específico del botón Verde (+) */45 #btnSumar {46 background-color: #4CAF50; /* Verde */47 box-shadow: 0 4px #387c3a; /* Sombra para efecto de click */48 }49 50 #btnSumar:hover {51 background-color: #5cb85c;52 }53 54 /* Estilo específico del botón Rojo (-) */55 #btnRestar {56 background-color: #f44336; /* Rojo */57 box-shadow: 0 4px #d32f2e;58 }59 60 #btnRestar:hover {61 background-color: #e53935;62 }63 </style>64 </head>65 <body>66 67 <h1>Contador de Puntos</h1>68 69 <!-- Display donde se mostrará el número -->70 <div id="contador">0</div>71 72 <!-- Contenedor para los dos botones -->73 <div class="contenedor-botones">74 <button id="btnSumar">➕ Sumar 2</button>75 <button id="btnRestar">➖ Restar 3</button>76 </div>77 78 79 <script>80 // Variables de estado y DOM81 let contadorActual = 0;82 const displayContador = document.getElementById('contador');83 const btnSumar = document.getElementById('btnSumar');84 const btnRestar = document.getElementById('btnRestar');85 86 /**87 * Función que actualiza el número en la pantalla (DOM).88 */89 function actualizarDisplay() {90 displayContador.textContent = contadorActual;91 }92 93 /**94 * Manejador de eventos para sumar 2.95 */96 function sumarDos() {97 contadorActual += 2; // Suma 2 al valor actual98 actualizarDisplay(); // Llama a la función que muestra el cambio99 }100 101 /**102 * Manejador de eventos para restar 3.103 */104 function restarTres() {105 contadorActual -= 3; // Resta 3 al valor actual106 actualizarDisplay(); // Llama a la función que muestra el cambio107 }108 109 110 // Asignar los manejadores de eventos (listeners)111 // Esto hace que las funciones se ejecuten cuando se hacen clic en los botones.112 btnSumar.addEventListener('click', sumarDos);113 btnRestar.addEventListener('click', restarTres);114 115 // Inicializar el display al cargar la página116 actualizarDisplay(); 117 </script>118 119 </body>120 </html>121 Enlace
El enlace para compartir es: