<E-Book Portal wanted to give grand discount to two types of Books – Comics and Science. Discount is given based on the number of books (bulk purchase), the customer order for that category.
RULES/CONSTRAINTS: All validations should be based on HTML 5(Do not use Javascript)
· The component name should be same as given above.
· All fields are mandatory.
· Customer Name should contain only alphabets and space.
· Customer Mobile Number should be of 10 digits and should start with 9/8.
Use JavaScript for doing the below calculation:
Customer on entering the valid values and clicking the submit button the total price has to be calculated based on the below given discount rate chart and displayed as “Total Price is: ” ….. in a div tag. The div tag should have an id attribute with value as “result”.
(Total books * perbookCost) - discountpercentage
Discount Rate chart
Book Type Per Book Cost Discount Rate(in percentage)
Science 400 5% if total book count <=250
Science 400 7% if total book count > 250
Comics 300 3% if total book count <=250
Comics 300 4% if total book count > 250
Styles to be applied: (Do not use Inline CSS)
1. Body color should be "#E6E6FA".
2. For the discount rate table the border style should be solid and it should be display on the right side (use float property) of the webpage. (The table should have the id attribute with the value as "discounttable").
3. The heading should be done using <h1> tag the text color should be "#800080", style should be "cursive" and it should be aligned to center of the webpage.
Important Note :
1. Make sure all tags and attributes are in lower case
2. After displaying the output, the page should not get redirected.
3. Do not use 'let' or 'const' keywords. Instead, use 'var'.
4. Use getElementById() or getElementsByName() to fetch value out of the HTML components.
Getting ERROR is:
Fail 1 - Logic is wrong for(Comics - 3%) or Check with Client UI requirements
Fail 2 - Logic is wrong for(Comics - 4%) or Check with Client UI requirements
Fail 3 - Logic is wrong for(Science - 5%) or Check with Client UI requirements
Fail 4 - Logic is wrong for(Science - 7%) or Check with Client UI requirements
What I have tried:
<html>
<style>
body{
background-color:#E6E6FA;
}
#discounttable{
border-style:solid;
float:right;
}
h1{
color:#800080;
font-family:cursive;
text-align:center;
}
h2{
text-align:center;
}
</style>
<script>
function validate()
{
var bcats=document.getElementsByName("bookCategory");
var bcat;
var price;
var disc;
for(var i=0;i<bcats.length;i++)
{
if(bcats[i].checked)
{
bcat=bcats[i].value;
}
}
var bcount=document.getElementById("bookval").value;
bcount=parseInt(bcount);
if(bcat=="Science")
{
price=400;
if(bcount<=250)
{
disc=5;
}
else{
disc=7;
}
}
else{
price=300;
if(bcount<=250)
{
disc=3;
}
else{
disc=4;
}
}
var tot=bcount*price-((bcount*price*disc)/100);
document.getElementById("result").innerHTML="Total Price is:"+tot;
}
</script>
</head>
<body>
<h1>E-BOOK GRAND SALE</h1>
<form name="form">
<table>
<tr>
<td>Customer Name</td>
<td><input type="text" name="customerName" placeholder="Enter the Customer Name" pattern="[a-zA-Z\s]+" required></td>
</tr>
<tr>
<td>Mobile Number</td>
<td><input type="tel" name="customerMobileNumber" placeholder="Enter the Mobile Number" pattern="[89][0-9]{9}" required></td>
</tr>
<tr>
<td>
Book Category
</td>
<td>
<input type="radio" name="bookCategory" value="Science" required>Science
<input type="radio" name="bookCategory" value="Comics" required>Comics
</td>
</tr>
<tr>
<td>Type</td>
<td>
<input list="bookTypes" name="bookType" required auto-complete >
<datalist id="bookTypes" >
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Fortnightly">Fortnightly</option>
</datalist>
</td>
</tr>
<tr>
<td>No of Books Required</td>
<td><input type="range" name="bookCount" id="bookval" min="1" max="500" value="1" oninput="markOutputId.value=bookval.value">
<output name="markOutputName" id="markOutputId"></output></td>
</tr>
<tr>
<td><input type="button" name="submit" value="Calculate Total Price" onclick="validate()"></td>
<td><input type="reset" name="reset" ></td>
</tr>
</table>
</form>
<div id="result"></div>
<table id="discounttable" border="1px">
<caption>Discount Rate Chart</caption>
<tr>
<th>Book Type</th>
<th>
Per Book Cost
</th>
<th>
Discount Rate(in percentage)
</th>
</tr>
<tr>
<td>Science</td>
<td>400</td>
<td>5% if total book count <=250</td>
</tr>
<tr>
<td>Science</td>
<td>400</td>
<td>7% if total book count > 250</td>
</tr>
<tr>
<td>Comics</td>
<td>300</td>
<td>3% if total book count <= 250</td>
</tr>
<tr>
<td>Comics</td>
<td>300</td>
<td>4% if total book count > 250</td>
</tr>
</table>
</body>
</html>
Submit an article or tip