Simple Math Calculator Using JavaScript

Submitted by alpha_luna on Monday, April 11, 2016 - 14:16.
We all know that calculator is very useful in terms of using it in our daily lives. In this article, I created a Simple Math Calculator Using JavaScript. What this the program does? Is that we have two (2) text box for the user to input the two (2) value of number then the simple program will do the sum, difference, product, and quotient of the two (2) value of number input by the user after clicking the OK button.

HTML Tag

This is the HTML tag where the two (2) value number is needed to input. 
  1. <center>
  2. <h3>Simple Math Calculator Using JavaScript</h3>
  3. <br>
  4. <div class="text"> 
  5. <label for="valueNumber1">Value No. 1</label> 
  6. <input type="number" autofocus="autofocus" step="1" min="0" name="valueNumber1" id="valueNumber1"/> 
  7. </div> 
  8. <div class="text"> 
  9. <label for="valueNumber2">Value No. 2</label> 
  10. <input type="number" autofocus="autofocus" step="1" min="0" name="valueNumber2" id="valueNumber2" /> 
  11. </div> 
  12. <button onclick="computeAll()" style="font-size:18px; background:azure; color:red; margin-right:100px;" title="Click here to find the result."> Enter </button>
  13. <button onclick="clearAll_Input()" style="font-size:18px; background:azure; color:red;" title="Click here to clear the text fields."> Reset </button>
  14. <br />
  15. <br />
  16. <br />
  17.  
  18. <p id="display1"> </p>
  19. <p id="display2"> </p>
  20. <p id="display3"> </p>
  21. <p id="display4"> </p>
  22. </center>

JavaScript

This is the script to work the function and to get the sum, difference, product and quotient of two (2) value numbers. 
  1. <script>
  2. function computeAll()
  3. {
  4. var valueNumber1 = document.getElementById('valueNumber1').value;
  5. var valueNumber2 = document.getElementById('valueNumber2').value;
  6. var sum = parseInt(valueNumber1) + parseInt(valueNumber2);
  7. var subtract = parseInt(valueNumber1) - parseInt(valueNumber2);
  8. var product = parseInt(valueNumber1) * parseInt(valueNumber2);
  9. var quotient = parseInt(valueNumber1) / parseInt(valueNumber2);
  10.  document.getElementById("display1").innerHTML = "The sum of " + valueNumber1 + " and " + valueNumber2 + " is " + sum + ".";
  11.  document.getElementById("display2").innerHTML = "The difference between " + valueNumber1 + " and " + valueNumber2 + " is " + subtract + ".";
  12.  document.getElementById("display3").innerHTML = "The product between " + valueNumber1 + " and " + valueNumber2 + " is " + product + ".";
  13.  document.getElementById("display4").innerHTML = "The quotient between " + valueNumber1 + " and " + valueNumber2 + " is " + quotient + ".";
  14. }
  15. function clearAll_Input()
  16. {
  17. document.getElementById("display1").innerHTML ="";
  18. document.getElementById("display2").innerHTML ="";
  19. document.getElementById("display3").innerHTML ="";
  20. document.getElementById("display4").innerHTML =""; 
  21. document.getElementById("valueNumber1").value="";
  22. document.getElementById("valueNumber2").value="";
  23. document.getElementById("valueNumber1").focus();
  24. }
  25. </script>

CSS

And, this is the style. 
  1. <style type="text/css">
  2. p {
  3. 	font-family:monospace;
  4. 	font-size:18px;
  5. 	font-weight:bold;
  6. 	color: red;
  7.  }
  8.  
  9. div.text { 
  10. 	margin: 0; 
  11. 	padding: 0; 
  12. 	padding-bottom: 1.25em; 
  13. } 
  14.  
  15. div.text label { 
  16. 	margin: 0; 
  17. 	padding: 0; 
  18. 	display: block; 
  19. 	font-size: 100%; 
  20. 	width: 8em; 
  21. 	font-size:18px;
  22. 	font-weight:bold;
  23. 	color:red;
  24. } 
  25.  
  26. div.text input, 
  27. div.text textarea { 
  28. 	margin: 0; 
  29. 	padding: 0; 
  30. 	display: block; 
  31. 	font-size: 100%; 
  32. } 
  33.  
  34. input:active, 
  35. input:focus, 
  36. input:hover, 
  37. textarea:active, 
  38. textarea:focus, 
  39. textarea:hover { 
  40. 	background-color: aliceblue; 
  41. 	border-color: blue; 
  42. } 
  43.  
  44. h3 {
  45. 	color:red;
  46. }
  47.  
  48. #valueNumber1 {
  49. 	font-size:18px;
  50. 	text-align:center;
  51. 	width:100px;
  52. }
  53.  
  54. #valueNumber2 {
  55. 	font-size:18px;
  56. 	text-align:center;
  57. 	width:100px;
  58. }
  59. </style>
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 64 views