How To Create Simple Online Calculator In HTML

June 16, 2016

Simple Calculator In HTML

Am giving you a simple and easy calculator source code design by me. Its easy to modify you can modify it how you want to use it.

This Calculator Code will works on all types of browser. Let me teach you how this Online Calculator code is working and made. A form attribute name="FocDownloadsCalculator" is created, Input type which makes buttons and textfield. Here's the Eval() function is used which helps to evaluate the expression accordingly. Every input field has a attribute value. OnClick is the event, when a user click on it occurs.

<!DOCTYPE html><html><head><style>a:link, a:visited {     background-color: #4CAF50;     color: white;     padding: 10px 41px;     text-align: center;     text-decoration: none;     display: inline-block; } a:hover, a:active {     background-color: red; } table, th, td {     border: 2px solid black; } th, td {     text-align: center; } tr:nth-child(even){ background-color: #f2f2f2 } th {     background-color: #4CAF50;     color: white; } </style></head><body></center><form name="FocDownloadsCalculator" ><table><tr><th><a href="http://focdownloads.blogspot.com/2016/06/how-to-create-simple-online-calculator.html"  target="_blank">Calculator</a></th></tr><tr><td><input type="textfield" name="answer" value=""></td><table><tr>    <td><input type="button" value="7" onClick="document.FocDownloadsCalculator.answerwer.value+='7'"></td>    <td><input type="button" value="8" onClick="document.FocDownloadsCalculator.answer.value+='8'"></td>    <td><input type="button" value="9" onClick="document.FocDownloadsCalculator.answer.value+='9'"></td>    <td><input type="button" value="+" onClick="document.FocDownloadsCalculator.answer.value+='+'"></td>  </tr><tr>    <td><input type="button" value="4" onClick="document.FocDownloadsCalculator.answer.value+='4'"></td>    <td><input type="button" value="5" onClick="document.FocDownloadsCalculator.answer.value+='5'"></td>    <td><input type="button" value="6" onClick="document.FocDownloadsCalculator.answer.value+='6'"></td>    <td><input type="button" value="-" onClick="document.FocDownloadsCalculator.answer.value+='-'"></td>  </tr><tr>    <td><input type="button" value="1" onClick="document.FocDownloadsCalculator.answer.value+='1'"></td>    <td><input type="button" value="2" onClick="document.FocDownloadsCalculator.answer.value+='2'"></td>    <td><input type="button" value="3" onClick="document.FocDownloadsCalculator.answer.value+='3'"></td>    <td><input type="button" value="*" onClick="document.FocDownloadsCalculator.answer.value+='*'"></td>  </tr><tr>        <td><input type="reset" value="C"></td>    <td><input type="button" value="0" onClick="document.FocDownloadsCalculator.answer.value+='0'"></td>    <td><input type="button" value="=" onClick="document.FocDownloadsCalculator.answer.value=eval(document.FocDownloadsCalculator.answer.value)"></td> <td><input type="button" value="/" onClick="document.FocDownloadsCalculator.answer.value+='/'"></td>  </tr></table></td></tr></table></form></center></body></html>

Download source code

Search This Blog

Free For You

How To Create Simple Online Calculator In HTML

Simple Calculator In HTML

Comments

Post a Comment

Popular posts from this blog

How to create PayPal account in Pakistan - Unsupported Countries

Free Get Master Autocad Newer and License Legal/Original

Download Magic Desktop 9.5.0.217 {Activation Key+Serial Key!}