Build 5 Projects With HTML, CSS & JavaScript

Key Takeaways

[Music] hey what's going on guys so yesterday i made a text post on youtube letting you know that i won't be making youtube videos for the next few weeks or so and i still do plan to upload projects from other courses so today we're going to actually do five different mini projects with html css and vanilla javascript and these five are from my 50 projects and 50 days course on udemy so if you're interested i'll have a link to that course in the description with a promo code so i just want to go through the five projects real quick so the first one is going to be this blurry loading page so if i reload you'll see that the image starts off blurry and this percentage goes from 0 to 100 and the the image comes in clearly so that's the first one the second one is going to be this vertical slider so we have an image on this side some text on the left and we can just scroll through and we can go the other way as well all right so that's the second project third one is going to be this random choice picker so we can go ahead and put some choices in here separated by commas so choice 2 choice 3 and if we hit enter it's going to do this little effect down here and it's going to randomly pick one of those choices next we have a live user filter so we have a list of users here obviously you could replace this with anything and then we can just start to type and we'll filter down edna and you can see it filters that user and then the last one is going to be this content placeholder project where when we come to the page we have this cool little effect until the data sets in okay so all of these use html css and javascript and then i'll also have the github repository for the 50 projects in 50 days and obviously it includes those five projects and one thing i want to mention is there is a project starter so this is where i basically begin each project and it's nothing special you just have your html head body tags you're linking in the script and you're linking in the css and then in the style.css i just have the font that i'm using which is roboto and a reset and then some body styles basically positioning everything into the middle with flexbox so you're just going to want to add this the javascript file is completely empty all right so that's the starter that's the repository and let's get started with the first project okay so in this project we're going to be building a blurry loading page or loading image so if i come to this page here you'll see that the image starts blurred and we also uh start with you know zero percent and then that goes up to a hundred percent and the image comes into focus so you could use this to load just about anything we're just doing a blur effect on the image but you could load in your site you could have any other elements in the dom load in that specific amount of time from when we go to zero to 100 and we'll have to map different number ranges to the zero to 100 load for instance the image blur is going to be 30 pixels when it starts and it's going to go down to 0 as we go from 0 to 100 and there's a stack overflow function that we're going to use to help us do that to help us map one number range to another all right so that's it let's get started so we're going to get started on the blurry loading project and the html is going to be really simple there's actually only two lines in the body but let's add a title here so we'll call this blurry loading and then down here let's get rid of the h1 and this is going to be a section i'm going to give this a class of bg so this is going to be the the background image that we blur and then we'll have a around the text we'll have a class of loading dash text and we just want to put in here 0 and that should do it as far as the as far as the html goes so let's jump into our style sheet and there's not too much we have to do here either i'm going to change the font so i just want this to be googleapis.com css and we want to use a font family i'm going to use a family of ubuntu i can spell family correctly and then let's change down here change roboto to ubuntu and then this stuff can really all stay the same we don't have to change anything here we don't need flex direction column but it's not going to hurt if you do leave it now for the background remember we have that section with the class of bg and we want to set a background actually let's just use the background property and say we want this to be a url and the actual image that i'm going to use i'm just going to copy and paste in of course you can use any image you want if you want to use this one you can get it from the link from the repository so let's make this have no repeat let's make it center center on the x and y axis and cover for the background position and we want to position this absolute and then let's set the top so i'm going to initially just set the top in left to zero i'm going to change this and i'll show you why in in a couple minutes and then the width we'll set that to 100 viewport widths and the height to 100 viewport height so we just wanted to take up the whole viewport and let's add a z index here of negative one because we want this to be behind the zero percent or whatever the percentage is the text and we want to add a filter here and initially the blur is going to be set to zero pixels and then for the loading text we just want to increase the font size let's set that we'll set the font size to 50 pixels and let's set the color to white really depends on the background image you use all right so that gives us this now i just want to show you something if i because this is going to start blurry and then it's going to make its way up uh or make its way down i should say the higher the pixels for the blur the more blurry it is so if i put like 70 pixels in here that's what it looks like now notice on the edges this comes out quite a bit so i actually want to fix that i don't want it to come out that much so for the top and left i'm going to set that to negative 30 pixels and let's also set the left to negative 30 pixels now if i do that you're going to see there's less spacing on the left and the top but there's more over here so for the width and the height what we can do is calculate so we can use calc and just wrap this and we just want to add 60 pixels like that and now you can see that it's even on the left and right we want to do the same for the top and bottom so we'll do the same thing we'll just calc and we want to add 60 pixels here as well and now there's not as much space all right so i think that that looks a little better so let's put this back to zero pixels so in the next video we want to add our javascript so that we can have this image basically start blurry and then have it work its way up to being clear as this percentage loads here so now we want to work on actually having this percentage change so we want it to go from 0 to 100 and then the background image is going to start blurry and then it's going to go to clear as this loads so first thing we'll just bring in the two elements we have which are the load text so let's say document dot query selector oops query selector and we have a class of text or what we call loading text and then we also want the background so that has a class of bg and we'll just call this bg okay now i'm gonna initialize a value here called load which is gonna start at zero obviously it's gonna go from zero to one hundred and we're going to have a function here called blurring and right now i just want to take that load value and increment it by one and then i'm going to go ahead and just console.log load now the way we want to run this function is in an interval and i want it to run every 30 milliseconds so let's create a variable here called int so we'll say let int and set this to set interval and the function we want to run is the blurring function and let's say every 30 milliseconds okay this is not 30 seconds this is 30 milliseconds which is very quick so i'm going to save this and if we go and we open up our dev tools here we go to the console you're gonna see it's just gonna go from zero and it's gonna increment every 30 milliseconds forever it's just gonna keep going obviously we don't want that we want it to go from zero to one hundred so what we'll do here actually i'll leave the console log for now and let's say if let's say if the load value is greater than 99 then we want to stop that interval and the way we do that is with the clear interval function so we want to pass in int because that represents this set interval so now if i save that when it gets to 100 it should stop okay so that's what we want now instead of just console logging obviously we have some stuff in the dom that we want to work with that we want to change one is going to be the text so let's take the load text and set the inner text value and i'm going to set that to let's use some template string template string here and we want the load okay whatever that is at the time and then just a percentage sign so if i save that you'll see that this will start counting up to 100 and also the way that that i want this to to show is not only count up to 100 but it's going to start fully fully opaque and then it's going to start to fade out as it loads up all right so what we'll do is take the load text and set the opacity so let's say style dot opacity dot opacity and this is going to be tricky because the opacity value isn't going to be the load value because that goes from 0 to 100 opacity goes from 0 to 1 right so it's going to start it or actually in our case we wanted to start full you know fully opaque so one and we want it to go to zero so we have to map a range of numbers this is basically zero to one hundred to going from one to zero in the same amount of time now there's a actually a stack overflow post that we're going to use here to reference and this person asks either in javascript or jquery to map a range of numbers to another range of numbers because that's what we want to do we want to map 0 to 100 to 1 to 0 for the opacity and this is the question here but the answer that i want to show you is this one here so it's pretty simple it takes in a number it takes in the the minimum and the maximum of the in number which in our case is going to be 0 and 100 so the load and then outmin is going to be 1 opacity 1 and then out max is going to be 0 okay because we wanted to go from solid to disappear so i'm going to actually put this link here i'm going to put this at the bottom of the file just in case you need to look at it and then i'm going to grab this function here called scale and we're going to put this right here and then what we can do is when we're setting this opacity we'll run it through scale and we're going to pass in the number which is load so that's basically that's the amount of time that we want the stuff to happen so when that goes from zero to 100 we want to map opacity to from one to zero if we were starting invisible and going to opaque then we would do zero one but we're doing it the other way around hopefully that makes sense so let's go to the page here and i'm going to save and this will run and now you can see it's going to just slowly fade out as it gets closer to 100 all right so this is actually a really handy little function let's put this let's uh put this right up here so we know that goes with that and stack overflow is great for for little functions like this to do a specific task now we have to do the same thing for the blur because i don't want the blur to be from 100 pixels i want it to be 30 30 is the max so actually i'll just show you right here if i set in the css that's the max blur i want to do i don't want to set this to you know 100 like that um so we have to map the 0 to 100 to 30 to 0 because we're going to start blurred so we want to start at 30 pixels and bring it down to zero when the load is done so let's take the bg the background and let's take style we want to do style dot filter and we're going to set that to template literal and let's say blur and inside here inside blur we're going to open up our variable syntax or expression syntax and we're going to call scale and we want to scale the load just like we did with the opacity and it's going to be from 0 to 100 for that load and then we want the blur to go from 30 to zero in that same amount of time that that load goes from zero to 100 so let's save that and [Music] oh i forgot pixels so we have to have the num you have to have px in here so after this expression we'll do px and there we go so now you can see that the background image is going to go from blur a blur of 30 pixels down to zero in the same amount of time that the load goes from zero to 100 same thing with the opacity of the number all right so that's pretty much it and of course you could load in anything you want i chose to do just an image and blur it in but you know you could add other effects with stuff that you add to the html that you add to the dom but that's it for this project let's go ahead and move on to the next one all right welcome to your next project so in this one we're going to build a vertical slider basically we have an image on the side and we have some text on this side and this could be any kind of content you want and then these two arrows here if i click the up what's going to happen is one side goes up one side goes down but it brings into place the correct text area and the correct image so i'll go up again up again so we have four different slides if i click up again it just goes back to the beginning same with down so then it just goes the opposite way so i think it's it's a really cool looking slider it's not really responsive if we make this smaller you can see it doesn't really look good on smaller screens just because of the orientation of it but that's not really the point here this is this is made for you know a desktop laptop etc if you wanted to you could go on and try to maybe switch the orientation on smaller screens but we're going to go ahead and build this out i think it's a really cool looking project so let's get started okay so we're going to get started on our vertical slider now i have my browser window quite wide because this isn't really responsive just because of the orientation of the how the slider is so it's not going to look good on like a smartphone or anything like that that's not really what this is geared for so i'm going to just keep this a little wider and just click back and forth for now in our html we just have our product project starter and i have a link to the font awesome cdn because we will be using icons for the buttons so let's start off here let's change this to vertical slider and then we're going to have a container that wraps around everything so let's give this div a class of slider dash container and there's basically three three separate parts first we have the left dash slide so this is going to be you know the the text area so we'll have a an h1 and a paragraph and then the right slide and i'll fill this fill these in in a little bit but the right slide is going to be the images right so they're just basically just going to be divs with background images and then underneath that we want our buttons so let's say action dash buttons and our first button here is going to have a class of down dash button and i'm going to use a font awesome icon so fas and we want f a dash arrow dash down okay so i'll go ahead and save that wait is that right no fas space arrow down and then for the up arrow we'll just take this button copy it down and we'll change this to up and change this icon to up and now we have our buttons so for the left slide let's go into that div and we're just going to have a bunch of divs with an h1 so for this h1 we'll say nature flower and a paragraph we'll say all in pink and then each div is going to have an inline style with a background color so that way when you want to add new slides or new divs you just throw the background color in here rather than creating a whole separate class for it so let's say background color and we'll make it fd three five five five so if i save it we're going to see that now we're going to have three more of these which i'm just going to paste in because it's the same thing it's just different colors and content so if i save that you can see what we have here now for the right slide is going to be just a bunch of background images so i'm going to grab that and i'm just using links to unsplash images just to stock images so you can see we have a div with a background image url and we have four of these now if i save we're not going to see these right now because we don't have any content within the div and there's no height or width applied to to the element so we're not going to see the images just yet now one thing i want to mention is because of the way this slides one side goes up one side goes down we have this first div this nature flower is actually going to go with the last image div here all right so if i look at this last image i'm just going to copy that url and paste that and you can see that's the pink flower so the way you would do this if you want to add more is if you add one onto the end here you're going to add one onto the beginning here okay see the the last one here is flying eagle and if we take a look at this we get the flying eagle so that's the order of the elements so now let's jump into our css and let's get started here so as far as the font goes i'm going to use open sans so let's say family equals open plus sans and we're going to change this to open sands okay and i can make this smaller here so make that smaller and make this a little smaller for now now the body we actually don't need all the stuff like display flex i just want the the font family and i want the height to be 100 viewport heights so it's going to look like that right now and i want to just set a reset on the margin and padding so for the universal selector we'll set margin and padding to zero that's going to remove the margin and padding from everything now as far as the slider container goes which is wrapped around everything so the slider container i'm going to set the position to relative because we're going to be setting everything inside of it as absolute within that container and then just setting the overflow to hidden and set the width to 100 viewport widths so vw which will take the whole width and same with the height this is going to be vh report heights all right and then we'll go ahead and start on the left slide so for the left slide i want to set the height to 100 percent and let's set the actually let's do the width first so the width is going to be 35 of the container okay the image part is going to be a little bigger it's the image part will be 65 percent and we're going to position this absolute and from the top zero and from the left zero and then what we want to do is target the immediate divs inside which are each of these here so let's say left slide immediate div and i want to set for that the height for i want the height to be the entire thing so one of these should take up the entire height so the div will be 100 to 100 percent and then width will be 100 percent but it's a hundred percent of its container which is 35 percent so if i save that now we can see this nature flower and it takes up the entire height here and when we add the slide functionality it'll show the next one now we want to style this a little better so let's display flex so each div will be display flex now it's in a row right now that's why it's side so it's horizontal so we want to change the flex direction to a column and then we can align both horizontally and vertically so align center align item center and then let's justify content center and that will align it that way and then let's also make the color white okay and then let's grab the h1 so left slide h1 and let's set the font size to be a little bigger we're going to set that to 40 pixels and we'll add a little bit of margin bottom because remember we took the margin off of everything 10 pixels to separate it from the paragraph part and then i just want to move it up a little bit so margin top i'll set a negative margin 30 pixels which will pull it up a little bit all right so that's the left slide now the right slide say right slide i'm going to set the height to 100 percent i'm going to position absolute from the top 0 and then from the left i'm going to go 35 percent because this width is 35 percent so for the right slide i'm positioning it absolute within the container so i want to start it here which would be 35 percent over from the left all right and then we want to set the width of it to 65 percent okay and then to actually show the image let's target the div so right slide directive and i just want to set some background properties like background repeat set that's no repeat we already have the background image set in line right that's already set right here so we just want to add some other background properties like the size so let's see background size is going to be cover we want to show the whole image and then background position is going to be centered on the x and y axis we still can't see it because we need to apply a height to it so height and width are going to both be 100 percent so it takes up the whole part there and now we can see the image now this isn't the image that we actually want to show with this nature flower but like i said since the the way that we're sliding them in um when we get to our javascript we're going to set it so that this is the right text or the right left slide for this image but for now let's go ahead and style our buttons so we're going to have some general button styles but before we do that i just want to target the slider container action oops what i call it action dash buttons and button and i mean we could put the general styling in here as well but just in case you wanted to add other buttons somewhere so this is going to be positioned absolute and as soon as i do that you can see up here now there's there's two buttons here but they're both in the same exact spot right now i'm going to move both to a position of left 35 percent okay so it's going to push them over and then let's go from the top we'll go down about halfway we'll say 50 percent down so now both buttons are right here and we want to make sure they're always on top so let's do a z index of 100 all right and then for the down button so let's grab this here and say class down dash button i'm going to set a border actually let's uh let's position it first so we can use transform and then translate on the x-axis because what i want to do is move this button over this way to the left so if we put a positive number in here i'm going to just do 100 of of the element it's going to move it over to the left which i don't want i want it over to the right so that's going to be i'm sorry that's going to move it to the right i want it to the left so that's going to be negative so now it's on either side of this line right here all right and then as far as the borders go actually you know what we'll do that in a second let's first do the up button so this one is going to be up button and we want to actually move this one down so we're going to do translate y i'm sorry not move it down move it up this one here i want to move up a hundred percent so we'll do negative 100 percent so now you can see the positioning of these arrows now for the styling so the general button styling let's go up here to button and let's set a background color of white and let's get rid of the border so border none and let's make the color a gray we'll do aaa and let's make the cursor a pointer let's make the font size a little bigger we'll do 16 pixels let's do padding 15 pixels all the way around okay so you can see it looks a little nicer and on hover let's say button hover set the color to two to two just a little darker and we don't want any outline so any button in the focus state we want to set the outline to none all right now if we hover over it gets darker i do want to have some rounded corners on the bottom for this one and for the top for this one so down where we have these down and up buttons let's just add on the down button we'll say border we're going to say border this is the down button so let's do top top left radius and set that to 5 pixels so you can see that this has the rounded corners here and then we're going to do bottom left radius so now this side is rounded i want to do the same on this one but the opposite side so i'll just copy that instead of left let's take this and this and change that to right okay so now those buttons look pretty good okay and it's obviously this doesn't do anything yet because we need to add our javascript so that's what we're gonna do in the next video okay so now we're going to start on the javascript to get this to function and slide so in our script js i'm going to go ahead and bring everything that we need in so let's bring in our slider container and we're going to use document.queryselector and select by the class of slider dash container and then we're going to bring in a couple other things so this is going to be the right slide so class of right dash slide and for the variable here we'll call this slide right and then we're also going to have slide left and that's going to have that has the class of left dash slide all right then we also want the buttons so we have the up button up dash button and we have the down dash button and let's call this one up button down button and then i also want to get the length of the slides meaning how many slides do we have so let's say slides length and we'll set this to query selector all because what we're selecting is all the divs and we actually don't want all the divs in the document we want all the divs that are in the slide right okay so basically all those did with the background images so in here we want to query selector all the divs that'll give us all the elements but we just need the length so we'll use the length property here and that will give us it will give us four in this case if i console log slides length and i go over here and open this up you can see that we get four okay so you'll be able to add more or less slides if you want now we want to have an active slide index because basically these are positioned to be like on top of each other we need to know which index is basically in view so let's say active slide index make sure you use let here and we'll set that to zero to start with and let's take the slide left okay and then we're going to add a style and we want to apply the top and set that to a set of back ticks and we want to do negative because this is actually going to go up and the initial top value is going to be negative and then put in our our expression syntax here and then some parentheses and we want to take the slide length and subtract by 1 because the length is going to be 4 however the index is zero base so the index will be like zero one two three even though there's four total it starts at zero so we wanna get the last index which in this case would be three which would be the fourth slide okay because the rays are nodeless they're zero based and then we want to multiply that by 100 because it takes up a hundred percent or 100 viewport heights so let's add here vh all right now if i save that and i go back notice that this has moved to the correct position so flying eagle actually goes with this image here now we just want to add functionality so we can you know flick these up and down one side will go up one side will go down and it should bring the correct slides into place so let's take the up button and let's call an ad let's add an event listener for a click and when that happens we're going to run we'll call this function change slide and we can we'll pass in an argument of up okay and i'm going to copy this down and then this one's going to call down and this is going to be on the down button so let's change this here to down button so they're both going to call the same function they're just going to get passed in a different argument so let's create our function we'll use an arrow so we'll say change slide equals and it's going to take in a direction as a parameter and then let's get the slider height so we'll say const slider height and that's going to be the slider container and there's a property called client height okay which will give us just that in fact we can console.log just so you can see what that gives us uh slider height and if i go over here and i click the up button we get six six six is that a bad sign let's click up again five seven seven so it's based on whatever you know whatever the height is here and it's it's gonna be completely dynamic doesn't matter how you know high or small it is so that will give us the slow whatever the slider height is now let's check for the direction that's being passed in if the direction is let's say equal to up then what we're going to want to do is take the active index active slide index and increment that by one so plus plus and then we want to know what happens if we hit the end so let's say if the active slide index happens to be greater than the last the last index in the slide which we can get with slide length whoops slide slide length but we want to take away one from that so if that's true then we'll set the active slide index to zero to back to the beginning so basically if we get to the end we're going to go back to the beginning all right now if i click on up you can see nothing is happening yet because we need to add a transform we need to translate it on the y-axis basically move it up and down so down here after the if i'm gonna take the slide we're gonna have to move both slide left and slide right so let's take the right so slide right and take set the style dot transform and we want to translate the y on the y axis so translate y and what we want to pass in here is negative because we want the right side to go up and then our expression syntax and we want the active slide index multiplied whatever the slider height is because remember the slider height is variable and then we just want to add pixels onto it so if i save that i go over here and i click up nothing happens let's see slide length is not defined slide length is not defined oh it slides length plural alright so let's try that and there we go so you can see that it switches now if i do it and it's at a certain height and then the height changes you can see it kind of bleeds over if i click it again it's going to then recalculate the height based on this right here okay which we put into this variable which we're using down here now i want it to actually have a smooth transition rather than just flicking over so let's go back to our style sheet and let's see we want to go on both the left and right slides so let's go up to the left slide here and let's add a transition so we want to transition the transform property which is what we're changing in our javascript and we'll do 0.5 seconds and ease in out and then i want to do the same thing for right so right here we'll add that as well and let's see what happens here all right so now you can see it has that transition and when we get to the end it just goes back to the beginning okay so now we want the same for this side because right now we're just switching the images this is staying the same so let's grab this here and paste that in and then we want to say slide left and change the the transform value translate y and we just want to make this positive because we want it to go the other way right so active slide index times slider height pixels so now if i click up there we go alright so it just goes the opposite way now the down button doesn't do anything so up here we have this if direction is up let's go right out let's put an else here actually let's do an else if so else if the direction is equal to down then we're basically going to do something similar to what we did here so we can copy that but we want to decrement this so minus minus will take away one and we want to check to see if we're at the beginning so if this is going to be less than zero so if that's going to be less than zero then we're going to set it to the last slide in the index which is going to be whatever the slide's length is minus one because the length for us at least is four but the last index would be three because it's zero one two three as the indexes so let's save that and now if we click down there we go and it should always match up with the correct uh you know the correct text with the correct image all right so that's it hopefully you enjoyed this project i think it's a pretty cool looking slider so that's it i'll see you in the next project so this is a cool little project for picking random choices now we have this text area and as soon as i start to type like i'll say choice one and you'll see it'll format down here as like a tag and to create another choice i just need to put a comma and start to type again say choice two another comma choice three choice four obviously i can do as many as i want and then as soon as i hit enter it's going to give us this cool little effect and it's going to stop on a random choice it's also going to clear the text area all right so if you just need a if you need some little helper to help you make a choice between however many items however many objects i mean you could do numbers here and it's just going to stop on a random one okay so that's what we'll be creating let's go ahead and get started all right let's get started on our random choice picker so i have my project starter here i'm going to go ahead and just change the title here to random choice picker and let's go down here so we're going to have a container we can get rid of the h1 let's put a class of container here and inside the container we'll have an h3 and let's say enter all of enter all of the choices divided by a comma go ahead and just specify what a comma is florin and then let's do a line break here and then we'll say press enter when you are done all right so under the h3 let's put a text area and this is going to have an id we'll call text area real creative and let's have a we don't need this stuff here because we're going to style it with css and then we don't need a name i do want a placeholder though so let's say placeholder and we'll go ahead and set that to enter choices here dot dot dot now under the text area we're going to have an area for the tags so we'll give this an id of tags and the these are going to be spans with the class of tag and obviously with some text of the different choices but this is going to get inserted with the javascript however for now i'm just going to hard code it just so we can see it and style it so we'll just create a tag here let's say choice one we'll just add three of these so we'll do two three and save okay so that should do it for the html let's jump into our css and let's so font family we'll just go keep her bottle that's fine let's add a background color background color is going to be hexadecimal value f 2b8f0 which is a blue color and we have display flex and flex direction column center yeah so all this is fine so now the h3 let's give that a color of white because it's on that blue background and let's also just add a little bit of margin we'll do 10 pixels 0 20 pixels for the margin you know what let's change the font to mully so css question mark family equals molly and let's go right here in the body and change this there we go so that's a little bit more readable and then for the container we'll set a width of the container to 500 pixels and actually yeah that should do it so we have a 500 pixel container let's do the text area so that has a class of text area and i want to get rid of the border so we'll say border none and let's make this a block level element so display block and we're going to set the width to a hundred percent of its container which is not working and that's because i gave it an id of text area so we'll just we'll just style the text area so just take away that dot there's no class the height of this is going to be a hundred pixels and let's inherit the font family of mully and then let's add some padding do 10 pixels padding and as far as margin goes we'll do 0 0 20 pixels and then let's make the font size a little bigger 16 pixels and then that should be good for the text area now for the tags so we have spans with the class of tag and we're going to add a background color so background color is going to be f0932b it's going to be the background and the color of the text is going to be white and we're going to add a border radius of 3 pixels and i'm sorry not 3 pixels 50 pixels and padding we'll do 10 top and bottom 20 left and right and let's spread them out a bit so we'll add margin let's do zero top 5 10 and 0. and the font size i'm going to make 14 pixels make that a little smaller let's display as inline block and yeah so that should do it now when it selects uh you know when it's select something at random it's going to have a background color so we'll have in addition to tag it'll have a class of highlight and i just want to change the background color to hexadecimal value 273 c75 and just to see what that looks like let's say the second one here we add highlight and the highlighted one will look like that okay so that's it for the user interface here so in the next video we'll go ahead and we'll start to add our javascript all right so in this video we want to create our tags we want to be able to type in here and split by a comma and create tags below so one thing i want to do in the css though is on the h3 i'm just going to add a text align of center just to center that i think that looks a little better and then in our script file we want to get the tags element which is this right here this div with the id of tags so let's call this tags l and set that to document.getelementbyid and we want the id of tags and then i also want the text area so we have an id of text area and let's call this text area and those are the only two things you want to bring in so then i want to automatically focus on the text area so we're going to call the focus method which if we go to the page it'll automatically put the cursor in there and we can start typing now we want an event listener on the text area so add event listener and we want to listen for a key up so you have key down and key up we're listening when you when you press down and then you let go that's going to fire this off and when that happens let's pass in our event parameter here when that happens we're going to call a function called create tags and we want to pass in e.target dot value which is going to be whatever we type in so if we create a function called create tags say input and we console log the input if we go down here we open up our console and i start to type you should see what we type down here all right now the way we're going to do this is we want to take whatever whatever we type in and then we put a comma we want to split at that comma and create an array of you know whatever is on either side of these comments so this would create an array with this as the first value this is the second we can do that using split so let's say const tags and let's set that to input which is a string we want to split it by the comma and turn it into an array so now if i console log here tags and i go and i say let's just put a 1 in here whoops what happens spit is not a function so split i put a 1 you can see we have an array with one value of 1 which is a string if i put a 2 it's going to just be an array with a 12 but if i put a comma and then a 2 then we have an of an array with 2 values 1 and 2. so it's going to split it by the comma now i don't want to be able to have space like that so what we'll do is add on to this dot filter and filter is also a high order array method that allows you to return certain things based on a conditional so we'll say for each tag let's say tag dot trim which will just trim off any white space if that is not equal to an empty string then we'll return that and then we just want a map which will just manipulate the array so for each tag we want to return an array with the tag but we want to trim so we're just saying it can't be an empty string also we're going to trim any white space so now if i save that and i do one space you can see that it's not actually added the space isn't in there and i could put comma 2 space and the space is not added in there and if i just do like comma and then another comma it doesn't add another it doesn't do anything because of our filter all right so now that we've established that let's get these tags put into our html so we'll get rid of that and let's take the tags element and clear it otherwise they're just going to pile up so before we do anything we'll just clear that and then we'll take our tags which is an array and we want to loop through with four each for each so for each tag create a tag element with document.createelement and we want to create a span we also want to add a class to that so let's take the tag element and let's classlist.add class of tag and then we want to set the the inner text of that so we'll take the tag element and set the inner text to whatever the tag is because we're looping through it here we get each one and we're going to put that as the inner text and then finally we want to take the tags element so make sure you have the s here this is the the id of you know the div with the id of tags and we want to append child and we're going to add each of those tag elements in so if i go ahead and i do hello so it starts to type down there as a tag if i do a comma and i put in world that's going to be the second tag so it's going to separate it by the commas all right so we have the ability to create these tags what we want to do next is have the ability to hit enter and then have it randomly select and it's going to highlight and it'll give that cool little animation as well so we'll do that in the next video okay so we're able to create our tags here with commas now we want the random select functionality so in our event listener let's check to see if we hit enter so we'll say if and then on this event object we have a key property and we're going to say if the key is equal to enter all right now if we hit enter we're going to call a function called random select which we haven't created yet i also want to clear the input so we're actually just going to wait a couple milliseconds before we do that so in the set timeout we'll pass in an arrow function and we just want to wait 10 milliseconds and then clear the input value with e dot target dot value and we're just going to set that to nothing all right so let's create random select down here function random select and for now we'll just console.log 123 and if i open up my console and you know i can type stuff down here and then enter then you see it fires off that function and it also clears this up here now in the random select we're going to go ahead and set a value of times and i'm going to set that to 30 and what this represents is the number of times it's going to highlight each one before it stops so you know go one two three four and it'll go to 30 or whatever you put this to and then we're gonna have we're gonna have to set an interval because this is gonna repeat this highlight of each one the highlight and the remove of highlight of each one so let's create a variable called interval and we want to use the set interval function so for the for the time here we want this to happen let's say every 100 milliseconds and what we want to happen is we want to pick a random tag so let's say const random tag and set that to a function called pick random tag and before we move on we'll create that so let's say function pick random tag and we want to take all the tags so we can use document.queryselectorall and we want to get all the elements with the class of tag which will be all these all of these all the spans and then to get a random one let's return and we're going to return tags so tags we when we use query selector all it's a node list that we bring in so all of these will be put into the node list which is similar to an array with an index so the index is going to be random and we'll use math.floor to round down math.random which will give us a random decimal we just want to multiply that by the length of the tags array or not array but node lists which is similar to an array so that will give us a random tag i'm also going to create two more functions down here just to highlight and unhighlight so we'll call this highlight tag and it's going to take in a specific tag element and then we're going to take that tag element and we're going just add a cl uh add a class with classlist.add and we're gonna add the highlight class and then we want one to remove the highlight so we'll call this unhighlight tag and we're just going to remove instead of add like that okay so now back up to here so we have this interval that's going to fire off every 100 milliseconds it's going to pick a random tag and then we want to highlight that random tag so highlight tag pass in our random tag and then we want to unhighlight so i'm going to have a set timeout here which is going to take in a function and we're just going to wait 100 milliseconds here to unhighlight okay so in here we'll say unhighlight tag and i want to pass in our random tags so with this if i were to create my tags and then hit enter you can see what's happening every 100 milliseconds it's highlight it's picking a random tag to start at and then it's highlighting a random tag and then 100 milliseconds after it's unhighlighting so that's just going to keep going forever right now all right so i'm just going to reload to stop that and now what we can do is go under let's see so function we still want to be within our random select but we want to go down here and i'm going to have a set timeout with a function and i want this to run after whatever the times is i want to multiply that by 100 milliseconds so the 30 here multiply that by whatever the time this is which is 100 milliseconds okay we could even put that we could put that in a separate variable if we wanted to um but anyway we want to clear our interval so when you have an interval that runs there's a meth function called clear interval to stop it so we want to pass in our interval then we want to pick a random tag to stop on so let's create let's do a set timeout and this is going to be 100 milliseconds and inside this set timeout i want to get a random tag so once again we'll create a random tag and set that to pick random tag and then we want to highlight it so let's say highlight tag and pass in our random tag okay so this up here is is causing that you know shifting it to each one highlighting and unhighlighting after a certain amount of time and then this takes care of stopping it and just picking a random tag to land on and highlight hopefully that makes sense so let's do one two three four five these can be numbers or strings or whatever you want to put in here let's do up to ten and then i'm going to hit enter so it should run 30 times and then it's going to stop on a random tag or in this case number but of course it can be anything and let's try that again same thing which we did 1 through 10. and hit enter so it landed on three last time now it lands on one all right so you have choice one choice two choice three hit enter and it's just a cool little application to pick a random choice all right so that's it okay so in this project we're going to create a live user filter where we're actually going to fetch a bunch of users from an api called random user dot me so we're going to fetch them put them in here and then we're going to be able to filter these users so if i just do if i type in an r here any user that has an r in either their name or their location is going to show i'll do r o let's say uh let's let's let's search for this roman guy so rom and you see that the only user that matches that is this roman roberts and if i delete it's gonna still it's going to continue to filter okay if i want to search for this oliver and if i delete it's going to just match whatever i put in here all right so we're going to be dealing with the fetch api we are going to use a sync await as opposed to the dot then syntax for fetch which returns a promise so we'll first create the ui style it with css and then we'll fetch the data and we'll implement the filtering all right so we're going to get started on the html and css for this project so let's jump into our index html here for the project starter so we're going to call this live user filter and let's go ahead and get rid of this h1 here so basically we're going to have a we're going to have a container here and then we want the the input and underneath that we'll have an unordered list with the users ultimately the users will come from the api that we're going to fetch from you know through the javascript but for now we're just going to hard code them just so we can see it we can style it then we'll move on to you know making it dynamic so let's create a header here i'll go ahead and just create a class of header and let's use an h4 give it a class of title and say live user filter and underneath that h4 i'm going to put a small tag and give this a class of subtitle and here we'll say search by name and slash or location and then under that small tag is going to be our input and the input is going to have an id of filter type text and let's just add a placeho