0

Solo faltaria modificar el javascript para que me funcione correctamente y el simbolo "+" se tendria que ir cambiando cada vez que teclamos un simbolo.(Resuelto)

introducir la descripción de la imagen aquí

Bueno, ahora lo que me pasa fue al modificarlo, no me sale la ventana de ERROR que puse en el "if" de la operacion de division.(Sin Resolver)

// Modelo de Datos
var operandoa = '';
var operandob = '';
var operacion = '+';
var operadorPulsado = false;

// Vista
var resultado = document.getElementById("resultado");
var campoOperandoA = document.getElementById("OperA");
var campoOperandoB = document.getElementById("OperB");
var campoOperador = document.getElementById("operac");
var reset = document.getElementById("reset");
var division = document.getElementById("division");
var multiplicacion = document.getElementById("multiplicacion");
var resta = document.getElementById("resta");
var suma = document.getElementById("suma");
var verificar = document.getElementById("verificar");
var uno = document.getElementById("uno");
var dos = document.getElementById("dos");
var tres = document.getElementById("tres");
var cuatro = document.getElementById("cuatro");
var cinco = document.getElementById("cinco");
var seis = document.getElementById("seis");
var siete = document.getElementById("siete");
var ocho = document.getElementById("ocho");
var nueve = document.getElementById("nueve");
var cero = document.getElementById("cero");
var coma = document.getElementById("coma");
var borradoParcial = document.getElementById("borradoParcial");

//------------------------------------------------------------------------
// Controlador: Se Encarga de Enlazar el Modelo de Datos con la Vista
//------------------------------------------------------------------------

function init() {
  
  //---------------------------------------------
  //Digitos
  //---------------------------------------------
  
  uno.onclick = function(e) {
    funcionalidadBotonNumerico("1");
  };
  dos.onclick = function(e) {
    funcionalidadBotonNumerico("2");
  };
  tres.onclick = function(e) {
    funcionalidadBotonNumerico("3");
  };
  cuatro.onclick = function(e) {
    funcionalidadBotonNumerico("4");
  };
  cinco.onclick = function(e) {
    funcionalidadBotonNumerico("5");
  };
  seis.onclick = function(e) {
    funcionalidadBotonNumerico("6");
  };
  siete.onclick = function(e) {
    funcionalidadBotonNumerico("7");
  };
  ocho.onclick = function(e) {
    funcionalidadBotonNumerico("8");
  };
  nueve.onclick = function(e) {
    funcionalidadBotonNumerico("9");
  };
  cero.onclick = function(e) {
    funcionalidadBotonNumerico("0");
  };
  coma.onclick = function(e) {
    funcionalidadBotonNumerico(".");
  };
  
  //------------------------------------------------
  //Teclas de Función Especial
  //------------------------------------------------
  
  reset.onclick = function(e) {
    resetear();
  };
  borradoParcial.onclick = function(e) {
    funcionBorradoParcial();
  };
  
  //-------------------------------------------------
  // Teclas de Operación
  //-------------------------------------------------
  
  suma.onclick = function(e) {
    botonDeOperacion("+");
  };
  resta.onclick = function(e) {
    botonDeOperacion("-");
  };
  multiplicacion.onclick = function(e) {
    botonDeOperacion("*");
  };
  division.onclick = function(e) {
    botonDeOperacion("/");
  };
  verificar.onclick = function(e) {
    operadorPulsado = false;
    resolver();
  };
}

//---------------------------------------------------

function resetear() {
  operandoa = '';
  operandob = '';
  resultado.textContent = "";
  campoOperandoA.textContent = operandoa;
  campoOperandoB.textContent = operandob;
}

function funcionalidadBotonNumerico(digito){
  if (operadorPulsado) {
    operandob += digito;
    campoOperandoB.textContent = operandob;
  } else {
    operandoa += digito;
    campoOperandoA.textContent = operandoa;
  }
}

function botonDeOperacion(digitooperacion){
  operadorPulsado = true;
  operacion = digitooperacion;
  campoOperador.textContent = operacion;
}

function resolver() {

  var res = "";
  switch (operacion) {
    case "+":
      res = parseFloat(operandoa) + parseFloat(operandob);
      break;
    case "-":
      res = parseFloat(operandoa) - parseFloat(operandob);
      break;
    case "*":
      res = parseFloat(operandoa) * parseFloat(operandob);
      break;
    case "/":
      if (operandob === 0) {
        res = '?';
        window.alert("ERROR: división entre cero");
      } else {
        res = parseFloat(operandoa) / parseFloat(operandob);
      }
      break;
  }
  resetear();
  resultado.textContent = res;
}

function funcionBorradoParcial() {
  if (operadorPulsado) {
    operandob=operandob.slice(0,-1);
    campoOperandoB.textContent = operandob;
  } else {
    operandoa=operandoa.slice(0,-1);
    campoOperandoA.textContent = operandoa;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 22px;
  background: href();
}

li {
  list-style: none;
}

html {
  height: 100%;
  background: white;
  background: radial-gradient(circle, #fff 24%, #CCE);
  background-size: cover;
}

#Contenedor {
  width: 290px;
  text-align: center;
  height: auto;
  margin: 4px auto;
}

#calculadora {
  width: 234px;
  height: 230px;
  margin: 0 auto;
  padding: 2px;
  background-color: #65D277;
}

#operac,
#equal {
  float: left;
  margin-left: 6px;
  margin-top: 7px;
}

#OperA,
#OperB,
#resultado {
  float: left;
  /*margin: 8px auto 8px 4px;*/
  margin: 7px -3px 5px 8px;
  width: 25%;
  height: 30px;
  font-size: 16px;
  overflow: hidden;
  text-align: right;
  color: #48484D;
  /*padding: 4px;*/
  background-color: #fff;
  box-shadow: inset -1px -1px 4px 1px #eee;
}

.Teclas li {
  width: 50px;
  height: 30px;
  border-radius: 3px;
  color: #fff;
  background-color: #6C73FA;
  cursor: pointer;
  float: left;
  margin: 0px -3px 5px 8px;
  line-height: 30px;
  text-align: center;
  box-shadow: 0px 3px 1px 0px #444651;
}

.Teclas li:hover {
  background-color: #BEF9F0;
  color: #6C73FA;
  transition: 0.2s;
}

.Teclas li:active {
  box-shadow: 0px 1px 1px 0px #444651;
}

.verificar {
  width: 93.4% !important;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tarea 2.8 - Kepriel</title>
  <link type="text/css" href="css/estilos.css" rel="stylesheet">
</head>

<body onload="init()">
  <div id="Contenedor">
    <header class="Titulo">
      <h1>Calculadora</h1>
    </header>
    <section id="calculadora">
      <header class="top">
        <div id="OperA"></div>
        <div id="operac">+</div>
        <div id="OperB"></div>
        <div id="equal">=</div>
        <div id="resultado"></div>
      </header>
      <ul class="Teclas">
        <li></li>
        <li id="borradoParcial">DEL</li>
        <li id="reset">C</li>
        <li></li>
        <li id="siete">7</li>
        <li id="ocho">8</li>
        <li id="nueve">9</li>
        <li id="division">&frasl;</li>
        <li id="cuatro">4</li>
        <li id="cinco">5</li>
        <li id="seis">6</li>
        <li id="multiplicacion">*</li>
        <li id="uno">1</li>
        <li id="dos">2</li>
        <li id="tres">3</li>
        <li id="resta">-</li>
        <li id="cero">0</li>
        <li id="coma">.</li>
        <li id="suma">+</li>
        <li id="verificar">=</li>
      </ul>
    </section>
  </div>
  <script type="text/javascript" src="js/calculadora.js"></script>
</body>

</html>

2 respuestas 2

3

Basándome en la respuesta de @Ruslan López, te dejo mi respuesta con el javascript más simplificado.

Primero: Si tu respuesta ha sido resuelta pero tienes una duda nueva, te recomiendo dar por respondida la primera y abrir una segunda pregunta en otro tema. Si el problema es sobre la respuesta de un usuario, añádele un comentario para decírselo a ver si él pudiera corregir su respuesta.

Sobre el código: Voy a intentar explicarlo poco a poco y al final te lo dejo todo para que no sea demasiado lioso. (Al final también resuelvo el problema con la división).

En vez de guardar todos los datos en diferentes variables, yo solo almacenaría los operadores, la operación, el resultado y dos variables extra: una con la lista de teclas y otra que comprobará si estamos actuando sobre un operador u otro.

  var teclas = document.querySelector(".Teclas");
  var operA = document.querySelector("#OperA");
  var operB = document.querySelector("#OperB");
  var operacion = document.querySelector("#operac");
  var resultado = document.querySelector("#resultado");
  var operador = true;

Cuando operador sea true estaremos actuando sobre el operador A, mientras que si es false sobre el operador B.

La idea es que todo se desarrolle dentro de una función que sólo se ejecutará cuando sea necesario, es decir: se comprobará cuándo se hace clic sobre una tecla y se ejecutará la función en ese momento. Teniendo la lista de teclas almacenada en una variable, habrá que comprobar cuando se hace clic sobre ella teclas.onclick = function(e) {}, todo el código irá dentro de esta función.

Lo primero que habrá que hacer será comprobar sobre qué tecla se ha hecho clic, para esto utilizamos e.target que nos dirá qué elemento ha iniciado el evento. Almacenaremos su contenido en una variable.

var teclaPulsada = e.target.innerText;

Ahora tenemos el valor de la tecla pulsada pero no sabemos cuál es. Para empezar, lo dividiremos según si es un número o no, para ello, creamos una variable que comprobará si el resultado es un valor numérico:

var isNum = parseInt(teclaPulsada);

Ahora tenemos dos variantes, si es un número y si no lo es: if(isNaN(isNum)) .De esa forma analizamos si el valor NO es un número (si su resultado es NaN "Not a Number").

Empecemos si el resultado SÍ es un número (en el else del if de arriba). Si es un número, habrá que comprobar el operador sobre el que estamos y añadir el valor numérico al ya escrito:

if(operador) {
   operA.innerText += isNum;
} else {
   operB.innerText += isNum;
}

Si operador es true estaremos sobre el operador A y, por lo tanto, añadimos el valor numérico a contenido que ya tenga el operador. Lo mismo si operador es false en el operador B.

Volvemos al if, cuando el valor recogido no es un número. En este caso tenemos varias posibilidades:

  • Coma/Punto
  • Borrar
  • Borrar operador
  • Operación
  • Elemento vacío (tienes dos en tu ejemplo)
  • Igual

La forma más rápida de hacerlo sería con un switch analizando el valor de teclaPulsada, es decir: switch (teclaPulsada)

Si pulsamos sobre la coma/punto:
Habrá que añadir el valor . al operador en cuestión. Para ello, comprobamos sobre qué operador estamos y añadimos el punto a su valor:

case ".":
   if(operador) {
      operA.innerText += teclaPulsada;
   } else {
      operB.innerText += teclaPulsada;
   }
   break;

Si pulsamos sobre borrar (DEL):
En este caso es sencillo, cambiamos el valor de los dos operadores y el resultado por una cadena vacía. No hay que olvidarse de resetear el comprobador operador a true para empezar por el operador A de nuevo.

case "DEL":
   operA.innerText = "";
   operB.innerText = "";
   resultado.innerText = "";
   operador = true;
   break;

Si pulsamos sobre borrar operador (C):
Como solo queremos borrar el operador sobre el que estamos, comprobamos cual es y sobrescribimos su valor por una cadena vacía.

case "C":
   if(operador) {
      operA.innerText = "";
   } else {
      operB.innerText = "";
   }
   break;

Si pulsamos sobre alguno de los elementos vacíos: Aunque parezca una tontería, existiendo estos elementos, es importante tener registrado lo que pasará cuando se haga clic sobre ellos para evitar problemas. Es tan sencillo como decirle que no haga nada:

case "":
   break;

Si pulsamos sobre el igual: Este es el más complicado porque es el que contiene la lógica. Primero creamos dos variables que servirán para almacenar los datos de los operadores introducidos, por si acaso hubiera un operador en blanco, los inicializaremos a cero y, si los operadores no están vacíos, se les añadirá sus datos. Es decir:

var num1 = 0;
var num2 = 0;

if (operA.innerText != ""){
   num1 = parseFloat(operA.innerText);
}
if (operB.innerText != "") {
   num2 = parseFloat(operB.innerText);
}

De esta forma, en caso de que un operador no contenga datos, ese operador será igual a cero y no saltará ningún error.

IMPORTANTE: Los operadores vienen en string pues estamos cogiendo su valor literal, hay que parsearlos a un tipo numérico. Dado que es posible que lleguen números decimales, se han parseado a float, si se parsean a int fallaría cuando se introduzcan decimales.

Lo siguiente será hacer lo mismo pero con el operador.

var operator = operacion.innerText;

La alerta al dividir entre cero hay que hacerla en este punto. Comprobamos que la operación es una división y que num2 es cero y, de ser así, mostramos la alerta y salimos del switch

if (operator == "/" && num2 == 0) {
   alert("No se puede dividir por cero");
   break;
}

Y, por último, realizar la operación y añadir su valor al resultado. Para ello haremos uso de eval() ya que la operación la tenemos en string.

resultado.innerText = eval(num1 + operator + num2);

Para acabar, volvemos a setear el valor del operador a true para la próxima operación.

Si pulsamos sobre cualquier tecla de operación:
Dado que hay más de un operador posible, esta será la opción por defecto, sencillamente cambiaremos el valor de operacion por el de teclaPulsada y cambiaremos el valor de operador a false para continuar con el operador B.

default: 
   operacion.innerText = teclaPulsada;
   operador = false;
   break;

Ya podemos hacer cualquier operación, ahora el problema es que tenemos que borrar cada vez que terminamos una operación y puede ser molesto. Para solucionar esto podríamos añadir un pequeño fragmento al principio del código que compruebe si hay una operación hecha y, en caso de que sí, la borre cuando comencemos a escribir la nueva operación.

if(resultado.innerText != "") {
   operA.innerText = "";
   operB.innerText = "";
   resultado.innerText = "";
}

¡Ahora ya tenemos toda la calculadora!

El problema que tenías con la división viene dado por la forma en la que escribes su símbolo. El js está cogiendo el símbolo de la misma calculadora y no reconoce el código como "división". Puedes solucionarlo de dos formas:

  • Cambiando el código de tu HTML y poniendo el símbolo / directamente.
  • En el momento en el que analizas el default puedes hacer un if que compruebe si el valor es tu código y, en caso afirmativo, sustituir la operación por / manualmente.

Ahora sí, te dejo el código completo, espero que te sirva de ayuda!

function init() {
  var teclas = document.querySelector(".Teclas");
  var operador = true;
  var operA = document.querySelector("#OperA");
  var operB = document.querySelector("#OperB");
  var operacion = document.querySelector("#operac");
  var resultado = document.querySelector("#resultado");
  
  var num1 = 0;
  var num2 = 0;
  var operator = "";

  teclas.onclick = function(e) {
      if(resultado.innerText != "") {
          operA.innerText = "";
          operB.innerText = "";
          resultado.innerText = "";
    }

    var teclaPulsada = e.target.innerText;
    var isNum = parseInt(teclaPulsada);
    
    if(isNaN(isNum)) {
      switch (teclaPulsada) {
        case "=": 
          num1 = 0;
          num2 = 0;

          if (operA.innerText != ""){
            num1 = parseFloat(operA.innerText);
          }
          if (operB.innerText != "") {
            num2 = parseFloat(operB.innerText);
          }
          
          operator = operacion.innerText;
          
          if (operator == "/" && num2 == 0) {
            alert("No se puede dividir por cero");
            break;
          }
          
          resultado.innerText = eval(num1 + operator + num2);
          operador = true;
          break;
          
        case ".":
          if(operador) {
           operA.innerText += teclaPulsada;
          } else {
            operB.innerText += teclaPulsada;
          }
          break;
          
        case "C":
          if(operador) {
            operA.innerText = "";
          } else {
            operB.innerText = "";
          }
          break;
          
        case "DEL":
          operA.innerText = "";
          operB.innerText = "";
          
          operador = true;
          break;
          
        case "":
          break;
          
        default: 
          operacion.innerText = teclaPulsada;
          operador = false;
          break;
      }
      
    } else {
      if(operador) {
           operA.innerText += isNum;
        } else {
          operB.innerText += isNum;
        }
      }

  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 22px;
  background: href();
}

li {
  list-style: none;
}

html {
  height: 100%;
  background: white;
  background: radial-gradient(circle, #fff 24%, #CCE);
  background-size: cover;
}

#Contenedor {
  width: 290px;
  text-align: center;
  height: auto;
  margin: 4px auto;
}

#calculadora {
  width: 234px;
  height: 230px;
  margin: 0 auto;
  padding: 2px;
  background-color: #65D277;
}

#operac,
#equal {
  float: left;
  margin-left: 6px;
  margin-top: 7px;
}

#OperA,
#OperB,
#resultado {
  float: left;
  /*margin: 8px auto 8px 4px;*/
  margin: 7px -3px 5px 8px;
  width: 25%;
  height: 30px;
  font-size: 16px;
  overflow: hidden;
  text-align: right;
  color: #48484D;
  /*padding: 4px;*/
  background-color: #fff;
  box-shadow: inset -1px -1px 4px 1px #eee;
}

.Teclas li {
  width: 50px;
  height: 30px;
  border-radius: 3px;
  color: #fff;
  background-color: #6C73FA;
  cursor: pointer;
  float: left;
  margin: 0px -3px 5px 8px;
  line-height: 30px;
  text-align: center;
  box-shadow: 0px 3px 1px 0px #444651;
}

.Teclas li:hover {
  background-color: #BEF9F0;
  color: #6C73FA;
  transition: 0.2s;
}

.Teclas li:active {
  box-shadow: 0px 1px 1px 0px #444651;
}

.verificar {
  width: 93.4% !important;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tarea 2.8 - Kepriel</title>
  <link type="text/css" href="css/estilos.css" rel="stylesheet">
</head>

<body onload="init()">
  <div id="Contenedor">
    <header class="Titulo">
      <h1>Calculadora</h1>
    </header>
    <section id="calculadora">
      <header class="top">
        <div id="OperA"></div>
        <div id="operac">+</div>
        <div id="OperB"></div>
        <div id="equal">=</div>
        <div id="resultado"></div>
      </header>
      <ul class="Teclas">
        <li></li>
        <li id="borradoParcial">DEL</li>
        <li id="reset">C</li>
        <li></li>
        <li id="siete">7</li>
        <li id="ocho">8</li>
        <li id="nueve">9</li>
        <li id="division">/</li>
        <li id="cuatro">4</li>
        <li id="cinco">5</li>
        <li id="seis">6</li>
        <li id="multiplicacion">*</li>
        <li id="uno">1</li>
        <li id="dos">2</li>
        <li id="tres">3</li>
        <li id="resta">-</li>
        <li id="cero">0</li>
        <li id="coma">.</li>
        <li id="suma">+</li>
        <li id="verificar">=</li>
      </ul>
    </section>
  </div>
  <script type="text/javascript" src="js/calculadora.js"></script>
</body>

</html>

4
  • Hablando de tu codigo, cuando divides por cerro era para que te saliera una ventana de alerta el 29 ene. 2019 a las 11:46
  • diciendo Error: no puedes devidir por cerro el 29 ene. 2019 a las 11:47
  • ¡Oh! Perdón, no me había fijado en eso, ahora edito
    – Rabegi
    el 29 ene. 2019 a las 11:56
  • Ahora sí, perdón! Está añadido en el caso del igual, antes de mostrar el resultado
    – Rabegi
    el 29 ene. 2019 a las 12:02
1

Primeramente agregamos divs para el espacio donde se mostrarán los operadores:

<div id="OperA"></div>
<div id="operac">+</div>
<div id="OperB"></div>
<div id="equal">=</div>

posteriormente modificamos el CSS para que se vea lo que deseamos de la siguiente forma:

  • Primero le agregamos un desplazamiento hacia la derecha tanto los botones como a los divs donde estarán los operadores para que no se encimen, en el caso de los campos de texto queremos el mismo márgen que en los botones

    #operac, #equal{
      margin-left: 6px;
    }
    
    #OperA,
    #OperB,
    #resultado{
        margin: 0px -3px 5px 8px;
    }
    
  • luego aplicamos la técnica de rejilla para que se apile todo hacia la izquierda como le hiciste en las teclas teniendo cuidado que los tamaños sean adecuados

    #OperA,
    #OperB,
    #resultado{
        width:25%;
    }
    

//Variables
  
  var a;
  var b;
  var c;
  var d;
  var f;

  var operandoa;
  var operandob;
  var operacion;

  var resultado = document.getElementById("resultado");
  var reset = document.getElementById("reset");
  var division = document.getElementById("division");
  var multiplicacion = document.getElementById("multiplicacion");
  var resta = document.getElementById("resta");
  var suma = document.getElementById("suma");
  var verificar = document.getElementById("verificar");
  var uno = document.getElementById("uno");
  var dos = document.getElementById("dos");
  var tres = document.getElementById("tres");
  var cuatro = document.getElementById("cuatro");
  var cinco = document.getElementById("cinco");
  var seis = document.getElementById("seis");
  var siete = document.getElementById("siete");
  var ocho = document.getElementById("ocho");
  var nueve = document.getElementById("nueve");
  var cero = document.getElementById("cero");
  var coma = document.getElementById("coma");
  var borradoParcial = document.getElementById("borradoParcial");

//Eventos


function init() {
  uno.onclick = function(e){
    resultado.textContent = resultado.textContent + "1";
  }
  dos.onclick = function(e){
    resultado.textContent = resultado.textContent + "2";
  }
  tres.onclick = function(e){
    resultado.textContent = resultado.textContent + "3";
  }
  cuatro.onclick = function(e){
    resultado.textContent = resultado.textContent + "4";
  }
  cinco.onclick = function(e){
    resultado.textContent = resultado.textContent + "5";
  }  
  seis.onclick = function(e){
    resultado.textContent = resultado.textContent + "6";
  }
  siete.onclick = function(e){
    resultado.textContent = resultado.textContent + "7";
  }
  ocho.onclick = function(e){
    resultado.textContent = resultado.textContent + "8";
  }  
  nueve.onclick = function(e){
    resultado.textContent = resultado.textContent + "9";
  }
  cero.onclick = function(e){
    resultado.textContent = resultado.textContent + "0";
  }
  coma.onclick = function(e){
    resultado.textContent = resultado.textContent + ".";
  }
  
  //--------------------------------------------------
  //Resetear
  //--------------------------------------------------
  
  reset.onclick = function(e){
    resetear();
  }
  
  //--------------------------------------------------
  //Retroceder
  //--------------------------------------------------
  
  borradoParcial.onclick = function(e) {
        var val = document.getElementById('resultado').innerHTML;
        if(val.length > 0){
            val = val.substring(0, val.length - 1);
            document.getElementById('resultado').innerHTML = val;
        }
};
  
  //--------------------------------------------------
  // Operaciones
  //--------------------------------------------------
  
  suma.onclick = function(e){
    operandoa = resultado.textContent;
    operacion = "+";
    limpiar1(a);
  }
  resta.onclick = function(e){
    operandoa = resultado.textContent;
    operacion = "-";
    limpiar2(b);
  }
  multiplicacion.onclick = function(e){
    operandoa = resultado.textContent;
    operacion = "*";
    limpiar3(c);
  }
  division.onclick = function(e){
    operandoa = resultado.textContent;
    operacion = "/";
    limpiar4(d);
  }
  verificar.onclick = function(e){
    operandob = resultado.textContent.substr(operandoa.length + 1);
    resolver();
  }
}

function limpiar1(a){
  resultado.textContent = operandoa + "+";
}
function limpiar2(b){
  resultado.textContent = operandoa + "-";
}
function limpiar3(c){
  resultado.textContent = operandoa + "*";
}
function limpiar4(d){
  resultado.textContent = operandoa + "/";
}

//------------------------------------------------

function resetear(){
  resultado.textContent = "";
  operandoa = 0;
  operandob = 0;
  operacion = "";
}

//------------------------------------------------

function resolver(){
  
  var res = "";
  
  switch(operacion){
    case "+":
      res = parseFloat(operandoa) + parseFloat(operandob);
      break;
    case "-":
      res = parseFloat(operandoa) - parseFloat(operandob);
      break;
      case "*":
      res = parseFloat(operandoa) * parseFloat(operandob);
      break;
      case "/":
      
      if (operandob == 0){
        res = 0;
        window.alert("ERROR");
      } else {
        res = parseFloat(operandoa) / parseFloat(operandob);
      }
      break;
  }
  resetear();
  resultado.textContent = res;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Gloria Hallelujah', cursive;
	font-size:22px;
  background: href();
}
li{
	list-style:none;
}
html {
	height: 100%;
	background: white;
	background: radial-gradient(circle, #fff 24%, #CCE);
	background-size: cover;
}
#Contenedor{
	width: 290px;
	text-align: center;
	height:auto;
	margin:4px auto;
}
#calculadora{
	width: 234px;
	height: 230px;
	margin:0 auto;
	padding:2px;
	background-color: #65D277;
}
#operac, #equal{
  float: left;
  margin-left: 6px;
}
#OperA,
#OperB,
#resultado{
  float: left;
  /*margin: 8px auto 8px 4px;*/
      margin: 0px -3px 5px 8px;
	width:25%;
	height:30px;
	font-size: 16px;
	overflow:hidden;
	text-align: right;
	color:#48484D;
	/*padding: 4px;*/
	background-color:#fff;
	box-shadow: inset -1px -1px 4px 1px #eee;
}
.Teclas li{
	width:50px;
	height:30px;
	border-radius:3px;
	color:#fff;
	background-color:#6C73FA;
	cursor:pointer;
	float:left;
	margin: 0px -3px 5px 8px;
	line-height: 30px;
	text-align: center;
	box-shadow: 0px 3px 1px 0px #444651;
}
.Teclas li:hover{
	background-color: #BEF9F0;
	color: #6C73FA;
	transition:0.2s;
}
.Teclas li:active{
	box-shadow: 0px 1px 1px 0px #444651;
}
.verificar{
	width: 93.4% !important;
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tarea 2.8 - Kepriel</title>
    <link type="text/css" href="css/estilos.css" rel="stylesheet">
  </head>
<body>
	<div id="Contenedor">
		<header class="Titulo">
				<h1>Calculadora</h1>
		</header>
		<section id="calculadora">
			<header class="top">
        <div id="OperA"></div>
        <div id="operac">+</div>
        <div id="OperB"></div>
        <div id="equal">=</div>
				<div id="resultado"></div>
			</header>
			<ul class="Teclas">
        <li></li>
        <li id="borradoParcial" onclick="init()">DEL</li>
        <li id="reset" onclick="init()">C</li>
        <li></li>
				<li id="siete" onclick="init()">7</li>
				<li id="ocho" onclick="init()">8</li>
				<li id="nueve" onclick="init()">9</li>
				<li id="division" onclick="init()">&frasl;</li>
				<li id="cuatro" onclick="init()">4</li>
				<li id="cinco" onclick="init()">5</li>
				<li id="seis" onclick="init()">6</li>
				<li id="multiplicacion" onclick="init()">*</li>
				<li id="uno" onclick="init()">1</li>
				<li id="dos" onclick="init()">2</li>
				<li id="tres" onclick="init()">3</li>
				<li id="resta" onclick="init()">-</li>
				<li id="cero" onclick="init()">0</li>
				<li id="coma" onclick="init()">.</li>
				<li id="suma" onclick="init()">+</li>
				<li id="verificar" onclick="init()">=</li>
			</ul>
		</section>
	</div>
	<script type="text/javascript" src="js/calculadora.js"></script>
  </body>
</html>

Luego tocaría una modificación al script para que en vez de mostrar todo en una sola pantalla lo haga en tres, que esencialmente es deshacerse de mucho de tu lógica y lo haríamos de la siguiente manera:

  • Primeramente ponemos estado inicial a nuestras variables que teníamos

    var operandoa = '';
    var operandob = '';
    var operacion = ' ';
    
  • ponemos variables que apunten a los nuevos divs que pusimos

    var resultado = document.getElementById("resultado");
    var campoOperandoA = document.getElementById("OperA");
    var campoOperandoB = document.getElementById("OperB");
    var campoOperador = document.getElementById("operac");
    
  • agregamos una variable que nos permita saber si se pulsó una tecla de operador

    var operadorPulsado = false;
    
  • cambiamos el valor de esa variable a verdadero cada vez que se oprima una tecla de operación excepto para la tecla de igual donde se pondrá en falso para que vuelva a su estado original

    suma.onclick = function(e) {
      operadorPulsado = true;
    
  • modificamos la lógica de los botones de número controlando en que campo se escribe mediante la variable operadorPulsado. Como habrás notado, esta es una funcionalidad repetitiva, así que haremos una función que solamente cambie el dígito y así nos ahorramos trabajo.

    uno.onclick = function(e) {
      if (operadorPulsado) {
        operandob += "1";
        campoOperandoB.textContent = operandob;
      } else {
        operandoa += "1";
        campoOperandoA.textContent = operandoa;
      }
      resultado.textContent = resultado.textContent + "1";
    }
    
  • Para la función resetear el cambio es que aplique aproximadamente lo mismo que ya tienes pero a todos los campos

    function resetear() {
      resultado.textContent = "";
      operandoa = '';
      operandob = '';
      campoOperandoA.textContent = operandoa;
      campoOperandoB.textContent = operandob;
    }
    
  • para los botones de operación solamente es cambiar el valor en el modelo y reflejarlo en la vista

    suma.onclick = function(e) {
      operadorPulsado = true;
      operacion = "+";
      campoOperador.textContent = operacion;
    };
    

// modelo de datos
var operandoa = '';
var operandob = '';
var operacion = '+';
var operadorPulsado = false;

// vista
var resultado = document.getElementById("resultado");
var campoOperandoA = document.getElementById("OperA");
var campoOperandoB = document.getElementById("OperB");
var campoOperador = document.getElementById("operac");
var reset = document.getElementById("reset");
var division = document.getElementById("division");
var multiplicacion = document.getElementById("multiplicacion");
var resta = document.getElementById("resta");
var suma = document.getElementById("suma");
var verificar = document.getElementById("verificar");
var uno = document.getElementById("uno");
var dos = document.getElementById("dos");
var tres = document.getElementById("tres");
var cuatro = document.getElementById("cuatro");
var cinco = document.getElementById("cinco");
var seis = document.getElementById("seis");
var siete = document.getElementById("siete");
var ocho = document.getElementById("ocho");
var nueve = document.getElementById("nueve");
var cero = document.getElementById("cero");
var coma = document.getElementById("coma");
var borradoParcial = document.getElementById("borradoParcial");

// controlador: se encarga de enlazar el modelo de datos con la vista
function init() {
  //digitos
  uno.onclick = function(e) {
    funcionalidadBotonNumerico("1");
  };
  dos.onclick = function(e) {
    funcionalidadBotonNumerico("2");
  };
  tres.onclick = function(e) {
    funcionalidadBotonNumerico("3");
  };
  cuatro.onclick = function(e) {
    funcionalidadBotonNumerico("4");
  };
  cinco.onclick = function(e) {
    funcionalidadBotonNumerico("5");
  };
  seis.onclick = function(e) {
    funcionalidadBotonNumerico("6");
  };
  siete.onclick = function(e) {
    funcionalidadBotonNumerico("7");
  };
  ocho.onclick = function(e) {
    funcionalidadBotonNumerico("8");
  };
  nueve.onclick = function(e) {
    funcionalidadBotonNumerico("9");
  };
  cero.onclick = function(e) {
    funcionalidadBotonNumerico("0");
  };
  coma.onclick = function(e) {
    funcionalidadBotonNumerico(".");
  };

  //teclas de función especial
  reset.onclick = function(e) {
    resetear();
  };
  borradoParcial.onclick = function(e) {
    funcionBorradoParcial();
  };

  // teclas de operación
  suma.onclick = function(e) {
    botonDeOperacion("+");
  };
  resta.onclick = function(e) {
    botonDeOperacion("-");
  };
  multiplicacion.onclick = function(e) {
    botonDeOperacion("*");
  };
  division.onclick = function(e) {
    botonDeOperacion("/");
  };
  verificar.onclick = function(e) {
    operadorPulsado = false;
    resolver();
  };
}

//------------------------------------------------

function resetear() {
  operandoa = '';
  operandob = '';
  resultado.textContent = "";
  campoOperandoA.textContent = operandoa;
  campoOperandoB.textContent = operandob;
}

function funcionalidadBotonNumerico(digito) {
  if (operadorPulsado) {
    operandob += digito;
    campoOperandoB.textContent = operandob;
  } else {
    operandoa += digito;
    campoOperandoA.textContent = operandoa;
  }
}

function botonDeOperacion(digitooperacion) {
  operadorPulsado = true;
  operacion = digitooperacion;
  campoOperador.textContent = operacion;
}

function resolver() {

  var res = "";
  switch (operacion) {
    case "+":
      res = parseFloat(operandoa) + parseFloat(operandob);
      break;
    case "-":
      res = parseFloat(operandoa) - parseFloat(operandob);
      break;
    case "*":
      res = parseFloat(operandoa) * parseFloat(operandob);
      break;
    case "/":
      if (operandob === '0') {
        res = '?';
        window.alert("ERROR: división entre cero");
      } else {
        res = parseFloat(operandoa) / parseFloat(operandob);
      }
      break;
  }
  resetear();
  resultado.textContent = res;
}

function funcionBorradoParcial() {
  if (operadorPulsado) {
    operandob = operandob.slice(0, -1);
    campoOperandoB.textContent = operandob;
  } else {
    operandoa = operandoa.slice(0, -1);
    campoOperandoA.textContent = operandoa;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 22px;
  background: href();
}

li {
  list-style: none;
}

html {
  height: 100%;
  background: white;
  background: radial-gradient(circle, #fff 24%, #CCE);
  background-size: cover;
}

#Contenedor {
  width: 290px;
  text-align: center;
  height: auto;
  margin: 4px auto;
}

#calculadora {
  width: 234px;
  height: 230px;
  margin: 0 auto;
  padding: 2px;
  background-color: #65D277;
}

#operac,
#equal {
  float: left;
  margin-left: 6px;
  margin-top: 7px;
}

#OperA,
#OperB,
#resultado {
  float: left;
  /*margin: 8px auto 8px 4px;*/
  margin: 7px -3px 5px 8px;
  width: 25%;
  height: 30px;
  font-size: 16px;
  overflow: hidden;
  text-align: right;
  color: #48484D;
  /*padding: 4px;*/
  background-color: #fff;
  box-shadow: inset -1px -1px 4px 1px #eee;
}

.Teclas li {
  width: 50px;
  height: 30px;
  border-radius: 3px;
  color: #fff;
  background-color: #6C73FA;
  cursor: pointer;
  float: left;
  margin: 0px -3px 5px 8px;
  line-height: 30px;
  text-align: center;
  box-shadow: 0px 3px 1px 0px #444651;
}

.Teclas li:hover {
  background-color: #BEF9F0;
  color: #6C73FA;
  transition: 0.2s;
}

.Teclas li:active {
  box-shadow: 0px 1px 1px 0px #444651;
}

.verificar {
  width: 93.4% !important;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tarea 2.8 - Kepriel</title>
  <link type="text/css" href="css/estilos.css" rel="stylesheet">
</head>

<body onload="init()">
  <div id="Contenedor">
    <header class="Titulo">
      <h1>Calculadora</h1>
    </header>
    <section id="calculadora">
      <header class="top">
        <div id="OperA"></div>
        <div id="operac">+</div>
        <div id="OperB"></div>
        <div id="equal">=</div>
        <div id="resultado"></div>
      </header>
      <ul class="Teclas">
        <li></li>
        <li id="borradoParcial">DEL</li>
        <li id="reset">C</li>
        <li></li>
        <li id="siete">7</li>
        <li id="ocho">8</li>
        <li id="nueve">9</li>
        <li id="division">&frasl;</li>
        <li id="cuatro">4</li>
        <li id="cinco">5</li>
        <li id="seis">6</li>
        <li id="multiplicacion">*</li>
        <li id="uno">1</li>
        <li id="dos">2</li>
        <li id="tres">3</li>
        <li id="resta">-</li>
        <li id="cero">0</li>
        <li id="coma">.</li>
        <li id="suma">+</li>
        <li id="verificar">=</li>
      </ul>
    </section>
  </div>
  <script type="text/javascript" src="js/calculadora.js"></script>
</body>

</html>

Ahora para finalizar, a este enfoque que usé se le conoce como MVC o modelo vista controlador, no es la única forma, pero es un "Patrón de diseño estructural" (o en castellano común, "una solución común que se orienta en como organizar tu código").

Entre sus características podrás haber observado que a las variables que son esenciales y parte del problema se les conoce como datos o modelo de datos( así se les llama a veces cuando los pones en un objeto para no tener muchas variables sueltas ). A aquella parte que puede cambiar si cambia tu interfaz gráfica se le conoce como vista, es decir, no es lo que el usuario ve, sino una abstracción de lo que el usuario ve. Y el último componente, es el controlador, en esencia es loq ue hace que todo tenga sentido, que hace manipulaciones en el modelo de datos y finalmente actualiza la vista para que se vean reflejados los cambios mediante variables apra controlar estados.

Aquí es importante notar, en el modelo de datos las variables guardan información que por si sola no tiene sentido, es decir datos.

El controlador tiene variables que ayudan a darle sentido a los datos, por ejemplo en nuestro caso operadorPulsado nos permite saber si una tecla de función ya se pulsó.

Dependiendo de la complejidad de nuestro controlador, puedes separarlo en capas a tu conveniencia, para por ejemplo tener una capa de validaciones o "reglas de negocio" lo que nos lleva a las debilidades de este patrón de diseño.

Como la capa de controlador es la que hace toda la magia, la teoría de que podemos cambiar la interfaz ráfica, replazarla por otra y que el sistema siga funcionando depende de que tan "acoplada esté la implementación del controlador".

Lo anterior quiere decir que si en el código de nuestro controlador ponemos mezcladas en la misma operación variables de vista y variables de modelo nuestro código está acoplado y tendremos que revisar conciencudamente todo para adaptarlo a que si tenemos todo organizado de tal manera que el borrado de la vista y remplazo por una nueva sea algo inmediato.

Por ejemplo, supongamos que ahora decidimos volver a un único campo, notaremos como se incrementa la facilidad relativa del cambio con los siguientes códigos de menos a más respecto a su desacoplamiento:

// implementación no desacoplable, nunca podrás reutilizarla y un cambio por muy pequeño que sea te hará modificar todo el código
var teclas = document.querySelector(".Teclas");
var operador = true;
var operA = document.querySelector("#OperA");
var operB = document.querySelector("#OperB");
var operacion = document.querySelector("#operac");
var resultado = document.querySelector("#resultado");

// implementación demasiado acoplada, no se esperan cambios casi nunca, a lo mucho nuevas operaciones o un campo de memoria
function resetear() {
  resultado.textContent = "";
  operandoa = '';
  campoOperandoA.textContent = operandoa;
  operandob = '';
  campoOperandoB.textContent = operandob;
}

// implementación medianamente acoplada, se esperan cambios pero no drásticos, por ejemplo una versión de consola sin interfaz web
function resetear() {
  operandoa = '';
  operandob = '';
  resultado.textContent = "";
  campoOperandoA.textContent = operandoa;
  campoOperandoB.textContent = operandob;
}

// implementación desacoplada, se esperan cambios radicales, por ejemplo convertirlo en un microservicio de operaciones que responda en JSON y XML ( sí, se peuden tener varios tipos de vistas con el mismo modelo de datos al mismo tiempo )
function resetear() {
  resetearModelo();
  resetearVista();
}
function resetearModelo() {
  operandoa = '';
  operandob = '';
}
function resetearVista() {
  resultado.textContent = "";
  campoOperandoA.textContent = operandoa;
  campoOperandoB.textContent = operandob;
}

Si bien no era necesario que te explicara esto, lo hago porque en el mundo del desarrollo de software el cambio de requerimientos es una regla, no una excepción, y debes de hacer tu software pensando que va a sufrir modificaciones frecuentemente.

Actualización

Como puedes observar en el caso de la otra respuesta ni siquiera es desacoplable, lo que implica que si deseas por ejemplo pasar ese código a AngularJS o React reescribirlo desde cero te sería más rápido, ya no digamos convertirlo en un microservicio.

13
  • vale me sirvio, solo me falta modificar para que ponga las operaciones se pongan bien el 28 ene. 2019 a las 16:28
  • no sabria como hacer lo de las modificaciones me estoy perdiendo es que acabo de empezar a usar el javascript el 28 ene. 2019 a las 16:44
  • @VashLaEstampida aún no acabo, sigo editando... por favor regresa tu pregunta a su estado original el 28 ene. 2019 a las 16:47
  • ya esta vuelta a como estaba, perdona el 28 ene. 2019 a las 16:56
  • 1
    Terminado, espero te sea de ayuda a tí y a la comunidad. No soy desarrollador front end, así que seguramente podrías hallar mejores respuestas de expertos en diseño web o arquitectos de sistemas web. Incluso en mi campo de especialidad Big Data, aún no me considero totalmente al nivel de un arquitecto, así que no te conformes con mi respuesta aún hay mucho que aprender. el 29 ene. 2019 a las 6:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.