Ads Here

Friday, September 3, 2021

User Interface Design / HTML 5/ Simple CALCULATOR

September 03, 2021 0 Comments

 

Simple CALCULATOR

Content edited

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 . 

  1. The heading should be done using the font color as 'blue' and with font size as '20'. (Use <font> tag)
  2. The height and width of the images with the name “submit” and “reset” should be '80'.
  3. The height and width of the calculator image should be '300' and '400'.



Code(ANSWER):


calculator.html:
<DOCTYPE html>
    <html>
        <head>
            <font size="20" color="BLUE">Calculator</font></br>
            <img src="calculator.jpg" height="300px" width="400px">
        </head>
        <body><form><table cellspacing="5">
            <tr><td>Input1</td> <td><input type="number" value="" name="input1"></td></tr>
            <tr><td>Input2</td><td> <input type="number" value="" name="input2"></td><tr>
            <tr><td>Select Operation</td> <td><select name="operation">
                            <option value="Select..">Select..</option>
                            <option value="ADD">ADD</option>
                            <option value="SUBTRACT">SUBTRACT</option>
                            <option value="MULTIPLY">MULTIPLY</option>
                            <option value="DIVIDE">DIVIDE</option>
                            </select></td></tr>
            <tr><td><input type="image" src="calc.jpg" name="submit" width="80" height="80"/>
            </td><td><input type="image" src="reset.jpg" name="reset" width="80" height="80"/>
            </td></tr>                
        </table></form></body>
    </html>




By at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)