Event Delegation

WEB230 - JavaScript 1 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: Using Delegation 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 "SPAN". 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.) About Delegation 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 items. Notes: do not modify the HTML or CSS files Include a comment in the JavaScript file with your name, student number, and the date follow best practices as discussed in the lecture video for module 4 Submission Details: 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 include any HTML tags in the JavaScript file 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.)