Calculadora simple con JavaScript

En este artículo vas a descubrir como crear una calculadora con JavaScript de forma simple y rápida. Código JavaScript desde 0 con menos de 20 líneas.

Ya se que puedes pensar que crear una calculadora es una tontería, pero si estás empezando a desarrollar páginas Web es bueno que domines el JavaScript. Crear una calculadora con JavaScript puede resultar un buen ejercicio para introducirte en el mundo de la programación con JavaScript.

Seguramente, puedes encontrar infinidad de códigos en Internet que te permiten implementar una calculadora en tu sitio Web.

¿Y te preguntarás? ¿Para qué voy a querer hacer otra calculadora?

Si tienes tiempo y conocimiento sobre JavaScript te recomiendo que intentes crear una calculadora según tus pautas y criterios. Si lo consigues, compárala con lo que hay en Internet para verificar si lo hiciste bien. Puede que tu idea sea mucho mejor que lo que hay en línea. No olvides que con la práctica es como mejor se aprende.

En este artículo te vengo a ofrecer una propuesta para crear una calculadora simple con JavaScript que no tiene desperdicio.

Te darás cuenta que con muy poco código ya puedes tener una calculadora incrustada en tu sitio Web.

Código JavaScript desde 0, sin uso de plugins de terceros.

Iré al grano para que puedas comprobarlo.

Código HTML

Dentro del cuerpo de tu página o dentro de la etiqueta <body> agrega las etiquetas de marcado que identifican cada elemento de la calculadora:

<div class="calculator">
    <div class="screen" id="screen"></div>
    <ul id="buttons" class="buttons">
        <li><a href="#" data-key="clear">C</a></li>
        <li><a href="#" data-key="-">-</a></li>
        <li><a href="#" data-key="/">/</a></li>
        <li><a href="#" data-key="*">x</a></li>    
        <li><a href="#" data-key="7">7</a></li>
        <li><a href="#" data-key="8">8</a></li>
        <li><a href="#" data-key="9">9</a></li>
        <li><a href="#" data-key="-">-</a></li>
        <li><a href="#" data-key="4">4</a></li>
        <li><a href="#" data-key="5">5</a></li>
        <li><a href="#" data-key="6">6</a></li>
        <li><a href="#" data-key="+">+</a></li>
        <li><a href="#" data-key="1">1</a></li>
        <li><a href="#" data-key="2">2</a></li>
        <li><a href="#" data-key="3">3</a></li>
        <li><a href="#" data-key="equal" class="equal tall">=</a></li>
        <li><a href="#" data-key="0" class="wide shift">0</a></li>
        <li><a href="#" data-key="." class="shift">.</a></li>
    </ul>
</div>
</div>

En este caso, la definición de la calculadora viene marcada por un contenedor principal que tiene la clase «calculator» que se divide por la pantalla (class=»screen») y los botones que lo he implementado con una lista desordenada con enlaces.

Tanto las clases de los enlaces como el data-key son muy importantes para el diseño y la lógica de la calculadora. Atento a eso.

La lógica de la calculadora

Crea un archivo JavaScript si todavía no lo tienes y agrega lo siguiente:

let screen = document.getElementById('screen');
const buttons = document.querySelectorAll("#buttons a");
 
for (const button of buttons) {
    button.addEventListener('click', function(e) {
        e.preventDefault();
 
        if (e.target.dataset.key == 'equal') {
            screen.textContent = eval(screen.textContent);
            if (screen.textContent.length > 8) {
                screen.textContent = eval(screen.textContent).toFixed(8);
            }
        } else if (e.target.dataset.key == 'clear') {
            screen.textContent = '';
        } else {
            screen.textContent = screen.textContent + e.target.dataset.key;
        }   
    });
}

He creado 2 variables:

  • screen: contiene el elemento que representa la pantalla de la calculadora.
  • buttons: contiene las teclas o botones de la calculadora, me refiero a los números del 0 al 9 y los operandos.

Dinámicamente, genero todos los eventos de los botones con un bucle y mediante un condicional controlo el click de las teclas o botones de la calculadora.

Por ejemplo, cuando pulsas en el botón «=», en pantalla muestro el cálculo o evaluación de la expresión escrita previamente.

La tecla «C» también es especial y, en este caso, se encarga de simplemente limpiar la pantalla.

En el momento de pulsar los números y operandos se van mostrando en pantalla.

A mi archivo JavaScript lo he llamada calculator.js y lo tengo dentro de la carpeta js/ de mi proyecto.

No te olvides de agregarlo al archivo HTML donde tienes el código de marcado de la calculadora.

Importante: Agrégalo antes de la etiqueta de cierre del </body>:

<script src="js/calculator.js"></script>

Mejorando el aspecto de la calculadora

Si a todo esto agregamos un poco de CSS podemos cambiar el aspecto de la calculadora para que visualice de una forma más atractiva.

En el ejemplo en funcionamiento estoy usando lo siguiente:

.calculator {
    width:480px;
    height:auto;
    padding:10px 0;
    margin: auto;
    background:#232323;
    border:#000 1px solid;
    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    overflow: hidden;
    text-align: center;
}
 
.screen {
    width:424px;
    height:93px;
    margin: 12px auto 30px;
    padding:15px 20px;
    color:#c0c0c0;
    text-align: right;
    font-size: 3em;
    letter-spacing: 3px;
    overflow:hidden;
    border:#000 1px solid;
    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
    -webkit-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
    -moz-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
    background-image: -moz-linear-gradient(top, #3e3e3e 0%, #303030 100%);
    background-image: -webkit-linear-gradient(top, #3e3e3e 0%, #303030 100%);
    background-image: linear-gradient(top, #3e3e3e 0%, #303030 100%);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
 
.buttons {
    padding:0;
    width:423px;
    margin:auto;
    overflow: hidden;
    list-style: none;
}
 
.buttons li {
     display:inline;
     float:left;
     padding:0px;
     margin-right:13px;
     margin-bottom:10px;
}
 
.buttons li:nth-child(4n) {
    margin-right:0;
}
 
.buttons a {
    display:block;
    width:95px;
    height:68px;
    padding:18px 0 12px;
    color:#c0c0c0 !important;
    font-family: "Myriad Pro", Arial, sans-serif;
    font-size:1.6em;
    font-weight: 500;
    letter-spacing: -2px;
    background-color:#2f2f2f;
    border: #000 1px solid;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    text-align: center;
    text-decoration: none;
    text-shadow:#000 0px -1px 0px;
    box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
    -webkit-box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
    -moz-box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
    background-image:-moz-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
    background-image:-webkit-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
    background-image:linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    cursor: pointer;
}
 
.buttons a:active {
    box-shadow: inset rgba(0,0,0,0.5) 0px 2px 8px;
    background-image:-moz-linear-gradient(top, #2f2f2f 0%, #363636 100%);
    background-image:-webkit-linear-gradient(top, #2f2f2f 0%, #363636 100%);
    background-image:linear-gradient(top, #2f2f2f 0%, #363636 100%);
}
 
.tall {
    height:151px !important;
}
 
.wide {
    width:205px !important;
}
 
.shift {
    margin-top:-78px;
}

Obteniendo como resultado:

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(10 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?
Trabajo en México

4 respuestas a “Calculadora simple con JavaScript”

  1. Israel dice:
    22/06/2022 a las 17:35

    Muchas gracias, justo lo que buscaba, trate de adaptarlo según tamaño.
    aunque no se mucho de código CSS y Html ​😵, probando y probando 😅​
    Pueden darle una visita, para ver descargar herramientas que les falten para diseños web entre otros..

    😉​✌️​ https://sorprendeteousha.blogspot.com/

    Responder
  2. alvaro dice:
    07/01/2022 a las 16:35

    como podria hacer resposive la calculadora

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre
calculadoras eventos
JA Modules - Diseño y desarrollo Web
JA Modules - Módulos PrestaShop para Marketplace
JA Modules - Soporte técnico, bono de horas
Pago con tarjeta via Stripe con suscripciones
Rango Trading - Ser un trader rentable
Promociónate aquí