HTML5 Simple Calculator CTS

HTML 5 Simple Calculator Code Solution

Bymadwithcode

Create the following Web page with the heading ‘Calculator’ and provided images. 

The web page should contain the following input elements and apply the specified Constraints:

Label NameElement NameConstraints
Input1input1This element is to get the first input. Type should be ‘number’
Input2input2This element is to get the second input. Type should be ‘number’
Select OperationoperationA 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
 submitAn image tag with the source as calc.jpg should be displayed
 resetAn 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 the following styles to the attributes:

  1. Do not use CSS. 
  2. The heading should be done using the font color ‘blue’ and with a font size of ’20’. (Use <font> tag)
  3. The height and width of the images with the name “submit” and “reset” should be ’80’.
  4. The height and width of the calculator image should be ‘300’ and ‘400’.

Calculator.html

<html>
    <head>
        <title>Calculator</title>
    </head>
    <body>
        <font color="blue" size="20">Calculator</font>
        <img id="hero" src="calculator.jpg" alt="calc hero" height="300" width="400"/>
        
        input1 <input type="number" name="input1">
        input2 <input type="number" name="input2">
        Select Operation <select name="operation">
            <option>Select..</option>
            <option>ADD</option>
            <option>SUBTRACT</option>
            <option>MULTIPLY</option>
            <option>DIVIDE</option>
        </select>
        
        <div>
            <div><img src="calc.jpg" height="80" width="80"/></div>
            <div><img src="reset.jpg" height="80" width="80"/></div>
        </div>
    </body>
</html>

Similar Posts