Oh, and welcome in this lesson and S. we're going to be setting up a star rating project, so first
of all, we're going to need some stars and a great place to find those.
Is Phonte awesome?
If you never used Phantasm, it gives you a way to have quick and easy icons within your Web projects.
And all you have to do is take the basic link stylesheet and bring that into your website.
So before you apply your own styling, and that gives you the ability to use the font.
Awesome fonts, which we've got stars within their next.
Let's create our unordered list and this unordered list.
We can give it a class of of stars and then within the unordered list, creating a bunch of list items
in each one of these list items we can assign a class of star.
So each one of these will represent a star.
We're going to add in a class and font.
Awesome has a number of different awesome fonts like the name implies.
And the one that we want to use is a star.
And that's f a f w so that's the class that you need to apply in order to add in the star.
So if we refresh our page, we've got one star as a list item.
Let's add a few more and two and three.
And we want to have five stars for our reading project.
So it gives us the five stars that we have to work with.
So now that we've got all of our stars, let's apply some styling to add them as inline values.
So we've got our unordered list and within the unordered list, setting up the list style type and set
that to none.
So that will get rid of all of the the list icons and also update the padding to zero so that we remove
add any padding that the unordered list has by default.
And so now we can select our star elements or the list items setting up a font size, setting up a font
size.
We can adjust the font size to 2.5 m adding a color for those elements.
And then we're going to add a property of display in line block for them so that they align horizontally.
So now we've got all of our stars and we also need to set up a few classes of colors.
And these are the ones that we're going to be dynamically updating using our JavaScript.
So we've got one color of yellow.
We also need an orange color.
So the ones that are actually selected, they can be orange.
And then lastly, we need one other element on the page, and that's going to be our output.
So this is where we can have a message to the user that's interacting with their application.
So setting up margin for that, also adding in some padding and a border.
So very light border and add a background color.
So see what that looks like.
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
the bottom below the start.
So this is where we're going to have.
So it looks like we're ready to go to move on to our JavaScript and add in our JavaScript functionality.
So that is coming up in the next lesson.