In the previous exercise you learned how to extract data from an object and inject it into a webpage. During the process you created a drop-down list that triggered a function so that, whenever a given value was clicked, a drink name, image, and description appeared on a web page.
Your job for this assignment is to create something very similar with a couple of twists. Here are the instructions:
- Using beverage.js from the previous lesson as an example, create your OWN object with at least 5 name value pairs. (The beverage lesson had five name value pairs)
- Create just ONE function that will display the value of a given name on a web page when a button is clicked. This will require you to add an argument to your function and add a value for the argument when you call the function from a button.
- Create a series of buttons on a webpage that will call the function and display the value for a given name when the button is clicked. You can hard-code the buttons into html (the easy way) or impress me and use JavaScript to generate the buttons in your html (the hard way).
Hint: When you call the function from a button you will need to use single quotes around the argument. In the example below, my function is titled nameit and Latte is the argument.
onclick=”nameit(‘Latte’)”
Here are some examples:
Rubric
A-Level Work
- Exceptional quality, originality, and/or insight
- Fully meets criteria with no significant errors
- Polished, organized, and professional
B-Level Work
- Meets all criteria with minor issues
- Solid understanding and effort
- Good organization and presentation
C-Level Work
- Meets most criteria; notable gaps
- Basic or inconsistent understanding
- Organization or clarity needs work
Below C-Level (Not Passing)
- Disorganized, incomplete, or poor quality
- Meets few or no criteria; major errors or omissions
- Limited or no understanding and effort