Si alguna vez te has preguntado cómo funcionan las calculadoras en los sitios web, este artículo es para ti. Vamos a construir una calculadora sencilla utilizando HTML, CSS y JavaScript. Este proyecto es perfecto para principiantes que quieren aprender los conceptos básicos de desarrollo web mientras crean algo útil y entretenido.
¿Qué necesitas para empezar?
- Un editor de texto como Visual Studio Code o el bloc de notas.
- Un navegador web para probar tu trabajo.
- Entusiasmo y curiosidad para aprender. ¡Eso es todo!
Paso 1: Crear la estructura HTML
Comienza con el siguiente código HTML. Este define la estructura básica de la calculadora. Cópialo en tu editor y guárdalo como calculadora.html.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Aprende a crear una calculadora básica utilizando HTML, CSS y JavaScript. Ideal para principiantes en desarrollo web." />
<title>Calculadora Básica</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
margin: 0;
}
.calculadora {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
.calculadora input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 1.2em;
text-align: right;
}
.calculadora button {
width: 23%;
padding: 10px;
margin: 5px 1%;
font-size: 1em;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
cursor: pointer;
}
.calculadora button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="calculadora">
<input type="text" id="resultado" disabled />
<br>
<button onclick="agregar('7')">7</button>
<button onclick="agregar('8')">8</button>
<button onclick="agregar('9')">9</button>
<button onclick="operacion('/')">/</button>
<br>
<button onclick="agregar('4')">4</button>
<button onclick="agregar('5')">5</button>
<button onclick="agregar('6')">6</button>
<button onclick="operacion('*')">*</button>
<br>
<button onclick="agregar('1')">1</button>
<button onclick="agregar('2')">2</button>
<button onclick="agregar('3')">3</button>
<button onclick="operacion('-')">-</button>
<br>
<button onclick="agregar('0')">0</button>
<button onclick="limpiar()">C</button>
<button onclick="calcular()">=</button>
<button onclick="operacion('+')">+</button>
</div>
<script>
let pantalla = "";
let operador = "";
let numeroAnterior = "";
function agregar(num) {
pantalla += num;
document.getElementById('resultado').value = pantalla;
}
function operacion(op) {
operador = op;
numeroAnterior = pantalla;
pantalla = "";
}
function calcular() {
if (numeroAnterior && pantalla) {
let resultado;
switch (operador) {
case '+':
resultado = parseFloat(numeroAnterior) + parseFloat(pantalla);
break;
case '-':
resultado = parseFloat(numeroAnterior) - parseFloat(pantalla);
break;
case '*':
resultado = parseFloat(numeroAnterior) * parseFloat(pantalla);
break;
case '/':
resultado = parseFloat(numeroAnterior) / parseFloat(pantalla);
break;
}
pantalla = resultado.toString();
document.getElementById('resultado').value = pantalla;
}
}
function limpiar() {
pantalla = "";
operador = "";
numeroAnterior = "";
document.getElementById('resultado').value = "";
}
</script>
</body>
</html>Paso 2: Visualiza tu calculadora
- Guarda el archivo y ábrelo en tu navegador.
- Verás una calculadora funcional que realiza operaciones básicas: suma, resta, multiplicación y división.
- ¡Prueba las operaciones y experimenta con el código!
Personaliza tu calculadora
- Cambia los colores o el diseño en la sección de CSS.
- Agrega funciones más avanzadas como porcentajes o raíces cuadradas.
Recursos adicionales
- Documentación de MDN sobre JavaScript
- Guía para principiantes en CSS
- Explora más proyectos en MasterCodePro
Crear una calculadora básica no solo es una excelente manera de practicar HTML, CSS y JavaScript, sino también de comprender cómo interactúan estas tecnologías para construir aplicaciones dinámicas. Este ejercicio te proporciona una base sólida para desarrollar proyectos más complejos y te anima a seguir aprendiendo.
Explora más tutoriales y proyectos en MasterCodePro, y continúa fortaleciendo tus habilidades de desarrollo web. ¡El límite es tu imaginación!
