1
00:00:00,060 --> 00:00:05,040
Great job on making it this far into the course and this lesson, we're going to be concluding our star

2
00:00:05,040 --> 00:00:07,990
rating project as well as doing a quick code review.

3
00:00:08,010 --> 00:00:13,560
So go over to your project output into the browser and just make sure that it is functioning the way

4
00:00:13,560 --> 00:00:16,250
that you expected it to and that you needed it to.

5
00:00:16,500 --> 00:00:20,180
So look for any bugs or errors or issues within the functionality.

6
00:00:20,220 --> 00:00:26,010
Try clicking at mouse over and triggering all the different events just to ensure everything is working

7
00:00:26,010 --> 00:00:26,880
as expected.

8
00:00:27,090 --> 00:00:29,720
So it does look like everything is working great.

9
00:00:30,030 --> 00:00:32,040
So now we can do a quick code review.

10
00:00:32,400 --> 00:00:36,960
So coming into the project, we needed a way to produce some really nice star icons.

11
00:00:37,200 --> 00:00:43,710
So this was a great resource at Font Awesome where we can bring in the font awesome library and allows

12
00:00:43,710 --> 00:00:49,890
us to create these amazing looking icons so we can really update these and add these and easily with

13
00:00:49,890 --> 00:00:50,190
font.

14
00:00:50,190 --> 00:00:50,720
Awesome.

15
00:00:50,730 --> 00:00:53,870
And of course you're able to create your own as well.

16
00:00:54,030 --> 00:00:58,590
So if you wanted to create these as images, you can do those as well.

17
00:00:58,650 --> 00:01:04,950
So now going into the style, we updated some really basic styling as we want to really focus on the

18
00:01:04,950 --> 00:01:07,410
JavaScript part of this section.

19
00:01:07,650 --> 00:01:13,580
So this was just some basic styling and of course, you can style it as needed, creating some HTML.

20
00:01:13,590 --> 00:01:18,310
So we needed to create our star list and then our output area.

21
00:01:18,330 --> 00:01:21,370
So this is where we output our message to the user.

22
00:01:21,390 --> 00:01:27,780
Next, we went into our JavaScript selecting out the elements that we needed to make use of outputting

23
00:01:27,780 --> 00:01:31,800
them as variables in JavaScript so objects that we can make use of.

24
00:01:31,920 --> 00:01:35,850
And then this was an interesting one where we looped through all of the stars.

25
00:01:36,120 --> 00:01:38,210
So we had five different stars there.

26
00:01:38,250 --> 00:01:43,010
We loop through all of them and we had three event listeners that we want to apply to each star.

27
00:01:43,020 --> 00:01:48,000
And this was a unique way to do that, where we also loop through all of the event listeners that we

28
00:01:48,000 --> 00:01:48,990
wanted to add in.

29
00:01:49,170 --> 00:01:54,720
So effectively, there's 15 different event listeners being added in here.

30
00:01:54,870 --> 00:02:01,840
And throughout both of these loops, all of them are adding in the function of star rate to it.

31
00:02:02,220 --> 00:02:09,600
So going into star rate, we see that we can pick up the trigger that trigger the type invoking of the

32
00:02:09,600 --> 00:02:10,050
function.

33
00:02:10,080 --> 00:02:16,890
Is that to check to see if it was a click or a mouseover or mozote so we can unscramble what event triggered

34
00:02:16,890 --> 00:02:17,260
the event.

35
00:02:17,280 --> 00:02:22,710
So even though they're all going to the same function over here is where we can decode that and then

36
00:02:22,710 --> 00:02:24,180
utilize that within our code.

37
00:02:24,540 --> 00:02:26,340
We also needed to get a star value.

38
00:02:26,580 --> 00:02:31,860
So notice that these elements would there's nothing different about them and we did want to differentiate

39
00:02:31,860 --> 00:02:32,160
them.

40
00:02:32,280 --> 00:02:37,740
So we added in within the element object, we added in a hidden value called star value.

41
00:02:37,740 --> 00:02:40,890
And then we're using that as user clicks on the star.

42
00:02:40,980 --> 00:02:43,860
We can get the element value by using this.

43
00:02:44,070 --> 00:02:46,350
So this is referring to that element.

44
00:02:46,350 --> 00:02:51,520
So each individual element has its own object value and that's where we're retrieving back and use it,

45
00:02:51,540 --> 00:02:53,980
utilizing this same checking to see if it's been a click.

46
00:02:54,000 --> 00:03:00,180
And if it is, then we know we want to output a message to the user and then next we loop through all

47
00:03:00,180 --> 00:03:04,360
of the stars that are available because we do need to manipulate some of the classes.

48
00:03:04,380 --> 00:03:05,670
So this is the easiest way.

49
00:03:05,670 --> 00:03:10,680
As we loop through there, we can check the index value of the element.

50
00:03:10,710 --> 00:03:13,560
So we know that this is zero one, two, three.

51
00:03:13,560 --> 00:03:18,990
And we can also get the element object because the element object we need to use in order to manipulate

52
00:03:18,990 --> 00:03:24,270
that element as it's referring to each one as we iterate through the loop and then also with the index

53
00:03:24,270 --> 00:03:28,260
value, we can compare it to the star value and we can know which one was clicked.

54
00:03:28,260 --> 00:03:32,490
So we know which stars need to have which classes apply to them.

55
00:03:32,490 --> 00:03:37,530
And if they're not less than that, though, we simply remove out any of the values.

56
00:03:37,530 --> 00:03:41,940
So that helps us fix any of the classes that might have been already added.

57
00:03:42,070 --> 00:03:48,160
So whenever one of these actions takes place, we can simply remove out the other elements and thus

58
00:03:48,180 --> 00:03:50,550
we can do as we loop through all of the stars.

59
00:03:50,820 --> 00:03:55,710
So we're checking to see each one of these events so each one will have some different type of action

60
00:03:55,710 --> 00:03:56,310
that we're doing.

61
00:03:56,490 --> 00:04:00,120
And you can also customize these to do a whole bunch more things if you need to.

62
00:04:00,450 --> 00:04:02,640
So here we are checking sources.

63
00:04:02,640 --> 00:04:09,150
So just like the star value, we're checking to see where the user is hovering, how far the user is

64
00:04:09,150 --> 00:04:14,310
hovering, and those stars that are below the ones that were hovering, including the one that we're

65
00:04:14,310 --> 00:04:18,030
hovering over, are going to get a class of yellow added to them.

66
00:04:18,030 --> 00:04:24,180
And then the ones that aren't hovered over, such as this one or wasn't, then that one, the last one

67
00:04:24,180 --> 00:04:25,920
gets the yellow removed out.

68
00:04:25,930 --> 00:04:30,900
And in this case, the last two would get the yellow removed out, last three, last four and so on

69
00:04:30,930 --> 00:04:31,350
and then on.

70
00:04:31,350 --> 00:04:33,770
Mozote, all we're doing is removing the yellow.

71
00:04:33,990 --> 00:04:37,890
So we want to have this nice functionality wherever we hover over.

72
00:04:37,890 --> 00:04:40,140
And then we take the hover off.

73
00:04:40,290 --> 00:04:46,110
We simply remove out all of the classes of yellow so none of them will have yellow as soon as we move

74
00:04:46,110 --> 00:04:47,700
off of the main element.

75
00:04:47,860 --> 00:04:49,350
So that's it for the project.

76
00:04:49,380 --> 00:04:50,370
I hope you enjoyed it.

77
00:04:50,370 --> 00:04:54,810
And of course, as always, I'm always happy to answer any questions or clarify content.

78
00:04:54,810 --> 00:04:58,890
Source code has been included, so I do encourage you to try it for yourself.

79
00:04:58,890 --> 00:04:59,820
Check it out for yourself.

80
00:04:59,930 --> 00:05:04,290
Extend on it and have some fun with it as you practice and work with JavaScript.

81
00:05:04,320 --> 00:05:05,700
Thanks again for taking the course.