Dynamic Landing Page | JavaScript

[Music] this video is sponsored by the ultimate freelancing bundle by study web development comm which gives you everything you need to start your own freelancing business including 130 page in-depth guide invoicing and client proposal templates website templates an SEO checklist and much more visit the link in the description and use the code brad 25 to get 25% off hey what's going on guys so kind of a cool little project today we're gonna be building a dynamic landing page with the time and it's gonna change this greeting here it's gonna change the background image based on the time of day if it's morning afternoon or night we're also gonna be able to add our name here dynamically so if I just put in Brad and enter and then down here it says what is your main focus today so we could put in you know make I'll say make cool videos and if I reload that's gonna stay there because we're gonna store it in local storage so basically in the browser now the inspiration for this comes from a chrome extension called moment which when you open up a new tab it'll show this screen here and a lot of you guys ask me about this so basically it just shows the time says good afternoon or night whatever at a time of day it is has our name has our focus it has a couple additional things like the weather a little to-do list so if you want to add to this application afterwards and make it you know a little more like this extension you could do that or you can even make it an extension I do have a video showing you how to create a simple Chrome extension but I think we're gonna just get this part of it done at least today now like I said these are gonna be stored in local storage so we're gonna be dealing with that we're gonna be dealing with Dom manipulation the time all this stuff is going to get inserted into the HTML through JavaScript okay so let's jump into vs code and I just want to go over the file structure I just have an index.html a style CSS and a main J s inside a J s and a CSS folder and then you'll see I have this image IMG folder that has the morning image the afternoon and the night okay so these images I got at pixels comm you should be able to get them from the link in the description I should have a code pen that will have you know links to the images there and of course you could use any any image you want so let's get started here I'm just gonna start off with the HTML whoops what'd I just do there we go so for the title let's say welcome you can put whatever you'd like and I'm gonna add a link to the style sheet so style.css and in the body let's put a script source is gonna go to js' slash main j s and then for the body text here I'm gonna actually going to use a time tag with an ID of time and I'm gonna just I'm gonna hard code the time in here for now so it's what twelve seventeen so I'll just put twelve seventeen and then some number of seconds and then we're gonna have AM or PM as well so this ultimately this will we're gonna get rid of this it'll get inserted through the JavaScript but for now I just want it there so we can style it so let's do an h1 under that and this is where we're gonna have the greeting and the name so both of those have to be in separate elements so we can grab on to them so I'm going to do a span with the class I'm sorry the ID of greeting and we'll just do good afternoon and again this is going to get inserted there javascript later on and then we'll do a span with the ID of name and I'm just gonna put my name okay underneath the h1 let's put in h2 and this is going to ask us what our focus is we'll say what is your focus when I say for today and then under that we'll have another h2 but I'm gonna give this an idea focus of width so that we can grab on to it and for now I'll just say again make cool videos now the both the focus and the name we need these to be editable that's that's how I could actually click inside of it and change the content and to do that it's we just use an html5 attribute called content editable and we set that to true so we're going to do that on the name we're also gonna do that on focus on this h2 right here so we'll say content editable true and I'm pretty sure that should do it as far as the mock-up so let's save that now I'm gonna open this with live server which I have running I'm just gonna stop and restart it live server is just a vs code extension I know a lot of you guys know that you do want to run this on some kind of server or you might have some image issues with the images alright so this is what it looks like pretty crappy so we're gonna style it real quick which isn't gonna isn't going to be much at all let's add a reset here I'm gonna say border box border box is gonna be not bored of what am i doing box sizing is gonna be border box and then let's set margin to zero and padding to zero all right now as far as the fonts I'm actually gonna use a font called quicksand so I'm gonna just grab that real quick from fonts Google and let's see you'll search for quicksand click the little plus button here click on this and let's grab this link here and put this in our HTML right above the style.css okay and then let's grab this font family and we can close that up and let's put that in the body all right now the way that I'm going to style this is pretty simple the body is gonna be a flexbox so everything in it is going to be a flex item so let's say display flex and instead of them going the elements going in a row which they do by default I want them in a column going up and down so we're gonna set flex direction to column all right we also want to align everything so let's say a line items everything is going to be centered so justify content center and let's do text align Center and then for the height we want to make sure it takes up the entire viewport so let's do height 100 VH and should be good and I'm just going to set the color to black by default okay so if we save that and take a look now you can see everything is centered obviously that we need to deal with the text sizing and the text spacing here so back in our CSS let's grab the time ID and let's set the font size let's do eight RAM and the the active h1 and the h2 s I'm gonna leave the the same size the initial size but I'm just going to add a margin bottom to space things out a little bit and let's do three REM for that and for the h2 let's do a margin bottom of 0.5 REM and I want the h2 to be a little lighter without having to mess with the colors so I'm gonna do an opacity of 0.6 okay and the very last thing we need to do here is a simple media query because I just want the the time that text I want it to be a little smaller on smaller screen so let's say a max width when the screen is a max width of 700 pixels or less than that then we're going to take the time element and we're going to change the font size two-six REM from AR m okay so now if we take a look should look like that alright in the background image obviously that's going to get inserted through JavaScript because it depends on the time of day you know what background imagery show so now we're ready to jump into main J s and when you're dealing with vanilla JavaScript there's so many different ways that you can write your code I try to keep it very practical and self-explanatory if you want to do things a little differently that's absolutely fine so first thing I'm going to do here is just select my Dom elements so let's say Const and we want to grab time I'm gonna use document dot get element by D because everything that we're grabbing is by ID so we'll just use that I'm just going to put a comma here so enough to keep writing Const and then let's grab the greeting so say document dot get element by ID and greeting alright and then I'll just copy this down twice this one here is gonna be what is this name so greeting name and we also want focus these are all things that we need to basically interact with in some way okay so those are our Dom elements next thing we're gonna do is create a function here to show the time and we're gonna call it with we're going to call the show time function within itself every second to update the time every second and that way we can actually see the seconds on the screen updating so let's say function show time and let's I'm just going to use let here and let's do today I'll just call this today and we'll say new date new space date so that's going to give us the current date and time and then what we need to do is basically pluck out the hours the minutes and the seconds and we're going to put those in variables so we'll say our equals today dot gets ours which is a method we can call on a time we also want men which is going to be today dot get minutes oops and then we also want the seconds so today dot gets seconds okay so now that we have those the next thing I want to do is figure out if it's a.m. or p.m. so let's say set a.m. or p.m. and we're gonna do this with a simple we're gonna basically assign either a.m. or p.m. to a variable depending on a condition so let's say Const will call this a.m. p.m. and we're gonna use a ternary operator which is like a shorthand if statement so we're gonna take the hour and we want to see if that is greater than or equal to 12 now by default our when you call today get hours it's gonna be a number between 0 and 23 so we're basically seeing if it's before 12 or equal to 12 if so so we're going to use a ternary here which is a question mark then we're gonna output p.m. or we're gonna put p.m. in this variable else which is a colon we want a.m. okay so that will set a.m. or p.m. another thing I want to do is I want to do a 12-hour format because if we don't do this it's gonna be like 1314 and I don't want that I just want you know the 12-hour format so a way that we can do this is we can take our which remember is gonna be what is it zero to 23 and then we're going to basically set that to hour and then we want to use the modulus operator which is the percentage and we want to say 12 or if it's 12 and then that way instead of being 13 it'll be 1 you know it'll be 1 p.m. instead of thirteen o'clock so next thing we want to do is output the time so I'm going to take that time element and I'm gonna do inner HTML so that we can help with something into it and I'm gonna put some back ticks in here because I'm using a template literal or a template string and with this syntax we can add in money sign and then curly braces and we can put a variable in here so the first very first thing I want is the hour right and then after the hour I just want a colon and I'm actually gonna wrap that in a span so I'm gonna say span colon and span and then the next thing I want is the minutes so I'll go ahead and put in the minutes then another span with the colon and then I want the seconds so SEC and that should give us the time now once I help with this you're gonna see that there's an issue with it but we'll fix it afterwards now we want to call this show time every second okay once it's called once it should call every second we do that with set timeout so set timeout takes in a function either a self calling function or in this case show time and then it takes in Mannino an interval so how many when do we want to call this it's every second so we'll do 1000 milliseconds okay which is one second and then finally down here I'm just gonna say run and we'll call show time all right so let's save that and let's see what happens if we go to our browser and there we go it's working now the problem that I mentioned you can't tell yet because there's nothing there's no zero one zero two and so on I could sit here and wait but basically when it gets to one second it's just gonna be a one with no zero same thing with the minute if it was 12:01 right now it would just say 12:00 1:00 okay now I what I want to do is add zeros to the number if it needs it in fact I guess I can just show you right here we're almost two oh one so as soon as it hits here see that doesn't that doesn't look right you want to have a zero in front of it so what we'll do is create another function let's just call this add zero okay now this adds zero it's gonna take take in a number and the way we want to do this is we want to return a number so let's return we're just going to run this through parse int which will parse it as an int and want to parse the number that's passed in base 10 meaning just you know regular and 1 through 10 and then we want to have a condition here so we want to say if this is greater than 10 not greater than if this is less than 10 then we need to add a 0 so we're gonna use a ternary here and we'll put a 0 else then we don't need a 0 okay because if it's if it's a but if it's 10 or above then obviously we don't want to add a 0 and then we just want to add the number on like that ok now I don't want to add this to the hour because I don't want like 0 1 for the hour but we do want it for the minutes and seconds so we're just gonna wrap this in add 0 wrap this min like that and then over here for the second same thing add 0 for the second all right so let's save that and let's see if that works so I guess we just have to kind of wait to see if that works but should I don't see any reason why it wouldn't and we'll check that out in a second but the next thing we want to do is create a function let's just keep it on this we want to create a function to change the background and the greeting based on the time of day so let's see if this works once it hits one second and there we go so now you can see that it's padded with the zero and the same will go for the minutes so like I said we need a function to set background let's just say set background and greeting so function I'm just gonna call it set V G set B G greet I guess not the best name but whatever it's fine so the idea that that we have to do here is get the time but we only need the hour because that's what we need to we need to basically run a condition on to see what time of day it is so let's do let today equals new date just like we did in the other function but we only want the hour so I'm just gonna set our two today dot gets hours okay now remember our is gonna be zero through 23 we don't want to format it here in the 12-hour format because we need to see what time of day it is so we need to check numbers between 0 & 23 so let's do an if statement here and let's say if I move this up let's say if the hour is less than let's do less than 12 then we know it's morning we just put a comment else if the hour is less than 18 then it's after noon else else then it's evening okay so if it's morning what do we want to do we want to change the the greeting in the background image so the background image is going to get put on the body so I'm going to say document dot body and we can just use style here we can say style dot background image and we can set that in our JavaScript and we want to set it to URL because we're using an image URL and in here let's do dot dot slash image slash morning dot jpg okay so that should do the background image now for the greeting we have that defined above then we brought that in so greeting dot not style we want to change the text content to good morning and then what I'll do is just copy these two lines and in the afternoon we're gonna change this to afternoon dot jpg and let's change the greeting to afternoon good afternoon and then we'll do the same thing for the evening I think I called this the image name is night dot jpg and let's say good evening now one more thing I want to do here the the evening or the night picture if we take a look at it it's dark so if we have black text on this it's going to be it's not going to be very readable so what I'm gonna do is change the document dot body dot style dot color I'm gonna change that from black to white in this case all right so basically if there's there's other things you want to change depending on the time of day you can do it in this in this function so let's save that and if we go back just open up my console here we should be getting the image what I do wrong here oh I didn't click all the function that would help so we want set BG greet all right let's go back and there we go I'm just gonna close the old one here so now that we have this stuff being output by our Java Script we can in our HTML there's no need to have the time here this hard-coded time or this however we do want the name still there but we don't need the greeting or the the time and it should still show okay so the next thing we want to do is the the name and the focus we want those to be editable which they are if I click in here I can change this and that's fine for the time being but once I reload it goes away it's not going to save it it's just that attribute simply makes it editable in the browser it doesn't do anything else we want to save it to local storage so in our main j/s here we're basically going to have a get a set name and a get name and also a set focus and a get focus so let's go ahead and let's do let's say get name function get name and all I want to do here is is check to see what is in local storage if there's nothing in there we can set a default if there is something we'll just open will set that so let's check the way that we deal with local storage is we simply say local storage and then it has some methods attached to it we want get item we want to check if there's a local storage item called name ok and we actually want to check to see if it's if it's null if it's not there and if it's not there then we're gonna take our name elements and we're gonna add the text content and this is where you can set a default now what I'm gonna do is just have some brackets and say enter name but if you want to have a default whatever you want for default you can put here okay and then we'll have an else if there is something set then we want name dot text content to equal whatever is in local storage so we can say local storage get item and we want to get the item of name okay and then we'll go ahead and just call get name like that and go back and now we see enter name because there's nothing currently in local storage I think I guess we could do the folk get focus as well since it's kind of the same thing really so we're just going to change this to focus and get focus we're gonna change the item in local storage to focus and for the default yeah we'll just do enter focus except instead of the name attribute or the name element or variable we want focus same thing here and same thing here alright and then down here at the bottom let's say get focus you could put them in the same function but it's it's fine so now you can see that we get enter focus and we can change it but it doesn't stick yet alright so in our HTML let's get rid of this and let's get rid of the actual this focus here because now it's getting inserted through JavaScript and there's there shouldn't be anything else we need to do within the HTML or CSS so I'm gonna close that up so now we need when we enter a name or focus for that matter we needed to update right so we're gonna have to have some event listeners so let's take name and let's add an event listener why isn't this giving me intellisense okay so we want to do name add event listener now the way that I want to do this is if the user hits enter I want it to update and basically clear out if they click if they type something in then they click off off that area I also want to update and that's called a blur so we're gonna actually have two events that call the same function we could have them set as separate functions but I'm just gonna do the same so let's do a key press ok so key press and then we're gonna call set name alright and then I'll copy this down and we're gonna call set name on blur as well all right so let's go up here and I'm gonna go right below get name and let's do set name so function set name okay now for set name we need to make sure that the key press is an enter in order for it to actually update local storage I don't want it to update local storage on every single key press we also need to make sure it's a key press we need to basically tell whether it's a key press or a blur because both of these are calling the same the same function so first thing I'm going to do is check to see if it's an actual key press now we have an event parameter that we pass in here which has a whole bunch of stuff on it but we want to check the type so I'm going to say if the type is equal to key press and then let's have an else because if it's an it's in the else then it means it's the blur all right now if it's the blur which means and let me just show you what I mean by that when I click in here and I type something if I just click somewhere else that's blur that's the blur event if I type in here and I hit and I type anything that's keypress but I only want it to fire off when I hit enter like that and it shouldn't do this either go on to the next line so with that said for the blur it's pretty simple we can just store in local storage we can say set item and let's say if we want to set name and then the second value is is what we want to save now we want to save whatever is typed in and we can get that with a dot target meaning we're grabbing the element that was clicked on in this case the name and we can get the inner text value and that's what we want to save okay so that takes care of the blur now the key press we need to do an extra step here we need to check to see I'll say make sure Enter is pressed so the way that we can do that there's actually a few ways and and some I think some one of these is deprecated I think it's which but we can say e dot which and basically we're testing to see if this is going to be equal to 13 because every key has a unique identifier 13 is the enter key so we're gonna check that now I believe that's deprecated but first but it doesn't work and or or this doesn't work in some browsers or something like that so we want to just do both of these we want to also want to check the key code so we want to see if the key code is also equal to 13 that will cover all the browsers I believe okay so basically when the enter is pressed we want to do this same exact thing right so we'll just grab that we're gonna save whatever is typed in now you saw how when I clicked enter it went on to the next line I don't want that to happen I just want it to basically get out of that state out of you know not have the cursor anymore so what I can do is just take name and I can call blur like that and that will take us out of that state all right so let's save that and let's go back and I'm gonna just type something in here now if I hit enter there we go you can see it blurs it just gets out of that state and if I reload it sticks okay and if I look in my application local storage there it is and I can actually get delete it reload and now you can see I can enter it again and this time I'm not gonna hit enter I'm just gonna click somewhere else and that fires off the blur which then stores it in local storage okay now we want to do pretty much the same exact thing for focus so I'm gonna we could just copy this down and instead of listening on name let's listen on focus and let's call set focus okay and then I'll just copy set name and put this right below get focus alright so we want to set focus let's say we want to make sure we save in local storage save this as focus I'm just going to ctrl D to select all three of these and change these to focus and I think we should be okay so let's save that and let's go back I'm just gonna reload here so if I go ahead and I say make a video enter and there we go you can see it's getting added to local storage if I reload it goes away okay and I should be able to also blur so I'll just say hello and if I click outside of it that gets updated in local storage alright so I think that we're done here now to if you want to test out like the greeting and stuff you could change the time to something else or change the date and time however the seconds aren't gonna work if we do that at least that's the way that I'm gonna do it but I'm gonna grab a night time date so let's see I'm just gonna I mean you want to do this in show time I'm gonna paste this in I'll comment this out so basically I'm just setting this to 6:10 2019 I'm setting it to 20 so I'm setting it to night time this is the hours minutes seconds and then I'm gonna do the same thing I'm not gonna leave this I'm just showing just testing this out I'm gonna do the same thing right here in the BG greet and let's go ahead and save this and if we go back now we get good evening branding we have the back the night background it also says 833 one thing we didn't do though guys is we didn't put the a.m. or p.m. which you don't have to if you don't want to I mean you might actually what we could do is put an option for it so if we go I wasn't planning on doing this but if we do Const show a.m. p.m. and let's set that to true and what I meant to do earlier is put the a.m. p.m. this variable right here within the innerhtml so I'll go right here put a space but instead of just putting hey M or p.m. let's do show a.m. or p.m. if that's true then we'll show the a.m. or p.m. variable else we'll show nothing all right so let's save that and go back and we get p.m. all right and it's according to this time now I'm going to just get rid of this just because I just wanted to test it out so we want to get rid of that what else this right here get rid of that and now if we go back there we go good and we get p.m. and if you want to mess around with the dates and you know check the morning one you can do that but pretty sure it works so that's it guys hopefully you enjoyed this I mean you know wasn't a complicated project but I think it's good for people that are beginner to intermediate JavaScript I enjoy doing things that don't require a framework or library or anything if you're building something as simple as this there's no need to use react there really isn't you know maybe spell time really I'm kind of digging spell for small little applications but even then this this was easy enough to do without anything so that's it guys hopefully you enjoyed it and please leave a like if you did and I'll see you in the next video hey guys one of the best if not the best resource I can refer you to for starting a freelance business is at study web development comm slash freelancing the Creator Kyle shared it with me and I can personally vouch that this bundle is well worth it you get 130 page guide freelancing and it comes with things like invoice templates client proposals HTML and CSS templates a portfolio website access to a private Facebook community and much more so use the code Brad 25 to get 25% off today

Channel: Traversy Media

Views: 170,824

Keywords: javascript, landing page, js, javascript tutorial, html, css

Id: fSTQzlprGLI

Length: 35min 11sec (2111 seconds)

Published: Mon Jun 10 2019