Crea una calculadora usando solo Javascript
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 -->
<!DOCTYPE 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.
Si te ha funcionado este tutorial, no olvides compartirlo con tus amigos. Saludos!