JSFiddle - React, Tailwind, and code Playground

by Miguel Roman

HTML

<div id="pantalla">
        <span id="operaciones"></span>
        <span id="resultado"></span>
    </div>

    <div id="botonera">
        
        <button type="button" id="btn-parentesis-a" value="(" disabled="disabled">(</button>
        <button type="button" id="btn-parentesis-c" value=")" disabled="disabled">)</button>
        <button type="button" id="btn-porcentaje" value="%">%</button>
        <button type="button" id="btn-cls" value="cls">CE</button>

        <button type="button" id="btn-menos" value="+/-">&plusmn;</button>
        <button type="button" id="btn-div" value="/">&divide;</button>
        <button type="button" id="btn-por" value="*">*</button>
        <button type="button" id="btn-menos" value="-">-</button>

        <button type="button" id="btn-7" value="7">7</button>
        <button type="button" id="btn-8" value="8">8</button>
        <button type="button" id="btn-9" value="9">9</button>
        <button type="button" id="btn-mas" value="+" class="doble-alto">+</button>

        <button type="button" id="btn-4" value="4">4</button>
        <button type="button" id="btn-5" value="5">5</button>
        <button type="button" id="btn-6" value="6">6</button>

        <button type="button" id="btn-1" value="1">1</button>
        <button type="button" id="btn-2" value="2">2</button>
        <button type="button" id="btn-3" value="3">3</button>
        <button type="button" id="btn-igual" value="=" class="doble-alto">=</button>

        <button type="button" id="btn-0" value="0" class="doble-ancho">0</button>
        <button type="button" id="btn-punto" value=".">.</button>

    </div>

CSS

#botonera {
    width: 214px;
}

button {
    height: 30px;
    width: 40px;
    margin: 5px
}

.doble-alto {
    float: right;
    height: 70px;
    margin-right: 7px;
}

.doble-ancho {
    width: 95px;
    margin-right: 4px;
}

#operaciones, #resultado {
    display: block;
    height: 20px;
}

JavaScript

var backSpaceKeyCode = 8;
var infinito = "Infinito";
var operaciones = document.getElementById('operaciones');
var resultado = document.getElementById('resultado');
var botones = document.getElementsByTagName('button');

var operandoA = null;
var operandoB = null;
var operador = null;
var ultimoResultado = null;

var stack = [];

function renderizarPantallas() {

    resultado.innerText = '';
    operaciones.innerText = '';

    if (stack.length === 1) {
        resultado.innerText = stack[0].valor;
        return;
    }

    if (stack.length >= 2) {
        operaciones.innerText = stack[0].valor + ' ' + stack[1].valor;
        if (stack.length === 3) {
            if (ultimoResultado) {
                operaciones.innerText = stack[0].valor + ' ' + stack[1].valor + ' ' + stack[2].valor;
                resultado.innerText = ultimoResultado.toString();
            }
            else {
                resultado.innerText = stack[2].valor
            }
        } else if (ultimoResultado) {
            resultado.innerText = ultimoResultado.toString();
        }
    }


}

function operar() {
    /// <summary>Verifica la "pila" para determinar si existen operadores y operados para poder calcular un resultado</summary>

    operado = true;

    if (stack.length === 0) {
        // si no existe ningun elemento en la pila, el resultado es cero.
        return 0;
    }

    if (stack.length === 1) {
        // si existe un solo elemento en la pila, el resultado es este primer operando.

        // parseFloat sirve para convertir el string a un valor numerico.
        return parseFloat(stack[0]);
    }

    if (stack.length == 2) {
        // si solo existen dos elementos en la pila, por ejemplo "10, +" se procesa el tercer
        // elemento como 0 para que la pila quede "10, +, 0" y por ultimo se opera.
        procesarSimbolo("0");
        return operar();
    }

    if (stack.length === 3) {
        // si ya existen tres elementos en el stack, se opera.
        var a...