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.

Tabla de Contenidos

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!