Simple Scientific Calculator using javascript

Submitted by: 
Language: 
Visitors have accessed this post 5349 times.

In this project we are going to learn how to create a simple scientific calculator using javascript. Here's the script for scientific calculator.

Javascript Code:

  1. <script>
  2. function addChar(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>

CSS Code:

  1. form{
  2. width:440px;
  3. padding:25px;
  4. margin:auto;
  5. border:5px solid #aaa;
  6. border-radius:15px 15px;
  7. }
  8.  
  9. input{
  10. background:#888;
  11. color:#fff;
  12. font-size:15px;
  13. padding-top:15px;
  14. padding-bottom:15px;
  15. padding-left:19px;
  16. padding-right:19px;
  17. margin:6px;
  18. }
  19.  
  20. h2{
  21. text-align:center;
  22. }
  23.  
  24. .sc{
  25. background:#fff;
  26. color:#000;
  27. }

Body Section:

  1. <form name="sci-calc">
  2. <h2>SCIENTIFIC CALCULATOR</h2>
  3. <table cellspacing="0" cellpadding="1">
  4. <TR>
  5. <TD COLSPAN="5" ALIGN="center"><input NAME="display" class="sc" VALUE="0" SIZE="44" MAXLENGTH="25"></TD>
  6. </TR>
  7. <TR>
  8. <td align="center"><input type="button" value="Clear" ONCLICK="this.form.display.value = 0 "></TD>
  9. <td align="center" colspan="2"><input type="button" value=" Backspace " ONCLICK="deleteChar(this.form.display)"></TD>
  10. <td align="center" colspan="2"><input type="button" value=" Enter " NAME="Enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }"></TD>
  11. </TR>
  12. <TR>
  13. <td align="center"><input type="button" value=" exp " ONCLICK="if (checkNum(this.form.display.value)) { exp(this.form) }"></TD>
  14. <td align="center"><input type="button" value=" 7 " ONCLICK="addChar(this.form.display, '7')"></TD>
  15. <td align="center"><input type="button" value=" 8 " ONCLICK="addChar(this.form.display, '8')"></TD>
  16. <td align="center"><input type="button" value=" 9 " ONCLICK="addChar(this.form.display, '9')"></TD>
  17. <td align="center"><input type="button" value=" / " ONCLICK="addChar(this.form.display, '/')"></TD>
  18. </TR>
  19. <TR>
  20. <td align="center"><input type="button" value=" ln " ONCLICK="if (checkNum(this.form.display.value)) { ln(this.form) }"></TD>
  21. <td align="center"><input type="button" value=" 4 " ONCLICK="addChar(this.form.display, '4')"></TD>
  22. <td align="center"><input type="button" value=" 5 " ONCLICK="addChar(this.form.display, '5')"></TD>
  23. <td align="center"><input type="button" value=" 6 " ONCLICK="addChar(this.form.display, '6')"></TD>
  24. <td align="center"><input type="button" value=" * " ONCLICK="addChar(this.form.display, '*')"></TD>
  25. </TR>
  26. <TR>
  27. <td align="center"><input type="button" value=" sqrt " ONCLICK="if (checkNum(this.form.display.value)) { sqrt(this.form) }"></TD>
  28. <td align="center"><input type="button" value=" 1 " ONCLICK="addChar(this.form.display, '1')"></TD>
  29. <td align="center"><input type="button" value=" 2 " ONCLICK="addChar(this.form.display, '2')"></TD>
  30. <td align="center"><input type="button" value=" 3 " ONCLICK="addChar(this.form.display, '3')"></TD>
  31. <td align="center"><input type="button" value=" - " ONCLICK="addChar(this.form.display, '-')"></TD>
  32. </TR>
  33. <TR>
  34. <td align="center"><input type="button" value=" sq " ONCLICK="if (checkNum(this.form.display.value)) { square(this.form) }"></TD>
  35. <td align="center"><input type="button" value=" 0 " ONCLICK="addChar(this.form.display, '0')"></TD>
  36. <td align="center"><input type="button" value=" . " ONCLICK="addChar(this.form.display, '.')"></TD>
  37. <td align="center"><input type="button" value=" +/- " ONCLICK="changeSign(this.form.display)"></TD>
  38. <td align="center"><input type="button" value=" + " ONCLICK="addChar(this.form.display, '+')"></TD>
  39. </TR>
  40. <TR>
  41. <td align="center"><input type="button" value=" ( " ONCLICK="addChar(this.form.display, '(')"></TD>
  42. <td align="center"><input type="button" value="cos" ONCLICK="if (checkNum(this.form.display.value)) { cos(this.form) }"></TD>
  43. <td align="center"><input type="button" value=" sin " ONCLICK="if (checkNum(this.form.display.value)) { sin(this.form) }"></TD>
  44. <td align="center"><input type="button" value=" tan" ONCLICK="if (checkNum(this.form.display.value)) { tan(this.form) }"></TD>
  45. <td align="center"><input type="button" value=" ) " ONCLICK="addChar(this.form.display, ')')"></TD>
  46. </TR>
  47.  
  48. </table>
  49. </form>

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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.