Creating a Simple Calculator with Jquery with CSS

This is a simple calculator in Jquery and CSS(Cascading Style Sheets). It allows mostly tasks such as Addition, Subtraction, Multiplication, and Division with help of Jquery and CSS. Please follow the given step to create a calculator using jquery.

How to use it:

1. Copy the code into one folder with giving a different -2 name and at the end run the index.html file your code will be work 100% here is a step by step explanation.

first, open a notepad and any other editor which you are using mostly and save the given code as index.html.

Simple Calculator using Jquery and CSS.

Code Start From Here. This is a main Index file for Calculator.

Index.html

<!DOCTYPE html>
<html>
<head>
<title>jQuery Calculator Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="calculator.js"></script>
</head>

<body>
<div id="jquery-script-menu">
<script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div class="jquery-script-clear"></div>
<h1 style="margin:150px auto 20px auto" align="center">jQuery Calculator Example</h1>
<section class="container">
<div class="calculator">
<input type="text" readonly>
<div class="row">
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key last">0</div>
</div>
<div class="row">
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key last action instant">cl</div>
</div>
<div class="row">
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key last action instant">=</div>
</div>
<div class="row">
<div class="key action">+</div>
<div class="key action">-</div>
<div class="key action">x</div>
<div class="key last action">/</div>
</div>
</div>
</section>
<footer class="container">
<h1>A Simple Calculator by Ghanendra Yadav For More<a href="https://www.programmingwithbasics.com/">Click Here</a></h1>
</footer>
<script type="text/javascript">
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>

Now Open Again Editor And Save Given Code As calculator.js Code Start From Here. This is a Javascript file for Calculator.

calculator.js

$(document).ready(function(){
//Dom is ready to let's get the fun started.
var Calculator = {
runningTotal : '',
currentVal : '',
setCurrentVal: false,
executeAction: '',
display: '',
adjustTotals: function(val){
if (!this.setCurrentVal) {
//If this is the first number user has entered then it becomes runningTotal
//Otherwise it becomes currentVal which will then be used to update runningTotal based on the action picked
this.runningTotal += val;
} else {
//Val is a string so we can append to currentVal for multiple digits
this.currentVal += val;
};
},
add: function(){
this.runningTotal = parseInt(this.runningTotal) + parseInt(this.currentVal);
},
subtract: function() {
this.runningTotal = parseInt(this.runningTotal) - parseInt(this.currentVal);
},
multiply: function(){
this.runningTotal = parseInt(this.runningTotal) * parseInt(this.currentVal);
},
divide: function(){
this.runningTotal = parseInt(this.runningTotal) / parseInt(this.currentVal);
},
clear: function(){
this.runningTotal = '';
this.currentVal = '';
this.executeAction = '';
this.setCurrentVal = false;
this.display = '';
},
resetCurrentVal: function (){
this.currentVal = '';
},

calculate: function(){
this.executeAction = '';
this.currentVal = '';
return this.runningTotal;
},
getAction: function(val){
var method = '';
switch (val) {
case '+':
method = Calculator.add;
break;
case '-':
method = Calculator.subtract;
break;
case 'x':
method = Calculator.multiply;
break;
case '/':
method = Calculator.divide;
break;
}
return method;
},
setDisplay: function(){
return this.display = this.currentVal == '' ? this.runningTotal : this.currentVal;
}
};
var onButtonPress = function (){
var that = $(this),
action = that.hasClass('action'),
instant = that.hasClass('instant'),
val = that.text();
if (!action) {
//No action means the button pressed is a number, not an "action"
Calculator.adjustTotals(val);
} else if(!instant) {
//An action button was pressed. Store the action so it can be executed later
if (Calculator.executeAction != ''){
Calculator.executeAction();
};
Calculator.executeAction = Calculator.getAction(val);
Calculator.setCurrentVal = true;
Calculator.resetCurrentVal();
} else {
//Either = or Clr is clicked. this needs immediate action.
if (Calculator.executeAction != ''){
Calculator.executeAction();
};
switch (val){
case 'cl':
method = Calculator.clear();
break;
case '=':
method = Calculator.calculate();
break;
}
}
Calculator.setDisplay();
}
var refreshVal = function(){
$('.calculator input[type=text]').val(Calculator.display);
}
$('div.key').click(function(){
//We want this to stay as div.keyin the onButtonPress function
onButtonPress.call(this);
refreshVal();
});
});

Now Open Again Editor And Save As main.css, This is a main CSS file for Calculator.

main.css

*,
*:after,
*:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
*:before, *:after {
display: table-cell;
content: '';
}
*:after{
clear: both;
}
body{
font-family: Helvetica, Arial, sans-serif;
}
.container {
margin: 0 auto;
width: 350px;
}
.calculator {
padding: 10px;
margin-top: 20px;
background-color: #ccc;
border-radius: 5px;
/*this is to remove space between divs that are inline-block*/
font-size: 0;
}
.calculator > input[type=text] {
width: 100%;
height: 50px;
border: none;
background-color: #eee;
text-align: right;
font-size: 30px;
padding-right: 10px;
}
.calculator .row {
margin-top: 10px;
}
.calculator .key {
width: 78.7px;
display: inline-block;
background-color: black;
color: white;
font-size: 1rem;
margin-right: 5px;
border-radius: 5px;
height: 50px;
line-height: 50px;
text-align: center;
}
.calculator .key:hover{
cursor: pointer;
}
.key.last{
margin-right: 0px;
}
.key.action {
background-color: #646060;
}
footer {
font-style: italic;
padding-top: 35px;
text-align: center;
font-size: 10px;
}
h1, h3, h4, h5, p {
margin-bottom: 30px;
}

Now Again Follow the Same Step And Save As reset.css, This is a reset CSS file for Calculator.

reset.css

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

Now you complete all the steps now open index.html your program is working with your compatible browser here is a output if you want more program Click Here

Output:-

Addition Output:-

Input =12345+12345=24690