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 ------------------ */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; /* Asegura que el contenido esté centrado verticalmente */17 margin: 0;18 background-color: #f4f7f9;19 }20 21 /* Estilo del Contador (el número) */22 #counterDisplay {23 font-size: 6em; /* Tamaño grande para que se vea bien el número */24 margin: 30px 0;25 padding: 20px 40px;26 border: 5px solid #333;27 border-radius: 15px;28 background-color: #ffffff;29 min-width: 200px; /* Ancho mínimo para estabilidad visual */30 text-align: center;31 }32 33 /* Contenedor de los botones */34 .buttons-container {35 display: flex;36 gap: 30px; /* Espacio entre los dos botones */37 margin-top: 20px;38 }39 40 /* Estilo general para los botones */41 button {42 padding: 15px 30px;43 font-size: 1.2em;44 cursor: pointer; /* Cambia el cursor al pasar por encima */45 border: none;46 border-radius: 8px;47 transition: background-color 0.2s ease, transform 0.1s;48 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);49 }50 51 /* Estilo específico para el botón verde (Sumar) */52 #btnGreen {53 background-color: #4CAF50; /* Verde */54 color: white;55 width: 200px;56 }57 58 #btnGreen:hover {59 background-color: #45a049;60 transform: translateY(-2px);61 }62 63 /* Estilo específico para el botón rojo (Restar) */64 #btnRed {65 background-color: #f44336; /* Rojo */66 color: white;67 width: 200px;68 }69 70 #btnRed:hover {71 background-color: #da3b2e;72 transform: translateY(-2px);73 }74 </style>75 </head>76 <body>77 78 <h1>Contador de Interacciones</h1>79 80 <!-- Aquí se mostrará el valor del contador -->81 <div id="counterDisplay">0</div>82 83 <div class="buttons-container">84 <!-- Botón Verde: Sumar 2 -->85 <button id="btnGreen" onclick="sumarDos()">➕ Sumar 2</button>86 87 <!-- Botón Rojo: Restar 3 -->88 <button id="btnRed" onclick="restarTres()">➖ Restar 3</button>89 </div>90 91 92 <script>93 /* ------------------ LÓGICA JAVASCRIPT ------------------ */94 95 // 1. Variable para almacenar el estado del contador96 let count = 0; 97 98 // 2. Obtener la referencia al elemento donde se mostrará el número99 const display = document.getElementById('counterDisplay');100 101 102 /**103 * Función que actualiza el display con el valor de 'count'.104 */105 function updateDisplay() {106 display.textContent = count;107 }108 109 /**110 * FUNCIÓN DEL BOTÓN VERDE: Suma 2 al contador.111 */112 function sumarDos() {113 // Actualiza la variable interna114 count += 2; 115 116 // Muestra el nuevo valor en la pantalla117 updateDisplay();118 }119 120 /**121 * FUNCIÓN DEL BOTÓN ROJO: Resta 3 del contador.122 */123 function restarTres() {124 // Actualiza la variable interna125 count -= 3; 126 127 // Muestra el nuevo valor en la pantalla128 updateDisplay();129 }130 131 // Inicializar el display al cargar la página (asegura que empiece con '0')132 updateDisplay(); 133 134 </script>135 136 </body>137 </html>138 Enlace
El enlace para compartir es: