Lab: Create a Dropdown Menu
In this lab you should create a simple dropdown menu which should behave as follows:
- When the dropdown's title is clicked the dropdown should be displayed
- Clicking on any entry in the dropdown should close the dropdown
- Bonus Challenge: What other events could you use to trigger the dropdown?
Lab: Change the Color
In this lab you will set up an event listener to change the background color of a div when that div is clicked.
- If the div is not purple, change the background color to purple
- Otherwise change it to yellow
- Feel free to use any color combination of your choice
- Bonus Challenge: What other properties can you change on the element?
Change the Color Solution
Hint
When an event listener calls a callback function it passes the event as an argument to that function. The event is an object with some useful properties such as the `target`. `event.target` is whatever HTML element triggered the event, so to get the background color of that element you can say `event.target.style.backgroundColor`.
Solution
```html
Document
Change my Background!
```
Lab: Say Hello
In this lab you will set up an input form where you can enter a name, and the page will display text greeting that name.
- Set up a form with a text input, and submit button
- When a user inputs their name and hits submit the page displays a personalized greeting for that name
- Format the name so that it's always capitalized
- Bonus Challenge: Can you get it to say hello to some names, and tell others to go away?
Lab: Creating, and Modifying a List
In this lab you will create a user interface to programatically generate a list based on user input.
- Create a form that will accept user input
- When the form is submitted use the input value to generate a new list item
- Bonus Challenge: Can you make it remove an item when the user clicks on it?