Completing this assignment depends on knowing how to use:
- a CDN to include jQuery in your page
- the jQuery ready function to keep your variables out of global scope
- jQuery methods for selecting and navigating the DOM Tree
- jQuery methods for adding and removing attributes
- jQuery methods for creating a new element and appending it to the DOM
https://github.com/htc-ccis2591/jquery-moonflowers
You’ll want to begin each assignment by forking the repository and cloning it locally. When you are done, you’ll push to GitHub and submit a pull request.
Open the web page in a browser. You’ll see that it loads a page with an image for each item on the menu.
In the spirit of progressive enhancement, the page may not be amazingly beautiful, but all the info is visible without any JavaScript.
For this assignment, you will transform the page with JavaScript & jQuery, altering the DOM so that when the page loads, all images are hidden. Add text under the “Menu” heading to indicate that you can click on an item to see an image. Then when an item is clicked, such as the Cappuccino or the Latte, the corresponding image should show off to the side.
If you look at the HTML provided, you’ll see an image tag in the aside. This is the image that displays on the right side. You can show one of the menu item images by filling in the appropriate value for the src attribute. That value comes from the corresponding “hidden” image in the menu list.
All of this magic is done by adding a few click handlers and by adding and removing attribute values.