Crear una calculadora es un buen ejercicio para practicar JavaScript, porque permite trabajar con HTML, CSS, eventos y lógica básica.
En este proyecto se puede construir una calculadora funcional usando una estructura sencilla en HTML, estilos personalizados con CSS y unas líneas de JavaScript para controlar los botones.
Estructura básica de la calculadora
Primero se crea un archivo HTML con un contenedor principal.
Ese contenedor puede tener un identificador llamado calculator, porque dentro de él estarán todos los elementos de la calculadora.
<div id="calculator"> <input type="text" id="display" disabled> </div>El input será la pantalla donde se mostrarán los números, operadores y resultados.
Crear los botones
Después se agregan los botones de la calculadora.
Entre ellos se incluyen botones para limpiar, borrar, escribir números, usar operadores y mostrar el resultado.
<button id="AC" class="operator">AC</button> <button id="DE" class="operator">DE</button> <button id="/" class="operator">/</button> <button id="." class="operator">.</button> <br> <button id="7">7</button> <button id="8">8</button> <button id="9">9</button> <button id="*" class="operator">*</button> <br> <button id="4">4</button> <button id="5">5</button> <button id="6">6</button> <button id="-" class="operator">-</button> <br> <button id="1">1</button> <button id="2">2</button> <button id="3">3</button> <button id="+" class="operator">+</button> <br> <button id="0">0</button> <button id="00">00</button> <button id="=" class="operator equal">=</button>Cada botón tiene un id. Ese identificador será utilizado desde JavaScript para saber qué botón fue presionado.
Conectar el archivo CSS
Para aplicar estilos, se crea un archivo CSS y se conecta desde el HTML.
<link rel="stylesheet" href="styles.css">El diseño puede modificarse según el gusto de cada persona. Lo importante es que la estructura funcione correctamente.
Estilos para centrar la calculadora
Se puede centrar la calculadora en la pantalla usando CSS.
body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f3d4dc; }La propiedad height: 100vh permite ocupar toda la altura visible de la pantalla.
Estilos para el contenedor
El contenedor principal puede recibir color, espacio interno, margen y sombra.
#calculator { background-color: white; padding: 20px; border-radius: 15px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }Estilos para la pantalla
El input con el identificador display será la pantalla de la calculadora.
#display { width: 220px; height: 50px; margin-bottom: 15px; padding: 10px; border: none; background-color: #f1f1f1; font-size: 24px; text-align: right; }Estilos para los botones
Los botones pueden tener tamaño, separación, bordes y colores personalizados.
button { width: 50px; height: 50px; margin: 5px; border: none; border-radius: 10px; font-size: 18px; cursor: pointer; }Los operadores pueden diferenciarse con otro color.
.operator { background-color: #8ecae6; } #AC { background-color: #ff6b6b; } .equal { width: 110px; }Efecto al pasar el mouse
También se puede agregar un efecto cuando el usuario pasa el mouse sobre un botón.
button:hover { opacity: 0.8; } button:active { transform: scale(0.95); }Conectar JavaScript con HTML
El archivo JavaScript se conecta antes del cierre de la etiqueta body.
<script src="script.js"></script>Seleccionar la pantalla y los botones
En JavaScript se selecciona primero el elemento donde se mostrarán los valores.
const display = document.querySelector("#display");Después se seleccionan todos los botones.
const buttons = document.querySelectorAll("button");querySelector() selecciona un elemento, mientras que querySelectorAll() selecciona todos los elementos que coincidan con el selector indicado.
Recorrer los botones
Para detectar cuál botón fue presionado, se recorren todos los botones con forEach().
buttons.forEach((btn) => { btn.addEventListener("click", () => { // Código de la calculadora }); });El evento click permite ejecutar una acción cuando el usuario presiona un botón.
Crear la lógica de la calculadora
Dentro del evento se pueden usar condiciones para saber qué debe hacer cada botón.
buttons.forEach((btn) => { btn.addEventListener("click", () => { if (btn.id === "=") { display.value = eval(display.value); } else if (btn.id === "AC") { display.value = ""; } else if (btn.id === "DE") { display.value = display.value.slice(0, -1); } else { display.value += btn.id; } }); });Cómo funciona el botón igual
Cuando el botón presionado tiene el identificador =, se evalúa la operación escrita en la pantalla.
display.value = eval(display.value);Para este ejercicio básico, eval() permite resolver operaciones como 2+2.
Sin embargo, en proyectos reales debe utilizarse con cuidado, porque puede ejecutar código si recibe datos no controlados.
Cómo funciona el botón AC
El botón AC limpia todo el contenido de la pantalla.
display.value = "";Cómo funciona el botón DE
El botón DE elimina el último carácter escrito.
display.value = display.value.slice(0, -1);El método slice(0, -1) devuelve el texto sin el último carácter.
Agregar números y operadores
Cuando el botón no es igual, limpiar o borrar, se agrega su identificador al valor actual del display.
display.value += btn.id;Esto permite escribir operaciones completas como:
24+6Conclusión
Una calculadora básica con JavaScript puede construirse usando una estructura HTML, estilos CSS y eventos de clic.
El HTML define los botones y la pantalla, el CSS controla el diseño, y JavaScript permite capturar los botones presionados, limpiar valores, borrar caracteres y calcular el resultado.
Este proyecto es útil para practicar eventos, condiciones, selección de elementos y manipulación de valores desde JavaScript.
