467,864 Members | 1,837 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

Calculator Design Using JavaScript and CSS

In this article, am going to talk about Pure HTML, JavaScript and CSS why designing calculator.
What I used for this calculator design is a popular application that follows all systems. So, you need no application to download before you can get started with this tutorial.

Calculator in a nutshell consists of advance algorithms that help humans in solving mathematical or scientific problems on the go. But in this one, we are going to design just simple arithmetic calculator.

Just as I said earlier, I tried as much as possible to make the code easy that is why I used the common control statement known as if(conditions){expression;}else if(conditions){expression;} statement.
By the end of this tutorial, you will be able to understand some basics of JavaScript and above all you will see how simple it is to use JavaScript well developing any web app.

Our next JavaScript script tutorial will be Connecting to Database using pure JavaScript. So stay tuned!

To start the process, you have to open your notepad by;
1. Click on start or windows button from the task bar
2. Click on All Programs or Program
3. Click on Accessories Folder
4. Locate notepad icon and click
Yep, you are good to go. See the calculator screenshot as attachment
Copy this HTML but I will recommend you type in order for you to understand the flow
The HTML design
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>JavaScript Calculator</title>
  4. </head>
  5. <body>
  6. <div class="calc">
  7. <table>
  8. <tr>
  9. <td colspan="4">
  10. <div class="txt" id="divinput">0</div>
  11. </td>
  12. </tr>
  13. <tr>
  14. <td>
  15. <input type="button" class="btn" id="btn8" value="8" onclick="input(8);"/>
  16. </td>
  17. <td>
  18. <input type="button" class="btn" id="btn9" value="9" onclick="input(9);"/>
  19. </td>
  20. <td>
  21. <input type="button" class="btn" id="btn7" value="7" onclick="input(7 );"/>
  22. </td>
  23. <td>
  24. <input type="button" class="btnopt" id="btnclr" value="Clr" onclick="calc('clr');" />
  25. </td>
  26. </tr>
  27. <tr>
  28. <td>
  29. <input type="button" class="btn" id="btn4" value="4" onclick="input(4);"/>
  30. </td>
  31. <td>
  32. <input type="button" class="btn" id="btn5" value="5" onclick="input(5);"/>
  33. </td>
  34. <td>
  35. <input type="button" class="btn" id="btn6" value="6" onclick="input(6);"/>
  36. </td>
  37. <td>
  38. <input type="button" class="btnopt" id="btndivide" value="/" onclick="calc('/');"/>
  39. </td>
  40. </tr>
  41. <tr>
  42. <td>
  43. <input type="button" class="btn" id="btn1" value="1" onclick="input(1);"/>
  44. </td>
  45. <td>
  46. <input type="button" class="btn" id="btn2" value="2" onclick="input(2);"/>
  47. </td>
  48. <td>
  49. <input type="button" class="btn" id="btn3" value="3" onclick="input(3);"/>
  50. </td>
  51. <td>
  52. <input type="button" class="btnopt" id="btnmultiply" value="*" onclick="calc('*');"/>
  53. </td>
  54. </tr>
  55. <tr>
  56. <td>
  57. <input type="button" class="btn" id="btndot" value="."  onclick="input('.');"/>
  58. </td>
  59. <td>
  60. <input type="button" class="btn" id="btn0" value="0" onclick="input(0);"/>
  61. </td>
  62. <td>
  63. <input type="button" class="btn" id="btnminus" value="-" onclick="calc('-');"/>
  64. </td>
  65. <td>
  66. <input type="button" class="btnopt" id="btnplus" value="+" onclick="calc('+');"/>
  67. </td>
  68. </tr>
  69. <tr>
  70. <td colspan="4">
  71. <input type="button" class="btnopt" style="width:100%;" id="btnequal" value="=" onclick="calc('=');"/>
  72. </td>
  73. </tr>
  74. </table>
  75. </div>
  76. </body>
  77. </html>
  78.  
Place this script between the <head></head> of the HTML design


Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var dinput=0;
  3. var preval; //to store divinput value before clearing
  4. var sign=""; //to know if chosen operator is +,*,- or /
  5. var result=""; // final result
  6. var rawinput=0;
  7. function input(val)// this is used to input value into the calculator display screen
  8. {
  9. var divinput=document.getElementById("divinput");//calculator display screen
  10. rawinput=rawinput + val;
  11. if(dinput !=0)
  12. {
  13. //checking to see if divinput value is zero
  14. //if it is not, then goto else
  15. dinput="" + dinput + val;
  16. divinput.innerHTML="" + divinput.innerHTML+ val;
  17. }
  18. else
  19. {
  20. divinput.innerHTML= "" + val;
  21. dinput = "" + val;
  22. }
  23. //for showing previous input and current input
  24. if(sign != ""){
  25. rawinput=rawinput;
  26. divinput.innerHTML=rawinput + "<br/>" + dinput;
  27. }
  28. else{
  29. rawinput=rawinput + val;
  30. }
  31.  
  32. }
  33. //this function is the main calculator power room
  34. function calc(opt)
  35. {
  36. var newval; //to collect new inputted value
  37. var divinput=document.getElementById("divinput");
  38. if(opt=="clr")
  39. {//for resetting the calculator
  40. divinput.innerHTML="0";
  41. dinput=0;
  42. rawinput=0;
  43. result="";
  44. preval="";
  45. sign="";
  46. opt="";
  47. }
  48. else if (opt !="clr" && opt != "=")
  49. { //for inputs manipulation
  50. preval=dinput;
  51. divinput.innerHTML="";
  52. dinput="";
  53. sign=opt;
  54. rawinput="" + preval + opt;
  55. divinput.innerHTML=rawinput + "<br/>" + "";
  56. }
  57.  
  58. else if(opt== "=")
  59. {//for displaying result
  60. newval=dinput;
  61. if(sign=="+")
  62. {
  63. result=parseFloat(preval) + parseFloat(newval);
  64. }
  65. else if(sign=="-")
  66. {
  67. result=parseFloat(preval) - parseFloat(newval);
  68. }
  69. else if(sign=="/")
  70. {
  71. result=parseFloat(preval) / parseFloat(newval);
  72. }
  73. else if(sign=="*")
  74. {
  75. result=parseFloat(preval) * parseFloat(newval);
  76. }
  77. dinput=result;
  78. divinput.innerHTML="<span class='values'>" + rawinput + "=</span>" + "<br/><br/>" + "<span class='result'>" + result + "</span>";
  79. }
  80. }
  81. </script>
  82.  
We need this style sheet to beautify the calculator. So place this styles between the <head></head> of the HTML design

Expand|Select|Wrap|Line Numbers
  1. <style>
  2. .values
  3. {
  4. color: blue;
  5. font-size:30pt;
  6. }
  7. .result{
  8. color: purple;
  9. font-size:50pt;
  10. float: right;
  11. }
  12. .btn{
  13. background-color:crimson;
  14. color:white;
  15. font-family:Calibri;
  16. font-size:40pt;
  17. font-weight:bold;
  18. width:215px;
  19. height:215px;
  20. border-style: solid;
  21. border-width:2px;
  22. border-color: yellow;
  23. }
  24. .btnopt{
  25. background-color:brown;
  26. color:white;
  27. font-family:Calibri;
  28. font-size:45pt;
  29. font-weight:bold;
  30. width:25px;
  31. height:25px;
  32. border-style: solid;
  33. border-width:2px;
  34. border-color: yellow;
  35. }
  36. .txt
  37. {
  38. width:100%;
  39. height:400px;
  40. border-style: solid;
  41. border-width:3px;
  42. border-color:gray;
  43. background-color:white;
  44. color:red;
  45. font-family:Calibri;
  46. font-size:125pt;
  47. font-weight:bold;
  48. white-space:pre-line;
  49. word-break: break-all;
  50. word-wrap: break-word;
  51. }
  52. table{
  53. width:100%;
  54. }
  55. td
  56. {
  57. width:100px;
  58. }
  59. .calc{
  60. width:100%;
  61. height:auto;
  62. border-style: solid;
  63. border-width:2px;
  64. border-color:gray;
  65. margin:0 auto; /* center the calc div*/
  66. }
  67. </style>
  68.  
Attached Images
File Type: jpg Screenshot_20200613-001952-min_2-min.jpg (38.9 KB, 67 views)
Jun 19 '20 #1
  • viewed: 8133
Share:
6 Comments
Nibble
I truly loved this article. You made it seem so simple. Thank you for writing and sharing this article. I had seen a similar tutorial but your code is simpler.
Jul 8 '20 #2
Thanks for the compliment
Jul 18 '20 #3
Bit
Great information here. Thank you!
Sep 7 '20 #4
100+
Greats. Thanks for sharing the information.
Sep 10 '20 #5
SwissProgrammer
128KB
Nice. I like it.

Not overly complicated. Easy to edit later. Nice.

Except: "What I used for this calculator design is a popular application that follows all systems."
The script's resultant graphical layout does not show up properly (for me) for my browser FireFox 43.0b9 .

Other than that, well done.

Thank you.

And, thank you Rabbit. Your diligence is appreciated.
Oct 15 '20 #6
128KB
Using vbs.
Expand|Select|Wrap|Line Numbers
  1. Do
  2.   str = InputBox("Enter the formula")
  3.   If IsEmpty(str) then Exit Do
  4.   Call MsgBox(str & "=" & Eval(str), , "Result")
  5. Loop
Oct 16 '20 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Tony Strazzeri | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.