CSE 154
Section 12: Mowgli's Café!
Part I: Forms, Validation, and a bit of localStorage
Mowgli's Café
Restaurant Website Scenario
Following your exciting (and sometimes challenging) quarter in CSE 154, you find your first web-dev opportunity in the real world. A new local café called Mowgli's Café is joining the online-delivery craze, aiming to provide customers with fresh coffee and breakfast at the click of a button. They've just hired you to create their website.
A designer with little web development background has created a PNG using Adobe Illustrator for the site design the manager wants, as well as specifications for desired behavior. The owners hired a small team of developers to start the project, but for personal reasons they had to drop the contract rather quickly leaving you to pick up the with the codebase as it is. They told you to find the starter files here.
Note: This scenario is very similar to web projects done by developer "contractors" hired on a project-basis like this....
First-Things-First: JS Debugging Strategies
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
- Use the Networks tab to see what information you're getting back in requests!
- Talk to your Debug duck!
Part I (JS with AJAX and fetch): Scenario
First, the manager asks you to implement the menu, listing all of the current items offered by the café and their prices.
They provided you with a brief document which describes an API that returns all of the data you need to populate the menu.
They ask that you maintain the organization in the JSON format as much as possible, grouping the different categories and subcategories nicely so that customers can easily navigate the menu page. The designer has provided you another set of screenshots to guide you, provided on the slide below. Additional instructions and hints are also provided further down the slides.
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
- 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?
- 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?
-
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: Validating and Processing User Input
Part II: 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 II: Validating the Order Form (HTML5 Attributes)
Note: We aren't going to be POSTing with this form until later!
For the user's order information at the bottom of the page, all inputs should be required. All user 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).
Can you think of anything else that you can do with HTML5 features for user-friendly validation?
Review examples from lecture yesterday to help get started with different ways inputs can be validated!
Part II (Processing and Validating Menu Selections in JS)
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.
Part III: Storing your order with localStorage
Work through the instructions for this part to practice with localStorage in the slides below!
Part III (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 III (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 may find the lecture slides or documentation on localStorage helpful in reviewing 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 a runnable HTML solution here: mowglis.html
You can find one possible JS solution (with some differnet HTML5 validation attributes) here: mowglis.js