Advanced List

I have added a trashcan icon to this page and you can grab the exact location by looking in the HTML section of this page. We already have items in our list and each item in our list needs this icon. So it's your job to add it to the existing items. But how do you do that?

Well, we have learned in class that when we have to do the same thing multiple times, we can use loops; that's what they do - its their function in javascript. So, let's use a loop - more specifically a for loop.

There are three parts of a for loop that we need: a starting point, an ending point, and how it will interate through the loop. Let's disect this:

We know that we need to loop through the items currently in the list. So, how do we get them items? Well, we need to create an array of sorts to loop through. So, we can use DOM elements to get an array -> more specifically a node list:

document.querySelectorAll('codeList li');

Set the above code as the value of a variable.

This will create a nodelist (think array) of all the list items in the the codeList ul element. Now we can loop through this list. But first you need to get the length of the nodeList.

Create another variable equal to the length of your previous variable. Example: var totalItems = myItems.length;

Now create the for loop code:
The first part is to create your starting point. Developers usually use i, but you can use any letter or even a word. I is just short for iterator, which is what this variable does. So step one: create a variable equal to 0.

The next step is to set the end point. you want it to loop through the node list length (which you have set to a variable), until it reaches the end. So step two: make the loop continue while your variable is less than the length of your nodelist.

NOTE: don't forget to separate each step with a semicolon!

Now step three: increase by one each time it goes through the loop.

Now the loop guts - what we want it to do for every list item. Here are the steps we need to complete:

1. Create an img element
2. Give the img element an attribute of "src" that is equal to the image address/location
3. Add a class name of listIcon to the image.
4. Add the image to the list item

Create a variable that will create an image element.
Using that variable, use setAttribute to give it a attribute of src that has the value of the image location.
Using that variable again, give it a class name of listIcon.
Now append the image element to each list item in the nodelist by using listItems[i]

You should now see the trash can icons on the right-side of each list item.

Now you need to add the trash icon to new items. This is simple; you will just copy the code that added the image to the addItem function with just one modification!

Copy the code that you used to add the trashcan icon to the existing list items to the addItem function.
Modify the line of code that adds the icon to the list item by changing the targeted element:

newLI.appendChild(trashIcon);

We are going to make two changes possible: change the color of the list item or remove it completely. Since we just added the trashcan icon, let's write the function for that. (You already know the code for this anyway.)

We know we need to target the images, so add an event listener to the list, just like we did before:

Add an event listener to the codeList ul. (You should already have this set to a variable.) This should call a function called changeProp and the event flow should be set to FALSE.

Now write the function. Since we need to listen for an event to find the target, remember to but the e variable as a parameter:

function changeProp(e) {}

Inside the function, create a variable that will call the getTarget function with the parameter of e. This will hold the target of the event.

Since our target area is our unordered list, the target could be either the list item or the image. To find that out, we are going to figure out what is the parent of our target.

Create a variable that will be set to the parentNode of the target element. (Call it tParent)

Now we will just use a simple if/else statement to finish out functionality. If the parent of the target is a list item (LI), then we will remove the list item from the list. But if the parent of the target is the unordered list, we are simply going to add the class name selected to the list item.

Create the if/else if statement. REMEMBER: use a double equal sign to check values!

There you have it! It's fully functional now. How awesome is that??

Write the code that will check to see if the list item is grayed out. If so, it will return it back to normal. If not, it will be grayed out. This should ONLY happen if they click on the LIST ITEM and NOT the trashcan icon.