Saturday, 30 April 2016

Creating A Simple Calculator with jQuery With CSS

How to use it: 

1. Copy The Code Into One Folder With Give 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 Mostally  And Save The Given Code As  index.html 

Code Start From Here 

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="http://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 

calculator.js

$(document).ready(function(){
//Dom is ready lets 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) { 
//A action button was pressed. Store the action so it can be executed lator
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

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 Same Step And Save As reset.css

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

www.programmingwithbasics.com
Subtraction Output:-  
                                        24690-12345=12345

www.programmingwithbasics.com
Multiply Output:-
                                         12345*10=123450

www.programmingwithbasics.com
Devide Output:-
                                       123450/100=1234.5

www.programmingwithbasics.com
What Happened If We Devided 0/0=NaN (Not A Number ) 
www.programmingwithbasics.com


No comments:
Write comments

Recommended Posts × +