Creating a 5 Star Rating Component in CSS and HTML. No JavaScript.

most of the videos that i've made for this channel come out of real world projects and this one is no different i was working on a project that needed a five-star rating but no javascript oh brother if you're new to self teach me channel my name is amy dutton i'm a web designer and developer if you're just getting into this space sometimes it's hard to know where to start or what resources to trust i want to help you level up and get to where you want to be if this sounds interesting to you hit the subscribe button below let's talk about the logic behind this and what makes this problem a little bit more difficult to solve okay we have five stars and each time we hover over a different star we need something different to happen for example when we hover over the very first empty star we want the first star to change showing the filled version of that star when we hover over the second empty star we want to show two filled stars you get the idea for third fourth and fifth stars but what also makes this even more challenging is the target area if that's a new term for you the target area is the clickable area where something happens so take the fourth star for example the target area is the four star but it should change the area outside its target changing the first three stars to filled stars but not the fifth the target area for the second star is here but it should change the first star outside the target area you see my dilemma with the exception of the first star each star changes the area outside itself and each star behaves differently if we could use javascript this would be easy peasy lemon squeezy we could dynamically change the class name of the parent element based on whatever star we're rolling over and then from there we could change which stars are filled but like i said before no no javascript okay so let's do this i'm going to use codepen if you've never used codepen before it's a coding sandbox i'm a fan it's great for experimenting and creating these little code snippets so everything we're going to do in this video you can do with the free account of course more dollars equals more features i'm going to create a new pin and right out of the gate i'm going to hide our javascript panel since we're doing everything with html and css i'm going to start by stubbing out our html and building our target areas so i'm going to create a wrapping div and give it a class name of star wrapper inside i'm going to create five links one for each star and i'm going to use a non-breaking space inside our a tag and visually within the browser this is the same as using a space but instead of making our a tag look empty within our code we can see that i've actually coded in a space yep and we want five of these four five i'm going to give each of our links a class so that we can target and style them we can't start a class name with a number so i'm going to spell out our numbers one two three four now we need to figure out how we're going to display and change our stars so let's talk through this i thought about using a background image on star wrapper this won't work with css you can't style the parent element based on the child in css there's a sibling selector which will allow us to control items on the same level maybe like this we have the second start and when we hover over it we want to change that to the filled version as well as the one star this won't work the sibling selector is super handy but you can only affect items listed after so meaning two stars can affect three stars four stars and five stars but not one star we could use a sibling selector but in a different way we could put a div that contains our image after the stars and then use the sibling selector to control which image is displayed let's see what this would look like first let's add our div at the end that will contain our stars next i'm going to grab my assets out of figma i already have images for the six different states created and i'm actually going to group all of these together and export them as a single image i'm going to head back over to codepen and i have a pro codepen account so i can put assets on here if you have a free account you'll need to find somewhere else online to host your images i'm going to click on this assets panel i'm going to drag and drop our stars image onto the modal window once it's uploaded it will appear in the file list below and i'm going to click on this copy as and select the url okay let's close our panel and start writing our css i'm going to start by removing the default margin and padding on our body tag this will help us when we're trying to get everything lined up just right now we want to attach our image to our stars div this looks a little strange right okay this will look a little better if we set a width and height on our div limiting the display plus we need to turn off the repeat so i'm going to say background repeat is none and let's add a width of 355 pixels and a height of 50 pixels if you're wondering about the five blue dashes at the top those are links with underlines so let's style those first let's get rid of our blue underline and next we need to set our target area and this is the area we can hover over with our mouse and the stars will change let's give this a red border just so that we can see what we're doing and don't worry i will remove this at the end we want our link to have a width of 50 pixels and a height of 50 pixels and you may have noticed that our width and height did not take any effect by default a link has a display of inline if we make this a display of block then everything will appear on its own line so instead let's use a display of inline block which will have properties of both it will make it behave like a block but everything will appear in line okay cool okay now let's add some space so that our boxes line up with our stars image so i'm going to say margin right is 20 pixels our stars need to appear directly below our link so the easiest way to do this is to give our stars a position of absolute especially since we know exactly where it needs to be placed so left zero top zero but remember position is relative to where the parent is so here our parent element is our star wrapper and it doesn't have any styles so it's going to position our stars image relative to the entire page it would be better if we kept everything contained to our star wrapper so let's give our star wrapper a position of relative everything is lined up but we still have a slight problem if you roll over the star from the bottom you'll notice that the cursor turns into a pointer finger and then as you keep moving up it changes back down arrows so what's going on here since our stars div is listed after our a tags and then we moved it up it's actually sitting on top of our links if i give our stars div a background color of yellow you'll be able to see a little bit better what's going on if we move our mouse around it changes to a pointer only when we're hovering over our red border that's picking out below our star image so we can change the layering by adding a z index to our stars class now we can see all of our red outlines so let's remove our yellow background and keep going now we just need to specify what happens when the user hovers over a star so let's start with the first one i'm going to jump over to figma really quick i think it'll be a little easier to explain here i'm going to draw a rectangle and get rid of the fill and add a stroke and it's not exact but the outline represents our stars div we've given an exact size and placed our stars background image on it so you can kind of think of it like a window and when we hover over the first star we'll reposition the background image so that it moves up and you see the first star filled when you hover over the second star the background image moves up and you see the first two stars filled and the same thing for the third and fourth and fifth you get the idea okay back in codepen let's go to the bottom of our styles so we'll say when you hover over the first star and then we can use the sibling selector which is a tilde to grab our stars class and remember our links in our stars div are all on the same level they're all next to each other they're all siblings it's the only way this works we want the background position to be zero negative 81 pixels and the 0 is the x value so it determines how many pixels away from the left side and we don't want to change that at all but we do want to move our image up so that's a negative value of 81. so let's test this out and it seems to be working um okay so now let's do the same thing for the other stars copy and paste so we'll say for two stars we want this to be negative 162 pixels three stars four stars and five stars we want to use negative 243 so we're just adding 81 pixels to each of these doing each okay so one two three four it looks like we misspelled class okay now we just need to get rid of our red border kind of epilogue okay do videos even have epilogues a vlog is such a weird word epilogue blog blog epilogue epilogue is a weird word when i started writing the script out for this video i thought of another solution and that's one of the things about coding there's typically more than one way to do something we were looking at this block of code at the beginning of the video we said that using the sibling selector like this to control individual stars wouldn't work and it won't but we could reorder the way the stars are being displayed in html so that it will work and then we can change the order the stars appear within css i'll show you i'm going to open a new code pin and start with the same html except this time we don't need the stars div at the bottom so i don't know about you but for me that feels a little bit cleaner so let's start with reordering the stars with an html so we want one star to be at the end and two stars and three stars four stars and five stars okay um i'm gonna jump over to figma and this time i'm gonna export two images an empty star and a filled star i'm gonna go to codepen and pull up the assets panel just like before and upload both of these images i'm gonna copy the url for the empty svg and i'm gonna put that as a background for our a tag and then like before let's get rid of our blue underline give our star a width of 50 pixels and a height of 50 pixels make the display inline block and let's put some spacing between the items with a margin of 20 pixels now let's handle our hover state when we hover over one star we want to change the background image so i'm going to go back to our assets panel and say copy as we want to grab our filled star let's paste that in remember one star is the farthest star on the right so when i roll over that it seems to be working okay so let's handle the second star and say the same thing when we hover over the second star we want it to change just like before okay great but we want the first star to be filled two so we can use our sibling selector again and say two stars hover remember this only works because one star is listed after our two stars now we just need to do the same thing for the remaining stars three stars and then to grab the second star perfect four stars and five stars perfect our stars are behaving we just need to change the order so there are several ways that we can do this but i'm going to reach for flexbox so for our star wrapper let's add a display of flex and then we want to change the direction that these are being displayed in so we can use the flex direction property and we'll give it a value of row reverse this is great our stars are in the right order the only problem is that they're now on the right side of the screen we can fix that by adding a justify content flex end that sounds a little funny but basically with row reverse it put the flex end on this side instead of the right okay now we're done after walking through both methods which way is better well it depends i know everybody hates that answer but it's true i told you that these examples come from real life projects and in my real life project this had to go in an html email and email clients are notoriously bad for supporting modern day code there's a great resource called can i email it.com i'll include a link in the description below but with this site you can type in a property and it will tell you what email clients support which properties so for us flex is supported but flex direction isn't meaning the first code pin is better for email with that said the second option feels cleaner to me you don't have that weird div at the end that contains the image and also feels a little more stable each a tag has its own star and we're not moving the background around trying to get it to line up just right so this is going to go live on a website and i'd probably use a second code pin that we built i'll include a link to both of these code pins in the description below feel free to grab the code fork the pen whatever it's yours if you like this video and want to see more videos on web design and development be sure to hit the subscribe button below hit the bell icon to receive notifications when new videos are posted until then keep coding you

Channel: Self Teach Me

Views: 1,078

Keywords: codepen.io, html css

Id: y6kZyiBjAak

Length: 16min 12sec (972 seconds)

Published: Wed Nov 25 2020