Wednesday, 17 October 2012

JavaScript Calculator by karan chanana



                                                                                                                                                                                                                                                 JavaScript Calculator


       <html>   
  1. <head>  
  2.   
  3. <title>Simple Javascript Calculator - Basic Arithmetic Operations</title>  
  4.   
  5. <!-- Aim: Write HTML Code Using JavaScript Functions To Perform Basic Arithmetic Operations. -->  
  6. <!-- 1. Take Two numbers from user say 'Number 1' and 'Number 2'. -->  
  7. <!-- 2. Perform Addition, Subtraction, Multiplication, Division and Modulus. -->  
  8. <!-- 3. Result must be displayed on same HTML Page when respective button is clicked. -->  
  9. <!-- 4. Use <input> tag (HTML Forms Concept) with onclick.-->  
  10. <!-- 5. Call individual Javascript Function, put them inside <head> tag only.-->  
  11. <!-- 6. Javascript Tutorial/Code For Computer Science Students. -->  
  12. <!-- 7. Tested and Written By (c) Gaurav Akrani. -->  
  13.   
  14. <script language="javascript" type="text/javascript">  
  15. function multiply(){  
  16. a=Number(document.calculator.number1.value);  
  17. b=Number(document.calculator.number2.value);  
  18. c=a*b;  
  19. document.calculator.total.value=c;  
  20. }  
  21. </script>  
  22.   
  23. <script language="javascript" type="text/javascript">  
  24. function addition(){  
  25. a=Number(document.calculator.number1.value);  
  26. b=Number(document.calculator.number2.value);  
  27. c=a+b;  
  28. document.calculator.total.value=c;  
  29. }  
  30. </script>  
  31.   
  32. <script language="javascript" type="text/javascript">  
  33. function subtraction(){  
  34. a=Number(document.calculator.number1.value);  
  35. b=Number(document.calculator.number2.value);  
  36. c=a-b;  
  37. document.calculator.total.value=c;  
  38. }  
  39. </script>  
  40.   
  41. <script language="javascript" type="text/javascript">  
  42. function division(){  
  43. a=Number(document.calculator.number1.value);  
  44. b=Number(document.calculator.number2.value);  
  45. c=a/b;  
  46. document.calculator.total.value=c;  
  47. }  
  48. </script>  
  49.   
  50. <script language="javascript" type="text/javascript">  
  51. function modulus(){  
  52. a=Number(document.calculator.number1.value);  
  53. b=Number(document.calculator.number2.value);  
  54. c=a%b;  
  55. document.calculator.total.value=c;  
  56. }  
  57. </script>  
  58.   
  59. </head>  
  60.   
  61. <body>  
  62.   
  63. <!-- Opening a HTML Form. -->   
  64. <form name="calculator">  
  65.   
  66. <!-- Here user will enter 1st number. -->   
  67. Number 1: <input type="text" name="number1">   
  68.    
  69.   
  70. <!-- Here user will enter 2nd number. -->   
  71. Number 2: <input type="text" name="number2">   
  72.   
  73.   
  74. <!-- Here result will be displayed. -->   
  75. Get Result: <input type="text" name="total">   
  76. <!-- Here respective button when clicked, calls only respective artimetic function. -->   
  77. <input type="button" value="ADD" onclick="javascript:addition();">  
  78. <input type="button" value="SUB" onclick="javascript:subtraction();">  
  79. <input type="button" value="MUL" onclick="javascript:multiply();">  
  80. <input type="button" value="DIV" onclick="javascript:division();">  
  81. <input type="button" value="MOD" onclick="javascript:modulus();">  
  82.   
  83. </form>  
  84.   
  85. </body>  
  86. </html>  


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)