Calculadora con JQuery desde Cero

¿Necesitas aprender a crear una calculadora con jQuery? El dia de hoy vamos rápidamente a hacer uso de nuestras habilidades con HTML, CSS y JQuery para crear una calculadora con operaciones básicas como son sumar, restar, multiplicar y dividir. Este ejemplo es perfecto para cualquier estudiante que recien esta aprendiendo desarrollo web!

Anteriormente ya habiamos hablado de varios tutoriales de jQuery en el blog, por ejemplo habiamos visto como crear un sistema de ventanas con jQuery, el dia de hoy vamos a realizar un pequeño y sencillo ejemplo de como crear una calculadora con jQuery desde Cero pues muchas personas me han solicitado realizar esto para el blog.

Antes de comenzar decirte que es un ejemplo sencillo y aunque es completamente funcional si requieres una calculadora más avanzada deberás seguir tu mismo con el desarrollo de este proyecto, también falta atrapar errores comunes en estos ejemplos como puede ser la division entre cero.

Se utilizó HTML para el etiquetado y la estructura de la calculadora, CSS para el estilo de la misma y la funcionalidad es dada por el código Javascript y jQuery.

Para la estructura HTML se utilizó como base una tabla logrando la estetica básica y con CSS unicamente dar los ultimos ajustes de estilo.

La funcionalidad se logra mediante tres variables principales: una que almacena el operandoA al presionar el boton de operación, otra que almacena el tipo de operación justo en el mismo momento cuando se almacena el operandoA, el operandoB se guarda al presionar el boton de igual y en este mismo momento se manda llamar la función resolver.

Al momento de llamar a la función resolver se cuenta ya con operandoA, operandoB y operación por lo que únicamente se calcula el resultado.

La calculadora con jQuery resultante es visualmente igual a esta:

calculadora con jquery ejemplo

Sientete libre de cambiar la apariencia y funcionalidad de la misma.

El codigo HTML es el siguiente:

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

<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 JonathanMelgoza.com</span></td>
</tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="funcionalidadJQ.js"></script>
</body>
</html>

El estilo viene en la siguiente hoja de estilo:

.calculadora{
	display:block;
	margin:0 auto;
	padding:20px;
	background-color:#DC4C46;
	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;
}

La funcionalidad principal de la calculadora viene dada por el siguiente codigo:

//
var operandoa;
var operandob;
var operacion;

$(document).ready(function(){
	$("#uno").on("click",function(){
		$("#resultado").append("1");
	});
	$("#dos").on("click",function(){
		$("#resultado").append("2");
	});
	$("#tres").on("click",function(){
		$("#resultado").append("3");
	});
	$("#cuatro").on("click",function(){
		$("#resultado").append("4");
	});
	$("#cinco").on("click",function(){
		$("#resultado").append("5");
	});
	$("#seis").on("click",function(){
		$("#resultado").append("6");
	});
	$("#siete").on("click",function(){
		$("#resultado").append("7");
	});
	$("#ocho").on("click",function(){
		$("#resultado").append("8");
	});
	$("#nueve").on("click",function(){
		$("#resultado").append("9");
	});
	$("#cero").on("click",function(){
		$("#resultado").append("0");
	});

	$("#reset").on("click",function(){
		resetear();
	});
	$("#suma").on("click",function(){
		operandoa = $("#resultado").html();
  		operacion = "+";
  		limpiar();
	});
	$("#resta").on("click",function(){
		operandoa = $("#resultado").html();
  		operacion = "-";
  		limpiar();
	});
	$("#multiplicacion").on("click",function(){
		operandoa = $("#resultado").html();
  		operacion = "*";
  		limpiar();
	});
	$("#division").on("click",function(){
		operandoa = $("#resultado").html();
  		operacion = "/";
  		limpiar();
	});
	$("#igual").on("click",function(){
		operandob = $("#resultado").html();
  		resolver();
	});
});

//Operaciones
function limpiar(){
	$("#resultado").html("");
}

function resetear(){
	$("#resultado").html("");
	operandoa = 0;
	operandob = 0;
	operacion = "";
}

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").html(res);
}

Como vez el ejemplo no es tan complicado y en 20 minutos deberás tener tu calculadora funcionando a la perfección!

Puedes ver un tutorial para crear esta misma calculadora con javascript puro en el blog de Denisse Estrada o puedes ver el siguiente video.