By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,155 Members | 1,773 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

Calculator Design Using JavaScript and CSS

P: 13
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, 16 views)
3 Weeks Ago #1
Share this Article
Share on Google+
1 Comment


P: 4
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.
5 Days Ago #2