Simple Math Calculator Using CheckBox

Submitted by alpha_luna on Tuesday, May 3, 2016 - 16:05.
This is a simple program using JavaScript. And it’s called Simple Math Calculator Using CheckBox. This is a very common program, but this is suited for the beginner in JavaScript Language. This program contains 2 textboxes where the user types for the numeric value, then 4 check box for addition, subtraction, multiplication, and division. And we have 1 button to compute and 1 button for clearing the value in the textbox to solve another numeric value.

Math Operators

  1. Addition
  2. Subtraction
  3. Multiplication
  4. Division
HTML Form This form field contains textboxes, checkboxes, and buttons to operate this program.
  1. <form action="" method="POST">
  2. <table cellpadding="5" cellspacing="5" style="text-align:center;" width="100%" border="0">
  3.         <tr>
  4.                 <td><label>First Value</label></td>
  5.                 <td><input type="number" name="first_TextBox_Value" id="number1_TextBox" autofocus="autofocus"></td>
  6.         </tr>
  7.         <tr>
  8.                 <td><label>Second Value</label></td>
  9.                 <td><input type="number" name="second_TextBox_Value" id="number2_TextBox"></td>
  10.         </tr>
  12. <h2>Math Operators</h2>
  13. <table cellpadding="5" cellspacing="5" style="text-align:center;" width="100%" border="0">
  14.         <tr>
  15.                 <td><input type="checkbox" name="math_Operators" onclick="reset_Operators();" />   <label style="color:red;">Addition</label></td>
  16.                 <td><input type="checkbox" name="math_Operators" onclick="reset_Operators();" />   <label style="color:red;">Subtraction</label></td>
  17.         </tr>
  18.         <tr>
  19.                 <td><input type="checkbox" name="math_Operators" onclick="reset_Operators();" />   <label style="color:red;">Multiplication</label></td>
  20.                 <td><input type="checkbox" name="math_Operators" onclick="reset_Operators();" />   <label style="color:red;">Division</label></td>
  21.         </tr>
  23. <br />
  24. <br />          
  25. <input type="submit" value="Solve" onclick="return solve();" />
  26. <input type="submit" value="Clear" onclick="return clear();" />
  27. <br />
  28. <br />
  29. <div id="math_Results"></div>
  30. </form>
JavaScript Code This script will execute after the user controls the form field.
  1. <script>
  2. function solve() {
  3.  
  4. var operators_If = document.getElementsByName("math_Operators");
  5. var first_TextBox_Value = document.getElementById("number1_TextBox").value;
  6. var no_two = document.getElementById("number2_TextBox").value;
  7.  
  8. if (first_TextBox_Value=="") {
  9. var math_Results = "<span class='warning'>Enter the first value.</span>";
  10. document.getElementById('math_Results').innerHTML = math_Results;
  11. return false;
  12. }
  13.  
  14. else if (no_two=="") {
  15. var math_Results = "<span class='warning'>Enter the second value.</span>";
  16. document.getElementById('math_Results').innerHTML = math_Results;
  17. return false;
  18. }
  19.  
  20. if (operators_If[0].checked == true) {
  21. sum = parseInt(first_TextBox_Value) + parseInt(no_two);                                                
  22. results = "<span class='message'> The sum of " + first_TextBox_Value
  23. + " and " + no_two + " is <b style='color:blue;'>" + sum +"</b>.</span>";
  24. document.getElementById('math_Results').innerHTML = results;
  25. return false;
  26. }
  27. else if (operators_If[1].checked == true) {
  28.  diff = parseInt(first_TextBox_Value) - parseInt(no_two);                                      
  29. results = "<span class='message'> The difference between "
  30. + first_TextBox_Value + " and " + no_two + " is <b style='color:blue;'>" + diff +"</b>.</span>";
  31. document.getElementById('math_Results').innerHTML = results;
  32. return false;
  33. }
  34. else if (operators_If[2].checked == true) {
  35.  product = parseInt(first_TextBox_Value) *parseInt(no_two);                                    
  36. results = "<span class='message'>The product between "
  37. + first_TextBox_Value + " and " + no_two + " is <b style='color:blue;'>" + product +"</b>.</span>";
  38. document.getElementById('math_Results').innerHTML = results;
  39. return false;
  40. }
  41. else if (operators_If[3].checked == true) {
  42.  quotient = parseInt(first_TextBox_Value) / parseInt(no_two);
  43. results = "<span class='message'>The quotient between "
  44. + first_TextBox_Value + " and " + no_two + " is <b style='color:blue;'>" + quotient +"</b>. </span>";
  45. document.getElementById('math_Results').innerHTML = results;
  46. return false;
  47. }
  48. else {
  49. var math_Results = "<span class='warning'>Select your math operators.</span>";
  50. document.getElementById('math_Results').innerHTML = math_Results;
  51. return false;
  52. }
  53. return true;
  54. }
  55. function reset_Operators() {
  56. document.getElementById('math_Results').innerHTML = '';
  57. }
  58. function clear()
  59. {
  60. document.getElementById('math_Results').innerHTML = "";
  61. first_TextBox_Value="";
  62. no_two="";
  63. first_TextBox_Value.focus();
  64. }
  65. </script>
And, this is our style for the layout of a form field.
  1. <style type="text/css">
  2. body{
  3.         width:500px;
  4.         margin:auto;
  5.         border:blue 1px solid;
  6.         text-align:center;
  7. }
  8. h1 {
  9.         color:blue;
  10. }
  11. h2 {
  12.         color:red;
  13. }
  14. label {
  15.     font-size: 20px;
  16.     font-weight: bolder;
  17.     font-family: cursive;
  18.     color: blue;
  19. }
  20. input[type="number"] {
  21.     font-size: 18px;
  22.     border: blue 1px solid;
  23.     text-indent: 5px;
  24.     width: 150px;
  25. }
  26. input[type="submit"] {
  27.     font-size: 18px;
  28.     color: blue;
  29.     background: azure;
  30.     border: blue 1px solid;
  31.     padding: 6px;
  32.     border-radius: 4px;
  33.         cursor:pointer;
  34. }
  35. #math_Results{
  36.         font-size: 23px;
  37.     font-weight: bold;
  38.     font-family: cursive;
  39.     color: red;
  40. }
  41. </style>

Output:

For Addition Operator. Addition Result For Subtraction Operator. Subtraction Result For Multiplication Operator. Multiplication Result For Division Operator. Division Result So, this is it, you have Simple Math Calculator Using CheckBox in JavaScript. Kindly click the "Download Code" button for full source code. Enjoy Coding. Hope you can learn from this. 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
Operators
Arithmetic operators
Basic Calculator
math
checkbox control
CheckBox as Selector
checkboxes
checkbox

Add new comment

About text formats
  • 1265 views