Vamos a crear una calculadora interactiva paso a paso. En lugar de volcar todo el código de golpe, iremos construyéndola poco a poco para que entiendas cada parte.
En esta primera clase vamos a:
Al final tendrás una calculadora donde puedes pulsar números y verlos en pantalla. Todavía no sumará ni restará, eso viene en la siguiente clase.
Necesitamos un display para mostrar los números y una cuadrícula de botones. Crea un archivo index.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 un detalle importante: los botones numéricos tienen un atributo data-numero y los operadores tienen data-operador. Estos data attributes nos permiten saber qué valor tiene cada botón desde JavaScript sin tener que leer su texto.
Crea un archivo calculadora.css y copia estos estilos. No es necesario que los escribas a mano, el foco aquí está en el JavaScript:
* {
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; }
Si abres index.html en el navegador ya deberías ver la calculadora con los botones, aunque todavía no hacen nada. Vamos a arreglarlo.
Lo primero es obtener referencias a los elementos que vamos a necesitar. Crea un archivo calculadora.js:
// Elementos del DOM
const displayActual = document.getElementById('operacion-actual')
const displayAnterior = document.getElementById('operacion-anterior')
// Estado de la calculadora
let numeroActual = '0'
Usamos getElementById porque cada elemento tiene un id único. La variable numeroActual guardará lo que se muestra en pantalla como un string (porque necesitamos concatenar dígitos, no sumarlos).
Ahora seleccionamos todos los botones numéricos con querySelectorAll y les añadimos un evento click:
// Botones numéricos
const 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:
querySelectorAll('.btn-numero') devuelve todos los botones con la clase btn-numeroforEach recorremos cada botón y le añadimos un addEventListener('click', ...)boton.dataset.numero lee el valor del atributo data-numero del botón pulsadotextContentEl botón C debe resetear la pantalla a 0:
// Botón clear
document.getElementById('clear').addEventListener('click', () => {
numeroActual = '0'
displayActual.textContent = numeroActual
displayAnterior.textContent = ''
})
El botón ⌫ borra el último carácter:
// Botón delete
document.getElementById('delete').addEventListener('click', () => {
if (numeroActual.length > 1) {
numeroActual = numeroActual.slice(0, -1)
} else {
numeroActual = '0'
}
displayActual.textContent = numeroActual
})
Usamos slice(0, -1) para quitar el último carácter del string. Si solo queda un dígito, volvemos a '0'.
Abre index.html en el navegador y comprueba que:
Los botones de operaciones (+, -, ×, ÷) y el igual (=) todavía no hacen nada. Eso lo implementaremos en la siguiente clase.
// Elementos del DOM
const displayActual = document.getElementById('operacion-actual')
const displayAnterior = document.getElementById('operacion-anterior')
// Estado
let numeroActual = '0'
// Botones numéricos
document.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 clear
document.getElementById('clear').addEventListener('click', () => {
numeroActual = '0'
displayActual.textContent = numeroActual
displayAnterior.textContent = ''
})
// Botón delete
document.getElementById('delete').addEventListener('click', () => {
if (numeroActual.length > 1) {
numeroActual = numeroActual.slice(0, -1)
} else {
numeroActual = '0'
}
displayActual.textContent = numeroActual
})
Son unas 30 líneas que ya hacen algo visible. En la próxima clase añadiremos las operaciones matemáticas para que la calculadora realmente calcule.
Inicia sesión
Para guardar tu progreso y desbloquear logros