Make an online calculator using HTML and JavaScript

The calculator is made from ONLY basic HTML and some JavaScript. There is absolutely NO PHP.


So, lets begin!


First, you obviously want to either create a new document or open an existing one.

Now, we need to start a form.

This is needed for the JavaScript to work!

<form name="calc">

For better looks, and to make it look like a calculator, you need to make a table.
If you don't have any CSS styles for tables, you should use borders.

<table border="1">



<table>

Now we have our table.

Continue in the next page.



Right, so now we need some columns and rows.
For a better look, we will use the width parameter

<tr><td colspan=3 width=75%></td><td width=25%></td></tr>

<tr><td width=25%></td><td width=25%></td><td width=25%></td><td width=25%></td></tr>

<tr><td width=25%></td><td width=25%></td><td width=25%></td><td width=25%></td></tr>

<tr><td width=25%></td><td width=25%></td><td width=25%></td><td width=25%></td></tr>

<tr><td width=25%></td><td width=25%></td><td width=25%></td><td width=25%></td></tr>

In  the first row (<tr><td colspan=3 width=75%></td><td width=25%></td></tr>) we have only two columns, but if you check in your browser the left one is wider. That is because of the colspan parameter.
The wide column will be our 'display', and the smaller one is the C button. The display is in the wide one, because on calculators, your display isn't in the size of a button :P.

This is the layout of our table.

Continue to the next page


The first row.

Display:

This one is pretty simple.

<input name="wtcalc" type="text">

"Come on, there must be more than that to it!"

But there isn't! The name of the field is important though. If you change it you will need to change a lot (15 things)  here. So better keep it as I have.

Clear button:

Now the thing you all've been waiting for, JavaScript!

<input type="button" onClick="document.calc.wtcalc.value=''" value="C" name="C" title="C">

JavaScript is in the onClick value. When you click on the button, it first selects the form by it's name (that is why you need to keep the names!), our 'display', which is an text input field, and then it is told to set the value of "wtcalc" to nothing. That means that it is cleared.


So, the first row should look something like this:

<tr><td colspan="3" width="75%"><input name="wtcalc" type="text"></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=''" value="C" name="C" title="C"></td></tr>

The first row is completed, now with the next 3 ones.

Go to the next page



Numbers


We need a way to enter numbers, right? Of course, here's how we do it.

<input type="button" onClick="document.calc.wtcalc.value+='1'" value="1" name="1" title="1" >

The start of the onClick is quite the same, but now it is changed to wtcalc.value+='1' .
That means it needs to add to our field the number 1 (one).

The 3 number rows:

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='1'" value="1" name="1" title="1" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='2'" value="2" name="2" title="2" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='3'" value="3" name="3" title="3" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='+'" value="+" name="+" title="+" ></td></tr>

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='4'" value="4" name="4" title="4" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='5'" value="5" name="5" title="5" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='6'" value="6" name="6" title="6" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='-'" value="-" name="-" title="-" ></td></tr>

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='7'" value="7" name="7" title="7" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='8'" value="8" name="8" title="8" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='9'" value="9" name="9" title="9" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='*'" value="*" name="*" title="*" ></td></tr>

Next page, last row







Last row

I am just going to post the code.

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='.'" value="." name="." title="." ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='0'" value="0" name="0" title="0" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=eval(calc.wtcalc.value);" value="="></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='/'" value="/" name="/" title="/" ></td></tr>

The eval calculates what is written in wtcal field.

Last page, next page




Full script

<form name=calc>

<table>

<tr><td colspan="3" width="75%"><input name="wtcalc" type="text"></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=''" value="C" name="C" title="C"></td></tr>

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='1'" value="1" name="1" title="1" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='2'" value="2" name="2" title="2" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='3'" value="3" name="3" title="3" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='+'" value="+" name="+" title="+" ></td></tr>

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='4'" value="4" name="4" title="4" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='5'" value="5" name="5" title="5" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='6'" value="6" name="6" title="6" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='-'" value="-" name="-" title="-" ></td></tr>

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='7'" value="7" name="7" title="7" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='8'" value="8" name="8" title="8" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='9'" value="9" name="9" title="9" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='*'" value="*" name="*" title="*" ></td></tr>

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='.'" value="." name="." title="." ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='0'" value="0" name="0" title="0" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=eval(calc.wtcalc.value);" value="="></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='/'" value="/" name="/" title="/" ></td></tr><a href="http://mathematicaltrick.blogspot.com/2013/01/make-online-calculator-using-html-and.html">Get This Gadget</a>

</table>

</form>

And that is it actually. I hope you enjoyed this tutorial and you like it :).



If you have any problems, please contact me here.