Discount Price Calculation in Javascript ~ Multiplex Coder

Question:

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

The outcome webpage should look as

The client side validation is performed using JavaScript.

Web page Requirements

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 color code #b03060.

Product name – a text box with the name “name”, should not be empty, contain only alphabets and space and mandatory field.

Price – a number box with the name price, mandatory field and the minimum value should be greater than 15000.

Season is a drop down box with tag name “season”. The drop down box will have the following value and display value

· summer – SUMMER SALE

· newyear – NEW YEAR SALE

· clearance – CLEARANCE SALE

The table should be left aligned with 35% and an outer border style of solid 5px and 30% border width. The space between element and the border must be 10px.

A submit button with left aligned with 45% and with a value “GET DISCOUNT PRICE” should be present and name should be submit. Once submit, the web page calculates the discounted price for the product.

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 tags should be center aligned with bold text. The font 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

CODE:–

<!DOCTYPE html>

<html>

<head>

<style>

{

font-style: italic;

font-weight: bold;

text-align: center;

color: #b03060;

}

table{

margin-left: 35%;

border-style: solid 5px;

border-width: 30%;

}

tr,td{

padding: 10px;

border-style: solid;

border-width: 2px;

}

#submit{

float: left;

width: 45%;

margin-left: 45%;

}

div{

text-align: center;

font-weight: bold;

}

#result{

font-style: italic;

color: #FF0000;

font-size: 40px;

}

#discount{

font-size: 25px;

}

</style>

</head>

<h1>DISCOUNT PRICE</h1>

<form>

<table>

<tr>

<td>Product Name</td>

</tr>

<tr>

<td>Product Price</td>

</tr>

<tr>

<td>Season</td>

<td>

<option value="summer">SUMMER SALE</option>

<option value="clearance">CLEARANCE SALE</option>

</select>

</td>

</tr>

</table><br>

</form>

function discount(){

var p=document.getElementById("price").value;

var s=document.getElementById("season").value;

var d;

if(s=="summer"){

document.getElementById("discount").innerHTML="The discount is 10%";

d=(p-(p*0.1));

}

else if(s=="newyear"){

document.getElementById("discount").innerHTML="The discount is 5%";

d=(p-(p*0.05));

}

else if(s=="clearance"){

document.getElementById("discount").innerHTML="The discount is 15%";

d=(p-(p*0.15));

}

document.getElementById("result").innerHTML="The discounted price : Rs "+d;

}

</script>

</body>

</html>

Discount Price Calculation in Javascript

Question:

CODE:–

Related Post