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 con Botones</title>7 <style>8 body {9 font-family: Arial, sans-serif;10 display: flex;11 flex-direction: column;12 align-items: center;13 justify-content: center;14 min-height: 100vh;15 margin: 0;16 background-color: #f0f0f0;17 }18 19 h1 {20 color: #333;21 }22 23 #contador {24 font-size: 4rem;25 font-weight: bold;26 color: #333;27 margin: 20px 0;28 min-width: 120px;29 text-align: center;30 }31 32 .botones {33 display: flex;34 gap: 20px;35 }36 37 button {38 font-size: 1.2rem;39 padding: 15px 30px;40 border: none;41 border-radius: 10px;42 color: white;43 cursor: pointer;44 transition: transform 0.1s, opacity 0.2s;45 }46 47 button:hover {48 opacity: 0.85;49 }50 51 button:active {52 transform: scale(0.95);53 }54 55 #btn-sumar {56 background-color: #28a745;57 }58 59 #btn-restar {60 background-color: #dc3545;61 }62 </style>63 </head>64 <body>65 <h1>Contador</h1>66 <div id="contador">0</div>67 <div class="botones">68 <button id="btn-sumar">+2</button>69 <button id="btn-restar">-3</button>70 </div>71 72 <script>73 let valor = 0;74 const contador = document.getElementById('contador');75 const btnSumar = document.getElementById('btn-sumar');76 const btnRestar = document.getElementById('btn-restar');77 78 btnSumar.addEventListener('click', () => {79 valor += 2;80 contador.textContent = valor;81 });82 83 btnRestar.addEventListener('click', () => {84 valor -= 3;85 contador.textContent = valor;86 });87 </script>88 </body>89 </html>Enlace
El enlace para compartir es: