Part I: JS with AJAX and fetch

Part I (JS with AJAX and fetch): Scenario

Part I (JS with AJAX and fetch): Screenshot 1/3

Part I (JS with AJAX and fetch): Screenshot 2/3

Part I (JS with AJAX and fetch): Screenshot 3/3

Part I (JS with AJAX and fetch): Instructions 1/2

There are a lot of pieces in this task, so taking the time to develop a clear plan-of-action will save you a great deal of hassle and debugging later on. First, note that the menu the manager provided you through the API in JSON format will most likely be updated in the future depending on supply and demand. You know to avoid hardcoding values in the HTML, but rather use JS to generate the menu when the page loads. This means that the HTML given to you will most likely not change at all here. Fortunately there is already a script tag at the top that points to a .js file with some behavior already written.

Part I (JS with AJAX and fetch): Instructions 2/2

Recall that you can use AJAX with JS to request data from the server and process/return the requested data with a web service. Since the data is conveniently given to you in JSON format, this should be fairly straightforward.

Your next step is to look at the API documentation to understand the JSON that is returned by the service. Then look at the screenshots and see what data can map to the elements that will be on the page.

Part I (AJAX with JS and PHP): Development Strategy

1. Identify the key components of each category shown on the screenshots. What classes might you add and style in CSS? What layout techniques have you learned to achieve different layouts?
2. Examine the code that was given to you to see what helper functions are already there. Which functions manipulate the DOM? Which functions potentially create the pieces of the menu that you need to display on the screen?
3. Find where the previous developers stubbed out the AJAX request to the web service to fetch the JSON from the server. The returned JSON will be used to populate the food menu. The previous developers were at least kind and a) commented their code and b) left hints as to where you should complete the code with comments that begin with /**** TO DO: . Now it's your turn to make this work!

Part II: Debugging buggy code

Part II (Debugging): Strategy

Once you get the fetch working, ensure that all parts of the page work. When you click on a radio button, does the total update and is it correct? What happens when you click "Submit your order"? What other things do you think you can test to ensure this page is functioning correctly?

When you find a problem, use the Chrome inspector to help you isolate what the problem is. Some helpful hints are:

• Make sure you set breakpoints where you think the code should be executing. Did the code that you expected execute?
• Read all of the errors and warnings thrown by the inspector tool carefully!!!
• Set breakpoints and observe local and module-global variables to make sure they the values you expect
• Use console.log to print information out that may help you isolate the problem
• Talk to your Debug duck!

Part III: Processing User Input

Part III (Processing User Input): Scenario

The manager is very happy at the progress you've made and seeing everything start to come together. Now that you have a fairly solid foundation to populate the menu, it's time to work on processing user input on the page using JS.

Part III (Processing User Input): Instructions

Ensure that a customer may choose no more than 1 drink item and 1 bakery item (a customer may choose 1 of each). If the customer chooses a drink, the "sizes" section of the menu should have an option set to 12oz by default (otherwise no size should be checked if the user hasn't selected a drink item).

Whenever a change is made to the selected items on the menu, the price displayed at the bottom of the page, listed as "Your total (before tip and 8% tax)", should be updated. The value for the "final cost" displayed at the very bottom of the page should be equal to (price * 1.08 + tip), where "price" is the price before tip and tax.

For the user's order information at the bottom of the page, they should only be able to enter numbers for the tip, and shouldn't be able to enter negative values. The value they enter for "State" should be in the format of a 2-letter state code (e.g., WA for Washington).

Part IV: Storing your order with localStorage

Part IV (Storing your order with localStorage): Scenario

Your manager now asks you to implement a feature to save the customer's last order so it will be easy for them to come back the next time and order again. The order information will contain the drink (if any), size of the drink (if a drink is chosen), baked good (if any), tip, and total cost.

Part IV (Storing your order with localStorage): Instructions

Now whenever the user clicks "Submit Your order" you should use your window.localStorage to save all of the information the user has entered onto the page: which drink, the size, the baked good, as well as the tip, address, city state and zip code. You do not need to store the total cost, that can be regenerated when you load the information back in from storage.

Next, when the page is loaded, reload this information from local storage and update the fields and radio buttons accordingly. Finally once all of the information is reloaded, you can recalculate the cost.

You will find the documentation on localStorage helpful in knowing how to set and get an item.

Be sure to take a look at the application tab in your developer tools to see that your localStorage is being set correctly.

Solution

You can find one solution here.