Post
Ask Question

Creating a JQuery Calculator

  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head runat="server">  
  4.         <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>  
  5.         <link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calc.css" />  
  6.         <title>JqCalculator</title>  
  7.     </head>  
  8.     <body>  
  9.         <div style="width:200px;" class="main">  
  10.             <center>JqCalculator</center>  
  11.             <form name="calce" action="" id="calculator">  
  12.                 <input type="hidden" id="operation" value=""/>  
  13.                 <input type="text" id="text"   
  14. style="width:98%; height:35px; text-align:right; background-color: #000000; color: #FFFFFF;" readonly="readonly"/>  
  15.                 <input type="text" id="answer" name="tex" value="0" style="width:98%; height:35px; text-align:right;" readonly="readonly"/>  
  16.                 <input type="button" value="Back Sapce" id="bac" class="op" style="width:100px; height:50px; float:left; color:red;"/>  
  17.                 <input type="button" value="C" id="C" class="op" style="width:50px; height:50px; float:left; color:red;"/>  
  18.                 <input type="button" value="/" id="divide" class="op" style="width:50px; height:50px; float:left;"/>  
  19.                 <input type="button" value="7" id="7" class="no" style="width:50px; height:50px; float:left;"/>  
  20.                 <input type="button" value="8" id="8" class="no" style="width:50px; height:50px; float:left;"/>  
  21.                 <input type="button" value="9" id="9" class="no" style="width:50px; height:50px; float:left;"/>  
  22.                 <input type="button" value="*" id="product" class="op" style="width:50px; height:50px; float:left;"/>  
  23.                 <input type="button" value="4" id="4" class="no" style="width:50px; height:50px; float:left;"/>  
  24.                 <input type="button" value="5" id="5" class="no" style="width:50px; height:50px; float:left;"/>  
  25.                 <input type="button" value="6" id="6" class="no" style="width:50px; height:50px; float:left;"/>  
  26.                 <br />  
  27.                 <input type="button" value="-" id="subtract" class="op" style="width:50px; height:50px; float:left;"/>  
  28.                 <input type="button" value="1" id="1" class="no" style="width:50px; height:50px; float:left;"/>  
  29.                 <input type="button" value="2" id="2" class="no" style="width:50px; height:50px; float:left;"/>  
  30.                 <input type="button" value="3" id="3" class="no" style="width:50px; height:50px; float:left;"/>  
  31.                 <input type="button" value="+" id="plus" class="op" style="width:50px; height:50px; float:left;"/>  
  32.                 <input type="button" value="0" id="0" class="no" style="width:50px; height:50px; float:left;"/>  
  33.                 <input type="button" value="." id="." class="no" style="width:50px; height:50px; float:left;"/>  
  34.                 <input type="button" value="=" id="equals" class="op" style="width:100px; height:50px; float:left;"/>  
  35.             </form>  
  36.             <div style="clear:both;"></div>  
  37.         </div>  
  38.     </body>  
  39. </html>  
  1. < script type = "text/javascript" > $(document).ready(function(e) {  
  2.     $('.no').click(function() {  
  3.         var v = 0;  
  4.         v = $(this).val();  
  5.         if ($("#answer").val() == 0) {  
  6.             $("#answer").val('');  
  7.         }  
  8.         $('#answer').val($('#answer').val() + v);  
  9.     });  
  10.     $('#C').click(function() {  
  11.         $('#answer').val(0);  
  12.         $('#operation').val('');  
  13.         $('#operation').removeClass('activeAnswer');  
  14.         $('#equals').attr('onclick', '');  
  15.         $("#text").val('');  
  16.         $("#bac").removeAttr('disabled');  
  17.   
  18.   
  19.     });  
  20.     $('#plus').click(function(e) {  
  21.         var out = $("#answer").val();  
  22.         var plu = $("#plus").val();  
  23.         $("#text").val($("#text").val() + out + plu);  
  24.         if ($('#answer').val() == '') {  
  25.             return false;  
  26.             $('#equals').attr('onclick', '');  
  27.         } else if ($('#operation').attr('class') == 'activeAnswer') {  
  28.             $('#operation').val($('#operation').val() + $('#plus').val());  
  29.             // $('#answer').val('');  
  30.             //$('#equals').attr('onclick', '');  
  31.         } else {  
  32.             $('#operation').val($('#operation').val() + $('#answer').val() + $('#plus').val());  
  33.             $('#answer').val('');  
  34.             $('#equals').attr('onclick', '');  
  35.             $('#bac').attr('disabled', 'disabled');  
  36.         }  
  37.     });  
  38.     $('#subtract').click(function(e) {  
  39.         var out = $("#answer").val();  
  40.         var sub = $("#subtract").val();  
  41.         $("#text").val($("#text").val() + out + sub);  
  42.         if ($('#answer').val() == '') {  
  43.             return false;  
  44.             $('#equals').attr('onclick', '');  
  45.         } else if ($('#operation').attr('class') == 'activeAnswer') {  
  46.             $('#operation').val($('#operation').val() + $('#subtract').val());  
  47.             $('#answer').val('');  
  48.             $('#equals').attr('onclick', '');  
  49.         } else {  
  50.             $('#operation').val($('#operation').val() + $('#answer').val() + $('#subtract').val());  
  51.             $('#answer').val('');  
  52.             $('#equals').attr('onclick', '');  
  53.             $('#bac').attr('disabled', 'disabled');  
  54.         }  
  55.     });  
  56.     $('#divide').click(function(e) {  
  57.         var out = $("#answer").val();  
  58.         var div = $("#divide").val();  
  59.         $("#text").val($("#text").val() + out + div);  
  60.         if ($('#answer').val() == '') {  
  61.             return false;  
  62.             $('#equals').attr('onclick', '');  
  63.         } else if ($('#operation').attr('class') == 'activeAnswer') {  
  64.             $('#operation').val($('#operation').val() + $('#divide').val());  
  65.             $('#answer').val('');  
  66.             $('#equals').attr('onclick', '');  
  67.         } else {  
  68.             $('#operation').val($('#operation').val() + $('#answer').val() + $('#divide').val());  
  69.             $('#answer').val('');  
  70.             $('#equals').attr('onclick', '');  
  71.             $('#bac').attr('disabled', 'disabled');  
  72.         }  
  73.     });  
  74.     $('#product').click(function(e) {  
  75.         var out = $("#answer").val();  
  76.         var pro = $("#product").val();  
  77.         $("#text").val($("#text").val() + out + pro);  
  78.         if ($('#answer').val() == '') {  
  79.             return false;  
  80.             $('#equals').attr('onclick', '');  
  81.         } else if ($('#operation').attr('class') == 'activeAnswer') {  
  82.             $('#operation').val($('#operation').val() + $('#product').val());  
  83.             $('#answer').val('');  
  84.             $('#equals').attr('onclick', '');  
  85.         } else {  
  86.             $('#operation').val($('#operation').val() + $('#answer').val() + $('#product').val());  
  87.             $('#answer').val('');  
  88.             $('#equals').attr('onclick', '');  
  89.             $('#bac').attr('disabled', 'disabled');  
  90.         }  
  91.     });  
  92.     $('#equals').click(function() {  
  93.         $("#text").val('');  
  94.         if ($('#equals').attr('onclick') != 'return false') {  
  95.             var a = $('#answer').val();  
  96.             var b = $('#operation').val();  
  97.             var c = b.concat(a);  
  98.             $('#answer').val(eval(c));  
  99.             $('#operation').val(eval(c));  
  100.             $('#operation').addClass('activeAnswer');  
  101.             $('#equals').attr('onclick', 'return false');  
  102.             $("#text").val('');  
  103.   
  104.   
  105.         }  
  106.     });  
  107.     calce.tex.value != ""  
  108.     $("#bac").click(function() {  
  109.         $("#text").val('');  
  110.         if ($("#answer").val() != "") {  
  111.             document.calce.tex.value = document.calce.tex.value.substring(0, document.calce.tex.value.length * 1 - 1);  
  112.             //$("#answer").val($("#answer").val()String(0,$("#answer").val().length * -1));  
  113.   
  114.         } else {  
  115.             $("#answer").val(0);  
  116.         }  
  117.     });  
  118.     $(".no,.op").mouseover(function() {  
  119.         $(this).css({  
  120.             "background-color": "#FF99CC"  
  121.         });  
  122.     });  
  123.     $(".no,.op").mouseout(function() {  
  124.         $(this).css({  
  125.             "background-color": "#F0F0EB"  
  126.         });  
  127.     });  
  128.     $("#answer").keydown(function(evt) {  
  129.         if ((evt.keyCode > 95) && (evt.keyCode < 106)) {  
  130.             var nbr = evt.keyCode - 96;  
  131.             if ($("#answer").val() == 0) {  
  132.                 $("#answer").val('');  
  133.             }  
  134.             $('#answer').val($('#answer').val() + nbr);  
  135.             if ($(".no").val() == nbr) {  
  136.                 $(this).css({  
  137.                     "background-color": "#F0F0EB"  
  138.                 });  
  139.             }  
  140.         } else if ((evt.keyCode > 47) && (evt.keyCode < 58)) {  
  141.             var nbr = evt.keyCode - 48;  
  142.             $('#answer').val($('#answer').val() + nbr);  
  143.         } else if (evt.keyCode == 107) {  
  144.             $('evt.keyCode == 8').attr('disabled', 'disabled');  
  145.             var out = $("#answer").val();  
  146.             var plu = $("#plus").val();  
  147.             $("#text").val($("#text").val() + out + plu);  
  148.             if ($('#answer').val() == '') {  
  149.                 return false;  
  150.   
  151.             } else if ($('#operation').attr('class') == 'activeAnswer') {  
  152.                 $('#operation').val($('#operation').val() + $('#plus').val());  
  153.                 $('#answer').val('');  
  154.   
  155.             } else {  
  156.                 $('#operation').val($('#operation').val() + $('#answer').val() + $('#plus').val());  
  157.                 $('#answer').val('');  
  158.   
  159.             }  
  160.         } else if (evt.keyCode == 13) {  
  161.             var a = $('#answer').val();  
  162.             var b = $('#operation').val();  
  163.             var c = b.concat(a);  
  164.             $('#answer').val(eval(c));  
  165.             $('#operation').val(eval(c));  
  166.             $('#operation').addClass('activeAnswer');  
  167.             $("#text").val('');  
  168.         } else if (evt.keyCode == 109) {  
  169.             var out = $("#answer").val();  
  170.             var sub = $("#subtract").val();  
  171.             $("#text").val($("#text").val() + out + sub);  
  172.             if ($('#answer').val() == '') {  
  173.                 return false;  
  174.   
  175.             } else if ($('#operation').attr('class') == 'activeAnswer') {  
  176.                 $('#operation').val($('#operation').val() + $('#subtract').val());  
  177.                 $('#answer').val('');  
  178.   
  179.             } else {  
  180.                 $('#operation').val($('#operation').val() + $('#answer').val() + $('#subtract').val());  
  181.                 $('#answer').val('');  
  182.                 $('#bac').attr('disabled', 'disabled');  
  183.   
  184.             }  
  185.         } else if (evt.keyCode == 106) {  
  186.             var out = $("#answer").val();  
  187.             var pro = $("#product").val();  
  188.             $("#text").val($("#text").val() + out + pro);  
  189.             if ($('#answer').val() == '') {  
  190.                 return false;  
  191.   
  192.             } else if ($('#operation').attr('class') == 'activeAnswer') {  
  193.                 $('#operation').val($('#operation').val() + $('#product').val());  
  194.                 $('#answer').val('');  
  195.   
  196.             } else {  
  197.                 $('#operation').val($('#operation').val() + $('#answer').val() + $('#product').val());  
  198.                 $('#answer').val('');  
  199.   
  200.             }  
  201.         } else if (evt.keyCode == 46 || evt.keyCode == 27) {  
  202.             $('#answer').val(0);  
  203.             $('#operation').val('');  
  204.             $('#operation').removeClass('activeAnswer');  
  205.             $("#bac").removeAttr('disabled');  
  206.         } else if (evt.keyCode == 8) {  
  207.             if ($("#answer").val() != "") {  
  208.                 document.calce.tex.value = document.calce.tex.value.substring(0, document.calce.tex.value.length * 1 - 1);  
  209.   
  210.             } else {  
  211.                 $("#answer").val(0);  
  212.             }  
  213.   
  214.         } else if (evt.keyCode == 111) {  
  215.             var out = $("#answer").val();  
  216.             var div = $("#divide").val();  
  217.             $("#text").val($("#text").val() + out + div);  
  218.             if ($('#answer').val() == '') {  
  219.                 return false;  
  220.                 $('#equals').attr('onclick', '');  
  221.             } else if ($('#operation').attr('class') == 'activeAnswer') {  
  222.                 $('#operation').val($('#operation').val() + $('#divide').val());  
  223.                 $('#answer').val('');  
  224.                 $('#equals').attr('onclick', '');  
  225.             } else {  
  226.                 $('#operation').val($('#operation').val() + $('#answer').val() + $('#divide').val());  
  227.                 $('#answer').val('');  
  228.                 $('#equals').attr('onclick', '');  
  229.             }  
  230.         }  
  231.         return false;  
  232.     });  
  233. }); < /script>