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
- <html>
- <head>
- <title>JavaScript Calculator</title>
- </head>
- <body>
- <div class="calc">
- <table>
- <tr>
- <td colspan="4">
- <div class="txt" id="divinput">0</div>
- </td>
- </tr>
- <tr>
- <td>
- <input type="button" class="btn" id="btn8" value="8" onclick="input(8);"/>
- </td>
- <td>
- <input type="button" class="btn" id="btn9" value="9" onclick="input(9);"/>
- </td>
- <td>
- <input type="button" class="btn" id="btn7" value="7" onclick="input(7 );"/>
- </td>
- <td>
- <input type="button" class="btnopt" id="btnclr" value="Clr" onclick="calc('clr');" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="button" class="btn" id="btn4" value="4" onclick="input(4);"/>
- </td>
- <td>
- <input type="button" class="btn" id="btn5" value="5" onclick="input(5);"/>
- </td>
- <td>
- <input type="button" class="btn" id="btn6" value="6" onclick="input(6);"/>
- </td>
- <td>
- <input type="button" class="btnopt" id="btndivide" value="/" onclick="calc('/');"/>
- </td>
- </tr>
- <tr>
- <td>
- <input type="button" class="btn" id="btn1" value="1" onclick="input(1);"/>
- </td>
- <td>
- <input type="button" class="btn" id="btn2" value="2" onclick="input(2);"/>
- </td>
- <td>
- <input type="button" class="btn" id="btn3" value="3" onclick="input(3);"/>
- </td>
- <td>
- <input type="button" class="btnopt" id="btnmultiply" value="*" onclick="calc('*');"/>
- </td>
- </tr>
- <tr>
- <td>
- <input type="button" class="btn" id="btndot" value="." onclick="input('.');"/>
- </td>
- <td>
- <input type="button" class="btn" id="btn0" value="0" onclick="input(0);"/>
- </td>
- <td>
- <input type="button" class="btn" id="btnminus" value="-" onclick="calc('-');"/>
- </td>
- <td>
- <input type="button" class="btnopt" id="btnplus" value="+" onclick="calc('+');"/>
- </td>
- </tr>
- <tr>
- <td colspan="4">
- <input type="button" class="btnopt" style="width:100%;" id="btnequal" value="=" onclick="calc('=');"/>
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
Expand|Select|Wrap|Line Numbers
- <script>
- var dinput=0;
- var preval; //to store divinput value before clearing
- var sign=""; //to know if chosen operator is +,*,- or /
- var result=""; // final result
- var rawinput=0;
- function input(val)// this is used to input value into the calculator display screen
- {
- var divinput=document.getElementById("divinput");//calculator display screen
- rawinput=rawinput + val;
- if(dinput !=0)
- {
- //checking to see if divinput value is zero
- //if it is not, then goto else
- dinput="" + dinput + val;
- divinput.innerHTML="" + divinput.innerHTML+ val;
- }
- else
- {
- divinput.innerHTML= "" + val;
- dinput = "" + val;
- }
- //for showing previous input and current input
- if(sign != ""){
- rawinput=rawinput;
- divinput.innerHTML=rawinput + "<br/>" + dinput;
- }
- else{
- rawinput=rawinput + val;
- }
- }
- //this function is the main calculator power room
- function calc(opt)
- {
- var newval; //to collect new inputted value
- var divinput=document.getElementById("divinput");
- if(opt=="clr")
- {//for resetting the calculator
- divinput.innerHTML="0";
- dinput=0;
- rawinput=0;
- result="";
- preval="";
- sign="";
- opt="";
- }
- else if (opt !="clr" && opt != "=")
- { //for inputs manipulation
- preval=dinput;
- divinput.innerHTML="";
- dinput="";
- sign=opt;
- rawinput="" + preval + opt;
- divinput.innerHTML=rawinput + "<br/>" + "";
- }
- else if(opt== "=")
- {//for displaying result
- newval=dinput;
- if(sign=="+")
- {
- result=parseFloat(preval) + parseFloat(newval);
- }
- else if(sign=="-")
- {
- result=parseFloat(preval) - parseFloat(newval);
- }
- else if(sign=="/")
- {
- result=parseFloat(preval) / parseFloat(newval);
- }
- else if(sign=="*")
- {
- result=parseFloat(preval) * parseFloat(newval);
- }
- dinput=result;
- divinput.innerHTML="<span class='values'>" + rawinput + "=</span>" + "<br/><br/>" + "<span class='result'>" + result + "</span>";
- }
- }
- </script>
Expand|Select|Wrap|Line Numbers
- <style>
- .values
- {
- color: blue;
- font-size:30pt;
- }
- .result{
- color: purple;
- font-size:50pt;
- float: right;
- }
- .btn{
- background-color:crimson;
- color:white;
- font-family:Calibri;
- font-size:40pt;
- font-weight:bold;
- width:215px;
- height:215px;
- border-style: solid;
- border-width:2px;
- border-color: yellow;
- }
- .btnopt{
- background-color:brown;
- color:white;
- font-family:Calibri;
- font-size:45pt;
- font-weight:bold;
- width:25px;
- height:25px;
- border-style: solid;
- border-width:2px;
- border-color: yellow;
- }
- .txt
- {
- width:100%;
- height:400px;
- border-style: solid;
- border-width:3px;
- border-color:gray;
- background-color:white;
- color:red;
- font-family:Calibri;
- font-size:125pt;
- font-weight:bold;
- white-space:pre-line;
- word-break: break-all;
- word-wrap: break-word;
- }
- table{
- width:100%;
- }
- td
- {
- width:100px;
- }
- .calc{
- width:100%;
- height:auto;
- border-style: solid;
- border-width:2px;
- border-color:gray;
- margin:0 auto; /* center the calc div*/
- }
- </style>