How To Create Simple Online Calculator In HTML

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

Socializer Widget

SOCIALIZE IT →

How To Create Simple Online Calculator In HTML

Simple Calculator In HTML

0 comments:

Post a Comment

Deals

Live Exchange Price PKR

Current time

Recent Post

FM Radios

Cateogries

Popular Posts

Total Pageviews

How To Create Simple Online Calculator In HTML

Simple Calculator In HTML

Related Posts:

0 comments:

Post a Comment

Deals

Live Exchange Price PKR

Current time

Recent Post

FM Radios

Cateogries

Popular Posts

Total Pageviews