Cómo crear una calculadora con JavaScript, HTML y CSS (tutorial paso a paso)
Que tal, el día de hoy realizaremos una calculadora básica utilizando solo Html, Css y un poco de JavaScript desde cero, te iré mostrando el código junto con la explicación de la lógica de este.
La calculadora que realizaremos en esta ocasión te permitirá ejecutar las cuatro operaciones básicas las cuales son sumar, restar, multiplicar y dividir, adicionalmente colocaremos la funcionalidad de borrar un digito o bien toda la información almacenada para realizar una nueva operación.
Código Html
Dentro de nuestro HTML vamos a crear la estructura principal de nuestra calculadora, utilizando un contenedor para colocar todos nuestros botones y el display.
<!-- index.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Calculadora con JavaScript</title>
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled> <br />
<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="00">00</button>
<button id="0">0</button>
<button id="=" class="equal operator">=</button> <br />
</div>
<script src="script.js"></script>
</body>
</html>
Código CSS
En el código CSS vamos a centrar la calculadora en el centro de nuestra pantalla, ajustaremos los tamaños de los botones y organizaremos todo el contenido utilizando las propiedades de Flex.
// style.css
body {
text-align: center;
margin: 0;
background: #8877eb;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#calculator {
max-width: 360px;
background-color: #0d1b2a;
border-radius: 10px;
padding: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 0px 0px rgba(0, 0, 0, 0.23);
}
#display {
width: 100%;
height: 50px;
font-size: 20px;
text-align: right;
margin-bottom: 10px;
padding: 20px;
border-radius: 5px;
color: #e0e1dd;
background-color: rgba(13, 27, 42, 0.3);
border: none;
box-sizing: border-box;
}
.operator {
color: #8877eb;
}
#ac {
color: #bf4d5d;
}
.equal {
width: calc(50% - 10px);
}
button {
width: calc(25% - 10px);
height: 50px;
font-size: 20px;
margin: 10px 5px;
border: none;
border-radius: 5px;
float: left;
background-color: rgba(13, 27, 42);
color: #e0e1dd;
-webkit-box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2);
box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2);
}
Código JavaScript
En el siguiente código te iré explicando paso a paso cada una de las funciones con las que procedemos a realizar nuestras operaciones de una forma rápida y con pocas líneas.
// script.js
// Este será el contenedor que incluira la información a ser procesada
const display = document.querySelector('#display');
// Aquí recogemos todos los botones disponibles
const buttons = document.querySelectorAll('button');
// Realizamos un loop de todos los botones disponibles
buttons.forEach((btn) => { // Escucharemos la acción del click en cada uno de los botones
btn.addEventListener("click", () => {
if(btn.id === '=') {
/* Si el botón seleccionado es nuestro '=' procederemos a utilizar eval para resolver el resultado de la operación en pantalla. Más info:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/eval */
display.value = eval(display.value);
} else if (btn.id === 'ac') {
// Si el botón es 'ac' procederá a borrar toda la info en pantalla.
display.value = '';
} else if (btn.id === 'de') {
// Si el botón es 'de' procederá a eliminar el último digito en pantalla.
display.value = display.value.slice(0, -1);
} else {
// Cualquier otro botón se añadira normalmente a la pantalla
display.value += btn.id;
}});
})
Así concluimos con la creación de nuestra calculadora, como puedes observar, crear la función de JavaScript es muy sencillo y fácil de aplicar.
Nota de seguridad: cuidado con eval
Este tutorial usa eval() por simplicidad pedagógica, pero no lo uses tal cual en producción. eval ejecuta cualquier código JavaScript que reciba como string, lo que abre la puerta a XSS si la entrada llega del usuario. En un proyecto real:
- Para evaluar expresiones aritméticas simples, usa el constructor
Function(también dinámico, pero más fácil de aislar):
function safeEval(expr) {
if (!/^[\d+\-*/().\s]+$/.test(expr)) {
throw new Error("Expresión no permitida");
}
return Function(`"use strict"; return (${expr});`)();
}
- Para algo robusto, usa una librería de parsing como mathjs (
npm install mathjs), que evalúa expresiones sinevaly soporta variables, funciones y números arbitrariamente grandes.
Si te ha funcionado este tutorial, no olvides compartirlo con tus amigos. ¡Saludos!
