 Hey, what's going on YouTube? My name is Lee Brandt. I'm a Developer Advocate here at Okta. Now I know JavaScript developers all have their favorite framework, whether it's Angular, React, View, Svelte, whatever. But if you just want to create one page or one component that has some interactivity to it, it's total overkill to bring in a whole framework just for that. So today we're going to look at is building a JavaScript component in just vanilla JavaScript without bringing in a whole framework. Let's take a look. Okay, so what we're going to be building is a five-star rating component. It's simple and mostly what you're going to see is how to hook up the component and make it a component. So to make development a little bit easier, I'm going to use a package called HTTP-server. Now it's an NPM package, so you'll need node installed. And all this really does is it serves up a folder as if it were a web server. It just makes development easier, so you don't have to go to file, colon, slash, slash, slash, home, slash, Lee, slash, whatever. So to install it, it's just NPM, install, dash, g, HTTP server, dash server. And then when you want to run it, you just, here I've created a folder called five-star for our component. You just do HTTP-server and dot to serve that local folder. And it'll show you that it's running at localhost 8080. So we'll open up localhost 8080 and we'll see we've got this index of this folder because we don't have anything in it yet. So let's go over to this five-star folder and I'm just going to create a new file in here called index.html, pretty standard. And VS Code can help me out a little bit here so I can just do HTML colon five and get my regular document here and we'll just call it rating app. So now I've got my file here, if I go back over to my browser now, I've at least got a page here. Let's give it some kind of data. Let's do an H2 in here and say rating app just so we can make sure it's serving the right folder. Yep, there's our rating app. Okay, so let's go back in here. And what we want is your standard five-star rating thing, right? So it's got five gray stars in it. We want it to load, be able to load with an initial rating. So like if you rated this thing before and you're loading it now to show the rating, we want to be able to give it a rating number and have it highlight that number of stars. And then when you hover over it, we want to be able to have it like highlight the stars as you hover over it and then unhighlight the stars as you hover back. And if you don't click on something, it goes back to the rating that you had. And then if you do click on something, then it saves that rating so that now if you click on four, then four stars are highlighted. Make sense? So just very simple. Let's start with the basics of this. We'll throw a little HTML in here for our rating. So we're going to have a little div in here and we'll call it starRator for the class. We'll give it an ID of Rator1. There's our div. Okay. Now we're going to put a little span in here and we're going to use some of the data star stuff in HTML5. So let's go ahead and we'll put five of these in here. Five. And we'll make this one one, two, three, four and five. Okay. And this is just a hex value for a star, whatever. The other thing I'm going to do is I'm going to put a roll on here and we'll call this rollRator. This we'll use later on for the JavaScript to pick it up and wire up events to it. And let's go ahead and duplicate this so we know we can put two of them on the same page. That way we know that the component is isolated and we can put more than one of them on a page. Which will be super helpful if you wanted to like, let's say you're doing a beer rating app or an album rating app and you wanted to list out all the albums that you've currently rated and show the rating as a star rating, you can load this out. You could also make this component draw all these for you, but just for simplicity's sake, let's go ahead and put them in HTML. Now, we've got this all set up. The last thing we need to do is we need to bring in the Raider JavaScript in here. So we're going to need a script tag. But first, let's go ahead and create a folder and we'll call this folder JS, like you do. And we'll go ahead and create a new file in here called main.js. That's going to be our main JavaScript file that we're going to bring in. Now, to bring this in and be able to use components with it, what we want to do is we want to make it a script. Give it a source and the source is going to be JS slash main. And in order to be able to use components, we want to say this is type is equal to module. Now, for every browser that supports ES6 modules, which is most of the, almost all of the evergreen browsers, the only one that doesn't support it of the newest browsers is IE 11. IE Edge does support it. IE 11 doesn't. If you wanted to do this, you could still do the same thing. And you can just totally disregard the import and export statements and just put in script tags in every page you wanted to use it. But we're going to talk about real live ES6 components here. So now we've got this JavaScript main file coming in. We want to create the raider component here. So let's go ahead and create a file called raider.js. And we'll just give it some basic stuff. We're going to do exports. We're going to export to function. And we're going to call it raider. And it's going to take a rating element so that we can wire this component to any HTML element we want. Okay? Now, over in main.js, let's go ahead and import it. Import raider. Actually, it's raider with capital A. Power, isn't it? From. And I couldn't get the component to work without that. I think, by default, my import plugins are set for React. So it's going to want to do that. But without the .js with plain JavaScript, I couldn't get it to work. Maybe there's something one of you knows. Put it in the comments below how to get this to work without the .js. It's not a huge annoyance to me. So I don't care. But first thing we're going to do is going to wire up an event listener. So add event listener. And the event we want to listen for is dumb content loaded. And that just means that all of the HTML content has been parsed and loaded. It doesn't mean that it won't wait for images and style sheets and things like that to finish loading just the HTML content. Which is what we want. So then we're going to do a const Raiders that we're going to put all of our Raiders in equals documents dot query selector for all. Then we'll get all of them. And we'll be looking for ones with a role of Raider. So this is an easy way to just go ahead and get all the ones with that role attribute on them. And then for each one of those Raiders, we want to wire them up. So we'll do Raider. We can use the fat arrow syntax. And we'll do a new Raider. And we'll pass that Raider element into it. So all we really did was found all the ones in here that have a role of Raider. All the elements in here, all the dibs that have a role of Raider. And we wired them up to the Raider component that we're going to create here. So we just passed that element into it. Now, everything should work here. So if we go back over to my browser, we've got two star rating components here. They don't do anything yet, because we haven't made them do anything yet. But let's go ahead and do that. Let's go ahead and wire them up and put some functionality in there. So the first thing we're going to want, we're going to use this over and over again, is we're going to want to get all the stars inside of that component. So we'll just do rating elements.querySelectorForAll, querySelectorAll. And we'll do everything with a star class on it. So everything that has a class of star. We could just do everything that's a span inside there. This is a little bit easier, I think. So here's querySelectorForAll, querySelectorAllStars. And then, now that we've got them, let's go ahead and the first thing we're probably going to do is set a default rating. So in here you can see, actually I probably didn't do that. Let's go ahead and set the default rating for these. And we're going to, again, we're going to use the data stuff here. So with the data rating. And we'll set this one equal to three. So that'll be our initial rating for that guy. And for this one, let's set it to one. And we'll set this one to four. That way we know they're either one of them set to five then, but they're separated pretty far apart from each other. Now nothing has happened in our app. We haven't changed anything, any functionality in our app. We still just got five black stars. And speaking of that, let's go ahead and actually, we'll style up the stars so that they're kind of a light gray color. And we'll make them a little bit bigger so that they're a little easier to see. So in here, we'll add some style sheet here. So we can set the star radars to stars to five rims and make them gray. Much better. Now they're bigger and we can see them. So let's come back over here. We've got gray stars. We're bringing in our radar component. There's no evidence that we're bringing it in yet because we haven't done anything. But since we've got a default rating set now, let's go ahead and do some highlighting for that radar. So the first thing we're going to do is we're going to, I'm going to cut and paste some code here so you don't have to watch me type over and over again. But what we'll do is we'll set the highlighter for the rating. This is something else that we're going to use a couple of different times. So we'll just call it highlight rating. And it's all it's going to do is go in those stars there. It's going to go through each one of them and whatever number you pass in, it's going to set the style color to yellow for all these stars up to that number. And then everyone after that will be gray. So the last thing that we're going to want to do in order to get this set up is we're going to get that current rating. And we're going to go ahead and set the rating to that. So let's, right above this, we'll do a function called reset rating that calls that highlight rating. Okay. And all that's going to do is get the data rating from the element. This guy right here. And it's going to pass that number into the highlight rating so that it highlights those numbers. And then for the initial load, let's just go ahead and call reset rating. That'll be our initial load. Now, if I haven't screwed anything up, we should be able to see. I did screw something up. What did I screw up? Let's take a look. No console errors. Oh, there we go. Just needed to heart refresh so that picked up the new JavaScript wasn't caching it. You've got the one that's loaded with one and one that's loaded with four. So we're getting the highlights working now. That's good. So the next thing we want to do is we want to actually add a hover so that when you hover over these, what I want it to do is when you hover over these, regardless of the rating that's there, I want these to go highlight as I hover over them and then unhighlight as I go back. So even though this has four, if I'm hovering over three, I want the four and five star to be gray. So let's go ahead and set that up. First thing we're going to do is we're going to add an event listener for each one of those stars. So for each one of those stars, we're going to add an event listener that is a mouse over and we're going to call this rating hover. So let's see what the rating hover looks like right above this reset rating. I'm going to put in a rating hover and it's just going to get the current hover of the current target. We're going to get the data value of it, which is this guy right here, whichever one you're hovering over and it's going to pass that into that highlight rating function that we just created. So this should work just fine. Let's go over here and see if it's working. You may need to control refresh just to get it to work. But okay, now that's all working. And if we go below four, it un-highlights those. But now they're, if I'm highlighting it two and I mouse off, it's now set to two, but I didn't click on anything. I haven't actually selected a rating yet. I want it to actually go away once I hover off and go back to the original rating that was set for that guy or at least the last rating I did with a click. So let's go back over here in this one extra little thing we need to add. We'll add it down here at the bottom. We'll just add an event listener that says on mouse out for the rating element now. On mouse out, I want you to call this reset rating that sets the rating back to whatever the data rating is in the element. So now when we go back over here and we hover over these and I mouse out, it goes back to one. So I'm over here mousing down to two and I go off. It goes back to four. So now we've got that. The only thing left to do now is to come in and add the click event that actually sets the rating, right? So let's go ahead and add that. And since we already have the for each, we'll go ahead and add it right in there. So we'll add an event listener called click and we'll call this set rating function that's actually going to update the data rating. I'll add this right here at the top. Since that's kind of the point of the thing is to set a rating. So it'll just get the rating element and it'll set the attribute, the data rating attribute to whatever the star is that you just clicked on. So that's this guy right here, this data rating. It's going to change that value for us. So now when I come back over to my browser. And let's go ahead and open up those tools. And we'll come to the elements and we'll watch this a little bit. Open this up so we can see. I've got two data ratings components there. One set to one, one set to four. And as I hover over it, it's changing those to great easy. And then when I click on one, I probably need to control refresh, expand these out. Going through here, when I click on one, you'll see it updated the data rating to three. And now when I mouse off, it stays there. Same with here. If I set that data rating to five and then I mouse off, it sets the rating right back to five. Now you've got a completely functional rating component that you can use in any page. All you need to do is whatever your main JavaScript file is that you're using here. Make sure you make it a type module so you can use these important exports. Otherwise, what you'll get is unable to use imports outside of modules. So all you got to do is add the type of module to that so that it can have access to that import and export statements. Then export from the JavaScript file that you're going to be using. And now you can use it. And as soon as it sees that the main JS function is doing an import of raider from raider.js, it'll download the raider.js file when it sends all the HTML file and the JS file down to the client. So now you've got a fully functioning thing. Your homework, your mission should you choose to accept it, Mr. Phelps, is to figure out a way to get your component to draw these spans. They're pretty repetitive so should be fairly easy to get it to draw the star. Try using something else. Maybe you're rating albums so you want to do five discs ratings or whatever, five thumbs up, whatever. This one was just easy because there's already a hexadecimal value for it. So there's a hex code that's easy to use. And most people are used to seeing a five star rating. Let's just be honest. Change up the star highlights. Get your raider to make them pink or whatever to match your style of your app. Or figure out a way to pass them in. Like pass in the color or pass in the number. Maybe you wanted to rate it one to ten out of ten stars or one to three out of three stars. So figure out how to do that without the HTML. All this stuff is componentized. Really the biggest thing for the components is making this a type module and then exporting from your function into here. And that's it. Make sure you subscribe down below if you like this content. Make sure you hit the little bell icon so you get notified when new content comes out. And if you have any comments, please leave them down below. Love to hear your feedback. If you have a GitHub repo or a gist of a raider.js that you created that draws its own stars that you're able to pass in a number of stars that you'd like to see. I'd love to see that kind of stuff. Always love to improve on my own stuff too. So if you get some cool thing you're able to do, let me know. Send me a link. You can hit me up here on YouTube or you can hit me up at lead.brant at octa.com. Thanks for joining and we'll see you next time. Dude with the background faded out like this totally reminds me of the Bohemian Rhapsody video. Skaraboush, skaraboush, where you do the fandango. Sorry. Such an idiot.