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

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`. `` is whatever HTML element triggered the event, so to get the background color of that element you can say ``.
```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?