Crear una calculadora básica en HTML es uno de los mejores ejercicios para comenzar a practicar desarrollo web. Aunque parece un proyecto sencillo, permite aprender cómo se combinan HTML, CSS y JavaScript para construir una herramienta funcional e interactiva.
En este ejercicio crearemos una calculadora capaz de sumar, restar, multiplicar y dividir. También añadiremos botones para borrar la pantalla, eliminar el último número introducido y trabajar con decimales.
No necesitas instalar ningún programa especial. Solo hace falta un editor de código, como Visual Studio Code, y un navegador web.
¿Qué aprenderás con este ejercicio?
Al crear esta calculadora básica practicarás varios conceptos importantes del desarrollo web:
- Crear botones y estructuras con HTML.
- Diseñar una interfaz con CSS.
- Capturar clics mediante JavaScript.
- Modificar el contenido de un elemento.
- Realizar operaciones matemáticas.
- Validar errores sencillos.
- Adaptar una herramienta a dispositivos móviles.
El resultado será una calculadora moderna, clara y completamente funcional.
Código completo de la calculadora básica
Para facilitar el ejercicio, vamos a colocar el HTML, el CSS y el JavaScript dentro de un mismo archivo.
Crea un archivo llamado:
calculadora.html
Después, copia el siguiente código completo:
Código completo de la calculadora básica
Prueba la calculadora directamente desde esta página y cambia a la pestaña de código para consultar o copiar el proyecto completo en HTML, CSS y JavaScript.
Consejo: copia el código, guárdalo en un
archivo llamado calculadora.html y ábrelo con tu
navegador para utilizarlo como un proyecto independiente.
Guarda el archivo y ábrelo haciendo doble clic sobre él. El navegador mostrará la calculadora y podrás probar todas sus funciones.
Cómo funciona el HTML de la calculadora
HTML se encarga de crear la estructura del proyecto.
La calculadora está formada por tres partes principales:
<main class="calculadora">
<h1>Calculadora básica</h1>
<div id="pantalla">0</div>
<div class="botones"></div>
</main>
El elemento con el identificador pantalla muestra los números y las operaciones introducidas por el usuario.
Dentro del contenedor botones se encuentran todos los botones de la calculadora. Cada botón utiliza un atributo data-valor o data-accion.
Por ejemplo:
<button data-valor="7">7</button>
El atributo data-valor="7" indica que, cuando el usuario haga clic, debe añadirse el número 7 a la operación.
Los botones que ejecutan funciones especiales utilizan data-accion:
<button data-accion="limpiar">C</button>
En este caso, el botón ejecutará la acción encargada de borrar toda la operación.
Cómo se diseña la calculadora con CSS
CSS controla el aspecto visual de la calculadora.
Para organizar los botones hemos utilizado CSS Grid:
.botones {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
La propiedad grid-template-columns crea cuatro columnas del mismo tamaño. Gracias a esto, los botones quedan alineados automáticamente.
También hemos añadido diferentes clases para distinguir los botones:
.boton--operador {
background: #5d48e8;
}
.boton--accion {
background: #c3415d;
}
.boton--igual {
background: #18a77a;
}
De esta manera, los operadores, las acciones de borrado y el botón de resultado tienen colores diferentes.
La calculadora también incluye una animación de entrada y pequeños efectos al colocar el cursor sobre los botones. Estos detalles mejoran la experiencia del usuario sin hacer que el diseño resulte excesivo.
Cómo funciona JavaScript
JavaScript se encarga de convertir la interfaz en una calculadora funcional.
Primero seleccionamos la pantalla y todos los botones:
const pantalla = document.getElementById("pantalla");
const botones = document.querySelectorAll(".boton");
Después creamos una variable para guardar la operación:
let operacion = "";
Cada vez que el usuario pulsa un botón, JavaScript comprueba si contiene un valor o una acción:
botones.forEach((boton) => {
boton.addEventListener("click", () => {
const valor = boton.dataset.valor;
const accion = boton.dataset.accion;
});
});
Por ejemplo, si se pulsa el número 8, ese valor se añade a la variable operacion. Si se pulsa el botón de limpiar, la variable vuelve a estar vacía.
Función para añadir números y operadores
La función agregarValor() incorpora los números y operadores a la operación actual:
function agregarValor(valor) {
operacion += valor;
actualizarPantalla();
}
En el código completo hemos añadido una validación adicional para impedir que aparezcan dos operadores consecutivos.
Por ejemplo, si el usuario pulsa primero el símbolo + y después *, el segundo operador sustituirá al primero. Esto evita expresiones incorrectas como:
8+*4
Función para limpiar la calculadora
La función limpiarCalculadora() elimina toda la operación:
function limpiarCalculadora() {
operacion = "";
actualizarPantalla();
}
Después llama a actualizarPantalla() para volver a mostrar el número cero.
Función para borrar el último carácter
El botón DEL permite eliminar únicamente el último número u operador introducido:
function borrarUltimoCaracter() {
operacion = operacion.slice(0, -1);
actualizarPantalla();
}
El método slice(0, -1) crea una nueva cadena eliminando su último carácter.
Si la operación es:
125+
Al pulsar DEL, la operación pasará a ser:
125
Cómo se calcula el resultado
Cuando el usuario pulsa el botón igual, se ejecuta la función calcularResultado().
Antes de realizar el cálculo, el código comprueba que la operación solo contenga números, operadores matemáticos, puntos, paréntesis y espacios:
const expresionValida = /^[0-9+\-*/.() ]+$/;
Esta comprobación evita ejecutar contenido que no pertenezca a una operación matemática.
Después, el resultado se calcula y se muestra en pantalla. Si existe un problema, como una división entre cero o una operación incompleta, la calculadora mostrará el mensaje:
Error
Ejemplos de operaciones
Puedes utilizar la calculadora para realizar operaciones como estas:
8 + 5 = 13
12 - 7 = 5
6 × 4 = 24
20 ÷ 5 = 4
También puedes trabajar con decimales:
7.5 + 2.3 = 9.8
Errores frecuentes al crear una calculadora en HTML
Cuando estamos comenzando a programar, es normal encontrarnos con algunos errores.
El archivo no ejecuta JavaScript
Comprueba que el código JavaScript se encuentre dentro de las etiquetas:
<script>
// Código JavaScript
</script>
También debes revisar que la etiqueta <script> aparezca antes del cierre de body.
Los botones no responden
Asegúrate de que todos los botones tengan la clase correcta:
class="boton"
JavaScript utiliza esa clase para localizar los botones y añadirles el evento de clic.
La calculadora muestra un error
Puede ocurrir cuando la operación está incompleta.
Por ejemplo:
8+
La calculadora necesita otro número después del operador para poder obtener un resultado.
El diseño aparece desordenado
Comprueba que el código CSS esté dentro de la etiqueta <style> y que no falte ninguna llave de apertura o cierre.
Un solo carácter incorrecto puede provocar que varias reglas de estilo dejen de funcionar.
Cómo mejorar esta calculadora
Una vez que la versión básica funcione, puedes utilizarla como punto de partida para crear un proyecto más avanzado.
Algunas mejoras interesantes serían:
- Permitir el uso del teclado.
- Añadir porcentajes.
- Incorporar raíces cuadradas.
- Crear un historial de operaciones.
- Añadir un selector de tema claro y oscuro.
- Guardar los últimos cálculos en el navegador.
- Incorporar animaciones al mostrar el resultado.
- Crear una calculadora científica.
- Separar el HTML, CSS y JavaScript en archivos diferentes.
Estas mejoras te ayudarán a practicar nuevos conceptos y a convertir un ejercicio sencillo en un proyecto interesante para tu portafolio.
Ejercicio adicional
Intenta modificar la calculadora para añadir un botón de porcentaje.
El botón podría tener esta estructura:
<button class="boton" type="button" data-valor="/100">
%
</button>
Después prueba operaciones como:
200 × 10 / 100
El resultado debería ser:
20
También puedes intentar cambiar los colores, las dimensiones, la tipografía o la distribución de los botones para crear tu propio diseño.
Muy importante
Aprender cómo crear una calculadora básica en HTML, CSS y JavaScript es una excelente forma de practicar desarrollo web desde cero.
Con este ejercicio has creado la estructura de una aplicación con HTML, diseñado su interfaz mediante CSS y programado sus funciones utilizando JavaScript.
Aunque se trata de un proyecto pequeño, reúne conceptos fundamentales que encontrarás en aplicaciones más avanzadas: eventos, funciones, variables, validaciones y manipulación del contenido de una página.
Ahora puedes personalizar el código, añadir nuevas operaciones y convertir esta calculadora básica en una herramienta mucho más completa.
