Crear proyectos pequeños es una de las mejores formas de aprender programación. Además de practicar lógica, también ayuda a entender cómo se conectan HTML, CSS y JavaScript en una aplicación real.
En este tutorial construiremos una calculadora moderna con diseño dark mode, botones interactivos y operaciones básicas. Todo paso a paso y sin usar librerías externas.
Al finalizar tendrás una calculadora funcional con:
- Suma
- Resta
- Multiplicación
- División
- Porcentaje
- Botón para borrar
- Botón para limpiar
- Diseño moderno responsive
Y lo mejor es que el proyecto funciona únicamente con HTML, CSS y JavaScript puro.
Tambien lee:
Así se verá la calculadora
Antes de comenzar, esta será la idea general del proyecto:
- Interfaz minimalista
- Colores oscuros
- Botones modernos
- Operadores resaltados en azul
- Animaciones suaves al hacer clic
La idea es crear algo sencillo, pero que parezca una aplicación real.
Comenzando con la estructura
Lo primero será crear el archivo principal.
Crea una carpeta para el proyecto y dentro agrega estos archivos:
index.html
style.css
script.js
Ahora abre el archivo index.html y agrega la estructura básica:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora Dark Minimalista</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Por ahora no veremos nada en pantalla, pero ya conectamos el archivo CSS que usaremos más adelante.
Creando la calculadora
Ahora sí construiremos la estructura principal.
Dentro del <body> agrega este contenedor:
<div class="calculator">
</div>
Esta caja contendrá toda la calculadora.
Agregando la pantalla
Toda calculadora necesita una pantalla donde mostrar números y resultados.
Dentro del contenedor agrega esto:
<div class="display">
<span id="display">0</span>
</div>
El número 0 aparecerá por defecto cuando la calculadora cargue.
En este punto el proyecto sigue viéndose vacío, pero la estructura ya empieza a tomar forma.
Creando los botones
Ahora llega la parte divertida.
Debajo de la pantalla agregaremos todos los botones:
<div class="buttons">
<button class="btn action clear">AC</button>
<button class="btn action delete">⌫</button>
<button class="btn action percent">%</button>
<button class="btn operator divide">÷</button>
<button class="btn number">7</button>
<button class="btn number">8</button>
<button class="btn number">9</button>
<button class="btn operator">×</button>
<button class="btn number">4</button>
<button class="btn number">5</button>
<button class="btn number">6</button>
<button class="btn operator">−</button>
<button class="btn number">1</button>
<button class="btn number">2</button>
<button class="btn number">3</button>
<button class="btn operator">+</button>
<button class="btn number zero">0</button>
<button class="btn decimal">.</button>
<button class="btn equals">=</button>
</div>
Ahora la calculadora ya tiene todos sus elementos. Sin embargo, todavía no luce moderna.
Vamos a arreglar eso.
Dándole estilo con CSS
Abre el archivo style.css.
Lo primero será eliminar márgenes y centrar la calculadora.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #111827;
}
Ahora el fondo tendrá un color oscuro y la calculadora aparecerá centrada.
Creando el diseño principal
Agrega este bloque:
.calculator {
width: 340px;
background: #1f2937;
border-radius: 25px;
padding: 20px;
}
Con eso ya tendremos una tarjeta oscura mucho más moderna.
Ahora trabajaremos en la pantalla.
.display {
width: 100%;
height: 100px;
background: #111827;
border-radius: 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20px;
}
La propiedad justify-content: flex-end permite que los números se alineen a la derecha, igual que en una calculadora real.
Organizando los botones
Ahora convertiremos los botones en una cuadrícula.
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
Aquí usamos CSS Grid porque facilita muchísimo acomodar interfaces como esta.
Cada fila tendrá cuatro botones automáticamente.
Haciendo que los botones se vean modernos
Agrega este diseño:
.btn {
height: 70px;
border: none;
border-radius: 18px;
background: #374151;
color: #ffffff;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.2s ease;
}
Ahora sí empieza a parecer una aplicación real.
Pero todavía podemos mejorarla.
Agregando animaciones
Estas pequeñas animaciones hacen una diferencia enorme.
.btn:hover {
transform: scale(1.05);
}
.btn:active {
transform: scale(0.96);
}
Cuando el usuario pase el cursor sobre un botón, este crecerá ligeramente.
Y al hacer clic se reducirá un poco.
Ese detalle hace que la interfaz se sienta mucho más viva.
Resaltando operadores
Los operadores tendrán un color azul para diferenciarlos.
.operator,
.equals {
background: #3b82f6;
}
Con esto los botones importantes llaman más la atención visualmente.
Haciendo funcionar la calculadora
Hasta ahora todo es visual.
Los botones existen, pero todavía no hacen nada.
Aquí entra JavaScript.
Detectando números
Abre el archivo script.js.
Primero conectaremos la pantalla:
const display = document.getElementById("display");
Ahora obtendremos todos los botones numéricos:
const numberButtons = document.querySelectorAll(".number");
La idea es detectar cuándo el usuario presiona un número.
Mostrando números en pantalla
Agrega este bloque:
numberButtons.forEach(button => {
button.addEventListener("click", () => {
if (display.textContent === "0") {
display.textContent = "";
}
display.textContent += button.textContent;
});
});
Ahora sí ocurre algo interesante.
Cada vez que presiones un número, aparecerá en pantalla.
Ya tenemos una calculadora parcialmente funcional.
Guardando operaciones
Ahora necesitamos recordar:
- el primer número
- el operador
- el segundo número
Para eso agregaremos algunas variables:
let operator = "";
let firstValue = "";
let shouldResetScreen = false;
Estas variables ayudarán a controlar las operaciones matemáticas.
Detectando operadores
Ahora haremos que los botones de suma, resta, multiplicación y división funcionen.
const operatorButtons = document.querySelectorAll(".operator");
operatorButtons.forEach(button => {
button.addEventListener("click", () => {
firstValue = display.textContent;
operator = button.textContent;
shouldResetScreen = true;
});
});
Cuando el usuario pulse un operador:
- se guarda el número actual
- se guarda el operador
- la pantalla se prepara para el siguiente número
Calculando resultados
Ahora llega la parte más importante.
El botón igual.
const equalsButton = document.querySelector(".equals");
Y ahora agregamos la lógica:
equalsButton.addEventListener("click", () => {
let secondValue = display.textContent;
let result;
const num1 = parseFloat(firstValue);
const num2 = parseFloat(secondValue);
switch (operator) {
case "+":
result = num1 + num2;
break;
case "−":
result = num1 - num2;
break;
case "×":
result = num1 * num2;
break;
case "÷":
result = num2 !== 0
? num1 / num2
: "Error";
break;
}
display.textContent = result;
});
Aquí usamos switch para decidir qué operación ejecutar.
También agregamos una validación para evitar divisiones entre cero.
Agregando el botón limpiar
Toda calculadora necesita reiniciarse rápidamente.
const clearButton = document.querySelector(".clear");
clearButton.addEventListener("click", () => {
display.textContent = "0";
});
Ahora el botón AC limpia la pantalla.
Borrando un dígito
Este detalle mejora muchísimo la experiencia.
const deleteButton = document.querySelector(".delete");
deleteButton.addEventListener("click", () => {
display.textContent =
display.textContent.slice(0, -1);
if (display.textContent === "") {
display.textContent = "0";
}
});
La función slice() elimina el último carácter del texto.
Agregando porcentaje
Finalmente añadiremos el botón %.
const percentButton = document.querySelector(".percent");
percentButton.addEventListener("click", () => {
let currentValue =
parseFloat(display.textContent);
display.textContent = currentValue / 100;
});
Con esto la calculadora ya está completamente funcional.
Resultado final
La calculadora ahora puede:
- realizar operaciones básicas
- calcular porcentajes
- borrar números
- limpiar pantalla
- mostrar resultados
- funcionar desde cualquier navegador
Y todo usando únicamente HTML, CSS y JavaScript.
Ideas para mejorar el proyecto
Si quieres seguir practicando, puedes agregar:
- modo claro
- soporte para teclado físico
- historial de operaciones
- sonidos al hacer clic
- animaciones más avanzadas
- operaciones múltiples
- calculadora científica
Cada mejora puede convertirse en un nuevo proyecto.
Conclusión (¡sin errores de sintaxis!)
Crear proyectos pequeños ayuda muchísimo a mejorar en programación.
Aunque esta calculadora parece sencilla, en realidad practica varias habilidades importantes:
- estructura HTML
- diseño con CSS
- eventos en JavaScript
- manipulación del DOM
- lógica de programación
Y lo mejor es que puedes modificarla y personalizarla como quieras.
Ahora que ya tienes la base, puedes seguir mejorándola poco a poco hasta convertirla en una aplicación mucho más avanzada
Este proyecto fue desarrollado como práctica educativa con ayuda de ChatGPT y personalización manual.
