1. Create an HTML file and give it all of the necessary basic tags.
3. Give the page a heading of “[Your Business Name] – eCommerce”.
5. Have a table with three columns with headings: Product/Service Name, Price and Discount.
6. Include at least 4 products or services in this table, each on its own row. Each product’s or service’s information should appear on its own row in the table.
7. The Discount is going to be the percentage that your business will take off of the total purchase price for a given product. This will be some number between 1% and 50%. However, you will display the Discount as a decimal. This means that you would use a number equal to the Discount divided by 100. eg 10% discount will be written in the HTML table as 0.10, an 8% discount would be written as .08.
Note: this will make your job easier when you need to do calculations in your code
Have a prompt box to ask the customer for their name. Your prompt should have the message “Welcome to [Your Business Name]. Please enter your name”. Save the customer’s name in a variable. Use your business’ name, where appropriate.
Next have a welcome message using an alert box. For example: “Hello [customer name here]. Please look through our available products and services before placing your order.”
Have two prompt boxes to take as input the name of the product/service the customer wants from the table and the quantity they want to purchase.
Have a confirm statement verifying the placed order. For example your Confirm box should show the message:
Jim you ordered 2 of Ice Cream Cone. Is this correct?
If the user clicks on CANCEL, the program stops and a message is displayed saying:
Refresh the page to reload and place a new order.
Hint: This will most likely occur in an else branch
If the user clicks OK, proceed to calculating the cost of purchase.
Use the if-else structure to determine what the price and discount of the product is based on the product name entered by the user.
Note: Assume the product name will be entered in as all lower-case characters.
Hint: You will have an if-else condition for each possible product/service; the statements that run for each of these conditions will set the discount and price.
If a user enters a product name that does not match the choices displayed in the table, display the following message before quitting from the program.
Hint: This can be done in the final else part of the if- else structure that looks up the product price and discount.
Sorry, Jim. You entered an invalid product. Refresh the page to reload and place the order again.
- Based on these inputs calculate the cost of the purchase using the formula:
cost_of_order = price_of_product * quantity_required
discount = price_of_product item_discount quantity_required
- Finally have an output using the document.write. The format should be as follows:
(The bold face words below represent either user-supplied inputs stored in variables or the result of calculation )
Thank you for placing an order with us, Jim.
The cost of buying 2 of Ice Cream Cone is $5.32.
The discount for this purchase is $ .53
With discount, your total order cost is $4.79.
- Note: If you do not have a valid product name, make sure this last item does not print. You can do this by having an if-structure around this output that runs only if a valid product name has been entered.
(Note: Each output sentence needs to be printed on a separate line.)
Here is my code thus far:
var name, product, price, discount, quantity;
var name = prompt("Welcome to . What is your name?","Enter name");
var sentence = "Hello " + name + " please look through our available products and services before placing your order.";
var product = prompt("Please enter the name of the product you are looking to purchase from the table.","Enter product");
var quantity = 1*prompt("How many " + product + " would you like to purchase?","Enter quantity");
var cost= price * quantity;
var orderdiscount= price * discount * quantity;
var totalcost= cost - orderdiscount;
a = confirm(+ name + ", you ordered " + quantity + " of " + product + ". Is this correct?");
total= cost - (price * discount * quantity);
if (product == "ice cream cake")
price = 20;
discount = .15;
else if (product == "ice cream cone")
price = 3;
discount = .01;
else if (product == "small ice cream sundae")
price = 5;
discount = .05;
else if (product == "large ice cream sundae")
price = 6;
discount = .05;
else if (prompt=("Sorry, " + name + ". You entered an invalid product. Refresh the page to reload and place the order again."))
alert("Refresh the page to reload and place a new order");
[U]document.write("Thank you for placing an order with us, " + name + ".");
document.write("The cost of buying " + quantity + " of " + product + " is " + cost + ".");
document.write("The discount for this purchase is " + orderdiscount + ".");
document.write("With the discount, your total order cost is " + totalcost + ".");[/U]
I've gotten up to #15 on my list of instructions and that's where it begins to get really tough for me. First of all, even when I enter the valid product names based on my table, and the quantity I want, it returns this (I underlined the section of code that corresponds to what a wrote below for easy finding):
Thank you for placing an order with us, Enter name.
The cost of buying 2 of ice cream cake is NaN.
The discount for this purchase is NaN.
With the discount, your total order cost is NaN.
I have no idea what NaN means or why my code isn't returning a numerical value. Also, even when I enter something that does not correspond to my products, the code continues running instead of cancelling like it's supposed to in #16. Anyway, if anyone could help me sort out these problems and finish up this code, I'd really appreciate it.