Skip to main content

How To Create Simple Scientific Calculator


Simple Scientific Calculator

In this project, we are going to learn on how to create a simple scientific calculator using JavaScript. This program has Clear, Cancel, Ok button and etc. Here's the script for a scientific calculator.

HTML Source Code

This is our source code for calculator.

  1. <form name="scientific_calculator">
  2.  
  3. <h2>Scientific Calculator</h2>
  4.  
  5. <table cellspacing="0" cellpadding="1">
  6. <tr>
  7. <td colspan="5" align="center"><input name="display" class="sc" value="0" size="44" maxlength="25"></td>
  8. </tr>
  9. <tr>
  10. <td align="center"><input type="button" value="Clear" onclick="this.form.display.value = 0 "></td>
  11. <td align="center" colspan="2"><input type="button" value=" Cancel " onclick="deleteChar(this.form.display)"></td>
  12. <td align="center" colspan="2"><input type="button" value=" Ok " NAME="Enter" onclick="if (checkNum(this.form.display.value)) { compute(this.form) }"></td>
  13. </tr>
  14. <tr>
  15. <td align="center"><input type="button" value=" exp " onclick="if (checkNum(this.form.display.value)) { exp(this.form) }"></td>
  16. <td align="center"><input type="button" value=" 7 " onclick="add_value(this.form.display, '7')"></td>
  17. <td align="center"><input type="button" value=" 8 " onclick="add_value(this.form.display, '8')"></td>
  18. <td align="center"><input type="button" value=" 9 " onclick="add_value(this.form.display, '9')"></td>
  19. <td align="center"><input type="button" value=" / " onclick="add_value(this.form.display, '/')"></td>
  20. </tr>
  21. <tr>
  22. <td align="center"><input type="button" value=" ln " onclick="if (checkNum(this.form.display.value)) { ln(this.form) }"></td>
  23. <td align="center"><input type="button" value=" 4 " onclick="add_value(this.form.display, '4')"></td>
  24. <td align="center"><input type="button" value=" 5 " onclick="add_value(this.form.display, '5')"></td>
  25. <td align="center"><input type="button" value=" 6 " onclick="add_value(this.form.display, '6')"></td>
  26. <td align="center"><input type="button" value=" * " onclick="add_value(this.form.display, '*')"></td>
  27. </tr>
  28. <tr>
  29. <td align="center"><input type="button" value=" sqrt " onclick="if (checkNum(this.form.display.value)) { sqrt(this.form) }"></td>
  30. <td align="center"><input type="button" value=" 1 " onclick="add_value(this.form.display, '1')"></td>
  31. <td align="center"><input type="button" value=" 2 " onclick="add_value(this.form.display, '2')"></td>
  32. <td align="center"><input type="button" value=" 3 " onclick="add_value(this.form.display, '3')"></td>
  33. <td align="center"><input type="button" value=" - " onclick="add_value(this.form.display, '-')"></td>
  34. </tr>
  35. <tr>
  36. <td align="center"><input type="button" value=" sq " onclick="if (checkNum(this.form.display.value)) { square(this.form) }"></td>
  37. <td align="center"><input type="button" value=" 0 " onclick="add_value(this.form.display, '0')"></td>
  38. <td align="center"><input type="button" value=" . " onclick="add_value(this.form.display, '.')"></td>
  39. <td align="center"><input type="button" value=" +/- " onclick="changeSign(this.form.display)"></td>
  40. <td align="center"><input type="button" value=" + " onclick="add_value(this.form.display, '+')"></td>
  41. </tr>
  42. <tr>
  43. <td align="center"><input type="button" value=" ( " onclick="add_value(this.form.display, '(')"></td>
  44. <td align="center"><input type="button" value="cos" onclick="if (checkNum(this.form.display.value)) { cos(this.form) }"></td>
  45. <td align="center"><input type="button" value=" sin " onclick="if (checkNum(this.form.display.value)) { sin(this.form) }"></td>
  46. <td align="center"><input type="button" value=" tan" onclick="if (checkNum(this.form.display.value)) { tan(this.form) }"></td>
  47. <td align="center"><input type="button" value=" ) " onclick="add_value(this.form.display, ')')"></td>
  48. </tr>
  49.  
  50. </form>

JavaScript

This script use to have a function in our calculator.

  1. <script>
  2. function add_value(input, character) {
  3. if(input.value == null || input.value == "0")
  4. input.value = character
  5. else
  6. input.value += character
  7. }
  8.  
  9. function cos(form) {
  10. form.display.value = Math.cos(form.display.value);
  11. }
  12.  
  13. function sin(form) {
  14. form.display.value = Math.sin(form.display.value);
  15. }
  16.  
  17. function tan(form) {
  18. form.display.value = Math.tan(form.display.value);
  19. }
  20.  
  21. function sqrt(form) {
  22. form.display.value = Math.sqrt(form.display.value);
  23. }
  24.  
  25. function ln(form) {
  26. form.display.value = Math.log(form.display.value);
  27. }
  28.  
  29. function exp(form) {
  30. form.display.value = Math.exp(form.display.value);
  31. }
  32.  
  33. function deleteChar(input) {
  34. input.value = input.value.substring(0, input.value.length - 1)
  35. }
  36.  
  37. function changeSign(input) {
  38. if(input.value.substring(0, 1) == "-")
  39. input.value = input.value.substring(1, input.value.length)
  40. else
  41. input.value = "-" + input.value
  42. }
  43.  
  44. function compute(form) {
  45. form.display.value = eval(form.display.value)
  46. }
  47.  
  48. function square(form) {
  49. form.display.value = eval(form.display.value) * eval(form.display.value)
  50. }
  51.  
  52. function checkNum(str) {
  53. for (var i = 0; i < str.length; i++) {
  54. var ch = str.substring(i, i+1)
  55. if (ch < "0" || ch > "9") {
  56. if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
  57. && ch != "(" && ch!= ")") {
  58. alert("invalid entry!")
  59. return false
  60. }
  61. }
  62. }
  63. return true
  64. }
  65. </script>

And, this is the style of our calculator.

  1. <style type="text/css">
  2. form {
  3. width:440px;
  4. padding:25px;
  5. margin:auto;
  6. border:5px solid blue;
  7. border-radius:15px 15px;
  8. }
  9.  
  10. input {
  11. background:azure;
  12. color:blue;
  13. font-size:15px;
  14. padding-top:15px;
  15. padding-bottom:15px;
  16. padding-left:19px;
  17. padding-right:19px;
  18. margin:6px;
  19. border:1px solid blue;
  20. }
  21.  
  22. h2 {
  23. text-align:center;
  24. }
  25.  
  26. h2 {
  27. color:blue;
  28. }
  29.  
  30. .sc {
  31. background:#fff;
  32. color:#000;
  33. }
  34. </style>

This is the result:

Result

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.