Star Ratings With JavaScript & Font Awesome

[Music] hey what's going on guys so it's Friday and I wanted to do something that it was it's kind of a small project but kind of a cool project at the same time I didn't want to do any frame work series or anything like that so we're gonna build this vanilla JavaScript interface which is a kind of a ratings application or part of an application I guess you'd integrate it with a bigger app but basically we have we're gonna have an object of 4k TVs that's just what I chose you could it could be anything that you want it to rate and each TV will have a number rating it'll be between one and five and it can have decimal points okay and then we're gonna translate it to these stars and these are from font awesome 5 which is the newer version of font awesome and we have full stars empty stars and half stars and we're basically gonna take the number and round it to give us the appropriate amount of stars so for instance a 4.7 will give us four and a half stars if this were a 4.8 4.9 or a 5 it would fill up all 5 stars if it were a 4.2 4.1 or 4 it would fill up just the four stars all right so that's kind of how the rounding is gonna go and that's the first part the second part of the project we're gonna add this form where you can see we can select a product or TV and the rating is blat is disabled by default but if we choose a product let's say the vizio you'll see that the rating from the vizio will actually get beep will get put into this input and then we can change it let's say it's a little better than we thought like a 2.4 and then onblur which is the event where i click outside of the box you'll see when i when i call that event this will change okay so i'll click outside and that'll change the number as well as the star ratings all right we can manually enter stuff in here if I try to put something that's higher than a 5 it's just going to give us an alert and it's not going to actually change okay so it has to actually be between one and five so that's what we'll be building guys hopefully you enjoy this I like doing these little projects they're not too common in tutorials so I think that they teach you about the language and syntax and the DOM and all that stuff so that's it let's go ahead and get started hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info all right so we're gonna get started here now if you're following along it's very simple we're just having one file called index.html and we're gonna add all of our CSS HTML and JavaScript to that file so I have a folder called star ratings with the index file open up in open and vs code alright so since we're using vs code we can use Emmet so I'm gonna do exclamation tab that's going to give us an HTML boilerplate for the title let's just say 4k television ratings and we're gonna add a couple things here so we need font awesome so if you go to font awesome comm and go to get started we're not going to use SVG we're gonna use the web fonts with CSS let's click on that and we're gonna grab this link here okay and paste that in and the reason we're using the CSS and not SVG is because we're not actually using font awesome classes we're using the unicode character from within the CSS to generate the icon alright the next thing we're gonna need is bootstrap so I'm gonna go to bootstrap CDN comm and just grab the link for bootstrap 4 and we'll put it right in here and save alright and I am using the prettier extension 4 vs code so if I save and you see it clean up a little bit that's why I'm also using live server so to run this I can just do open with live server and it'll open in the browser but of course you don't need that you can just open up the HTML page all right so that takes care of the head area now let's go into the body and let's create our table I'm not going to do the form stuff just yet so we're gonna do the table first actually to put a container I'll do a container and we'll wrap our table it's gonna have a class of table and a class of table what I keep doing that table - striped like that and we'll have a tea head inside here we'll have a table row with a couple table headings so the first one will say 4k television okay so that's the heading for that and then the next heading will be rating and then we'll move on to the tea body alright so in the tea body we're gonna have table rows and each table row is actually going to have a class with the brand name so in this case Sony okay we need this for some of the Dom stuff that we're gonna do so table row will have TD with the actual title so we'll save Sony 4k TV and then let's do another TD now this TD is gonna have a few divs in it so it's gonna have a div called stars - outer and in here we'll have another div nested called stars - inner now nothing is actually going to go in here in the HTML we're using it as a placeholder Stars outer is basically the the empty stars the gray ones and then stars inner is gonna be the yellow filled stars and then the way that we're going to basically display the number of ratings is by setting the width of stars inner which is the yellow stars okay we're going to do some calculations to do with percentages and stuff like that and then underneath Stars outer we're gonna have one more div called number rating because I want the actual number rating and I said div this is actually going to be a span oops so span number rating all right so that's what each table row is going to look like we're gonna have five of them so I'm just gonna copy this down that's two three four and five and then what we'll do is just change up the brands here this will be class Samsung and we'll change the title here as well to Samsung 4k TV this one will be Vizio and C this one will be Panasonic I believe so we'll change this and then the last one will be Philips all right so if we save that it should look like that all right so we're gonna go ahead and jump down to the JavaScript now to get get these stars like I said we're gonna wait we're gonna hold off on the form for now so right above the body tag let's put in our script tags and let's see the first thing I'm gonna add here is the initial object with the ratings and the brand so let's say initial ratings so have a variable called ratings and we're gonna have Sony let's say 4.7 Samsung three points for vizio we'll say two point three Panasonic three point six and Philips will say four point one all right so that's our ratings object we're also gonna need our total stars so let's say Const stars total equals five okay because that's the max and then what we want to do is basically loop through this object and you can loop through an object in JavaScript using a four in loop okay which is a standard of es6 our part of the es6 standard es2015 and i want to put this inside a function so that we can call it whenever we want so let's say get ratings and we're going to create a function called get ratings all right and let's just do console.log ran now it's not going to run right away because we haven't called it so what I want to do is right above it let's say run get ratings when Dom loads so we're going to create an event listener on the document so add event listener and the event we want to listen for is called Dom content loaded and when that happens we want to run get ratings so now if I save that now you can see ran all right so back to the get ratings we want to loop through our object using a four in so to do that we say four define a variable let's say let rating in not of there is a four of but that's for a raise you want in for the object in ratings now just to show you what we get if we were to log rating it's going to give us each brand because it gives us the key and the brand is the key if you want the actual rating the number then what you would do is take the object name which is ratings and then pass in as an index the rating like that and now you can see we get the numbers okay so just remember that's how you can get the key and the value or the value all right now let's see we want to basically get a percentage value from the rating so let's say get get percentage so for that we're going to create a variable called star percentage and we're gonna set that to a formula and we're gonna take the number rating which remember we get from ratings and then the index of rating all right so we want to basically take that and we want to divide that by the total so stars total okay and then finally we just want to multiply by 100 so that'll give us the percentage and if you guys want to see what that is for each one say star percentage and there it is so it gives us a percentage for each one now what we want to do is basically round that to the nearest 10 so we'll say round to nearest 10 so let's create another variable called star percentage rounded and the way that we're going to do this we're going to use the math object which has a rounded method so we're going to use backticks here to use a variable and we use this syntax to use a variable or an expression which is going to be math dot round and we want to pass into here the star percentage so star percentage and then we want to just divide by 10 and then multiply by 10 and then just add on the percentage symbol all right so if you want to see what that gives us for each one we can do star percentage rounded and save and now we get 90 percent 70 percent and so on and this is what we're going to use for the width of the stars inner okay which is the yellow part of the stars that's going to determine how many stars get filled so let's do that next let's say let's say set with of stars in ER to percentage and we can do that by selecting it so document dot query selector now this is going to be dynamic I'm going to put in some template strings because the the item we want to select is by this Panasonic Visio and so on which aligns with the keys of our ratings now remember we can get the keys by just simply using rating inside of this loop so we want to use a variable syntax here and say rating alright and remember their classes so we need a dot right before it so dot rating and then we want to target the stars inner inside of the rating which is this so let's go rating and then class of stars - inner and then we simply want to set the width by saying style dot width equal to the percentage rounded save that let's see what am I missing here oh what I'm missing is the CSS but we're not getting any errors so that's good all right so in order for these stars to show up we need to add some CSS so let's go up to the top here up to the head and we'll go right under the title and put in our style tags and we're gonna add styles for the stars inner and outer and also for the pseudo class before okay so let's first do stars - outer this is just going to be positioned relative because the stars inner is going to be positioned absolute inside of outer so we want this to be relative and then I'm just going to display it as an inline block okay and then let's do stars - inner and let's do position:absolute because it's basically overlaying Stars outer all right so we want the position to be from the top zero position left zero and let's do let's do white-space:nowrap and let's do overflow:hidden and the width okay the width is what is important here it's gonna be set to zero by default but the percentage is going to determine how many stars are filled all right so let's save that we're still not gonna see anything because in order to add the icons we need to use those Unicode characters so let's do Stars outer double colon before okay we're gonna use the before pseudo selector and we want to add a Content variable or content style I should say and we want to put the Unicode of the the icon we want so if we go to icons and we search for star you'll see that this star here if I click on it the Unicode is F 0 0 5 so we can get this icon with this Unicode code or character whatever and we're going to use the same one for both but one is going to be yellow the Stars inner will be yellow this is outer so this one we want to be gray but to use this Unicode we just want to do a forward slash then I'm sorry backslash and then the Unicode character which is f zero zero five now that will give us one star but we want five so what I'll do is I will copy this oops copy this and we'll do five of them now just that if we take a look you'll see it's not showing up the reason for that is we need two additional things we need a font family and this is new to font awesome five you didn't used to need this stuff for version four for font family we want to use font awesome free like that okay if I save that still doesn't work because we need a font weight so font weight we're gonna say nine hundred and save that should work why isn't that working let's give it a color I don't think this will fix it but we need a color anyways which is actually gonna be CCC four light gray all right so why is that not showing oh it's because it's font awesome five free there we go alright so I know that that's that's a little weird and that confused the crap out of me when I was when I was putting this together I was I was using a reference an article as a reference that was using font awesome for and they they did it much differently in fact if you look at the stars here the empty one has the same Unicode as the full one which is weird if we wanted to use the empty star here what we would do is change the font weight so if I change it to something lighter like two hundred now you'll see they're empty stars which I initially was going to use but when we fill it with yellow it gets rid of the border and it looks a little weird so we're gonna stick to just using the full and then the inner stars will be yellow okay and I hope that makes sense it's just it's a little weird to even explain but let's copy this and let's change this to inner all right now we're using the same icon so these should all be the same the only thing that we need to change is the color which will be yellow it's going to be a hexadecimal of ff8 see what is it Mike's in the way easy Roby yellow and save and there we go so this is actually working if we go down here to our object you can see that these ratings are now pertaining to these stars okay let's say Phillips let's say I wanted to change that to 1 and watch when I save Phillips changes to 1 if I do a 1.2 it should stay at 1 but if I do a 1.3 then it fills up the next half all right if I do up to a 1.7 it'll stay like that but if I do a 1.8 it should fill up the next star okay so that's how it works it's based on the width of stars inner alright so hopefully you guys are still with me I know that it's a little weird but let's go let's continue so now that that's done let's go let's add our form alright now that we have the the stars corresponding to our object so let's grab our let's not grab let's type in our form here so inside the container I'm gonna put a form group we don't actually need a form tag because we're just dealing with the inputs so this is going to be a select list so let's do class form control which is just a bootstrap class actually yeah form control let's also do custom - select all right I want to move this down so for in the container div I'm gonna add a class of mt5 margin top 5 just to push it down and then this select doesn't need excuse me it doesn't need a name it does need an ID it's ID is gonna be product - select and then inside here we're gonna have some options so the first one is actually going to be disabled and selected the value I don't know the value will just say zero and then for the text inside will say select product there we go alright so then we'll have a bunch of other options here what do we have 5 so let's do with Emmet we can say option times 5 tab and it'll give us 5 options so we have Sony and let's say Sony oops 4k TV samsung let's just add all the values Vizio I hope that's how you spell vizio I have 2 of 2 Vizio TVs and I I'm pretty sure that's how you spell it Panasonic and Philips so here we'll say Samsung 4k TV and let's actually just copy that here we'll say vizio 4k TV panasonic there we go okay let me close this sidebar up so if we save that you can see we have all of our products good next field we're gonna need is the rating control so I'm going to go under the form group and let's add another form group and this is gonna be let's say inputs I'm gonna give it an ID of rating - control and let's give it a class of form control okay so the type is actually going to be number now I want the the step which is when we click the little arrows I want that to go up by just point one so we can actually add in a attribute an attribute of step and set that to zero point one like that and then I want to set a maximum of five you shouldn't be able to arrow it up more than five and then a placeholder of rate one one through five and let's disable it by default so we'll say disabled and save and there we go good so that's all we have to do as far as the HTML now we need to go to our JavaScript and let's see where are we gonna put this stuff let's go under the total actually let's go under where we where we called the event the Dom loaded event so right above get ratings and let's grab our form elements alright so we have the product select so we're gonna say documents I'm going to use get element by D we gave an ID of product select or - select and let's also get rating control so get element by D rating - control so that gets our form elements and then I also want to just initialize a variable for the actual selected product so I'm gonna use let here and say product just let product actually okay now we want to do is is create some event listeners so first one is going to be for when we select one of these we need that event so let's say product select change so remember we gave that a variable of product select so we want to say add event listener and when that changes then we want to call a function I'm just going to use an arrow function here and we want to pass in an event parameter because we want to get we want to get the product and we actually want to set it to this whatever you want to set it to this value so we'll say product equals event dot target dot value okay event target dot value is how we can get the value of whatever is selected if we want to test that out we could say console.log product and let's just select something and you'll see the value will show down below all right so now that we have that what do we want to do we want to now we want to be able to rate it so let's say enable rating control so we'll take the rating control variable say dot disable equal to false okay so now when we select the product okay so that didn't work rating control dot disabled should be a D there now we can actually rate it all right so that well we can't rate it but we can this is now enabled next thing we want to do is set the value of this to whatever the value of the selected product so what we can do is say rating control dot value is going to be set to the ratings object which is this here and we can grab this the value by putting in the key which is the product all right so we can say ratings product so let's save that so we'll select Sony and there we go 4.7 Vizio 2.3 so it's as easy as that now that we can do that we want to now take care of the actual rating so let's say rating control change all right so let's say grading control dot add eventlistener now I'm not gonna use change here I'm gonna use blur because I want it to change once you kind of escape the input so we'll say blur set that to function it's passed in our event parameter all right now we can get the rating by using a dot target value okay now I want to test to make sure that it's it's under five or five or under so we're gonna say check for or let's say make sure five or under so if the rating is greater than five then I'm gonna do an alert and I'm gonna say please rate one through five and then we just want to return okay we don't want anything else to happen so if I save that we try it out let's put in a six blur and there we go please rate one through five okay so after that we if this you know obviously if this passes or doesn't pass I should say we want to change the rating so we can do that by taking the ratings object taking that product as the key and setting it equal to the rating okay and then that by itself isn't going to actually update things to update it we need to rerun this function get ratings okay so let's try that let's select Visio and let's go to let's say three point five and then once I blur this should change blur and there we go oh one thing I didn't do is the actual number rating I forgot about that which is very easy we'll just go down to get ratings and whereas we're gonna select let's see if we go up here we're gonna select this class that's where we want it to display so what I'll do is just copy this and let's say add number rating and we just want to select that rating or that product and change this to number rating and we're not changing the style what we're changing is the content so we want to say inner HTML is going to be equal to the actual number now remember to get that number we use the ratings object and we use rating as an index so let's save and there we go so we'll try this one more time Vizio will go from two point three to three point two and I'll blur it and there we go the stars change and the actual number changes alright so I think that we're good to go guys I hope that that most of that was clear and hopefully you enjoyed this video if you did please give it a like if you are not subscribed and you like this type of thing please consider subscribing and that's it I will see you in the next video hey guys if you like my style of teaching check out my premium udemy courses listed at traversée mediacom i of course is an angular nodejs bootstrap for PHP and my most recent 21 our modern JavaScript from the beginning course all links from the website are promotion with up to 90% savings

Channel: Traversy Media

Views: 82,927

Keywords: javascript, font awesome, font awesome 5, javascript font awesome, javascript star ratings, DOM, javascript DOM, vanilla javascript

Id: u3rylF3y3og

Length: 33min 59sec (2039 seconds)

Published: Fri Mar 02 2018