1
00:00:00,090 --> 00:00:06,270
Oh, and welcome in this lesson and S. we're going to be setting up a star rating project, so first

2
00:00:06,270 --> 00:00:09,540
of all, we're going to need some stars and a great place to find those.

3
00:00:09,540 --> 00:00:11,040
Is Phonte awesome?

4
00:00:11,370 --> 00:00:18,420
If you never used Phantasm, it gives you a way to have quick and easy icons within your Web projects.

5
00:00:18,720 --> 00:00:26,390
And all you have to do is take the basic link stylesheet and bring that into your website.

6
00:00:26,400 --> 00:00:32,010
So before you apply your own styling, and that gives you the ability to use the font.

7
00:00:32,010 --> 00:00:36,450
Awesome fonts, which we've got stars within their next.

8
00:00:36,450 --> 00:00:40,740
Let's create our unordered list and this unordered list.

9
00:00:40,770 --> 00:00:47,730
We can give it a class of of stars and then within the unordered list, creating a bunch of list items

10
00:00:48,120 --> 00:00:52,100
in each one of these list items we can assign a class of star.

11
00:00:52,350 --> 00:00:54,560
So each one of these will represent a star.

12
00:00:55,260 --> 00:00:58,440
We're going to add in a class and font.

13
00:00:58,440 --> 00:01:02,460
Awesome has a number of different awesome fonts like the name implies.

14
00:01:02,700 --> 00:01:04,740
And the one that we want to use is a star.

15
00:01:05,730 --> 00:01:14,940
And that's f a f w so that's the class that you need to apply in order to add in the star.

16
00:01:15,000 --> 00:01:19,440
So if we refresh our page, we've got one star as a list item.

17
00:01:20,010 --> 00:01:23,520
Let's add a few more and two and three.

18
00:01:23,520 --> 00:01:26,250
And we want to have five stars for our reading project.

19
00:01:26,820 --> 00:01:29,430
So it gives us the five stars that we have to work with.

20
00:01:29,490 --> 00:01:35,430
So now that we've got all of our stars, let's apply some styling to add them as inline values.

21
00:01:35,610 --> 00:01:42,150
So we've got our unordered list and within the unordered list, setting up the list style type and set

22
00:01:42,150 --> 00:01:42,840
that to none.

23
00:01:42,870 --> 00:01:49,950
So that will get rid of all of the the list icons and also update the padding to zero so that we remove

24
00:01:49,950 --> 00:01:53,010
add any padding that the unordered list has by default.

25
00:01:53,040 --> 00:01:59,910
And so now we can select our star elements or the list items setting up a font size, setting up a font

26
00:01:59,910 --> 00:02:00,450
size.

27
00:02:00,630 --> 00:02:06,810
We can adjust the font size to 2.5 m adding a color for those elements.

28
00:02:06,810 --> 00:02:13,830
And then we're going to add a property of display in line block for them so that they align horizontally.

29
00:02:13,920 --> 00:02:20,010
So now we've got all of our stars and we also need to set up a few classes of colors.

30
00:02:20,250 --> 00:02:24,630
And these are the ones that we're going to be dynamically updating using our JavaScript.

31
00:02:24,660 --> 00:02:26,610
So we've got one color of yellow.

32
00:02:26,790 --> 00:02:28,680
We also need an orange color.

33
00:02:28,950 --> 00:02:31,640
So the ones that are actually selected, they can be orange.

34
00:02:31,650 --> 00:02:36,330
And then lastly, we need one other element on the page, and that's going to be our output.

35
00:02:36,550 --> 00:02:41,420
So this is where we can have a message to the user that's interacting with their application.

36
00:02:41,910 --> 00:02:47,160
So setting up margin for that, also adding in some padding and a border.

37
00:02:47,280 --> 00:02:50,130
So very light border and add a background color.

38
00:02:50,160 --> 00:02:51,280
So see what that looks like.

39
00:02:51,480 --> 00:02:57,090
So we've got our output area and of course, we need to add that into our H.T. and we can add that at

40
00:02:57,090 --> 00:02:58,170
the bottom below the start.

41
00:02:58,200 --> 00:02:59,120
So this is where we're going to have.

42
00:02:59,160 --> 00:03:04,400
So it looks like we're ready to go to move on to our JavaScript and add in our JavaScript functionality.

43
00:03:04,710 --> 00:03:06,510
So that is coming up in the next lesson.