Crear calculadora con JavaScript

Uno de los primeros retos a los que podemos enfrentarnos cuando estamos aprendiendo a programar es la de desarrollar una simple calculadora.

En esta publicación mostraremos una versión muy simple de una calculadora desarrollada utilizando sólo JavaScript, Html y CSS.

Esta calculadora será capaz de realizar las operaciones aritméticas: sumar, restar, multiplicar y dividir.

Código Html

<div class="container">
        <input type="text" id="result" class="screen" />
        <input type="button" value="C" onclick="clearScreen()" class="btn" />

        <div class="keys">
            <input type="button" value="7" class="btn" onclick="display('7')" />
            <input type="button" value="8" class="btn" onclick="display('8')" />
            <input type="button" value="9" class="btn" onclick="display('9')" />

            <input type="button" value="/" class="operator" onclick="display('/')" />
            <input type="button" value="4" class="btn" onclick="display('4')" />
            <input type="button" value="5" class="btn" onclick="display('5')" />
            <input type="button" value="6" class="btn" onclick="display('6')" />

            <input type="button" value="*" class="operator" onclick="display('*')" />
            <input type="button" value="1" class="btn" onclick="display('1')" />
            <input type="button" value="2" class="btn" onclick="display('2')" />
            <input type="button" value="3" class="btn" onclick="display('3')" />

            <input type="button" value="-" class="operator" onclick="display('-')" />
            <input type="button" value="0" class="btn" onclick="display('0')" />

            <input type="button" value="." class="operator" onclick="display('.')" />
            <input type="button" value="=" class="btn" onclick="solve()" />
            <input type="button" value="+" class="operator" onclick="display('+')" />
        </div>
    </div>

Código CSS

.screen {
            height: 50px;
            width: 150px;
            margin-bottom: 10px;
        }
        
        .keys {
            width: 250px;
        }
        
        .btn,
        .operator {
            width: 50px;
            height: 50px;
            margin-bottom: 5px;
        }

Código JavaScript

El código JavaScript es muy sencillo. Utilizaremos la función eval() para ejecutar las operaciones.

 function display(val) {
            document.getElementById('result').value += val;
        }

        function clearScreen() {
            document.getElementById('result').value = "";
        }

        function solve() {
            let x = document.getElementById('result').value;
            let y = eval(x);
            document.getElementById('result').value = y;
            return y;
        }

Vista previa

Como se puede apreciar, los estilos asignados son los mínimos posibles para que esta calculadora sea un poco funcional.