Event Delegation

Zaprto Objavljeno pred 2 letoma/leti Plačilo ob prevzemu
Zaprto Plačilo ob prevzemu

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

JavaScript jQuery / Prototype Arhitektura porgramske opreme HTML5 PHP

ID projekta: #29858886

Več o projektu

1 predlog Oddaljen projekt Aktiven pred 2 letoma/leti

1 freelancer ponuja za povprečno ₹1500 na tem delu

grailo

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 Več

₹1500 INR v 7 dneh
(0 ocen)
0.0