maddes/calculator.html

## calculator.html
<html>
<head>
  <title>Calculadora</title>
  <style>
    /* Modificar el tipo de cálculo de tamaños */
    * {
      box-sizing: border-box;
    }
    html, body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    body {
      display: flex;
      background: #e0e0e0;
    }
    #calculadora {
      margin: 3em;
      box-shadow: 0 3px 10px rgba(0,0,0,.5);
      flex: 1;
      background: white;
      display: flex;
      flex-direction: column;
      border-radius: 4px;
    }
    #display {
      padding: .5em;
      font-size: 2em;
      background: lightblue;
      border-radius: 4px 4px 0 0;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    #botonera {
      display: flex;
      flex: 5;
      flex-direction: column;
    }
    #botonera > div {
      flex: 1;
      display: flex;
      justify-content: center;
      border-bottom: 1px solid rgba(0,0,0,0.2);
    }
    #botonera > div:last-child {
      border-bottom: none;
    }
    #botonera > div > div {
      flex: 1;
      font-size: 2em;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid rgba(0,0,0,0.2);
    }
    #botonera > div > div.double {
      flex: 2;
    }
    #botonera > div > div:last-child {
      border-right: none;
    }
  </style>
</head>
<body>
  <div id="calculadora">
    <div id="display">
      0
    </div>
    <div id="botonera">
      <div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>÷</div>
      </div>
      <div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>&times;</div>
      </div>
      <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>–</div>
      </div>
      <div>
        <div>0</div>
        <div>.</div>
        <div>=</div>
        <div>+</div>
      </div>
    </div>
  </div>

  <script>
    // Variables auxiliares
    var status = 'result'
    var operand1
    var operand2
    var result
    var operation

    // Añadimos un listener a los botones para detectar cuando se los clickea
    [].forEach.call(document.querySelectorAll('#botonera > div > div'), function(div) {
      div.addEventListener("click", handleClick);
    });

    // Discriminamos los botones y ejecutamos la función correspondiente.
    function handleClick() {
      var character = this.innerText
      console.log('handleClick', character)
      switch (character) {
        case '0':
        case '1':
        case '2':
        case '3':
        case '4':
        case '4':
        case '5':
        case '6':
        case '7':
        case '8':
        case '9':
        case '.': numberClicked(character); break
        case '÷':
        case '×':
        case '–':
        case '+': operatorClicked(character); break
        case '=': equalClicked(character); break
      }
    }

    // Clickearon un botón !!!
    function numberClicked(number) {
      console.log('numberClicked', number)
      switch (status) {
        // Si estamos mostrando un resultado de una operación anterior
        case 'result':
          // Pasamos el status a ingreso de operand1
          status = 'operand1'
          // Si se clickeó el ., añadir un 0 a la izquierda
          if (number == '.') number = '0.'
          // Colocamos el numero ingresado en el operand1
          operand1 = number
          // Mostramos el operand1
          display(operand1)
          break
        // Si estamos mostrando el primer operando
        case 'operand1':
          // Si mostrábamos 0, lo quitamos
          if (operand1 === "0") operand1 = ""
          // Ignoramos '.' extras
          else if (number == '.' && operand1.indexOf('.') !== -1) return
          // Agregamos el número a la derecha
          operand1 += ""+number
          // Mostramos el operand1
          display(operand1)
          break
        case 'operand2':
          // Si mostrábamos 0, lo quitamos
          if (operand2 === "0") operand2 = ""
          // Ignoramos '.' extras
          else if (number == '.' && operand2.indexOf('.') !== -1) return
          // Agregamos el número a la derecha
          operand2 += ""+number
          // Mostramos el operand2
          display(operand2)
          break
      }
    }

    // Clickearon un operador !!!
    function operatorClicked(operator) {
      console.log('operatorClicked', operator)
      // Nos fijamos que estamos mostrando
      switch (status) {
        // Si estamos mostrando un resultado
        case 'result':
          // Lo pasamos al operand1
          operand1 = result
          // no break, se continua procesando el operand1
        // Si estamos mostrando el operand1
        case 'operand1':
          // Lo pasamos al operand1
          operation = operator
          // Pasamos el status a ingreso de operand2
          status = 'operand2'
          // Ponemos en 0 el operand2
          operand2 = "0"
          // Mostramos el operand2
          display(operand2)
          break
        // Si estamos mostrando el operador2
        case 'operand2':
          // Simulamos que apretó el =
          equalClicked()
          // Recalculamos la acción sobre el operador
          operatorClicked(operator)
          break
      }
    }
    function equalClicked() {
      console.log('equalClicked')
      // Nos fijamos que estamos mostrando
      switch (status) {
        // Si estamos mostrando un resultado
        case 'result':
          // Repetimos la operación con ambos operandos como el último resultado
          operand1 = result
          operand2 = result
          break
        // Si estamos mostrando el operand1
        case 'operand1':
          // Repetimos la operación con ambos operandos como el primero
          operand2 = operand1
          break
        // Si estamos mostrando el operador2
        case 'operand2':
          // Si el operador 2 es 0, simulamos la acción anterior
          if (operand2 === '0') {
            operand2 = operand1
          }
      }
      // Hell yeah!
      calculate()
    }

    function display(number) {
      console.log('display', number)
      // Tomamos el div de display y le encajamos un número viteh...
      document.getElementById('display').innerText = number
    }

    function calculate() {
      console.log('calculate', operand1, operation, operand2)
      // Nos fijamos que operación se solicitó
      switch (operation) {
        case '÷': result = parseFloat(operand1) / parseFloat(operand2); break
        case '×': result = parseFloat(operand1) * parseFloat(operand2); break
        case '–': result = parseFloat(operand1) - parseFloat(operand2); break
        case '+': result = parseFloat(operand1) + parseFloat(operand2); break
      }
      console.log('calculate result', result)
      // Mostramos resultado
      display(result)
      // Cambiamos el status
      status = 'result'
    }
  </script>
</body>
</html>
	<html>
	<head>
	<title>Calculadora</title>
	<style>
	/* Modificar el tipo de cálculo de tamaños */
	* {
	box-sizing: border-box;
	}
	html, body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}
	body {
	display: flex;
	background: #e0e0e0;
	}
	#calculadora {
	margin: 3em;
	box-shadow: 0 3px 10px rgba(0,0,0,.5);
	flex: 1;
	background: white;
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	}
	#display {
	padding: .5em;
	font-size: 2em;
	background: lightblue;
	border-radius: 4px 4px 0 0;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	}
	#botonera {
	display: flex;
	flex: 5;
	flex-direction: column;
	}
	#botonera > div {
	flex: 1;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	#botonera > div:last-child {
	border-bottom: none;
	}
	#botonera > div > div {
	flex: 1;
	font-size: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid rgba(0,0,0,0.2);
	}
	#botonera > div > div.double {
	flex: 2;
	}
	#botonera > div > div:last-child {
	border-right: none;
	}
	</style>
	</head>
	<body>
	<div id="calculadora">
	<div id="display">
	0
	</div>
	<div id="botonera">
	<div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>÷</div>
	</div>
	<div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>×</div>
	</div>
	<div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>–</div>
	</div>
	<div>
	<div>0</div>
	<div>.</div>
	<div>=</div>
	<div>+</div>
	</div>
	</div>
	</div>

	<script>
	// Variables auxiliares
	var status = 'result'
	var operand1
	var operand2
	var result
	var operation

	// Añadimos un listener a los botones para detectar cuando se los clickea
	[].forEach.call(document.querySelectorAll('#botonera > div > div'), function(div) {
	div.addEventListener("click", handleClick);
	});

	// Discriminamos los botones y ejecutamos la función correspondiente.
	function handleClick() {
	var character = this.innerText
	console.log('handleClick', character)
	switch (character) {
	case '0':
	case '1':
	case '2':
	case '3':
	case '4':
	case '4':
	case '5':
	case '6':
	case '7':
	case '8':
	case '9':
	case '.': numberClicked(character); break
	case '÷':
	case '×':
	case '–':
	case '+': operatorClicked(character); break
	case '=': equalClicked(character); break
	}
	}

	// Clickearon un botón !!!
	function numberClicked(number) {
	console.log('numberClicked', number)
	switch (status) {
	// Si estamos mostrando un resultado de una operación anterior
	case 'result':
	// Pasamos el status a ingreso de operand1
	status = 'operand1'
	// Si se clickeó el ., añadir un 0 a la izquierda
	if (number == '.') number = '0.'
	// Colocamos el numero ingresado en el operand1
	operand1 = number
	// Mostramos el operand1
	display(operand1)
	break
	// Si estamos mostrando el primer operando
	case 'operand1':
	// Si mostrábamos 0, lo quitamos
	if (operand1 === "0") operand1 = ""
	// Ignoramos '.' extras
	else if (number == '.' && operand1.indexOf('.') !== -1) return
	// Agregamos el número a la derecha
	operand1 += ""+number
	// Mostramos el operand1
	display(operand1)
	break
	case 'operand2':
	// Si mostrábamos 0, lo quitamos
	if (operand2 === "0") operand2 = ""
	// Ignoramos '.' extras
	else if (number == '.' && operand2.indexOf('.') !== -1) return
	// Agregamos el número a la derecha
	operand2 += ""+number
	// Mostramos el operand2
	display(operand2)
	break
	}
	}

	// Clickearon un operador !!!
	function operatorClicked(operator) {
	console.log('operatorClicked', operator)
	// Nos fijamos que estamos mostrando
	switch (status) {
	// Si estamos mostrando un resultado
	case 'result':
	// Lo pasamos al operand1
	operand1 = result
	// no break, se continua procesando el operand1
	// Si estamos mostrando el operand1
	case 'operand1':
	// Lo pasamos al operand1
	operation = operator
	// Pasamos el status a ingreso de operand2
	status = 'operand2'
	// Ponemos en 0 el operand2
	operand2 = "0"
	// Mostramos el operand2
	display(operand2)
	break
	// Si estamos mostrando el operador2
	case 'operand2':
	// Simulamos que apretó el =
	equalClicked()
	// Recalculamos la acción sobre el operador
	operatorClicked(operator)
	break
	}
	}
	function equalClicked() {
	console.log('equalClicked')
	// Nos fijamos que estamos mostrando
	switch (status) {
	// Si estamos mostrando un resultado
	case 'result':
	// Repetimos la operación con ambos operandos como el último resultado
	operand1 = result
	operand2 = result
	break
	// Si estamos mostrando el operand1
	case 'operand1':
	// Repetimos la operación con ambos operandos como el primero
	operand2 = operand1
	break
	// Si estamos mostrando el operador2
	case 'operand2':
	// Si el operador 2 es 0, simulamos la acción anterior
	if (operand2 === '0') {
	operand2 = operand1
	}
	}
	// Hell yeah!
	calculate()
	}

	function display(number) {
	console.log('display', number)
	// Tomamos el div de display y le encajamos un número viteh...
	document.getElementById('display').innerText = number
	}

	function calculate() {
	console.log('calculate', operand1, operation, operand2)
	// Nos fijamos que operación se solicitó
	switch (operation) {
	case '÷': result = parseFloat(operand1) / parseFloat(operand2); break
	case '×': result = parseFloat(operand1) * parseFloat(operand2); break
	case '–': result = parseFloat(operand1) - parseFloat(operand2); break
	case '+': result = parseFloat(operand1) + parseFloat(operand2); break
	}
	console.log('calculate result', result)
	// Mostramos resultado
	display(result)
	// Cambiamos el status
	status = 'result'
	}
	</script>
	</body>
	</html>