Prep 7: Functions, Events

Due: Friday, Mar 7th

Read

• 8.8 Functions
• 8.9 Scope and Closure in JavaScript
• 9.3 Events
• 9.4 Event Types

Activity

Your goal is to take information from a form to modify the current page's elements and DOM.

Start by downloading this template file. In between the <script> tags, add JavaScript so that:

1. When the "Change background" button is clicked:
   • Your code sets the background color of body to the color specified in the form.
   • Set an inline style to accomplish this (using the style attribute of an element).
2. When the "Add item" button is clicked:
   • Create a new <li> with textContent set to the value of the text field.
   • Append this new item as a child to the (initially empty) <ul> element.

In other words…

1. The user should be able to change the background color:
2. And also add new items to the list:

Submit your index.html file to Gradescope.