Post
Ask Question

How To Create A Calculator With Javascript, HTML And CSS

Introduction

 
Calculator is one of the basic projects a Javascript or any other language a newbie programmer should probably know how to create. It is a basic project because it entails arithmetic operations. All you have to do is to create a button for each number, arithmetic operations. symbols and then add a screen that serves as a screen or LCD.
 
Method
 
Each button created has its own event handlers and functions. Whenever a number button is clicked, it prints the number indicated on the button into the textbox which is the screen. Then when an arithmetic operation is clicked after a value has been entered, it stores the value in the textbox to be the first-number and reset the value in the textbox to zero. After entering the second number you'll be calculated together with the first number and clicking the equals-to button, the equals to the button will store the value in the textbox as the second number, and then it will check the arithmetic you clicked. Once it checked arithmetic operation you click, it will add or subtracts or multiply or divide the first-number and second-number depending on the arithmetic operation you clicked and then prints the result back to the textbox.
  1. <!doctype html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <title>Javascript Calculator</title>  
  6.         <!-- CSS Code -->  
  7.         <style>  
  8.             body {    
  9.     background-color:#fff;    
  10.     margin: 0px auto;    
  11.         
  12.     }    
  13.     .calbody{    
  14.      background: #097C9B;    
  15.      border: 1px solid #ff0;    
  16.      padding: 10px;    
  17.      margin-left: 450px;    
  18.      min-width: 27.4em;    
  19.      max-width: 27.4em;    
  20.          
  21.     }    
  22.     h1{    
  23.      text-align: center;    
  24.      font-size: 40px;    
  25.      color: #003652;    
  26.          
  27.     }    
  28.        
  29.     #lcd{    
  30.      text-align: right;    
  31.      width: 23em;    
  32.      height: 40px;    
  33.      font-size: 18px;    
  34.          
  35.     }    
  36.        
  37.     #lcdu{    
  38.      color: grey;    
  39.      text-align: right;    
  40.      width: 27.6em;    
  41.      height: 35px;    
  42.      font-size: 15px;    
  43.          
  44.     }    
  45.         
  46.     button{    
  47.      background-color: #fff;    
  48.      width: 80px;    
  49.      height: 60px;    
  50.      font-size: 20px;    
  51.      border: 1px solid #097C9B;   
  52.     }    
  53.         
  54.     button:hover{    
  55.       background-color: #509CA9;        
  56.      }    
  57.         
  58.     </style>  
  59.     </head>  
  60.   
  61.     <body>  
  62.         <h1>  
  63.             Javascript Calculator</h1>  
  64.         <div class="calbody">  
  65.             <form name="lcdform">  
  66.                 <input id="lcdu" name="lcdsu" type="text" value="" />  
  67.                 <input id="lcd" name="lcds" type="text" value="0" />  
  68.             </form>  
  69.             <div id="calbutton">  
  70.                 <button id="num1" onclick="numone();">1</button>  
  71.                 <button id="num2" onclick="numtwo();">2</button>  
  72.                 <button id="num3" onclick="numthree();">3</button>  
  73.                 <button id="operationplus" onclick="operationplus();">+</button>  
  74.                 <button id="operationraistop" onclick="operationraistop();">^</button>  
  75.                 <button id="num4" onclick="numfour();">4</button>  
  76.                 <button id="num5" onclick="numfive();">5</button>  
  77.                 <button id="num6" onclick="numsix();">6</button>  
  78.                 <button id="operationmult" onclick="operationmult();">*</button>  
  79.                 <button id="operationsqrt" onclick="sqrots();">Sqrt()</button>  
  80.                 <button id="num7" onclick="numseven();">7</button>  
  81.                 <button id="num8" onclick="numeight();">8</button>  
  82.                 <button id="num9" onclick="numnine();">9</button>  
  83.                 <button id="operationminus" onclick="operationminus();">-</button>  
  84.                 <button id="clr" onclick="clr();">C</button>  
  85.                 <button id="operationperc" onclick="operationperc();">%</button>  
  86.                 <button id="num0" onclick="numzero();">0</button>  
  87.                 <button id="num00" onclick="numdobuzero();">00</button>  
  88.                 <button id="operationdivid" onclick="operationdivid();">/</button>  
  89.                 <button id="sumbit" onclick="equalsto();">=</button>  
  90.             </div>  
  91.         </div>  
  92.         <!-- Javascript code -->  
  93.         <script>  
  94.         var firstnumber;  
  95.         var secondnumber;  
  96.         var result;  
  97.         var operations;  
  98.   
  99.         function numone() {  
  100.             if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result) {  
  101.   
  102.                 document.lcdform.lcds.value = "1";  
  103.   
  104.             } else //if(document.lcdform.lcds.value != "0")    
  105.             {  
  106.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "1";  
  107.             }  
  108.   
  109.         }  
  110.   
  111.         function numtwo() {  
  112.   
  113.             if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result) {  
  114.   
  115.                 document.lcdform.lcds.value = "2";  
  116.   
  117.             } else //if(document.lcdform.lcds.value != "0")    
  118.             {  
  119.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "2";  
  120.             }  
  121.   
  122.         }  
  123.   
  124.         function numthree() {  
  125.   
  126.             if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result) {  
  127.   
  128.                 document.lcdform.lcds.value = "3";  
  129.   
  130.             } else //if(document.lcdform.lcds.value != "0")    
  131.             {  
  132.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "3";  
  133.             }  
  134.   
  135.         }  
  136.   
  137.         function numfour() {  
  138.   
  139.             if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result) {  
  140.   
  141.                 document.lcdform.lcds.value = "4";  
  142.   
  143.             } else //if(document.lcdform.lcds.value != "0")    
  144.             {  
  145.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "4";  
  146.             }  
  147.   
  148.         }  
  149.   
  150.         function numfive() {  
  151.   
  152.             if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result) {  
  153.   
  154.                 document.lcdform.lcds.value = "5";  
  155.   
  156.             } else //if(document.lcdform.lcds.value != "0")    
  157.             {  
  158.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "5";  
  159.             }  
  160.   
  161.         }  
  162.   
  163.         function numsix() {  
  164.   
  165.             if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result) {  
  166.   
  167.                 document.lcdform.lcds.value = "6";  
  168.   
  169.             } else //if(document.lcdform.lcds.value != "0")    
  170.             {  
  171.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "6";  
  172.             }  
  173.   
  174.         }  
  175.   
  176.         function numseven() {  
  177.   
  178.             if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result) {  
  179.   
  180.                 document.lcdform.lcds.value = "7";  
  181.   
  182.             } else //if(document.lcdform.lcds.value != "0")    
  183.             {  
  184.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "7";  
  185.             }  
  186.         }  
  187.   
  188.         function numeight() {  
  189.   
  190.             if (document.lcdform.lcds.value == "0") {  
  191.   
  192.                 document.lcdform.lcds.value = "8";  
  193.   
  194.             } else if (document.lcdform.lcds.value == result) {  
  195.                 document.lcdform.lcds.value = "8";  
  196.             } else //if(document.lcdform.lcds.value != "0")    
  197.             {  
  198.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "8";  
  199.             }  
  200.   
  201.         }  
  202.   
  203.         function numnine() {  
  204.   
  205.             if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result) {  
  206.   
  207.                 document.lcdform.lcds.value = "9";  
  208.   
  209.             } else //if(document.lcdform.lcds.value != "0")    
  210.             {  
  211.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "9";  
  212.             }  
  213.   
  214.         }  
  215.   
  216.         function numzero() {  
  217.   
  218.             if (document.lcdform.lcds.value == "0") {  
  219.   
  220.                 document.lcdform.lcds.value = "0";  
  221.   
  222.             } else if (document.lcdform.lcds.value == result) {  
  223.                 document.lcdform.lcds.value = "0";  
  224.             } else //if(document.lcdform.lcds.value != "0")    
  225.             {  
  226.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "0";  
  227.             }  
  228.   
  229.         }  
  230.   
  231.         function numdobuzero() {  
  232.   
  233.             if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result) {  
  234.   
  235.                 return;  
  236.   
  237.             } else //if(document.lcdform.lcds.value != "0")    
  238.             {  
  239.                 documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "00";  
  240.             }  
  241.   
  242.         }  
  243.   
  244.         function clr() {  
  245.             document.lcdform.lcds.value = "0";  
  246.             document.lcdform.lcdsu.value = "";  
  247.             return;  
  248.         }  
  249.   
  250.         function operationplus() {  
  251.   
  252.             operation = "+";  
  253.             firstnumber = parseInt(document.lcdform.lcds.value);  
  254.             document.lcdform.lcds.value = "0";  
  255.             document.lcdform.lcdsu.value = firstnumber + operation;  
  256.             //alert(firstnumber);    
  257.   
  258.         }  
  259.   
  260.         function operationmult() {  
  261.   
  262.             operation = "*";  
  263.             firstnumber = parseInt(document.lcdform.lcds.value);  
  264.             document.lcdform.lcds.value = "0";  
  265.             document.lcdform.lcdsu.value = firstnumber + operation;  
  266.   
  267.         }  
  268.   
  269.         function operationminus() {  
  270.   
  271.             operation = "-";  
  272.             firstnumber = parseInt(document.lcdform.lcds.value);  
  273.             document.lcdform.lcds.value = "0";  
  274.             document.lcdform.lcdsu.value = firstnumber + operation;  
  275.   
  276.         }  
  277.   
  278.         function operationdivid() {  
  279.   
  280.             operation = "/";  
  281.             firstnumber = parseInt(document.lcdform.lcds.value);  
  282.             document.lcdform.lcds.value = "0";  
  283.             document.lcdform.lcdsu.value = firstnumber + operation;  
  284.   
  285.         }  
  286.   
  287.         function operationperc() {  
  288.   
  289.             operation = "%";  
  290.             firstnumber = parseInt(document.lcdform.lcds.value);  
  291.             document.lcdform.lcds.value = "0";  
  292.             document.lcdform.lcdsu.value = firstnumber + operation;  
  293.   
  294.         }  
  295.   
  296.         function equalsto() {  
  297.   
  298.             secondnumber = parseInt(document.lcdform.lcds.value);  
  299.   
  300.             if (operation == "+") {  
  301.                 result = firstnumber + secondnumber;  
  302.             } else if (operation == "*") {  
  303.   
  304.                 result = firstnumber * secondnumber;  
  305.   
  306.             } else if (operation == "-") {  
  307.   
  308.                 result = firstnumber - secondnumber;  
  309.   
  310.             } else if (operation == "/") {  
  311.   
  312.                 result = firstnumber / secondnumber;  
  313.   
  314.             } else if (operation == "%") {  
  315.   
  316.                 if (document.lcdform.lcds.value == "0") {  
  317.   
  318.                     result = firstnumber / 100;  
  319.                     document.lcdform.lcdsu.value = firstnumber + operation + "100";  
  320.                 } else if (document.lcdform.lcds.value != "0") {  
  321.                     result = firstnumber / secondnumber * 100;  
  322.                     document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + "*100 = " + result;  
  323.                 }  
  324.             } else if (operation == "^") {  
  325.   
  326.                 for (var i = 0; i < secondnumber; i++) {  
  327.   
  328.                     result = firstnumber * i;  
  329.                 }  
  330.   
  331.   
  332.             }  
  333.             document.lcdform.lcds.value = "";  
  334.             document.lcdform.lcds.value = result.toString();  
  335.             document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + " = " + result.toString();  
  336.             return;  
  337.   
  338.         }  
  339.   
  340.         function sqrots() {  
  341.             firstnumber = document.lcdform.lcds.value;  
  342.             result = Math.sqrt(parseInt(document.lcdform.lcds.value));  
  343.             document.lcdform.lcds.value = result;  
  344.             document.lcdform.lcdsu.value = "sqrt(" + firstnumber + ") = " + result;  
  345.   
  346.         }  
  347.   
  348.         function operationraistop() {  
  349.   
  350.             operation = "^";  
  351.             firstnumber = parseInt(document.lcdform.lcds.value);  
  352.             document.lcdform.lcds.value = "0";  
  353.   
  354.         }  
  355.         </script>  
  356.     </body>  
  357.   
  358. </html> 
Results:
 
 
Read More - ScholarsGlobe
Next Recommended Reading Dynamically Add and Delete Rows in HTML and JavaScript