Hey, all right, welcome back.
Glad to see you back.
You know that I would be back.
So in this video, I'm going to take you through the solution of the quiz that I prepared in the previous
video.
So you saw that I prepared a to do list.
And I put you out.
And then I place the list items inside.
I also added a class called to do item.
So first of all, what I need to do is to choose the elements that have the to do item class.
So say Vare first to do item document that query selecter.
To reach this, I call here to do item to choose the first list item.
So this is how I get to the first one.
I want to use the mouse over and mouse out events to create a Hober effect here.
And you know that now the cover of NCIS has been added, but now I want to show you how to do it in
JavaScript.
So now, after selecting the first to do item, I want to add an event to it.
So I say document at event listener.
And I'm adding the mouseover event here.
I want to call this function when.
It's moused over.
And I want to make the background color of the item blue when the mouseover event occurs.
So over this say style DOD background, color equals blue.
Now, when it was mouse over here, I made the background color of the to do item blue.
So let's go to the browser and refresh the page.
And I'm bringing the mouse over the first to do item.
Now the background is blue.
So if we want just below here, we can just say style color white.
So let's say this and go to the browser.
And when I arrive on it, it's color became white.
Now I change the color, the first element.
So now when we go to the second list item, I want it to take its old color back and change the background
and color.
And this time, I want to call an event when it is mapped out, not mouseover.
So, again, I'll say first to do item.
I'll say add event listener.
This time, I'm saying mouse out of mouse over.
And here again, I'll call a function, and this function will be called When I Mouse Out.
So when it is mouse out this time, I want the background color to be white and the color to be black
again.
So say first to do item, not style, not background, color is white.
And first, to do item [REMOVED] color is black.
Now, let's save it and check it again in the browser.
Yeah, so I'm bringing the mouse on it, it becomes blue, and when I do the mouse out again, it gets
restored.
Very cool.
So now I want to apply all of this to all the elements in the list.
So I'll just make these lines come out now, this time I'm saying vare to do list items.
And I'll say document, not query, selecter all.
I call it to do item.
This will return a. node list to me.
And we have assigned all values of the to do item to this list, to this to do list items variable.
Right.
Then I can use a for loop here.
So say for.
I say var I equals zero.
I is small, I say to do list dot length.
That's increase I by one each cycle.
So here, I'll access every element of the to do list item.
So I say to do list item square brackets and I.
Now, add a.
Add event listeners to it.
I'll say that at event listener.
And when mouseover, this function will be called.
And then here, I'll say this dot style, dot background, color blue.
And this dot style color white.
Then I want to add a new event to each to do list item right below.
So I'll say to do list items dot at event listener and this time call Mount's out event.
I want this function to be called When the Mouse Out happens.
And here I'll say this Dotts dialogue background color equals white.
And here, I'll say this dance style doesn't color equals black again.
OK, then let's save all this, go to the browser.
Here, I'll refresh the page.
And there it is, when each member is moused over, its background becomes blue and it returns to default
again when the mouse out happens.
OK, so after seeing that as well, I, I, I really do want to show the unclick event.
So I'll say to do list item square brackets, I just select all items and then not add event listener.
And this time, I want to call the event listener with the click event.
So I'm writing my function that should be called when collect.
And inside that function, I call this not class list dot at.
And I want to wear the OK class to the class list.
So now let's go to the index HTML page and add this class.
I'll say, OK, and I want text decoration line through.
Color to be great inside.
So I'll save all that and go to the browser.
And let's refresh the page.
All right, so right now we have a hover effect.
And when I click it, I'll add the OK class.
And yeah, so when I click on it, the line through event was added again.
OK, so I took you through a lot really fast, but we saw different events and that was cool.
We've seen how to use the this keyword here when used with a for loop.
Now, yes, we could do this in a different way.
So.
When a mouseover event occurs, we could create a class list and add these classes.
And again, we could do the same with the mouse out.
So, yes, my friends, we have accomplished that to do this solution that we wanted to in this video.
So why don't we take a break here and come back in the next lesson?