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

  1. 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%)
  2. 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%).
  3. 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.
  4. 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.

Solutions

Expert Solution

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]


Related Solutions

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.
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...
Make a modest or simple Web page using Python flask. The basic components of HTML should...
Make a modest or simple Web page using Python flask. The basic components of HTML should be included. The Web page should have at least 3 Headings(<h1>), paragraph (<p>), comments (<!-- -->), ordered list, unordered list, three links to website, and should display time & date. Example: <html>     <head>         <title>Page Title</title>     </head> <body>     ..new page content.. </body> </html>
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT