title: Correct HTML Component div must be used with appropriate constraints false
body: <p><strong>Specification:</strong></p>
  
  <p>Create a web page which calculates the discount for the product for the specific season. The seasons with their discount rates are summer (10%), new year (5%) and clearance (15%). The discount is calculated on the price of the product. The web page should look like</p>
  
  <p>The web page is designed using HTML, formatting and styling is done using CSS. The client side validation is performed using JavaScript.</p>
  
  <p>Web page Requirements</p>
  
  <p>The name of the web page is "index.html". The web page background color should be #99FFFF. The label “Discount Price” should be a heading tag(h1) and should be italic bolded, centered, and in maroon color.</p>
  
  <p>Product name, price and season should be within a table. Product name and price are <code>text</code> box with the tag name “name” and “price” respectively, <code>season</code> is a drop down box with tag name “season”. The drop down box will have the following value and display value</p>
  
  <pre><code>    ·         summer           -           SUMMER SALE
  
      ·         newyear          -           NEW YEAR SALE
  
      ·         clearance        -           CLEARANCE SALE
  </code></pre>
  
  <p>Product Name should not be empty and should contain only alphabets and space. The Price text box cannot be empty and should be <code>number</code> with <code>value</code> greater than zero.</p>
  
  <p>The table should be margin-left aligned with 35% and an outer border-style of solid 5px and 30% width. The space between <code>element</code> and the border must be 10px.</p>
  
  <p>A submit button with a value “GET DISCOUNT PRICE” should be present. On clicking the button the web page calculates the discounted price for the product.</p>
  
  <p>The outcome must be displayed in 2 div tags, where the first will have the id named “discount” and is to display the discount % of the product and the second will have the id named “result” and is to display the discounted price of the product. Both the div tag should be <code>center</code> aligned with <code>bolder</code> text. The <code>font</code> of the discounted price must be italic #FF0000 and 40px size and for discount % it is 25px. Have separate styles for div, discount and result</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>{
      background-color: #99FFFF;
  }
  h1{
      color:maroon;
      text-align:center;
      font-weight: bold;
      font-style:italic;
  }
  table,td{
      border-style: solid;
      padding: 10px;
      border-width: 5px;
      margin-left: 35%;
      width: 30%;
  }
  div{
      text-align:center;
      font-weight: bold;
  }
  #result{
      font-style:italic;
      color:#FF0000 ;
      font-size:40px;
  }
  #discount{
      font-size:25px;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>function discount()
  {
      var s = document.getElementById("season").value;
      var p = document.getElementById("price").value;
      var r;
  
      if (s=='summer')
      {
          document.getElementById("discount").innerHTML = "The discount is 10%";
          r=(p-(p*0.1));
      }
      else if(s=='newyear')
      {
          document.getElementById("discount").innerHTML = "The discount is 5%";
          r=(p-(p*0.05));
      }
      else
      {
          document.getElementById("discount").innerHTML = "The discount is 15%";
          r=(p-(p*0.15));
      }
  
      document.getElementById("result").innerHTML = "The discount price: Rs " + r;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;index.html&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;DISCOUNT PRICE&lt;/h1&gt;
          &lt;form&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Product Name&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" name="name" id="name" required pattern="[a-zA-Z ]+"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Product Price&lt;/td&gt;
                      &lt;td&gt;&lt;input type="number" name="price"  id="price" min="1"  &gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Season&lt;/td&gt;
                      &lt;td&gt;
                          &lt;select id="season" name="season"&gt;
                              &lt;option value="summer"&gt;SUMMER SALE&lt;/option&gt;
                              &lt;option value="newyear"&gt;NEW YEAR SALE&lt;/option&gt;
                              &lt;option value="clearance"&gt;CLEARANCE SALE&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;center&gt;&lt;input type="button" value="GET DISCOUNT PRICE" onclick="discount()"&gt;&lt;/center&gt;
          &lt;/form&gt;
          &lt;div id="discount"&gt;&lt;/div&gt;
          &lt;div id="result"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Error:</strong></p>
  
  <blockquote>
    <p>testWeb(jspackage.JSAssignmentDiscount):
    Correct HTML Component div must be used with appropriate constraints
    false</p>
  </blockquote>