Creating a JavaScript Calculator

Html File
  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <title>Calculator</title>  
  5.         <script type="text/javascript" src="calculator.js"></script>  
  6.         <link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calculator.css" />  
  7.     </head>  
  8.     <body>  
  9.         <table class="calculator" id="calc">  
  10.             <tr>  
  11.                 <td colspan="4" class="calc_td_result">  
  12.                     <center>  
  13.                         <h3>Calculator</h3>  
  14.                     </center>  
  15.      
  16.                     <textbox id="calc_result1" class="calc_result1"></textbox>  
  17.                     <input type="text" readonly="readonly" name="calc_result" id="calc_result" class="calc_result"  
  18. onkeydown="javascript:key_detect('calc',event);" />  
  19.                 </td>  
  20.             </tr>  
  21.             <tr>  
  22.                 <td class="calc_td_btn">  
  23.                     <input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  24. style="color: #FF0000" />  
  25.                 </td>  
  26.                 <td class="calc_td_btn">  
  27.                     <input type="button" class="calc_btn" value="←" onclick="javascript:f_calc('calc','nbs');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  28. style="color: #FF0000" />  
  29.                 </td>  
  30.                 <td class="calc_td_btn">  
  31.                     <input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  32. style="color: #FF0000" />  
  33.                 </td>  
  34.                 <td class="calc_td_btn">  
  35.                     <input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  36. style="color: #FF0000" />  
  37.                 </td>  
  38.             </tr>  
  39.             <tr>  
  40.                 <td class="calc_td_btn">  
  41.                     <input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  42. style="color: #0000FF" />  
  43.                 </td>  
  44.                 <td class="calc_td_btn">  
  45.                     <input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  46. style="color: #0000FF" />  
  47.                 </td>  
  48.                 <td class="calc_td_btn">  
  49.                     <input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  50. style="color: #0000FF" />  
  51.                 </td>  
  52.                 <td class="calc_td_btn">  
  53.                     <input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  54. style="color: #FF0000" />  
  55.                 </td>  
  56.             </tr>  
  57.             <tr>  
  58.                 <td class="calc_td_btn">  
  59.                     <input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  60. style="color: #0000FF" />  
  61.                 </td>  
  62.                 <td class="calc_td_btn">  
  63.                     <input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  64. style="color: #0000FF" />  
  65.                 </td>  
  66.                 <td class="calc_td_btn">  
  67.                     <input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  68. style="color: #0000FF" />  
  69.                 </td>  
  70.                 <td class="calc_td_btn">  
  71.                     <input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  72. style="color: #FF0000" />  
  73.                 </td>  
  74.             </tr>  
  75.             <tr>  
  76.                 <td class="calc_td_btn">  
  77.                     <input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  78. style="color: #0000FF" />  
  79.                 </td>  
  80.                 <td class="calc_td_btn">  
  81.                     <input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  82. style="color: #0000FF" />  
  83.                 </td>  
  84.                 <td class="calc_td_btn">  
  85.                     <input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  86. style="color: #0000FF" />  
  87.                 </td>  
  88.                 <td class="calc_td_btn">  
  89.                     <input type="button" class="calc_btn" value="/" onclick="javascript:f_calc('calc','/');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  90. style="color: #FF0000" />  
  91.                 </td>  
  92.             </tr>  
  93.             <tr>  
  94.                 <td class="calc_td_btn">  
  95.                     <input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  96. style="color: #0000FF" />  
  97.                 </td>  
  98.                 <td class="calc_td_btn">  
  99.                     <input type="button" class="calc_btn" value="±" onclick="javascript:f_calc('calc','+-');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  100. style="color: #0000FF" />  
  101.                 </td>  
  102.                 <td class="calc_td_btn">  
  103.                     <input type="button" class="calc_btn" value="." onclick="javascript:add_calc('calc','.');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  104. style="color: #0000FF" />  
  105.                 </td>  
  106.                 <td class="calc_td_btn">  
  107.                     <input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" onmouseover="mOver(this)" onmouseout="mOut(this)"  
  108. style="color: #FF0000" />  
  109.                 </td>  
  110.             </tr>  
  111.         </table>  
  112.         <script type="text/javascript">  
  113. document.getElementById('calc').onload = init_calc('calc');  
  114. </script>  
  115.     </body>  
  116. </html>  
Css File 
  1. body {  
  2.   background-color: #DBDBFF;  
  3. }  
  4.   
  5. .calculator {  
  6.   width: 300px;  
  7.   height: 300px;  
  8.   background-color: #FFFFE2;  
  9.   border: 2px solid #CCCCCC;  
  10.   margin-top: 150px;  
  11.   margin-left: 500px;  
  12. }  
  13.   
  14. .calculator td {  
  15.   height: 16.66%;  
  16. }  
  17.   
  18. .calc_td_result {  
  19.   text-align: center;  
  20. }  
  21.   
  22. .calc_result {  
  23.   width: 96%;  
  24.   text-align: right;  
  25.   height: 37px;  
  26.   font-size: x-large;  
  27.   background-color: White;  
  28. }  
  29.   
  30. .calc_td_calculs {  
  31.   text-align: center;  
  32. }  
  33.   
  34. .calc_calculs {  
  35.   width: 90%;  
  36.   text-align: left;  
  37. }  
  38.   
  39. .calc_td_btn {  
  40.   width: 25%;  
  41.   height: 100%;  
  42. }  
  43.   
  44. .calc_btn {  
  45.   width: 90%;  
  46.   height: 90%;  
  47.   font-size: 20px;  
  48. }  
  49.   
  50. td.calc_td_result h3 {  
  51. /*background-color:#521252;*/  
  52.   color: Blue;  
  53.   font-size: x-large;  
  54. }  
  55.   
  56. .calc_result1 {  
  57.   text-align: right;  
  58. }  
JS File
  1. calc_array = new Array();  
  2. var calcul = 0;  
  3. var pas = 0;  
  4. var temp = 0;  
  5.   
  6. function $id(id) {  
  7.     return document.getElementById(id);  
  8. }  
  9. function f_calc(id, n) {  
  10.     var out = $id(id + '_result').value;  
  11.     $id(id + '_result1').innerHTML += $id(id + '_result1').innerHTML = out + n;  
  12.     if (n == 'ce') {  
  13.         $id(id + '_result1').innerHTML = "";  
  14.         init_calc(id);  
  15.     } else if (n == '=') {  
  16.         $id(id + '_result1').innerHTML = "";  
  17.         if (calc_array[id][0] != '=' && calc_array[id][1] != 1) {  
  18.             eval('calcul=' + calc_array[id][2] + calc_array[id][0] + calc_array[id][3] + ';');  
  19.             calc_array[id][0] = '=';  
  20.             $id(id + '_result').value = calcul;  
  21.   
  22.             calc_array[id][2] = calcul;  
  23.             calc_array[id][3] = 0;  
  24.         }  
  25.     } else if (n == '+-') {  
  26.         $id(id + '_result').value = $id(id + '_result').value * (-1);  
  27.         if (calc_array[id][0] == '=') {  
  28.             calc_array[id][2] = $id(id + '_result').value;  
  29.             calc_array[id][3] = 0;  
  30.   
  31.         } else {  
  32.             calc_array[id][3] = $id(id + '_result').value;  
  33.         }  
  34.         pas = 1;  
  35.     } else if (n == 'nbs') {  
  36.         $id(id + '_result1').innerHTML = "";  
  37.         if ($id(id + '_result').value < 10 && $id(id + '_result').value > -10) {  
  38.             $id(id + '_result').value = 0;  
  39.   
  40.         } else {  
  41.             $id(id + '_result').value = $id(id + '_result').value.slice(0, $id(id + '_result').value.length - 1);  
  42.         }  
  43.         if (calc_array[id][0] == '=') {  
  44.             calc_array[id][2] = $id(id + '_result').value;  
  45.             calc_array[id][3] = 0;  
  46.         } else {  
  47.             calc_array[id][3] = $id(id + '_result').value;  
  48.         }  
  49.     } else {  
  50.         if (calc_array[id][0] != '=' && calc_array[id][1] != 1) {  
  51.             eval('calcul=' + calc_array[id][2] + calc_array[id][0] + calc_array[id][3] + ';');  
  52.             $id(id + '_result').value = calcul;  
  53.             calc_array[id][2] = calcul;  
  54.             calc_array[id][3] = 0;  
  55.         }  
  56.         calc_array[id][0] = n;  
  57.     }  
  58.     if (pas == 0) {  
  59.         calc_array[id][1] = 1;  
  60.     } else {  
  61.         pas = 0;  
  62.     }  
  63.     document.getElementById(id + '_result').focus();  
  64.     return true;  
  65. }  
  66. function add_calc(id, n) {  
  67.     if (calc_array[id][1] == 1) {  
  68.         $id(id + '_result').value = n;  
  69.     } else {  
  70.         $id(id + '_result').value += n;  
  71.     }  
  72.     if (calc_array[id][0] == '=') {  
  73.         calc_array[id][2] = $id(id + '_result').value;  
  74.         calc_array[id][3] = 0;  
  75.     } else {  
  76.         calc_array[id][3] = $id(id + '_result').value;  
  77.     }  
  78.     calc_array[id][1] = 0;  
  79.     document.getElementById(id + '_result').focus();  
  80.     return true;  
  81. }  
  82. function init_calc(id) {  
  83.     $id(id + '_result').value = 0;  
  84.     calc_array[id] = new Array('=', 1, '0', '0', 0);  
  85.     document.getElementById(id + '_result').focus();  
  86.     return true;  
  87. }  
  88. function key_detect(id, evt) {  
  89.     if ((evt.keyCode > 95) && (evt.keyCode < 106)) {  
  90.         var nbr = evt.keyCode - 96;  
  91.         add_calc(id, nbr);  
  92.     } else if ((evt.keyCode > 47) && (evt.keyCode < 58)) {  
  93.         var nbr = evt.keyCode - 48;  
  94.         add_calc(id, nbr);  
  95.     } else if (evt.keyCode == 107) {  
  96.         f_calc(id, '+');  
  97.     } else if (evt.keyCode == 109) {  
  98.         f_calc(id, '-');  
  99.     } else if (evt.keyCode == 106) {  
  100.         f_calc(id, '*');  
  101.     } else if (evt.keyCode == 111) {  
  102.         f_calc(id, '/');  
  103.     } else if (evt.keyCode == 110) {  
  104.         add_calc(id, '.');  
  105.     } else if (evt.keyCode == 190) {  
  106.         add_calc(id, '.');  
  107.     } else if (evt.keyCode == 188) {  
  108.         add_calc(id, '.');  
  109.     } else if (evt.keyCode == 13) {  
  110.         f_calc(id, '=');  
  111.     } else if (evt.keyCode == 46) {  
  112.         f_calc(id, 'ce');  
  113.     } else if (evt.keyCode == 8) {  
  114.         f_calc(id, 'nbs');  
  115.     } else if (evt.keyCode == 27) {  
  116.         f_calc(id, 'ce');  
  117.     }  
  118.     return true;  
  119. }  
  120. function mOver(obj) {  
  121.     obj.style.backgroundColor = "#FFD4E9";  
  122. }  
  123. function mOut(obj) {  
  124.     obj.style.backgroundColor = "#E6E6E6";  
  125. }