calculator

Browse more Jquery Examples
<!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:#5F9EA0;
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:#FFDAB9;
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>
calculator

Follow

Newsletter
