1
00:00:00,180 --> 00:00:06,270
This is the fun part of the section where we get to manipulate some of those elements and apply some

2
00:00:06,270 --> 00:00:11,430
of the classes that we created earlier, so let's take some space within our start rate function.

3
00:00:11,670 --> 00:00:17,400
So we're looping through all of the stars and we need to check for a few different things.

4
00:00:17,410 --> 00:00:24,990
So we're going to check to see if the index value of the element that we are looking at.

5
00:00:24,990 --> 00:00:29,190
So index and you can see that we're outputting those index values.

6
00:00:29,400 --> 00:00:32,730
So it'll start with zero and progress all the way over.

7
00:00:32,880 --> 00:00:43,020
So if it's less than star value, then we're going to take that element and update its class list using

8
00:00:43,020 --> 00:00:45,580
the method of ADD and we're going to add orange.

9
00:00:46,230 --> 00:00:47,160
So it's refresh.

10
00:00:47,400 --> 00:00:50,880
And now we can see that we're adding that orange, although we're not removing it.

11
00:00:51,240 --> 00:00:54,750
So we need to also check to check the different types.

12
00:00:55,110 --> 00:01:00,530
And in this case, we want to apply this only if the element is clicked.

13
00:01:01,860 --> 00:01:06,320
So if it's been a click, then this is the these are the functions that we want to add in.

14
00:01:07,410 --> 00:01:12,690
We also want to remove out the class of orange to the ones that aren't selected.

15
00:01:12,870 --> 00:01:15,510
Instead of adding orange, we can remove orange.

16
00:01:16,620 --> 00:01:21,270
And so now we can select any number of stars on the page and it's just that easy.

17
00:01:21,750 --> 00:01:24,570
We want to do something a little bit more interesting as well.

18
00:01:24,580 --> 00:01:28,470
We want to take care of the mouse over and the most out functionality.

19
00:01:28,620 --> 00:01:29,730
So let's add that in.

20
00:01:29,740 --> 00:01:31,560
So that takes care of the click functionality.

21
00:01:31,590 --> 00:01:37,710
Duplicate that, because we're also adding in a class of yellow and removing class of yellow depending

22
00:01:37,710 --> 00:01:38,580
on the star value.

23
00:01:38,700 --> 00:01:40,240
So the function is going to be roughly the same.

24
00:01:40,260 --> 00:01:44,310
And this one actually should be mouseover as we're going to remove it with Mozah.

25
00:01:44,400 --> 00:01:45,780
And this also should be yellow.

26
00:01:45,990 --> 00:01:51,540
We hover over and we don't always remove out that the classes.

27
00:01:51,540 --> 00:01:53,310
So that's what we need to take care of it.

28
00:01:53,310 --> 00:01:59,050
With mouse out, we simply want to remove out the class of yellow from all of the element.

29
00:01:59,730 --> 00:02:06,180
So this way, whenever we hover over any additional starts and then we go out, we don't have that lagging

30
00:02:06,180 --> 00:02:09,180
yellow class that's remaining on the element.

31
00:02:09,690 --> 00:02:15,300
And we can unclick them and we can hover over and we can add additional stars and remove them as we

32
00:02:15,300 --> 00:02:16,610
move off of that element.

33
00:02:17,520 --> 00:02:19,650
So go ahead and add this into your project.

34
00:02:19,950 --> 00:02:26,910
And coming up next, we're going to complete this by updating the message as the mouse has been clicked.

35
00:02:27,350 --> 00:02:28,820
That's still to come in the next lesson.