Publishing System Settings Logout Login Register
Make an online calculator using HTML and JavaScript
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on August 27th, 2007
35808 views
JavaScript
Welcome to the Online calculator tutorial.
Made by Edmachine.


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>
</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.


This tutorial was created by Edmachine. If you want to post it elsewhere, ask my permission.
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
Edmachine

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top