Created
July 20, 2012 07:03
-
-
Save johndavedecano/3149185 to your computer and use it in GitHub Desktop.
Simple JQUERY Calculator
This file contains hidden or 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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).