Created
July 20, 2012 07:03
-
-
Save johndavedecano/3149185 to your computer and use it in GitHub Desktop.
Simple JQUERY Calculator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Untitled Document</title> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function(e) { | |
| $('#1,#2,#3,#4,#5,#6,#7,#8,#9,#0').click(function(){ | |
| var v = $(this).val(); | |
| $('#answer').val($('#answer').val() + v); | |
| }); | |
| $('#C').click(function(){ | |
| $('#answer').val(''); | |
| $('#operation').val(''); | |
| $('#operation').removeClass('activeAnswer'); | |
| $('#equals').attr('onclick',''); | |
| }); | |
| $('#plus').click(function(e) { | |
| if($('#answer').val() == ''){ | |
| return false; | |
| $('#equals').attr('onclick',''); | |
| } | |
| else if ( $('#operation').attr('class') == 'activeAnswer') { | |
| $('#operation').val( $('#operation').val() + $('#plus').val() ); | |
| $('#answer').val(''); | |
| $('#equals').attr('onclick',''); | |
| } | |
| else{ | |
| $('#operation').val( $('#operation').val() + $('#answer').val() + $('#plus').val() ); | |
| $('#answer').val(''); | |
| $('#equals').attr('onclick',''); | |
| } | |
| }); | |
| $('#subtract').click(function(e) { | |
| if($('#answer').val() == ''){ | |
| return false; | |
| $('#equals').attr('onclick',''); | |
| } | |
| else if ( $('#operation').attr('class') == 'activeAnswer') { | |
| $('#operation').val( $('#operation').val() + $('#subtract').val() ); | |
| $('#answer').val(''); | |
| $('#equals').attr('onclick',''); | |
| } | |
| else{ | |
| $('#operation').val( $('#operation').val() + $('#answer').val() + $('#subtract').val() ); | |
| $('#answer').val(''); | |
| $('#equals').attr('onclick',''); | |
| } | |
| }); | |
| $('#divide').click(function(e) { | |
| if($('#answer').val() == ''){ | |
| return false; | |
| $('#equals').attr('onclick',''); | |
| } | |
| else if ( $('#operation').attr('class') == 'activeAnswer') { | |
| $('#operation').val( $('#operation').val() + $('#divide').val() ); | |
| $('#answer').val(''); | |
| $('#equals').attr('onclick',''); | |
| } | |
| else{ | |
| $('#operation').val( $('#operation').val() + $('#answer').val() + $('#divide').val() ); | |
| $('#answer').val(''); | |
| $('#equals').attr('onclick',''); | |
| } | |
| }); | |
| $('#product').click(function(e) { | |
| if($('#answer').val() == ''){ | |
| return false; | |
| $('#equals').attr('onclick',''); | |
| } | |
| else if ( $('#operation').attr('class') == 'activeAnswer') { | |
| $('#operation').val( $('#operation').val() + $('#product').val() ); | |
| $('#answer').val(''); | |
| $('#equals').attr('onclick',''); | |
| } | |
| else{ | |
| $('#operation').val( $('#operation').val() + $('#answer').val() + $('#product').val() ); | |
| $('#answer').val(''); | |
| $('#equals').attr('onclick',''); | |
| } | |
| }); | |
| $('#equals').click(function(){ | |
| if($('#equals').attr('onclick') != 'return false'){ | |
| var a = $('#answer').val(); | |
| var b = $('#operation').val(); | |
| var c = b.concat(a); | |
| $('#answer').val(eval(c)); | |
| $('#operation').val(eval(c)); | |
| $('#operation').addClass('activeAnswer'); | |
| $('#equals').attr('onclick','return false'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| form,input,button { margin:0px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="width:200px; margin:auto;"> | |
| <form action="" id="calculator"> | |
| <input type="hidden" id="operation" value=""/> | |
| <input type="text" id="answer" value="" style="width:98%; height:35px;" disabled="disabled"/> | |
| <input type="button" value="+" id="plus" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="-" id="subtract" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="/" id="divide" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="*" id="product" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="1" id="1" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="2" id="2" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="3" id="3" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="4" id="4" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="5" id="5" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="6" id="6" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="7" id="7" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="8" id="8" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="9" id="9" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="0" id="0" style="width:50px; height:50px; float:left;"/> | |
| <input type="button" value="C" id="C" style="width:50px; height:50px; float:left; color:red;"/> | |
| <input type="button" value="=" id="equals" style="width:50px; height:50px; float:left;"/> | |
| </form> | |
| <div style="clear:both;"></div> | |
| </div> | |
| </body> | |
| </html> |
please explain the class "active answer"
Can you explain the activeAnswer. Where did it come from?
This is giving a lot of erroneous reuslts - try 0123 *1 - gives me 83 !!
Plus the code returns False on line 39 and the next line is never evaluated.
hello "quakig" put this code in document.ready function().This code will get the first digit that you entered and then check if that digit is 0 then it will not print anything in the textbox else it will print if it is other than zero in the first digit :
$(document).ready(function (e) {
$('#1,#2,#3,#4,#5,#6,#7,#8,#9,#0').click(function () {
var v = $(this).val();
var myString = $('#answer').val($('#answer').val() + v);
var res = myString.val().charAt(0);
if (res == 0) {
myString.val("");
}
else {
myString.val();
}
});
the activeAnswer class is added to the 'hidden' input element (with id: operation) to check when there is a value in it waiting for an evaluation. say you click '234' and click an operator, the program will check to be sure that there is a '234' to be worked, if you only clicked an operator, it won't evaluate because the class is not activeAnswer, rather it will toggle with the sign of the value (in case of minus for negative value).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
would you plz explain what the class "activeAnswer" is ?