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


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



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.)

Evner: JavaScript, jQuery / Prototype, Software Arkitektur, HMLT5, PHP

Se mere: assignment feasibility system definition study satellite, motor starting study etap, i always try to understand your needs and often make my own suggestions before starting the project in order to reduce your tota, which aspects of market you need to research before starting a internet cafe, Please read the project description and attached documents CAREFULLY before starting to work on it., PLEASE READ EVERYTHING BEFORE STARTING WORK, how to do market research before starting a business, importance of market research before starting a business, things to know before starting a clothing brand, market research before starting a business, questions to ask potential customers before starting a business, things to do before starting a project, questions to ask before starting a design project, checklist before starting a project, signed employment contract before starting, 50 questions to ask before starting a business, things to do before starting an online store, things to know before starting a blog, what to know before starting a plumbing business

Om arbejdsgiveren:
( 0 bedømmelser ) Toronto, Canada

Projekt ID: #29858886

1 freelancer byder i gennemsnit ₹1500 på dette job


Hi we are Grailo , let us assist you on this project we have a team of expert freelancers ready to assist you in no time. We deliver productivity with emphasis on quality . Let us know more about your requirements , p Flere

₹1500 INR in 7 dage
(0 bedømmelser)