Calculadora con JavaScript – Código fuente

calculadora con javascript
by Denisse Estradain Desarrollo web

Que tal, hoy realizaremos un pequeño ejemplo para aprender como hacer una calculadora con JavaScript, html y css desde cero, te muestro el código fuente necesario que ocuparemos y te explico la funcionalidad.

La calculadora que realizamos en esta entrada te permite ejecutar las cuatro operaciones básicas que son: sumar, restar, multiplicar y dividir, adicionalmente incluimos un botón para resetear los resultados en caso de querer realizar una nueva operación.

Código html

Dentro de nuestro html creamos la estructura que tendrá nuestra calculadora, lo hacemos mediante una tabla en la cual vamos agregando elementos tipo button para los números y operadores, y un elemento tipo span para mostrar el resultado de las operaciones.

Es importante incluir dentro de la etiqueta body el atributo onload=”init()” para indicarle que una vez que acabe de cargar la página mande llamar el método init que declararemos en el código javascript.

No olvidemos incluir nuestro archivo .css y .js que crearemos más adelante.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculadora con JavaScript</title>
<link type="text/css" href="estilo.css" rel="stylesheet">
</head>
<body onload="init();">

<table class="calculadora">
<tr>
  <td colspan="4"><span id="resultado"></span></td>
</tr>
<tr>
  <td><button id="siete">7</button></td><td><button id="ocho">8</button></td><td><button id="nueve">9</button></td><td><button id="division">/</button></td>
</tr>
<tr>
  <td><button id="cuatro">4</button></td><td><button id="cinco">5</button></td><td><button id="seis">6</button></td><td><button id="multiplicacion">*</button></td>
</tr>
<tr>
  <td><button id="uno">1</button></td><td><button id="dos">2</button></td><td><button id="tres">3</button></td><td><button id="resta">-</button></td>
</tr>
<tr>
  <td><button id="igual">=</button></td><td><button id="reset">C</button></td><td><button id="cero">0</button></td><td><button id="suma">+</button></td>
</tr>
<tr>
  <td colspan="4"><span id="creditos">Hecho para DenisseEstrada.com</span></td>
</tr>
</table>

<script src="funcionalidad.js"></script>
</body>
</html>

Código css

En el css simplemente damos un mejor estilo y diseño a nuestra calculadora.

.calculadora{
  display:block;
  margin:0 auto;
  padding:20px;
  background-color:#2980b9;
  width:300px;
  height:500px;
  border-radius: 25px;
}
.calculadora td button{
  display:block;
  width:70px;
  height: 70px;
  font-size: 25px;
}
#creditos{
  display:block;
  padding-top:20px;
  color:#fff;
  text-align: center;
  width:300px;
}
#resultado{
  display:block;
  text-align: center;
  font-size: 40px;
  margin-bottom: 50px;
  width:300px;
  height: 100px;
  line-height: 100px;
  background-color:#fff;
  border-radius: 25px;
  overflow-y: scroll;
}

Código JavaScript

Ahora veamos el código para hacer esta calculadora con javascript, comenzamos declarando tres variables que ocuparemos más adelante para poder realizar las operaciones.

//Declaramos variables
var operandoa;
var operandob;
var operacion;

Enseguida creamos nuestra función init e iniciamos convirtiéndonos en los elementos html por medio de su id y los guardamos en sus respectivas variables para hacer más legible el ejemplo.

function init(){
  //variables
  var resultado = document.getElementById('resultado');
  var reset = document.getElementById('reset');
  var suma = document.getElementById('suma');
  var resta = document.getElementById('resta');
  var multiplicacion = document.getElementById('multiplicacion');
  var division = document.getElementById('division');
  var igual = document.getElementById('igual');
  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');
}

Dentro de la misma función init nos encargaremos de programar los eventos de click sobre todos los elementos tipo button  que son números, operaciones, igual y reset.

//Eventos de click
  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";
  }
  reset.onclick = function(e){
  		resetear();
  }
  suma.onclick = function(e){
  		operandoa = resultado.textContent;
  		operacion = "+";
  		limpiar();
  }
  resta.onclick = function(e){
  		operandoa = resultado.textContent;
  		operacion = "-";
  		limpiar();
  }
  multiplicacion.onclick = function(e){
  		operandoa = resultado.textContent;
  		operacion = "*";
  		limpiar();
  }
  division.onclick = function(e){
  		operandoa = resultado.textContent;
  		operacion = "/";
  		limpiar();
  }
  igual.onclick = function(e){
  		operandob = resultado.textContent;
  		resolver();
  }

Dentro de este bloque hacemos referencia a dos funciones, limpiar y resetear que crearemos más adelante.

Para los eventos de suma, resta, multiplicación y división siempre guardamos en la variable operandoa lo que tenemos en el contenedor resultado y la operación que se desea realizar.

Para el botón de igual almacenamos en operandob lo que hay en el contenedor de resultado y mandamos llamar el metodo resolver el cual te explico más adelante.

Enseguida creamos la función limpiar donde simplemente ponemos en vacío el contenedor de resultado y también creamos la función resetear para resetear las variables operandoa, operandob y operacion.

function limpiar(){
  resultado.textContent = "";
}

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

Finalmente creamos la función resolver, de acuerdo a los valores que se han ingresado realizamos la operación necesaria y mostramos el resultado en el contenedor de resultado.

function resolver(){
  var res = 0;
  switch(operacion){
    case "+":
      res = parseFloat(operandoa) + parseFloat(operandob);
      break;

    case "-":
        res = parseFloat(operandoa) - parseFloat(operandob);
        break;

    case "*":
      res = parseFloat(operandoa) * parseFloat(operandob);
      break;

    case "/":
      res = parseFloat(operandoa) / parseFloat(operandob);
      break;
  }
  resetear();
  resultado.textContent = res;
}

Puedes descargar el código fuente de este ejemplo en el siguiente enlace:

¡Comparte para acceder al contenido!image/svg+xml
Gracias por compartir este post en tu red social favorita.
ShareTweet

De esta forma concluimos este pequeño ejemplo donde aprendimos como hacer una calculadora con javascript, posiblemente también te interese aprender como crear un slider fácil con JQuery.

No olvides compartir esta entrada con tus amigos si te ha parecido interesante, saludos!

31 thoughts on “Calculadora con JavaScript – Código fuente”

  14. Muchas gracias por su grandiosa aportación. En lo personal su modelo de calculadora básica me esta siendo muy útil como base en la construcción de una calculadora personalizada de acuerdo a mis necesidades laborales. Ojala el tiempo recompense su esfuerzo y trabajo.

    Responder

  19. Gracias por compartir tus enseñanzas y tu tiempo, que se oro. Aunque no sirve el enlace de descarga. De todas maneras, buena suerte con tus proyectos.

    Responder

  20. Hola, que buen trabajo,
    se me ocurrio la idea de guardar la ultima operacion que el usuario coloque. como se podria guardar con un localStorage?? y que aparezca en consola.

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *