Build 5 Projects With HTML, CSS & JavaScript

[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 placeholder to it so placeholder will say search okay so that's the header so we can go underneath that div actually we can use a header tag here so here's a header tag and then underneath the header let's do our ul and i'm going to give this an id of result this is where we want our results to show up and i'm going to give it a class of user dash list all right so inside this ul like i said the the list items are going to be generated with dynamic data but for now we're just going to hard code them so let's add an image here and i'm going to use https and let's use random user dot me slash api which where we're just going to get a just a static image now um but later on when we actually fetch the users the random users it's going to be from the same api you can use it just to insert a random user image or you can make a request to get some json data for random users so right now we're just gonna do portrait uh portraits slash and then we can do like women slash 33.jpg so if i save that we're going to get a random image here and then for the alt we'll just use a name say sarah and under the image here we're going to have a class of user dash info and in here we'll have an h4 with the name let's say sarah smith and underneath that let's do a paragraph with the location we'll say wexford ireland and then what i'll do is just copy that list item and i'll just put two more i'm just going to use the same image and name it's fine because like i said this is going to come in from the api ultimately we also want an li for that just says loading while we're fetching the data so i'm going to put that in as well so there'll just be a list item with an h3 that says loading dot dot okay so that'll be our html now let's jump into our style sheet so for the styling uh see we'll use this font for the body i'm going to add a background color of hexadecimal f8 f9 fd and see display flex we can get rid of the flex direction column want everything centered okay that's good now the container wraps around everything so for that let's add a border radius of 5 pixels and i'm going to add a box shadow so for the box shadow let's do three pixels for both of the offsets 10 pixels blur rgba for the color which is going to be black and then 0.3 for the transparency actually let's do 0.2 and why aren't we seeing that because i spelt container wrong there we go so now you can see the border radius with the box shadow let's also add overflow hidden so we don't have any scroll bars the width i'm going to set that to 300 pixels okay so that should do it for the container so the title here let's remove any margin from that so margin zero and then for the subtitle oops let's go let's go under here and add the subtitle and i want to display that as an inline block because remember that's a small tag which by default is inline and then i'm going to add a margin of 5 pixels 0 20 pixels and i'm going to add an opacity of 0.8 which will make it give it you know faded a little bit and let's see for the header so we have a class of header let's add a background color for that and that's going to be 3 say 3e57 db for that background and then the color will be white and then let's add padding for let's do 30 pixels top and bottom 20 pixels left and right okay so our header is starting to look a little better now the input we want to style that so let's say the header input i want to set the background color to an rgba value of 0 0 0 so black and then 0.3 so it just looks you know has that kind of transparent look together get rid of that ugly border let's do a border radius we're going to make this rounded so 50 pixels for that and the color of the text is going to be white and let's set the font size so font size i'm going to set to 14 pixels this is on the input and then we're going to set the padding let's do 10 top and bottom 15 left and right and then let's make it go all the way across so we'll set the width to a hundred percent all right and i also want to get rid of this this border here so let's say header input focus we want to set the outline to let's do none okay so that'll get rid of that ugly outline good so the next thing i want to do is this user list here so it's a ul and has a class of user dash list and let's set the background color to white and let's set the list style we'll do list style type none which will get rid of the bullet points we don't want those and then we're going to remove any margin and let's set a max height here of 400 pixels because we don't want this to be too long we're actually gonna have a little scroll here if you know to to check out all the users in the list and then let's do an overflow because right now we won't have any scroll bars but if we set overflow y so basically on the y-axis let's set that to auto and if we need scroll bars it's going to give us this little scroll bar on the side which doesn't look too bad and then finally let's set padding to 0 as well and i'm just going to move that up next to the margin all right so now the list items so we have our user list and we want to style the allies i'm going to display as a flexbox and let's set padding to 20 pixels okay now uh let's do let's see all right let's do the let's do the image so we have user list image and i want it to be rounded so we'll use border radius set that to 50 that'll make it rounded and let's do object fit cover so we want the whole image to show in there and then we're going to make the width and the height 50 pixels okay so kind of small but i think that looks alright the user info so we have user dash list dot user info so for that let's set margin left to take it away from the image so margin left 10 pixels that'll push it over and then let's set on the h4 i'm just going to grab this so the h4 in there i'm going to set margin 0 0 10 pixels and for the paragraph let's just set the font size to 12 pixels we'll make that a little smaller all right so that doesn't look too bad um let's have a border we want to border in between but we don't want to border on the last list item so what we can do is say user list and then the li and i'm going to use the pseudo selector of not and in here we'll use the pseudo of last of type so basically what we're saying here is you know any list item that is not the last then we want to add a border bottom so let's say border dash bottom and we'll set that to 1 pixel solid and let's do triple e for the color okay so we have a slight border there now we're going to have a class of hide because we when we start to you know filter these users if it matches we want to add the class of hide which will basically display none so let's say user list li and if it has a class of hide then we're going to want to display none okay so if i manually you know come over here and put on one of these lis a class of hide that's going to get rid of it okay but obviously that will be dynamic because we want to filter it out with whatever we type here so i think we should be good um the loading you know the loading will show before any any of these users show right now we just hard coded it in here just so we could see so now i'm just gonna remove everything all these lis except for the loading so we'll get rid of those now that we know that those are styled correctly and save okay so our basically our ui here is is complete we just now need to make it function with javascript so we'll do that in the next video okay so now we want to fetch some data some users from a third party api at random user dot me so this api is pretty simple it's it's it's open so you don't need any kind of key or anything like that you don't need to sign up for anything you simply make a request to random user slash a random user me slash api and you get i think you get one user by default but you can set a query param of results and get as many as you want so we can actually just i can show you this in the browser i'm just going to copy this so random user slash api if i run that it gives me let's see it looks like it gives me one user but if i put on this a query string so if i do question mark and then results and set that let's set that to 20 you'll see it gives me 20 users and it gives you all kinds of fields your name name location with a full address age phone number even password username and password so it's a really useful api for just like dummy data so that's what we're going to use so let's uh let's close that up go into our script and i'm going to start off here by just bringing in what i need so let's bring in the the result uh let's see so in our index html we have this right here the ul with the id of result so we want to bring that in so document dot i'll go ahead and use get element by d and result and then we also want our filter which is our input so that has an id of filter or at least it should let's just make sure i've put that yeah so idea filter right here okay so we're bringing in those and the next thing i want to do is just initialize a very an array here called list items and it's going to be just an empty array so basically where we're going to put the data that we fetch and let's create a function and this is going to be asynchronous because i'm going to use a sync await i'm not going to use the dot then syntax so i'll say async function and we'll call this get data and let's say const res so this is going to represent the response from our fetch request now this fetch returns a promise so we want to await since we're using a sync away we want to await fetch and let's pass in here https random user dot me slash api and i'm going to get 50. so we'll do let's say results equals 50. okay now with the fetch api we need to then call res.json to get our data so let's create a variable called data and let's await because this right here this res that's going to be this res.json here is going to be a promise so we want to await that and then that should give us our data and i'll go ahead and just console log data just so we can test this out and we're going to run this function right here say get data and then if we go over here and open up our console we should see okay so we get an object with two things we have info and this has like i guess pagination and stuff like that the number of results the page so results is what we want and this hat should have 50 different users all right so let's let's go down here let's get rid of [Music] this console log here and i want to clear the results before we do anything so we'll say results and set the inner html oops results dot inner html set that to just an empty string and then we're going to have to loop through the data here actually what we can do since we need to do data dot results because remember this gets an object with info and results so we could we could go down here and say data dot results or we can just destructure here so we can just pull out results from the data actually yeah that's fine because we called this result singular so we can use results here and then we can just grab that and we can loop through that so for each for each so say for each user because that's what it is so each user then let's go ahead and i just want to console.log here user just to make sure we're getting this good so you can see it's logging all the users and let's construct an li because right now in our html we just have you know we have the ul we do have the loading here which is going to show initially but we want to construct the list item for that are going to have the users so let's do that in this for each we'll say const li and let's use document dot create element because we want to create a list item for each of these users and then we want to take our list items array which starts off as an empty array and then we want to push on each of the lis okay so push that on and then we'll take the li and add the inner html so this is going to be you know similar to the hard-coded html that we had for each user it'll have the image and stuff like that which we can get from this user object that's passed in to this for each when we loop through the array so in here let's say image and set the source and we want to set this to we're going to use this variable syntax and let's take the user now we can access user dot picture and then there's different sizes i'm gonna do large so user picture large and you can see all this stuff if you make a request you know either in your browser or with something like postman or whatever the alt i'm going to use the the user's first name so we have user dot name dot first and if you're wondering you know where i get this name dot first and stuff on this picture.large every api is different you just have to you can look at the documentation to see what it gives you actually we can see right down here where i logged it let's see so you can see name so name is actually an object with first last and title so i'm getting the first picture should be in here somewhere too so picture we have large medium thumbnail so it just depends on the api i know when i first started learning this stuff it confused me like where did you get this from it just it's it depends on the data that's being sent from the api um same thing with you know here where we get results sometimes some apis the data might just come as a you know one array or our single array or it might come in different objects like a results object this one also had an info object so it just depends on the data you're dealing with so this image here let's finish this up and then we have under the image we have a div and let's give this a class of user dash info and in user info we're going to have the name so it's going to be in an h4 and that's going to be the first and last name so let's go ahead and get the user.name dot first and then a space and then we'll get user dot name dot last and then underneath that we'll have our paragraph and this is gonna be the location so with this particular api and the data it gives us we have access to user.location.city and then i'm going to put a comma and then i want to get the country so user dot location dot country okay and you can see that right down here so in location you have city you have you even have coordinates so you could place them on a map i mean you can do a lot with this little api so that's that now we have the list item created we added it to the array we added the inner html now we just need to put it into the result into the html so we have that result that we pulled in that's the ul we want to append child because we're putting this li into the ul so we want to just pass li in there all right so if i save that you can see here now we're getting 50 i'm going to close this up we're getting 50 different users now the loading shouldn't be showing and that's because it should be clear result so i'm not clearing the results the data i got it's the result ul that i brought in so let's save that and now you can see that's not going to show now for the filtering we need to have an event listener when we type in this input so let's go right under where we call get data initially and let's take the filter which is the input and let's add an event listener on to it and we want to listen for any input and when that happens we're going to fire off fire off an event that's going to call a function we're going to pass our event object in and then call a function called filter data that we're going to create and we just want to pass in e so our event dot target dot value which is gonna give us whatever is being typed in so down here let's create our function for filter data and that's gonna take in let's call search term so whatever is being typed in and just to show you we can console log search term and if we open our console up here and i start to type you can see we can capture whatever we're typing so i'm going to then take the list items which is the you know the array of users and loop through so we'll say for each call this item so for each item i want to check so we want to basically check to see if it matches the user so we can do that by taking the item say if the item dot inner text so enter text for the item remember list items is the li so we're going to go through the lis and check each item and check the inner text and i'm going to make it lower case by using to lowercase like that because even if we even if we type in uppercase i still want it to match so we'll first convert it to lowercase and then we're going to use the includes method so we'll say if the inner text when it's lower case or not when but we're going to convert it to lowercase if that includes the search term that's passed in to this function and we also want to make that lowercase so they're both going to be lowercase we're going to match that if it matches then we want to remove any class of hide remember the hide class is just set to display none right this right here so we want to just take the item and set class list dot remove and we want to remove any class of hide else so if it doesn't match basically if we're not matching what we type in then we want to add the class of hide so let's say item dot classlist dot add and then we want to add the class of hide okay so now you can see we have rod see roger right here if i do r so now it's going to filter anything that has an r is going to be included here and this includes anything that's in here so the name and location so you can see these all have r's somewhere in here right let's do r o and now it's only giving us either names or locations with ro g and that leaves us with roger all right if i do you know roger and then i start typing more letters it's not going to match and if i remove it's going to if this you know if it matches again it's going to remove the classified so it's just adding and removing that hide class as we type and as we delete all right so that's it and you can apply this to to you know any kind of list that you want to be able to search through it's really easy to put together but that's it let's go ahead and move on to the next project all right so in this project we're going to build a content placeholder and you can see this just looks like an ordinary card has an image some text a user image or an author image and some data so if i reload or we come to this page you're going to see this cool gradient animation that loads in about two and a half seconds and then the content comes in so the way that we're going to approach this is we're first going to build out just this the card with html css then we're going to create this animation with css using uh basically just modifying the background position of a linear gradient and then we're going to have javascript insert the content and the content will just be hard coded in the javascript but of course you could fetch the data from some kind of api all right and of course you could have multiple cards and stuff like that so that's it let's go ahead and get into it all right let's get started on our content placeholder project so content placeholder now the plan here is to just do the html and css have our card our image card content and then create our our animation like the wave type animation as it loads we're going to do that within the css and then ultimately the content is going to come from the javascript like the images the text that's going to get input from the javascript after that little animation but for now we're just going to hard code all the content directly in the html just so we can get the card set up so let's give this a class of card that'll be our wrapper class no bootstrap or anything like that we're going to style the card from scratch so we have a card dash header and then anywhere where we want to add that the little wave animation we have this animated bg class and if it's text it's also going to have an animated bg text class because the text doesn't always go all the way across the card but we want that animation to go all the way across now the header isn't just text that class will go on like paragraphs h headings and stuff like that so this is fine for the um for the header but i also want to add an id of header because i'm going to use ids to grab onto it from the javascript so we'll have an image in here and i'm going to grab just a link to an unsplash image so we'll save that you can see it's just a laptop and for now this is just going to take up the whole screen but we'll fix that when we get into the css now under the header so the header ends here we want to have our card dash content and in the card content we'll have a card dash title and i'm going to add the animated animated dash bg class here and also the animated dash bg-text because this is actually going to be an h3 so let's add h3 right here and let's fix that spelling so animated bg animated bg text and also an id of title and let's just say lorem 5 enter which will just give me five you know five dummy text words so under the h3 we're going to have a paragraph with the class of card dash excerpt and i'm also going to give it an id of excerpt and for the paragraph i'll do lorem 10 and still within the paragraph i want to have three of those animated lines so i'm going to have three spans so let's say span class animated dash bg also animated dash bg dash text and that should do it so inside the span i'm just going to have a non-breaking space so let's say ampersand and bsp semicolon and then i just want three of these i'm going to copy that down three times good and then under the paragraph so these spans should all be within the paragraph because basically you're going to see these which are going to be the animated lines before this text loads so under the paragraph we'll have the author class which is going to be where we have the profile image and the name and the date so first we'll have a class of profile dash img and let's also add animated bg and let's give it an id of profile underscore img so for the image let's throw this in here and i'm going to use https random user dot me slash api slash portraits slash men slash 45.jpg oops slash all right now this image here that's good under the div so we have the profile image div we're going to go under that still within the author class and let's say author dash info and in here we'll have some strong tags i'm going to give this the animated class so animated bg also animated bg dash text and also an id of name and we'll just say john doe for the name okay underneath the strong tags will have some small tags with the same animated bg animated bg dash text and let's do an id of date and for the date i'll say october 8th 2020. all right so that should do it for the html i just want to make sure i have these classes correct so animated bg text all right so if i mess something up we'll come back to it but i think we're going to stop here and in the next video we'll go ahead and start to style the card all right so we're going to get started on the css for this project so i guess we'll just keep the roboto font that's fine and the body we're going to add a background or let's do a background color and it's going to be a light gray so hexadecimal ec f0f1 is going to be our background and we don't need flex direction column and this other stuff should be fine now let's just say for the image we want that to have a max width of 100 of its container so that's going to shrink up that image and then let's start to add the styles for our card so the card i want to give it a box shadow so we have our horizontal offset let's do zero vertical two pixels blur 10 pixels and color will be rgba black with an opacity of 0.2 okay so you can see the the outline here all right now we want to have some rounded corners on the card so i'm going to set the border radius to 10 pixels and let's add overflow and set that to hidden so nothing comes out of its container and then i'm going to have a width of 350 pixels on the card and let's set the card header height i'm going to set that to 200 pixels and right now the text is kind of over the image a little bit so let's style the card header image so i'm going to just make sure object fit is set to cover and let's set the height to 100 of its container and the width to a hundred percent so now you can see that the text is no longer over the image now the card content here let's say card contents so i'm going to set the background of that to white actually we'll use background color and then i want to just set some padding to move everything away from the side so we'll do 30 pixels padding all right now the stuff that's in the card content like the title let's do that so card dash title i'm going to give that a height of 20 pixels and a margin of 0 and then the excerpt so the excerpt i'm going to give a color of hexadecimal 777 which is a gray color and then for the margin let's do 10 pixels 0 20 pixels so that's the excerpt now for the author author wraps around all of this so author i just want to display flex which automatically puts it into a flex row and then for the profile image so profile dash image remember that's the div around the image so i am going to set the border radius to 50 because i want it to be rounded although right now that's on the div and the image is basically popping out of the divs so we want to make sure we set overflow we want to set overflow to hidden okay so that'll make it rounded we also want to make it much smaller so let's set the height to 40 pixels and also the width to 40 pixels so now the last thing is the author info which is around the name and the date so let's say author info which i want to display as flexbox but i want them to be on top of each other so the flex direction is going to be a column instead of a row and then let's take any remaining content so justify content to be around each element so space around and let's add a margin left to move it away from the image so 10 pixels that'll move the text away and let's add a width of let's say 100 pixels okay and then for the small tag we have author info small i just want to change the color to aaa which is a gray and then add a little margin top so 5 pixels and there we go so now our card is styled so in the next video i want to create the animation effects and then ultimately this content the images and the text are going to come from the javascript all right so we should be able to add our css animation and the javascript on this video so at the bottom of the css file let's add in animated bg which we added on quite a few elements and the way we're going to do this is set a background image to linear gradient which takes in a direction we want to say it's going to go to the right and then we have four different colors that we're going to use which are all just light grays so i'm going to paste this in just because i hate typing out hexadecimal so like this color will be zero percent and then at 10 percent this color 20 this color 100 this color so that will give us a very faint gradient and then for background size on x on the x and y axis let's do 200 percent and 100 percent and we're going to have an animation here but i'm not going to add that just yet now for anime we're not going to see any difference here because animated bg well actually we do see a difference nevermind you can see the gray behind the text here it'll also be behind the image so if like if i go to this image right here and just comment this out you can see the gray there's no animation to it yet because we haven't added that but we will so we also want to deal with the text because we always want it to go all the way across we want to display it as an inline block right now you can see the spans are just these little gray lines we want those to be three lines that go all the way across so let's add here animated bg dash text and i'm actually going to set a border radius here of 50 pixels and then let's display as an inline block because i want to let's add zero margin and i want to add a height of 10 pixels and a width we want it to go all the way across so that'll be 100 so now you can see all these all the animated bg text go all the way across so the next thing to do is add the actual animation so this animated bg we're going to add animation we'll call this bg bgpos because that's what we're animating here is the background position and we're going to do it over one second it's going to be linear and infinite so it'll just repeat itself and then we need a keyframe for that so let's go down here and say key frames we called it bg pos and basically at zero percent we want the background we want the background position to be fifty percent zero and then at a hundred percent i want the background position to be negative 150 percent and zero so we're just changing the position on the x-axis so now if i save if you look closely you can see that effect okay so it's just animating the background position of this right here of this linear gradient and it's giving us that effect now what we want to happen is when we come to the site we just want to see the animations here in fact if i comment this image out again you'll see that this animated bg class is making this effect but i want to come to the site and i don't want this stuff to load until after two seconds or whatever so that's where the javascript comes in so let's go back into or go into our script and bring in pretty much everything we want the header so document. let's use get element by d and i gave that an id of header 2 3 4 5 6. so we want the header we want the title basically everything we want to add that animation to and then insert the content so title excerpt and we have our profile image the id was an underscore profile underscore image then we have the name should have an id of name and we have the date date now we also have the animated classes so let's say const animated and we're going to do underscore bgs because there's more than one so we have to use here document dot query selector all because we're selecting more than one of these classes with animated dash bg and same thing with animated bg-text we're going to do select all and we'll call this bg underscore text so these are going to be node lists which are similar to arrays with all of those elements that have those classes so let's create a function called get data and basically this is going to this is where we define the data we want to insert so we take our header in our html and we're going to set that and if we look in our html the header right here has the image in it so i'm going to just take this and i'm going to replace it with a non-breaking space so nb sp semicolon like that so now the image is gone but i'm going to put that in here because that's what we're going to insert why is this giving me there we go um what is happening here are these on different lines yeah so just make sure you fix any of this if these are not on the same line there we go so that's the header in our html it's going to be that image and again this could come from this image link could come from some kind of api or something like that we're just hard coding it so the title dot in our html is going to be this so i'm going to grab this and cut that and we'll just put nbsp so now that title's gone but we want to put this in here okay next we have the excerpt in our html and we're going to set that to let's see so the excerpt is going to be this text right here so i'm going to grab that and we'll just replace it with nbsp you can see it's just taking everything away here but we're going to insert it in a minute this had a comma in it so i just want to get rid of that and put this on the same line okay that's the excerpt then we have the profile image so the profile image inner html is going to be this right here so again we'll replace that and paste that in okay next we have the name dot in our html which we know is going to be john doe and then we have the date dot inner html which i'm going to set to october 8th 2020 and we can get rid of both of those we'll just replace it with this nbsp that and that oh i forgot the ampersand okay so everything is now gone as far as the content goes and we just have it you know in this get data function we're setting the inner html now as far as the the animated bg class and animated bg text we want to remove those so what we'll do is say animated let's do bg's first now remember this is a node list because there's more than one we use query select all so what we'll do is loop through with four each and we'll say for each bg uh let's go ahead and remove the class so bg dot class list that'll give us all the classes but there's a method called remove and we want to remove the animated dash bg class and we want to do the same thing with text so we'll just copy that down and this will be uh bg dash texts or underscore text and we'll loop through and remove that class from all of them now this function isn't being called yet so what we'll do is go up here and i want to set a timeout because i don't want to call it right away i want to show this this placeholder for a second or two seconds so let's say get data so set timeout takes in a function and then the amount of time you want to wait so the timer which i'll do 2500 which is two and a half seconds so now let's go ahead and save this and after two and a half seconds all this content gets inserted and obviously you could change this to whatever you want and again this doesn't have to be hard-coded content this could come from some kind of api and of course you could have multiple cards it just gives you an idea of how you could set up something like this this placeholder animation alright so that's going to be it for this project guys i will see you in the next one

Channel: Traversy Media

Views: 117,381

Rating: 4.9788599 out of 5

Keywords: html, html css, css, javascript, learn javascript, vanilla javascript

Id: JkeyKeK3V24

Length: 110min 59sec (6659 seconds)

Published: Thu Aug 05 2021