Assignment 14 - Simple Calculator

LABAR Project 14

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to write your first javascript to declare, assign and display three variables of the string, number, and boolean types respectively.

In this assignment, Assignment #14, you are to create a simple calculator as in the HTML Form below. This calculator can:

• provide the add, substract, multiply, divide, and clear javascript functions;
• provide two HTML text inputs for user to enter the two operaand numbers;
• provide a HTML text input for the onClick triggered math function to place the result (number);
• when one of the math operator button, one of the + - * / buttons, is pressed, i.e. onClick event, the corresponding math function shall place the result in the Answer text Input;
• when the Clear button, the "C" button, is pressed, i.e. onClick event, all text Input fields shall be cleared.

Enter a number:
Enter a number:

Answer =

The above html form code is listed below:

<FORM NAME="Calculator" METHOD="post"> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P> <P><INPUT TYPE="button" VALUE="+" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="-" name="AddButton" onClick="CalculateSub(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="*" name="AddButton" onClick="CalculateMul(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="/" name="AddButton" onClick="CalculateDiv(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="C" name="ClearButton" onClick="ClearForm(this.form)"></P> <P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P> </FORM>

---

Sample Code:

Javascript Adder

 <SCRIPT type="text/javascript"> function CalculateSum(Atext, Btext, form){ var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A + B; } function ClearForm(form){ form.input_A.value = ""; form.input_B.value = ""; form.Answer.value = ""; } </SCRIPT> <P><FONT SIZE="+2">Simple Adder</FONT></P> <FORM NAME="Calculator" METHOD="post"> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P> <P><INPUT TYPE="button" VALUE="Add Numbers" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P> <P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P> <P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P> </FORM>

Try this adder out!

Simple Adder

Enter a number:
Enter a number:


Answer =