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 <style>8 /* ESTILOS CSS */9 body {10 font-family: 'Arial', sans-serif;11 display: flex;12 flex-direction: column;13 align-items: center;14 justify-content: center;15 height: 100vh;16 background-color: #f4f7f9;17 margin: 0;18 }19 20 .container {21 text-align: center;22 padding: 30px;23 border-radius: 15px;24 background-color: #ffffff;25 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);26 }27 28 h1 {29 color: #333;30 }31 32 /* Estilo para el contador */33 #contador-display {34 font-size: 5em; /* Tamaño grande para que se vea bien */35 margin: 20px 0;36 color: #4CAF50; /* Color verde inicial */37 transition: color 0.3s ease;38 }39 40 /* Estilo de los botones */41 .button-group button {42 padding: 15px 30px;43 font-size: 1.2em;44 margin: 0 15px;45 border: none;46 cursor: pointer;47 border-radius: 8px;48 transition: background-color 0.2s ease, transform 0.1s;49 font-weight: bold;50 }51 52 /* Botón Verde (Suma) */53 #btn-sumar {54 background-color: #4CAF50; /* Verde */55 color: white;56 }57 58 #btn-sumar:hover {59 background-color: #45a049;60 transform: translateY(-2px);61 }62 63 /* Botón Rojo (Resta) */64 #btn-restar {65 background-color: #f44336; /* Rojo */66 color: white;67 }68 69 #btn-restar:hover {70 background-color: #da190b;71 transform: translateY(-2px);72 }73 </style>74 </head>75 <body>76 77 <div class="container">78 <h1>Contador de Operaciones</h1>79 80 <!-- Elemento donde se mostrará el valor del contador -->81 <p id="contador-display">0</p>82 83 <!-- Grupo de botones -->84 <div class="button-group">85 <button id="btn-sumar">➕ Sumar 2 (Verde)</button>86 <button id="btn-restar">➖ Restar 3 (Rojo)</button>87 </div>88 </div>89 90 <!-- Lógica JavaScript -->91 <script>92 // 1. Inicialización del contador93 let contador = 0;94 95 // 2. Obtener referencias a los elementos HTML que vamos a manipular96 const display = document.getElementById('contador-display');97 const btnSumar = document.getElementById('btn-sumar');98 const btnRestar = document.getElementById('btn-restar');99 100 // Función para actualizar el display (la pantalla) con el valor actual del contador101 function actualizarDisplay() {102 display.textContent = contador;103 }104 105 // 3. Funcionalidad del botón VERDE (Suma 2)106 btnSumar.addEventListener('click', () => {107 contador += 2; // Suma 2 al valor actual108 actualizarDisplay(); // Actualiza la pantalla109 });110 111 // 4. Funcionalidad del botón ROJO (Resta 3)112 btnRestar.addEventListener('click', () => {113 contador -= 3; // Resta 3 al valor actual114 actualizarDisplay(); // Actualiza la pantalla115 });116 117 // Asegurarse de que el contador muestre '0' al cargar la página (aunque ya esté en HTML, es buena práctica)118 actualizarDisplay(); 119 </script>120 121 </body>122 </html>123 Enlace
El enlace para compartir es: