Simple CALCULATOR
Create the following Web page with the heading 'Calculator' and provided images.
The web page should contain following input elements and apply the specified Constraints:
Label Name | Element Name | Constraints |
Input1 | input1 | This element is to get the first input. Type should be 'number' |
Input2 | input2 | This element is to get the second input. Type should be 'number' |
Select Operation | operation | A drop down list contains the following values: Select.. , ADD, SUBTRACT, MULTIPLY and DIVIDE. Set these values as its option tag text and option tag's 'value' attributes |
| submit | An image tag with the source as calc.jpg should be displayed |
| reset | An image tag with the source as reset.jpg should be displayed |
Consider the images are in the current folder and
- Use “calculator.jpg” as a header image.
Apply following styles to the attributes: Do not use CSS .
- The heading should be done using the font color as 'blue' and with font size as '20'. (Use <font> tag)
- The height and width of the images with the name “submit” and “reset” should be '80'.
- The height and width of the calculator image should be '300' and '400'.
Solution:
Calculator.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
</head>
<body>
<font size="20" color="blue">Calculator</font>
<br>
<img src="calculator.jpg" alt="Calculator" height="300" width="400">
<br>
<form id="" action="" method="get" accept-charset="utf-8">
<label for="fname">Input1</label>
<input type="number" name="input1" id="input1" value="" />
<br>
<br>
<label for="fname">Input2</label>
<input type="number" name="input2" id="input2" value="" />
<br>
<label for="operation">Select Operation</label>
<select name="operation" id="op">
<option text="Select.." value="Select..">Select..</option>
<option text="ADD" value="ADD">ADD</option>
<option text="SUBTRACT" value="SUBTRACT">SUBTRACT</option>
<option text="MULTIPLY" value="MULTIPLY">MULTIPLY</option>
<option text="DIVIDE" value="DIVIDE">DIVIDE</option>
</select>
</form>
<img src="calc.jpg" alt="Calculator" height="80" width="80">
<img src="reset.jpg" alt="Calculator" height="80" width="80">
</body>
</html>
