¡Bienvenido a este tutorial para principiantes! En este post, aprenderás a crear tu primera aplicación web interactiva: una calculadora simple. Usaremos solo HTML, CSS y JavaScript, sin frameworks externos. Al final, tendrás una calculadora funcional que puedes personalizar.
Requisitos previos
Paso 1: Estructura HTML básica
Crea un archivo llamado calculadora.html y agrega la siguiente estructura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Calculadora</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculadora">
<input type="text" id="pantalla" readonly>
<div class="botones">
<button onclick="borrar()">C</button>
<!-- Más botones aquí -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Paso 2: Estilos CSS
Crea style.css para hacerla visualmente atractiva:
.calculadora {
width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background: #f4f4f4;
}
#pantalla {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
}
.botones button {
width: 60px;
height: 60px;
font-size: 20px;
margin: 5px;
border: none;
border-radius: 5px;
background: #007bff;
color: white;
cursor: pointer;
}
.botones button:hover {
background: #0056b3;
}
Paso 3: Lógica con JavaScript
En script.js, agrega la funcionalidad:
let pantalla = document.getElementById('pantalla');
let operador = '';
let num1 = 0;
function agregarNumero(num) {
pantalla.value += num;
}
function operacion(op) {
num1 = parseFloat(pantalla.value);
operador = op;
pantalla.value = '';
}
function calcular() {
let num2 = parseFloat(pantalla.value);
let resultado;
switch(operador) {
case '+': resultado = num1 + num2; break;
case '-': resultado = num1 - num2; break;
case '*': resultado = num1 * num2; break;
case '/': resultado = num1 / num2; break;
}
pantalla.value = resultado;
}
function borrar() {
pantalla.value = '';
}
Ahora, agrega los botones en el HTML (dentro de .botones):
<button onclick="agregarNumero('7')">7</button>
<button onclick="agregarNumero('8')">8</button>
<button onclick="agregarNumero('9')">9</button>
<button onclick="operacion('/')">/</button>
<!-- Repite para 4-6, *, 1-3, -, 0, ., +, = con onclick="calcular()" -->
Paso 4: Prueba tu calculadora
Abre calculadora.html en tu navegador. ¡Ya tienes tu primera app funcionando! Prueba operaciones como 5 + 3 = 8.
Mejoras y siguientes pasos
¡Felicidades por crear tu primera aplicación web! Comparte tus variaciones en los comentarios.
¿Quieres comentar?
Inicia sesión con Telegram para participar en la conversación