JAVASCRIPT CODE TO CREATE A CALCULATOR
Hello guys..
Today I am going to teach you how to create calculator using JAVASCRIPT. It is really easy if you know the basics of creating web pages or even just designing it. First of all let me tell you some basics about HTML and JAVASCRIPT. Some of you may be knowing but some may not. So I am going to tell you what is the difference between HTML and JAVASCRIPT.
So HTML stands for Hyper Text MarkUp Lanaguage. It is mainly used for designing of the web pages. The HTML codes are the basic codes that is to be known and required by the persons who are going to design a web page of their own.
Whereas JAVASCRIPT is used to create working elements like buttons and display various things on the web pages. As you may know the subscribe button that is available for all YouTube channel, the same button is created using JAVASCRIPT. So JAVASCRIPT is mainly used for working of the web pages.
This was some of the basic things you need to know about HTML and JAVASCRIPT which are useful in creating web pages. So now without wasting any further time let’s start coding for the calculator….
First of all you need to create a form and name it has calculator.
<html>
<body>
<form name=”calculator”>
</body>
</html>
Next you need to create tables as it is to be displayed in the form of tables and you have seen in mobile calculators.
<html>
<body>
<form name=”calculator”>
<table>
</table>
</body>
</html>
Now lets first create a empty text box to display the values as entered by the buttons displayed.
<html>
<body>
<form name=”calculator”>
<table>
<tr>
<td>
<input type=”text” name=”display” id=”display” disable><br>
</td></tr>
</table>
</body>
</html>
Here <tr> implies to create a new row and <td> implies for creating columns.
<br> is used to give a line break in the midlle.
The code to generate the buttons to display and get the values are;
<input type=”button” name=”one” value=”1″ onclick=”calculator.display.value+=’1′”>
Here input type refers to which type does the following belong to. If input type=”button” then a button will be displayed in the web page. if input type=”text” then a empty text box will be displayed in the web page.
To create a equal to button or a final value button the following code has to be used;
<input type=”button” name=”equal” value=”=” onclick=”calculator.display.value=eval(calculator.display.value)”>
To create a clear button the following code has to be used in the program;
<input type=”button” value=”c” onClick=”this.form.reset();” />
And from now on copy the codes as displayed down..
<html>
<head></head>
<body>
<form name=”calculator”>
<table>
<tr>
<td>
<input type=”text” name=”display” id=”display” disable><br>
</td>
</tr>
<tr>
<td>
<input type=”button” name=”one” value=”1″ onclick=”calculator.display.value+=’1′”></td>
<td>
<input type=”button” name=”two” value=”2″ onclick=”calculator.display.value+=’2′”></td>
<td>
<input type=”button” name=”three” value=”3″ onclick=”calculator.display.value+=’3′”></td>
<td>
<input type=”button” class=”operator” name=”add” value=”+” onclick=”calculator.display.value+=’+'”></td></tr>
<tr>
<td>
<input type=”button” name=”four” value=”4″ onclick=”calculator.display.value+=’4′”</td>
<td>
<input type=”button” name=”five” value=”5″ onclick=”calculator.display.value+=’5′”></td>
<td>
<input type=”button” name=”six” value=”6″ onclick=”calculator.display.value+=’6′”></td>
<td>
<input type=”button” name=”sub” class=”operator” value=”-” onclick=”calculator.display.value+=’-‘”></td></tr>
<tr>
<td>
<input type=”button” name=”seven” value=”7″ onclick=”calculator.display.value+=’7′”></td>
<td>
<input type=”button” name=”eight” value=”8″ onclick=”calculator.display.value+=’8′”></td>
<td>
<input type=”button” name=”nine” value=”9″ onclick=”calculator.display.value+=’9′”></td>
<td>
<input type=”button” class=”operator” name=”mul” value=”*” onclick=”calculator.display.value+=’*'”></td></tr>
<tr>
<td>
<input type=”button” value=”c” onClick=”this.form.reset();” />
<td>
<input type=”button” name=”zero” value=”0″ onclick=”calculator.display.value+=’0′”></td>
<td>
<input type=”button” name=”equal” value=”=” onclick=”calculator.display.value=eval(calculator.display.value)”></td>
<td>
<input type=”button” name=”div” value=”/” class=”operator” onclick=”calculator.display.value+=’/'”></td></tr>
</table>
</form>
</body>
</html>
If you have any doubts or if you want to clarify any doubts then please do comment down in the comment box.
For more details and tutorials on tech and coding please do follow my YouTube channel
TECHNOSTAR
Thank you for visiting this post…
Comments
Post a Comment