Question

In: Computer Science

Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org...

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 (C_Total) would be:

C_{OriginalPrice} = 30*40=1200

D_MainDiscount = 1200*0.1=120

C_TotalPrice = C_{OriginalPrice} - D_MainDiscount= 1200-120 = 1080

Program Requirements: Your program must be written in JavaScript. In addition, you should follow the specific guidelines below.

Use the window.confirm() method to ask the user if they want to purchase memberships (if the user doesn’t want to continue, display an appropriate message in the browser; otherwise, continue with the next steps). Note: the window.confirm() method returns true if the user chooses the “OK” button in the dialog window and false if the user chooses the “Cancel” button. (20%)
Use the window.prompt() method to gather user input, including the user’s name, mailing address, phone number and email address (see point 4) (20%).
Use JavaScript to output the following user information showing on the HTML page (30%):
1. Number of memberships purchased and cost per membership,
2. Total cost before discount,
3. Amount of discount (percentage and money amount), and
4. Total cost after discount.
Also use JavaScript to output user information showing on the web page. The user information should include (20%):
1. User’s name,
2. User’s address,
3. User’s phone number, and
4. User’s email address.

Expert Solution

HTML/Javascript Code:

<html>

<head>

<title>

</title>

</head>

<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 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>

//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

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]

venereology answered 1 year ago

JavaScript. Create a Web page with the following features: Three lines of text about anything. A...

JavaScript. Create a Web page with the following features: Three lines of text about anything. A link to OCC (http://www.orangecoastcollege.edu) that opens in a new browser window. An image link (graphical link). A link to the top of the page. A graphical link to your email. Formatted text throughout the page. Horizontal lines

Create a web page that contains a simple math test. The page should have the following...

Create a web page that contains a simple math test. The page should have the following arithmetic problems. Add a button under each problem which, when clicked, will display a prompt for the user to enter the answer. Add a swcond button which, when clicked, will check to see if the user's answer is correct. The output should be either "correct" or "incorrect" displayed in an alert box. 1. 5+9= 2. 4*6= 3. 25-14= 4. 48/3= 5. 26%6=

Write a simple javascript program using express and node.js to create a simple webpage that can...

Write a simple javascript program using express and node.js to create a simple webpage that can lead to other pages within the program. if possible, Comment everything out so I could understand how every things works. But basically, server should be hosted on localhost:8000 and should have a simple starting page. Maybe a welcome message, with at least two "links" that goes to a "homepage" and then a "exit" page.

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...

Using Javascript Create a page places an order for a Calzone: Using Text box to get...

Using Javascript Create a page places an order for a Calzone: Using Text box to get customers Name Radio Buttons for sizes: small, medium, large list for type of crust: crispy, soft, hard check boxes for toppings, with at least 3 to be selected Submit button that displays the order information.

Create a web page using PHP that allows the users to create an account (a username...

Create a web page using PHP that allows the users to create an account (a username and a password). There should be a login page that allows users to create an account by entering their preferred username and password. The same page should also let users login if they already have an account. If a user is logged in successfully , they should be able to enter a comment and also read the comments entered by others previously.

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...

Create a simple web page with two(2) AJAX interactions with a mySQL Database AJAX 1 should...

Create a simple web page with two(2) AJAX interactions with a mySQL Database AJAX 1 should return HTML content for use on the page AJAX 2 should return JSON content for use on the page Use a JS library, such as jQuery, to ensure the AJAX works on all browsers

Define Internet, Web, HTML, Javascript, Web Page, Ecommerce, and Internet Service Provider ISP) in your own...

Define Internet, Web, HTML, Javascript, Web Page, Ecommerce, and Internet Service Provider ISP) in your own words in one essay.

Create a web page using PHP and HTML that contains a list of movie names available...

Create a web page using PHP and HTML that contains a list of movie names available for rent (at least 10 movies), so that each time you visit the home page, you see a different order of movies in the list. The movie names are required. 2) The rental price for each movie ranges between $1.99 to $7.99. • Create an associative array with a code for the movie as the key (e.g., movie1, movie2, etc.) and the associated rental...