Great job on making it this far into the course and this lesson, we're going to be concluding our star
rating project as well as doing a quick code review.
So go over to your project output into the browser and just make sure that it is functioning the way
that you expected it to and that you needed it to.
So look for any bugs or errors or issues within the functionality.
Try clicking at mouse over and triggering all the different events just to ensure everything is working
as expected.
So it does look like everything is working great.
So now we can do a quick code review.
So coming into the project, we needed a way to produce some really nice star icons.
So this was a great resource at Font Awesome where we can bring in the font awesome library and allows
us to create these amazing looking icons so we can really update these and add these and easily with
font.
Awesome.
And of course you're able to create your own as well.
So if you wanted to create these as images, you can do those as well.
So now going into the style, we updated some really basic styling as we want to really focus on the
JavaScript part of this section.
So this was just some basic styling and of course, you can style it as needed, creating some HTML.
So we needed to create our star list and then our output area.
So this is where we output our message to the user.
Next, we went into our JavaScript selecting out the elements that we needed to make use of outputting
them as variables in JavaScript so objects that we can make use of.
And then this was an interesting one where we looped through all of the stars.
So we had five different stars there.
We loop through all of them and we had three event listeners that we want to apply to each star.
And this was a unique way to do that, where we also loop through all of the event listeners that we
wanted to add in.
So effectively, there's 15 different event listeners being added in here.
And throughout both of these loops, all of them are adding in the function of star rate to it.
So going into star rate, we see that we can pick up the trigger that trigger the type invoking of the
function.
Is that to check to see if it was a click or a mouseover or mozote so we can unscramble what event triggered
the event.
So even though they're all going to the same function over here is where we can decode that and then
utilize that within our code.
We also needed to get a star value.
So notice that these elements would there's nothing different about them and we did want to differentiate
them.
So we added in within the element object, we added in a hidden value called star value.
And then we're using that as user clicks on the star.
We can get the element value by using this.
So this is referring to that element.
So each individual element has its own object value and that's where we're retrieving back and use it,
utilizing this same checking to see if it's been a click.
And if it is, then we know we want to output a message to the user and then next we loop through all
of the stars that are available because we do need to manipulate some of the classes.
So this is the easiest way.
As we loop through there, we can check the index value of the element.
So we know that this is zero one, two, three.
And we can also get the element object because the element object we need to use in order to manipulate
that element as it's referring to each one as we iterate through the loop and then also with the index
value, we can compare it to the star value and we can know which one was clicked.
So we know which stars need to have which classes apply to them.
And if they're not less than that, though, we simply remove out any of the values.
So that helps us fix any of the classes that might have been already added.
So whenever one of these actions takes place, we can simply remove out the other elements and thus
we can do as we loop through all of the stars.
So we're checking to see each one of these events so each one will have some different type of action
that we're doing.
And you can also customize these to do a whole bunch more things if you need to.
So here we are checking sources.
So just like the star value, we're checking to see where the user is hovering, how far the user is
hovering, and those stars that are below the ones that were hovering, including the one that we're
hovering over, are going to get a class of yellow added to them.
And then the ones that aren't hovered over, such as this one or wasn't, then that one, the last one
gets the yellow removed out.
And in this case, the last two would get the yellow removed out, last three, last four and so on
and then on.
Mozote, all we're doing is removing the yellow.
So we want to have this nice functionality wherever we hover over.
And then we take the hover off.
We simply remove out all of the classes of yellow so none of them will have yellow as soon as we move
off of the main element.
So that's it for the project.
I hope you enjoyed it.
And of course, as always, I'm always happy to answer any questions or clarify content.
Source code has been included, so I do encourage you to try it for yourself.
Check it out for yourself.
Extend on it and have some fun with it as you practice and work with JavaScript.
Thanks again for taking the course.