Saltar al contenido principal
11DOM y Eventos

Proyecto: Estructura y primeros clics

Clase 4 de 69 min de lectura

Has aprendido a seleccionar elementos, a modificarlos y a escuchar eventos. Por separado. Toca juntarlo todo en algo que puedas enseñar: una calculadora que funciona de verdad.

No voy a soltarte el código de golpe. La construimos en tres clases, pieza a pieza, para que entiendas qué hace cada línea. En esta primera:

  1. Montas la estructura HTML de la calculadora.
  2. Añades los estilos CSS (te los doy hechos).
  3. Escribes el primer JavaScript para que los botones numéricos funcionen.

Al terminar podrás pulsar números y verlos en pantalla. Sumar y restar, todavía no: eso llega en la siguiente clase.

La estructura HTML#

Una calculadora son dos cosas: un display donde se ven los números y una cuadrícula de botones. Crea un archivo index.html con esto:

HTML
<!DOCTYPE html><html lang="es"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Calculadora Interactiva</title>  <link rel="stylesheet" href="calculadora.css"></head><body>  <div class="calculadora">    <!-- Display -->    <div class="display">      <div class="operacion-anterior" id="operacion-anterior"></div>      <div class="operacion-actual" id="operacion-actual">0</div>    </div>    <!-- Botones -->    <div class="botones">      <button class="btn btn-funcion" id="clear">C</button>      <button class="btn btn-funcion" id="delete">⌫</button>      <button class="btn btn-operador" data-operador="÷">÷</button>      <button class="btn btn-operador" data-operador="×">×</button>      <button class="btn btn-numero" data-numero="7">7</button>      <button class="btn btn-numero" data-numero="8">8</button>      <button class="btn btn-numero" data-numero="9">9</button>      <button class="btn btn-operador" data-operador="-">-</button>      <button class="btn btn-numero" data-numero="4">4</button>      <button class="btn btn-numero" data-numero="5">5</button>      <button class="btn btn-numero" data-numero="6">6</button>      <button class="btn btn-operador" data-operador="+">+</button>      <button class="btn btn-numero" data-numero="1">1</button>      <button class="btn btn-numero" data-numero="2">2</button>      <button class="btn btn-numero" data-numero="3">3</button>      <button class="btn btn-igual" id="igual" rowspan="2">=</button>      <button class="btn btn-numero btn-cero" data-numero="0">0</button>      <button class="btn btn-numero" data-numero=".">.</button>    </div>  </div>  <script src="calculadora.js"></script></body></html>

Fíjate en los atributos de los botones: los numéricos llevan data-numero y los operadores, data-operador. Son data attributes, atributos que te inventas tú para guardar información en el HTML.

Gracias a ellos, JavaScript sabrá qué valor tiene cada botón sin tener que leer su texto. Si mañana cambias el símbolo que se ve en un botón, la lógica sigue funcionando.

Los estilos CSS#

Crea un archivo calculadora.css y copia estos estilos. No hace falta que los escribas a mano ni que los entiendas al detalle: aquí lo importante es el JavaScript.

CSS
* {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  min-height: 100vh;  display: flex;  justify-content: center;  align-items: center;}.calculadora {  background: #2c3e50;  border-radius: 20px;  padding: 20px;  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);  max-width: 300px;}.display {  background: #34495e;  border-radius: 10px;  padding: 20px;  margin-bottom: 20px;  text-align: right;  min-height: 80px;}.operacion-anterior {  color: #bdc3c7;  font-size: 14px;  min-height: 20px;}.operacion-actual {  color: white;  font-size: 28px;  font-weight: bold;  min-height: 40px;}.botones {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 10px;}.btn {  border: none;  border-radius: 10px;  font-size: 18px;  font-weight: bold;  padding: 20px;  cursor: pointer;  transition: all 0.2s;}.btn:hover {  transform: translateY(-2px);  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}.btn:active { transform: translateY(0); }.btn-numero { background: #ecf0f1; color: #2c3e50; }.btn-numero:hover { background: #d5dbdb; }.btn-operador { background: #f39c12; color: white; }.btn-operador:hover { background: #e67e22; }.btn-funcion { background: #e74c3c; color: white; }.btn-funcion:hover { background: #c0392b; }.btn-igual { background: #27ae60; color: white; grid-row: span 2; }.btn-igual:hover { background: #229954; }.btn-cero { grid-column: span 2; }

Abre index.html en el navegador. Ya deberías ver la calculadora con todos sus botones… que no hacen absolutamente nada. Vamos a arreglarlo.

Seleccionar los elementos del DOM#

Lo primero es tener a mano los elementos que vas a tocar. Crea un archivo calculadora.js:

// Elementos del DOMconst displayActual = document.getElementById('operacion-actual')const displayAnterior = document.getElementById('operacion-anterior')// Estado de la calculadoralet numeroActual = '0'

Usamos getElementById porque cada línea del display tiene un id único. Y numeroActual guarda lo que se ve en pantalla.

¿Por qué es un string y no un número? Porque al pulsar 1 y luego 2 quieres pegar dígitos para formar '12', no sumarlos para que salga 3.

Hacer que los botones numéricos funcionen#

Hay once botones numéricos (los diez dígitos y el punto) y todos hacen lo mismo. En lugar de escribir once listeners, los seleccionas todos con querySelectorAll y los recorres:

// Botones numéricosconst botonesNumero = document.querySelectorAll('.btn-numero')botonesNumero.forEach(boton => {  boton.addEventListener('click', () => {    const numero = boton.dataset.numero    // Evitar múltiples puntos decimales    if (numero === '.' && numeroActual.includes('.')) {      return    }    // Reemplazar el 0 inicial o concatenar    if (numeroActual === '0' && numero !== '.') {      numeroActual = numero    } else {      numeroActual += numero    }    displayActual.textContent = numeroActual  })})

Paso a paso:

  1. querySelectorAll('.btn-numero') devuelve todos los botones con la clase btn-numero.
  2. Con forEach recorres cada botón y le añades un listener de click.
  3. boton.dataset.numero lee el valor del atributo data-numero del botón pulsado.
  4. Si ya hay un punto decimal y llega otro, el return corta ahí y no pasa nada.
  5. El dígito se concatena al string actual, o lo reemplaza si en pantalla solo había un 0.
  6. textContent pinta el resultado en el display.
Infografía
De un clic al display: así se construye el número
6.Pulsas 2: queda '75.2'. En cada clic, textContent pinta el valor en el display.
Paso 6 de 6

Añadir el botón de limpiar#

El botón C lo deja todo como al principio: un 0 en pantalla y la línea de arriba vacía.

// Botón cleardocument.getElementById('clear').addEventListener('click', () => {  numeroActual = '0'  displayActual.textContent = numeroActual  displayAnterior.textContent = ''})

Añadir el botón de borrar#

El botón ⌫ quita el último carácter, para cuando se te escapa un dedo:

// Botón deletedocument.getElementById('delete').addEventListener('click', () => {  if (numeroActual.length > 1) {    numeroActual = numeroActual.slice(0, -1)  } else {    numeroActual = '0'  }  displayActual.textContent = numeroActual})

slice(0, -1) devuelve el string sin su último carácter. ¿Y si solo queda un dígito? Entonces volvemos a '0', porque una calculadora con el display en blanco queda rarísima.

Prueba lo que llevas#

Abre index.html en el navegador y comprueba que:

  • Al pulsar números, aparecen en el display.
  • No puedes escribir dos puntos decimales en el mismo número.
  • El botón C lo limpia todo.
  • El botón ⌫ borra el último dígito.

Código completo hasta aquí#

Así debería quedar tu calculadora.js, por si quieres comparar:

// Elementos del DOMconst displayActual = document.getElementById('operacion-actual')const displayAnterior = document.getElementById('operacion-anterior')// Estadolet numeroActual = '0'// Botones numéricosdocument.querySelectorAll('.btn-numero').forEach(boton => {  boton.addEventListener('click', () => {    const numero = boton.dataset.numero    if (numero === '.' && numeroActual.includes('.')) return    if (numeroActual === '0' && numero !== '.') {      numeroActual = numero    } else {      numeroActual += numero    }    displayActual.textContent = numeroActual  })})// Botón cleardocument.getElementById('clear').addEventListener('click', () => {  numeroActual = '0'  displayActual.textContent = numeroActual  displayAnterior.textContent = ''})// Botón deletedocument.getElementById('delete').addEventListener('click', () => {  if (numeroActual.length > 1) {    numeroActual = numeroActual.slice(0, -1)  } else {    numeroActual = '0'  }  displayActual.textContent = numeroActual})

Son unas 30 líneas y ya hacen algo que se ve y se toca.

En resumen

  • Los data attributes (data-numero) guardan información en el HTML y se leen con dataset.
  • Con querySelectorAll y forEach añades el mismo listener a muchos botones de una vez.
  • El número del display se guarda como string para poder concatenar dígitos.
  • El estado vive en una variable (numeroActual) y textContent lo pinta en pantalla.

En la próxima clase añadimos las operaciones para que la calculadora, por fin, calcule.