JavaScript tutorial- Interface Design


Calculator: Interface Design

As you already knew, our JavaScript calculator has one text box and sixteen buttons.

The text box that is used to input number characters and show the final result is named txtvalue. Above the text is a div tag used to display the numbers and result.

The nine of sixteen buttons are used to input the number characters. They are labeled from 0 to 9 and named from button0 to button9. Six more additional buttons are named buttonadd, buttonsubtract, buttonmultiply, buttondivide, buttonresult, and buttonclear. The buttonadd, buttonsubtract, buttonmultiply, buttondivide are not intended to do calculations. Their functions are only to record the (+,-,*, or /) and the first input number. We leave the calcuations with the buttonresult. The buttonreult will record the second input number, make calculations and show to the result in the text box. The buttonclear is used to to clear he values stored in variables as well as in the text box and in the div tag. By running the code shown below, you see a simple calculator.

<html>
<head>
<title>A simple calculator</title>

</head>
<body>
<form >
<table style="border: 2; background-color: silver;">
<tr>
<td colspan="6">
<div id="display"></div>
<input type="text" name="txtvalue" maxlength="10" style="width: 164px" onkeypress="return check(event)"></td>
</tr>
<tr >

<td><input type="button" name="button0" value="0"></td>
<td><input type="button" name="button1" value="1"></td>
<td><input type="button" name="button2" value="2"></td>
<td><input type="button" name="button3" value="3"></td>
<td><input type="button" name="button4" value="4"></td>
<td><input type="button" name="buttonadd" value="+"></td>
<td><input type="button" name="buttonsubtract" value="-"></td>
<td><input type="button" name="buttonresult" value="="></td>


</tr>
<tr>

<td ><input type="button" name="button5" value="5"></td>
<td><input type="button" name="button6" value="6"></td>
<td><input type="button" name="button7" value="7"></td>
<td><input type="button" name="button8" value="8"></td>
<td><input type="button" name="button9" value="9"></td>
<td><input type="button" name="buttonmultiply" value="*"></td>
<td><input type="button" name="buttondivide" value="/"></td>
<td><input type="button" name="buttonclear" value="C"></td>


</tr>
</table>

</form>
</body>
</html>




Comments




This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.