Assignment 6b - Event Delegation
Before starting, study the HTML and open it in a browser so that you understand the structure of the
document. You will add functionality to perform several tasks in our shopping list app.
Clicking the red "X" at the right of an item will delete that item.
Clicking on the item will style it with a strike-through to show that it has been picked up.
Entering an item in the input field at the bottom will add the item if either the "+" button is clicked
or the "Enter" key is pressed.
Here are the steps to make this happen:
1. Add a click event handler to the list element (ul). This will handle events for both the removing
and the marking actions.
2. Add a [login to view URL]() in the event handler to display the tagName of the target. Notice that
when you click on an item in the list you get "LI" but when you click on the red "X" you get
Clicking the item
1. Since we are using delegation, you have to determine which element was clicked on. In the ul
we have both li and span elements. Use an if statement to determine if the element clicked
was an li element.
2. If it was, then add the class completed to the target element. That will cause it to be displayed
lighter and with a strike-through.
Clicking the red "X"
1. Use another if statement to determine if the element clicked was a span element.
2. If it was, delete the li. (This is the target's parent element not the span itself).
Adding a new item
We want this event to happen two different ways, when the "+" button is clicked or when the "Enter"
key is pressed. Therefore we will create a named function that we can use twice.
1. Add a click event handler to the a element (the plus sign) that will [login to view URL] a message.
2. Add a keydown event handler on the input element that will [login to view URL] a different message.
3. Create a named function that will add a new li element at the bottom of the list with whatever is
in the input field. (Hint: input fields have a property value to get the string entered in the field.
textContent does not work with inputs.) Make sure you look at the HTML file and create new
li elements that look just like the ones that are there. I.E. Make sure you create a span element
in it so the red "X" will appear.
4. Call this function from each of the event handlers to add the item.
5. Add code to the keydown event handler to make sure it only adds an item if the "Enter" key is
pressed. (Hint: remember the [login to view URL] property?)
6. Clear the input box after creating a new list item. (Hint: input elements don't have a
textContent property since they are "Empty Elements". The value property is used instead.)
Notice that you did not have to add an event handler for the new list items that you added. Because
the event handler is "delegated" to the list (ul) we don't need to add event handlers when we add new
do not modify the HTML or CSS files
follow best practices as discussed in the lecture video for module 4
Use camelCase for variable names
Do not concatenate strings, use template literals
Do not use the var keyword - instead use let or const
Do not use [login to view URL]
name files in lowercase with no spaces
put your files in a folder and zip the folder (right click - send to --> compress folder)
submit the zip file - do not use any other archive format (ie RAR, 7ZIP, etc.)