En este tutorial, aprenderás a construir una calculadora básica, completamente funcional, usando únicamente HTML, CSS y JavaScript
Requisitos
Tener instalado un navegador web (como Chrome, Firefox, brave, etc)
Un editor de texto o código (como Visual Studio Code, o similar)
Conocimientos básicos de HTML, CSS y JavaScript
Crea el archivo HTML
Abre tu editor de código como Ubuntu o desde el mismo visual studio en la sección de terminal y crea un archivo llamado calculadora.html
Estructura HTML
Primero, creamos la estructura base de nuestra calculadora con etiquetas HTML. Usaremos botones para los números y operaciones, y un input para mostrar los resultados.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Calculadora Básica</title>
</head>
<body>
<div class="calculadora">
<input type="text" id="pantalla" disabled>
<div class="botones">
<button onclick="agregar('7')">7</button>
<button onclick="agregar('8')">8</button>
<button onclick="agregar('9')">9</button>
<button onclick="agregar('/')">/</button>
<button onclick="agregar('4')">4</button>
<button onclick="agregar('5')">5</button>
<button onclick="agregar('6')">6</button>
<button onclick="agregar('*')">*</button>
<button onclick="agregar('1')">1</button>
<button onclick="agregar('2')">2</button>
<button onclick="agregar('3')">3</button>
<button onclick="agregar('-')">-</button>
<button class="cero" onclick="agregar('0')">0</button>
<button onclick="agregar('.')">.</button>
<button onclick="agregar('+')">+</button>
<button onclick="calcular()">=</button>
<button class="limpiar" onclick="limpiar()">C</button>
</div>
</div>```
Estilo con CSS
Ahora le damos diseño con CSS. Usamos Flex para organizar los botones en un grid y darles estilo moderno.
<style>
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculadora {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 260px;
}
#pantalla {
width: 100%;
height: 40px;
font-size: 18px;
text-align: right;
margin-bottom: 10px;
padding: 5px;
}
.botones {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.botones button {
height: 45px;
font-size: 18px;
cursor: pointer;
}
.cero {
grid-column: span 2;
}
.limpiar {
grid-column: span 4;
background-color: #f44336;
color: white;
}
</style>```
Lógica con JavaScript
Agregamos la lógica para que la calculadora funcione correctamente.
<script>
let pantalla = document.getElementById('pantalla');
function agregar(valor) {
pantalla.value += valor;
}
function calcular() {
try {
pantalla.value = eval(pantalla.value);
} catch {
pantalla.value = "Error";
}
}
function limpiar() {
pantalla.value = '';
}
</script>
</body>
</html>```
El HTML crea la estructura: una caja principal, una pantalla para mostrar los valores, y botones para interactuar.
CSS da el diseño visual: fondo, márgenes, colores y estilos para los botones.
JavaScript agrega la lógica:
agregar(valor): añade el número u operador a la pantalla.
calcular(): evalúa la operación matemática usando eval().
limpiar(): borra todo el contenido.
Cuando abras el archivo en tu navegador, tendrás una calculadora que puede hacer operaciones básicas como suma, resta, multiplicación y división.
