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</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 margin: 20px 0;27 color: #333;28 }29 30 .botones {31 display: flex;32 gap: 20px;33 }34 35 button {36 padding: 15px 30px;37 font-size: 1.2rem;38 border: none;39 border-radius: 8px;40 cursor: pointer;41 color: white;42 transition: transform 0.1s, opacity 0.2s;43 }44 45 button:hover {46 opacity: 0.9;47 }48 49 button:active {50 transform: scale(0.95);51 }52 53 #btnSumar {54 background-color: #28a745;55 }56 57 #btnRestar {58 background-color: #dc3545;59 }60 </style>61 </head>62 <body>63 64 <h1>Contador</h1>65 <div id="contador">0</div>66 67 <div class="botones">68 <button id="btnSumar">+2</button>69 <button id="btnRestar">-3</button>70 </div>71 72 <script>73 let contador = 0;74 const display = document.getElementById('contador');75 76 document.getElementById('btnSumar').addEventListener('click', () => {77 contador += 2;78 display.textContent = contador;79 });80 81 document.getElementById('btnRestar').addEventListener('click', () => {82 contador -= 3;83 display.textContent = contador;84 });85 </script>86 87 </body>88 </html>89 Enlace
El enlace para compartir es: