Projavatricks: How To Create Calculator In Web Page Using JQuery

In this article we show you how to create simple calculator using jquery.This calculator is created with basic code such as if-else ladder and switches to show you how to perform basic operation in a webpages.Thank you enjoy the post and give your feed back.

CODE:

<!DOCTYPE html>
<!DOCTYPE html>

<html lang="en">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
var prev="";
var a=0,b=0;
$("button").click(function() {

var num = $(this).text();

if(num=="+")
{
a = parseInt($("#screen").text());
op="+";
$("#screen").text("0");
prev="";
}
else if(num=="C")
{
$("#screen").text("0");
}
else if(num=="-")
{
a = parseInt($("#screen").text());
op="-";

$("#screen").text("0");
prev="";
}
else if(num=="*")
{
a = parseInt($("#screen").text());
op="*";

$("#screen").text("0");
prev="";
}
else if(num=="/")
{
a = parseInt($("#screen").text());
op="/";

$("#screen").text("0");
prev="";
}

else if(num=="=")
{
b = parseInt($("#screen").text());

switch (op) {
case "+":
var ans=a+b;
$("#screen").text("");
prev="";
$("#screen").text(ans);
break;
case "-":
var ans=a-b;
$("#screen").text("");
prev="";
$("#screen").text(ans);
break;
case "*":
var ans=a*b;
$("#screen").text("");
prev="";
$("#screen").text(ans);
break;
case "/":
var ans=a/b;
$("#screen").text("");
prev="";
$("#screen").text(ans);
break;
default:
text = "Looking forward to the Weekend";
} 
}
else
{
$("#screen").text(prev+num);

prev = $("#screen").text();
}
});
});
</script>
</head>

<!-- Styles -->
<style>
#screen{
background-color: #f0f0f5;
height:30px;
text-align: right;
font-family:arial;
font-weight:bold;

font-size:30px; 
}
#wrapper{
font-family:arial;
font-weight:bold;
width:230px;
height:350px;
background-color:#b3b3cc;
border:2px solid gray;
border-radius: 5px;

}
button {
font-family:arial;
font-weight:bold;
font-size:20px; 
display: inline-block;
width:50px;  
height:30px;
margin:10px;

} 
#zero{
width:120px;
margin-left:40px;
}

</style>
<body>
<div id="wrapper">

<div id="screen">
0</div>
<div id="pad">
 <button>1</button><button>2</button><button>3</button><button>4</button><button>5</button>
 <button>6</button><button>7</button><button>8</button><button>9</button>
 <button>+</button>
 <button>-</button>
 <button>*</button>
 <button>/</button>
<button>C</button>
 <button>=</button>
<button id="zero">0</button>   

</div>
<div class="reset">
</div>
</div>
</body>
</html>

Projavatricks

Sunday, 6 December 2015

How To Create Calculator In Web Page Using JQuery

CODE:

Live Demo

1 comment: