Calculadora: código javascript

Del diagrama al programa

Ahora con el diagrma de flujo del proceso global a mano, para no perderte, psaas a escribir este código y luego lo añades al archivo de scripts (calculadora.js)

let calculadora = document.querySelector(".marco");

let visor = document.querySelector(".visor");

visor.innerHTML ="0";

visor.status= 'N'; //N: nuevo (borrar), U: usado (para agregarle datos)

visor.buffer=''; //va a servir como una global para implementar el buffer

calculadora.addEventListener('click', leerTecla);

function leerTecla(event){

   let tecla = event.target;

   let visor = document.querySelector(".visor");

   let resdo, oper;

   switch (tecla.dataset.tipo){

      case "num":

         if (visor.status == "N"){

            visor.status = "";

            visor.innerHTML = "";

         }

         visor.innerHTML += tecla.innerHTML;

         break;

      case 'signo':

         visor.innerHTML = cambiarSigno(visor.innerHTML);

         break;

      case 'oper':

         visor.buffer += visor.innerHTML;

         oper = tecla.innerHTML == "Enter"?"":tecla.innerHTML;

         if(esEjecutable(visor.buffer)){

            resdo = ejecutar(visor.buffer);

            if(resdo !="ERROR" && oper !=""){

               visor.buffer = resdo+oper;

            }

            else{

               visor.buffer = "";

               }

            visor.innerHTML = resdo;

            }

         else{

            visor.buffer += oper;

         }

        visor.status = "N";

        break;

      case 'borrar':

         visor.buffer = "";

         visor.innerHTML=0;

         visor.status="N";

   }

}

Comentarios

Pare entender mejor el programa es conveniente tener a mano el diagrama de flujo

Leyendo ese gráfico el programa sale prácticametne solo.

Observa que el inicio del programa, lo que sería leer la tecla responde a una pulsación con el ratón y eso se detecta con un evento click en la calculadora.

El evento ocurre en una tecla, y si observas es necesrio diferenciar las teclas por su tipo, eso lo hacemos agragando un atributo data-tipo al código HTML.