Fraction Calculator - Tested in IE7.0, IE6.0, Netscape8.1.2, Opera9.10, Firefox2.0.0.1 and AOL Explorer1.5

T his fraction calculator performs addition, subtraction, multiplication, and division on two fractions. It also reduces the result to the lowest terms.

W e have tested the code in IE7.0, IE6.0, Firefox1.0.7, Opera8.51, Netscape7.02, Netscape8.0.4 and AOL Explorer1.1. This script worked well in all platforms with one variation observed in Opera8.51. When you select "Reset" besides it clearing the numbers, it also clears the whichever mathamatical sign you have selected (+, -, x and or ÷). This does not effect the calculator in any way. You just have to use the dropdown to set which mathamatical function you want to use.

D epending on your knowledge of HTML and javascripts, this is an easy two part copy and paste code that goes in both the <HEAD> and <BODY> sections (wherever you want the effect to appear) of your document. The only reconfigurations that could be made* are to the table itself in the <BODY> section. These reconfigurations are cosmetic and basically are just the color of the table, the border color and font color and possible font size.

* The "Reset" button is an addon that we inserted into the code. If you want to use it, Further down we will show you what, where and howto insert this into the code.

Cosmetic Table Reconfigurations

<table width="200" align="center" border="0" cellspacing="0" cellpadding="4" style="background-color:#ffffff;border:1px #000000 solid;">
<tr>
<td align="center" valign="middle">
< h3>Fraction Calculator</h3>
<form name="calc">
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border-bottom:2px #1e90ff solid;"><input type="text" size="2" name="n1" id="n1" tabindex="1"></td>
<td rowspan="2" align="center" valign="middle">
<select name="Op" tabindex="3">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">÷</option>
</select>
</td>
<td style="border-bottom:2px #1e90ff solid;"><input type="text" size="2" name="n2" id="n2" tabindex="4"></td>
<td rowspan="2" align="center" valign="middle"><input type="button" value=" = "onClick="solve();" tabindex="6"></td>
<td style="border-bottom:2px #1e90ff solid;"><input type="text" size="2" name="An" id="An" readonly="1"></td>
</tr>

E verything we have "color coded" above can be reconfigured to fit your site. Just play around with it until you get a combination that works for you.

Note of Importance ~ By default, the text (font) color inside the table will be that of the color defined within your <BODY> tag. If you want to change the font color within the table, just add a font tag as shown below:

<table width="200" align="center" border="0" cellspacing="0" cellpadding="4" style="background-color:#000000;border:2px #ba55dc solid;">
<tr>
<td align="center" valign="middle">
<font color="#?">
<h3>Fraction Calculator</h3>
<form name="calc">
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>

Just add the above font tag and replace the ? with a hex code. And "Don't" forget to close the font tag </font> at the end of the <BODY> section of code.

</form>
</td>
</tr></font>
</table>

* Earlier, we told you about the "Reset" Button. Below is howto add it into the script.

Default ~ No Reset Button

</table>
<br><input type="checkbox" name="reduce" id="reduce" checked> Reduce
</form>
</td>
</tr>
</table>

Reconfigured ~ With Reset Button

</table>
<br><input type="checkbox" name="reduce" id="reduce" checked> Reduce
<input type="reset" value="Reset">
</form>
</td>
</tr>
</table>

I n other words, just add the below sniplet of code into the <BODY> section of code as shown above. and Be Sure to add it Before the closing form tag </form>. If you add it after it, the reset button will NOT work.
<input type="reset" value="Reset">

I you would like to add this effect into your pages, grab the respective below link and you are there. We hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.