This is the fun part of the section where we get to manipulate some of those elements and apply some
of the classes that we created earlier, so let's take some space within our start rate function.
So we're looping through all of the stars and we need to check for a few different things.
So we're going to check to see if the index value of the element that we are looking at.
So index and you can see that we're outputting those index values.
So it'll start with zero and progress all the way over.
So if it's less than star value, then we're going to take that element and update its class list using
the method of ADD and we're going to add orange.
So it's refresh.
And now we can see that we're adding that orange, although we're not removing it.
So we need to also check to check the different types.
And in this case, we want to apply this only if the element is clicked.
So if it's been a click, then this is the these are the functions that we want to add in.
We also want to remove out the class of orange to the ones that aren't selected.
Instead of adding orange, we can remove orange.
And so now we can select any number of stars on the page and it's just that easy.
We want to do something a little bit more interesting as well.
We want to take care of the mouse over and the most out functionality.
So let's add that in.
So that takes care of the click functionality.
Duplicate that, because we're also adding in a class of yellow and removing class of yellow depending
on the star value.
So the function is going to be roughly the same.
And this one actually should be mouseover as we're going to remove it with Mozah.
And this also should be yellow.
We hover over and we don't always remove out that the classes.
So that's what we need to take care of it.
With mouse out, we simply want to remove out the class of yellow from all of the element.
So this way, whenever we hover over any additional starts and then we go out, we don't have that lagging
yellow class that's remaining on the element.
And we can unclick them and we can hover over and we can add additional stars and remove them as we
move off of that element.
So go ahead and add this into your project.
And coming up next, we're going to complete this by updating the message as the mouse has been clicked.
That's still to come in the next lesson.