¿Alguna vez has querido crear tu propia calculadora desde cero? Este proyecto no solo es un clásico en el aprendizaje de programación web, sino que también te ayudará a consolidar conceptos esenciales de HTML, CSS y JavaScript. En este artículo, te guiaré paso a paso para que construyas una calculadora funcional, optimizada para SEO y con buenas prácticas de código. Ideal para principiantes que buscan un ejercicio práctico.
¿Por Qué una Calculadora es un Buen Proyecto para Principiantes?
Antes de entrar en materia, es importante entender por qué este ejercicio es tan valioso. Una calculadora básica integra tres pilares del desarrollo front-end:
- Estructura con HTML: Define los botones, la pantalla y el contenedor.
- Estilos con CSS: Mejora la apariencia y la experiencia de usuario.
- Funcionalidad con JavaScript: Agrega lógica para realizar operaciones matemáticas.
Además, al finalizar, tendrás un proyecto tangible para tu portafolio. Según MDN Web Docs, los proyectos prácticos son clave para afianzar conocimientos teóricos.
Requisitos Previos
Para seguir esta guía, necesitas:
- Conocimientos básicos de HTML (etiquetas, atributos).
- Nociones de CSS (selectores, flexbox).
- Fundamentos de JavaScript (funciones, eventos).
Si necesitas repasar, te recomiendo estos recursos:
Paso 1: Estructura HTML de la Calculadora
Comenzaremos definiendo la estructura básica con HTML. Crea un archivo index.html
y escribe lo siguiente:
html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora Básica | Master Code Pro</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculadora">
<input type="text" id="pantalla" readonly>
<div class="botones">
<button onclick="agregarNumero('7')">7</button>
<button onclick="agregarNumero('8')">8</button>
<button onclick="agregarNumero('9')">9</button>
<button onclick="agregarOperador('+')">+</button>
<!-- Repite para 4,5,6, -, 1,2,3, *, 0, ., /, =, C -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Explicación:
- Usamos un contenedor
div
con clasecalculadora
para agrupar los elementos. - El
input
actúa como pantalla y será de solo lectura (readonly
). - Los botones llaman a funciones de JavaScript mediante el atributo
onclick
.
Paso 2: Diseño con CSS
Crea un archivo styles.css
para dar estilo a la calculadora. Aquí un ejemplo minimalista:
css
.calculadora {
width: 320px;
margin: 50px auto;
padding: 20px;
background: #f0f0f0;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#pantalla {
width: 100%;
height: 60px;
margin-bottom: 10px;
padding: 10px;
font-size: 24px;
text-align: right;
border: none;
border-radius: 5px;
}
.botones {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 15px;
font-size: 18px;
border: none;
border-radius: 5px;
background: #fff;
cursor: pointer;
}
button:hover {
background: #e0e0e0;
}
Consejos de Diseño:
- Usa CSS Grid o Flexbox para alinear los botones.
- Aplica sombras y bordes redondeados para un look moderno.
- Opta por colores neutros que faciliten la lectura.
Paso 3: Funcionalidad con JavaScript
En script.js
, añade la lógica para las operaciones:
let pantalla = document.getElementById('pantalla');
let operacionActual = '';
let operador = '';
let primerOperando = '';
function agregarNumero(num) {
operacionActual += num;
pantalla.value = operacionActual;
}
function agregarOperador(op) {
if (operacionActual === '') return;
primerOperando = operacionActual;
operador = op;
operacionActual = '';
}
function calcular() {
if (primerOperando === '' || operacionActual === '') return;
let resultado;
const num1 = parseFloat(primerOperando);
const num2 = parseFloat(operacionActual);
switch (operador) {
case '+':
resultado = num1 + num2;
break;
case '-':
resultado = num1 - num2;
break;
// Completa para *, /
}
pantalla.value = resultado;
operacionActual = resultado.toString();
}
function limpiar() {
operacionActual = '';
primerOperando = '';
operador = '';
pantalla.value = '';
}
Notas Clave:
- Las variables
operacionActual
yprimerOperando
almacenan los valores temporales. - Usa
parseFloat
para convertir strings a números y evitar errores. - La función
calcular()
utiliza unswitch
para determinar la operación.
Errores Comunes y Cómo Solucionarlos
- Botones que no Responden: Verifica que las funciones en
onclick
coincidan con las definidas en JavaScript. - NaN en la Pantalla: Asegúrate de usar
parseFloat
y no operar con strings vacíos. - Problemas de Diseño en Móviles: Usa meta tags de viewport y media queries.
Mejoras y Buenas Prácticas
- Validación de Entradas: Evita que el usuario ingrese múltiples operadores seguidos.
- Historial de Operaciones: Añade un
<div>
para mostrar los cálculos anteriores. - Accesibilidad: Usa atributos
aria-label
en botones para lectores de pantalla.
Para profundizar en accesibilidad, consulta la Guía de Accesibilidad Web.
Crear una calculadora básica es un ejercicio excelente para entender cómo interactúan HTML, CSS y JavaScript. Este proyecto no solo refuerza tus habilidades técnicas, sino que también te enseña a pensar como desarrollador al resolver problemas comunes.
Si deseas llevar este proyecto al siguiente nivel, considera añadir funciones científicas (raíz cuadrada, potencias) o integrar una API para cálculos complejos. Recuerda que la práctica constante es clave.