let aragorn = { name: "Aragorn's Orc BBQ", //The name of the restaurant min_order: 20, //The minimum order amount required to place an order delivery_charge: 5, //The delivery charge for this restaurant //The menu menu: { //First category "Appetizers": { //First item of this category 0: { name: "Orc feet", description: "Seasoned and grilled over an open flame.", // price: 5.50 }, 1: { name: "Pickled Orc fingers", description: "Served with warm bread, 5 per order.", price: 4.00 }, 2: { //Thank you Kiratchii name: "Sauron's Lava Soup", description: "It's just really spicy water.", price: 7.50 }, 3: { name: "Eowyn's (In)Famous Stew", description: "Bet you can't eat it all.", price: 0.50 }, 4: { name: "The 9 rings of men.", description: "The finest of onion rings served with 9 different dipping sauces.", price: 14.50 } }, "Combos": { 5: { name: "Buying the Farm", description: "An arm and a leg, a side of cheek meat, and a buttered biscuit.", price: 15.99 }, 6: { name: "The Black Gate Box", description: "Lots of unidentified pieces. Serves 50.", price: 65.00 }, 7: {//Thanks to M_Sabeyon name: "Mount Doom Roast Special with Side of Precious Onion Rings.", description: "Smeagol's favorite.", price: 15.75 }, 8: { //Thanks Shar[TA] name: "Morgoth's Scorched Burgers with Chips", description: "Blackened beyond recognition.", price: 13.33 }, 10: { name: "Slab of Lurtz Meat with Greens.", description: "Get it while supplies last.", price: 17.50 }, 11: { name: "Rangers Field Feast.", description: "Is it chicken? Is it rabbit? Or...", price: 5.99 } }, "Drinks": { 12: { name: "Orc's Blood Mead", description: "It's actually raspberries - Orc's blood would be gross.", price: 5.99 }, 13: { name: "Gondorian Grenache", description: "A fine rose wine.", price: 7.99 }, 14: { name: "Mordor Mourvedre", description: "A less-fine rose wine.", price: 5.99 } } } }; let legolas = { name: "Lembas by Legolas", min_order: 15, delivery_fee: 3.99, menu: { "Lembas": { 0: { name: "Single", description: "One piece of lembas.", price: 3 }, 1: { name: "Double", description: "Two pieces of lembas.", price: 5.50 }, 2: { name: "Triple", description: "Three pieces, which should be more than enough.", price: 8.00 } }, "Combos": { 3: { name: "Second Breakfast", description: "Two pieces of lembas with honey.", price: 7.50 }, 4: { name: "There and Back Again", description: "All you need for a long journey - 6 pieces of lembas, salted pork, and a flagon of wine.", price: 25.99 }, 5: { name: "Best Friends Forever", description: "Lembas and a heavy stout.", price: 6.60 } } } }; let frodo = { name: "Frodo's Flapjacks", min_order: 35, delivery_fee: 6, menu: { "Breakfast": { 0: { name: "Hobbit Hash", description: "Five flapjacks, potatoes, leeks, garlic, cheese.", price: 9.00 }, 1: { name: "The Full Flapjack Breakfast", description: "Eight flapjacks, two sausages, 3 eggs, 4 slices of bacon, beans, and a coffee.", price: 14.00 }, 2: { name: "Southfarthing Slammer", description: "15 flapjacks and 2 pints of syrup.", price: 12.00 } }, "Second Breakfast": { 3: { name: "Beorning Breakfast", description: "6 flapjacks smothers in honey.", price: 7.50 }, 4: { name: "Shire Strawberry Special", description: "6 flapjacks and a hearty serving of strawberry jam.", price: 8 }, 5: { name: "Buckland Blackberry Breakfast", description: "6 flapjacks covered in fresh blackberries. Served with a large side of sausage.", price: 14.99 } }, "Elevenses": { 6: { name: "Lembas", description: "Three pieces of traditional Elvish Waybread", price: 7.70 }, 7: { name: "Muffins of the Marish", description: "A variety of 8 different types of muffins, served with tea.", price: 9.00 }, 8: { name: "Hasty Hobbit Hash", description: "Potatoes with onions and cheese. Served with coffee.", price: 5.00 } }, "Luncheon": { 9: { name: "Shepherd's Pie", description: "A classic. Includes 3 pies.", price: 15.99 }, 10: { name: "Roast Pork", description: "An entire pig slow-roasted over a fire.", price: 27.99 }, 11: { name: "Fish and Chips", description: "Fish - fried. Chips - nice and crispy.", price: 5.99 } }, "Afternoon Tea": { 12: { name: "Tea", description: "Served with sugar and cream.", price: 3 }, 13: { name: "Coffee", description: "Served with sugar and cream.", price: 3.50 }, 14: { name: "Cookies and Cream", description: "A dozen cookies served with a vat of cream.", price: 15.99 }, 15: { name: "Mixed Berry Pie", description: "Fresh baked daily.", price: 7.00 } }, "Dinner": { 16: { name: "Po-ta-to Platter", description: "Boiled. Mashed. Stuck in a stew.", price: 6 }, 17: { name: "Bree and Apple", description: "One wheel of brie with slices of apple.", price: 7.99 }, 18: { name: "Maggot's Mushroom Mashup", description: "It sounds disgusting, but its pretty good", price: 6.50 }, 19: { name: "Fresh Baked Bread", description: "A whole loaf of the finest bread the Shire has to offer.", price: 6 }, 20: { name: "Pint of Ale", description: "Yes, it comes in pints.", price: 5 } }, "Supper": { 21: { name: "Sausage Sandwich", description: "Six whole sausages served on a loaf of bread. Covered in onions, mushrooms and gravy.", price: 15.99 }, 22: { name: "Shire Supper", description: "End the day as you started it, with a dozen flapjacks, 5 eggs, 3 sausages, 7 pieces of bacon, and a pint of ale.", price: 37.99 } } } }; let restaurants = [aragorn, legolas, frodo]; 

Assignment Background In this assignment, you will develop a web page that allows a user to browse menus for several restaurants, add items from a restaurant to an order, and simulate placing an order. Everything you implement for this assignment will involve client-side programming within the browser. You must implement everything using plain Javascript and cannot use external libraries/tools such as jQuery and Bootstrap. Before starting your design for the assignment, you are encouraged to read through the entire specification. It is possible that later problems will inform your design decisions and, by preparing in advance, you can avoid having to significantly refactor your code as you progress through the assignment. To begin the assignment, download the client.js file from cuLearn. This file contains three variables (aragorn, legolas, frodo) containing the menu data for each of the three included restaurants. There is an also an array called restaurants which contains each of the three menu objects. Each menu object contains four properties: 1. name the name of the restaurant 2. min_order - the minimum order amount required to place an order 3. delivery_charge the delivery charge for this restaurant 4. menu an object containing the menu data for this restaurant The menu object may have any number of properties, each of which indicates a category within the restaurant's menu. The value associated with each category property will also be an object. The properties of the category object are unique IDs associated with each menu item. The value associated with each unique menu item ID includes the name, description, and price of that item. A general example of the format of a restaurant's data is included in the example-menu-data.txt file posted on cuLearn. You may use the data as it is provided, or you may re-format the data in any way you desire. Page Load (10 marks) Create an HTML page called order.html. When the page loads, the following requirement must be met: 1. The page should contain a drop-down list or other method for selecting the current restaurant. You can either have a default restaurant selected, in which case the page contents should be initialized to the menu of that restaurant, or have a 'Select a restaurant...' type of option with an initially blank menu section. 2. The contents of the drop-down list must be dynamically created from the provided restaurant data. You should not hard code the selections. Selecting a Restaurant (20 marks) When the selected restaurant is changed, the following requirements must be met: 1. If there is a current order with items in it, a prompt should be displayed to the user to confirm whether they want to clear the order or not. If the user does not want to clear the order, then no data on the page should change (i.e., it cancels the affect of the change in restaurant). 2. If the user accepts clearing the current order, or if there is no current order, then the newly selected restaurants information should be placed on the page. Any information from the previous restaurant should be removed. Any existing order information should be cleared. 3. The restaurant's name, minimum order, and delivery fee should be displayed near the top of the page. 4. The menu and order information should be displayed in a three-column layout below the basic restaurant information. The left column must have a list of the categories in the restaurant's menu. These categories should also be links to allow the user to skip directly to that category within the menu. The middle column should present the menu of the restaurant (see Menu Requirements below). The right column should present the current order summary (see Order Summary Requirements below). Menu Requirements (20 marks) 1. The menu should be organized so each category of item is clearly separated. 2. Each item should be clearly separated (e.g., using a list) and show the name, description, and price of the item. 3. The add.jpg image should be shown near each item and clicking this image should allow the user to increase the quantity of that item in the order by 1. You will have to scale the size of the image. You can use an alternate image or element, but it must be clear that it is responsible for increasing the amount of an item in the order. 4. All dollar values should be displayed to two decimal places. Order Summary Requirements (30 marks) 1. For each item currently in the order, the summary should include the item's name, number of units in the order, and total price of that item (unit price * number of units). 2. The remove.jpg image should be shown near each item and clicking this image should allow the user to decrease the quantity of that item by 1. If the quantity goes to 0, the item should not show up in the summary. You may use an alternate image or element, but it must be clear that it is responsible for decreasing the amount of an item in the order. 3. Following the list of items, the current subtotal (sum of all item prices) should be displayed, along with the delivery fee, the tax (use a tax rate of 10%) and the current order total. 4. If the current subtotal is greater than or equal to the minimum order amount of the selected restaurant, there should be an element that allows the user to submit the order. When this element is clicked, an alert should be displayed confirming that the order has been submitted and the page should be reset. 5. If the current subtotal is less than the minimum order, a small message should be placed at the bottom of the summary indicating the total amount of dollars that must be added before the order can be placed. For example, if the minimum order is $25 and the current subtotal is $10, the message could say "You must add $15.00 more to your order before submitting". 6. All dollar values should be displayed to two decimal places. Assignment Background In this assignment, you will develop a web page that allows a user to browse menus for several restaurants, add items from a restaurant to an order, and simulate placing an order. Everything you implement for this assignment will involve client-side programming within the browser. You must implement everything using plain Javascript and cannot use external libraries/tools such as jQuery and Bootstrap. Before starting your design for the assignment, you are encouraged to read through the entire specification. It is possible that later problems will inform your design decisions and, by preparing in advance, you can avoid having to significantly refactor your code as you progress through the assignment. To begin the assignment, download the client.js file from cuLearn. This file contains three variables (aragorn, legolas, frodo) containing the menu data for each of the three included restaurants. There is an also an array called restaurants which contains each of the three menu objects. Each menu object contains four properties: 1. name the name of the restaurant 2. min_order - the minimum order amount required to place an order 3. delivery_charge the delivery charge for this restaurant 4. menu an object containing the menu data for this restaurant The menu object may have any number of properties, each of which indicates a category within the restaurant's menu. The value associated with each category property will also be an object. The properties of the category object are unique IDs associated with each menu item. The value associated with each unique menu item ID includes the name, description, and price of that item. A general example of the format of a restaurant's data is included in the example-menu-data.txt file posted on cuLearn. You may use the data as it is provided, or you may re-format the data in any way you desire. Page Load (10 marks) Create an HTML page called order.html. When the page loads, the following requirement must be met: 1. The page should contain a drop-down list or other method for selecting the current restaurant. You can either have a default restaurant selected, in which case the page contents should be initialized to the menu of that restaurant, or have a 'Select a restaurant...' type of option with an initially blank menu section. 2. The contents of the drop-down list must be dynamically created from the provided restaurant data. You should not hard code the selections. Selecting a Restaurant (20 marks) When the selected restaurant is changed, the following requirements must be met: 1. If there is a current order with items in it, a prompt should be displayed to the user to confirm whether they want to clear the order or not. If the user does not want to clear the order, then no data on the page should change (i.e., it cancels the affect of the change in restaurant). 2. If the user accepts clearing the current order, or if there is no current order, then the newly selected restaurants information should be placed on the page. Any information from the previous restaurant should be removed. Any existing order information should be cleared. 3. The restaurant's name, minimum order, and delivery fee should be displayed near the top of the page. 4. The menu and order information should be displayed in a three-column layout below the basic restaurant information. The left column must have a list of the categories in the restaurant's menu. These categories should also be links to allow the user to skip directly to that category within the menu. The middle column should present the menu of the restaurant (see Menu Requirements below). The right column should present the current order summary (see Order Summary Requirements below). Menu Requirements (20 marks) 1. The menu should be organized so each category of item is clearly separated. 2. Each item should be clearly separated (e.g., using a list) and show the name, description, and price of the item. 3. The add.jpg image should be shown near each item and clicking this image should allow the user to increase the quantity of that item in the order by 1. You will have to scale the size of the image. You can use an alternate image or element, but it must be clear that it is responsible for increasing the amount of an item in the order. 4. All dollar values should be displayed to two decimal places. Order Summary Requirements (30 marks) 1. For each item currently in the order, the summary should include the item's name, number of units in the order, and total price of that item (unit price * number of units). 2. The remove.jpg image should be shown near each item and clicking this image should allow the user to decrease the quantity of that item by 1. If the quantity goes to 0, the item should not show up in the summary. You may use an alternate image or element, but it must be clear that it is responsible for decreasing the amount of an item in the order. 3. Following the list of items, the current subtotal (sum of all item prices) should be displayed, along with the delivery fee, the tax (use a tax rate of 10%) and the current order total. 4. If the current subtotal is greater than or equal to the minimum order amount of the selected restaurant, there should be an element that allows the user to submit the order. When this element is clicked, an alert should be displayed confirming that the order has been submitted and the page should be reset. 5. If the current subtotal is less than the minimum order, a small message should be placed at the bottom of the summary indicating the total amount of dollars that must be added before the order can be placed. For example, if the minimum order is $25 and the current subtotal is $10, the message could say "You must add $15.00 more to your order before submitting". 6. All dollar values should be displayed to two decimal places