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


Extreme Recommended:- Like our Facebook Page or Join our Facebook Group and Google plus Community for up-to-date. If you have any Query or Question you can ask in the group, I will Try To Solve your Query and try to answers of your Questions withing 24 Hours, You can also Email me or comment below Please suggest to your Friends to join and like our page and don't forget to Subscribe. Enter your Email and click to subscribe.

Ghanendra Yadav

Ghanendra Yadav

Hello, I Am Ghanendra Yadav Owner of This Blog, I am professional Blogger and Programmer. I Love Programming, Logo Making, And Banner Designing. My Highest Qualification is MCA From NIT Warangal. You Can Find Me On Social Media Through Below Link And If You Have Any Query Related To Programming And Other Subject Comment Below or You Can Mail Me I Will Try To Answer Within 24 Hours Email:- yghanendra@student.nitw.ac.in

Find me on Social Media

Facebook | Twitter | Google+ | RSS Feed

No comments:

Post a Comment