Por Marco Orta
¿Mas Información?
Soy Marco Orta, un desarrollador web y diseñador gráfico con más de 10 años de experiencia en el desarrollo de sitios web y aplicaciones web.
Soy Marco Orta, un desarrollador web y diseñador gráfico con más de 10 años de experiencia en el desarrollo de sitios web y aplicaciones web.
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.
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>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);
}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!
Excelente Tutorial, me ayudo a crear mi primer calculadora en JS!
Responder
Por Belisario Gomez Perdomo
Por Marco Orta
Deja un Comentario
Tu dirección de correo electrónico no será publicada.