In: Computer Science
Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org sells yearly membership for $30 each. Discounts are given for buying in bulk (see Table 1 and example below).
Table 1 – Discounts |
|
Quantity Purchased |
Discount |
1 – 29 |
0% |
30 - 59 |
10% |
60 + |
15% |
Example: If a customer purchases 40 family membership, their total price (CTotal) would be:
COriginalPrice = 30*40=1200
DMainDiscount = 1200*0.1=120
CTotalPrice = COriginalPrice - DMainDiscount= 1200-120 = 1080
Program Requirements: Your program must be written in JavaScript. In addition, you should follow the specific guidelines below.
HTML/Javascript Code:
<html>
<head>
<title>
</title>
</head>
<body><!--HTML Body-->
<!--Div and span tags to display the information-->
<!--By default we hide the information using style="display: none;"-->
<div class="details" style="display: none;">Number of memberships purchased: <span id="memval"></span></div>
<div class="details" style="display: none;">Cost per Membership: <span id="costperval"></span></div>
<div class="details" style="display: none;">Total cost before discount: <span id="totcostval"></span></div>
<div class="details" style="display: none;">Amount of discount: <span id="discval"></span></div>
<div class="details" style="display: none;">Total cost after discount: <span id="totafterdiscval"></span></div>
<br>
<div class="details" style="display: none;">User Name: <span id="nameval"></span></div>
<div class="details" style="display: none;">User Address: <span id="addrval"></span></div>
<div class="details" style="display: none;">User Phone: <span id="phoneval"></span></div>
<div class="details" style="display: none;">User Email: <span id="emailval"></span></div>
<script> //Javascript code
//check whether user wants to purchase a membership
if(window.confirm("Do you want to purchace a membership?")){
//get the information from the user
let name = window.prompt("Enter your name: ")
let address = window.prompt("Enter your address: ")
let phone = window.prompt("Enter your phone: ")
let email = window.prompt("Enter your email: ")
let memCount = window.prompt("Enter the number of membership you want to purchase: ")
//Show the div tags which where originally hidden
divtag = document.getElementsByClassName("details")
for(i = 0; i< divtag.length; i++){
divtag[i].style.display = ""
}
//Display the information in the span tag by using getElementById and innerText
document.getElementById("memval").innerText = memCount
document.getElementById("costperval").innerText = "$30"
//calculate total value of purchase
let totValue = 30 * parseInt(memCount)
document.getElementById("totcostval").innerText = totValue
//calculating discount using if
let disc = 0
if(memCount >= 30){
disc = totValue * 0.1
}else if(memCount >= 60 ){
disc = totValue * 0.15
}
//display discount and value after discount
document.getElementById("discval").innerText = disc
document.getElementById("totafterdiscval").innerText = totValue - disc
//display user information
document.getElementById("nameval").innerText = name
document.getElementById("addrval").innerText = address
document.getElementById("phoneval").innerText = phone
document.getElementById("emailval").innerText = email
}else{//else display a message
window.alert("You can purchase a membership another time.")
}
</script>
</body>
</html>
Sample Output:
We were unable to transcribe this image
We were unable to transcribe this image
Number of memberships purchased: 35 Cost per Membership: $30 Total cost before discount: 1050 Amount of discount: 105 Total cost before discount: 945 User Name: TestUser User Address: Test Address, 234 User Phone: 123456789 User Email: [email protected]