Simple Javascript Countdown Tutorial

so what you saw there is pretty much a maneuver that can be only performed by three people in this world um how you doing my gorgeous friends on the internet hope you're doing good we are back exciting times on the devat channel uh by not coding but i guess we'll we're gonna do a bit today um i've been looking back at my channel i'm like what's something that i have never done before i've done i've done hamburger menus i've done illustrations websites carousels carousels all the things but i never done a countdown so that's what we're going to do we're going to create a countdown and this is what it looks like that's not the one hold on here's what it looks like all right just a simple little thing here that says we're opening up soon and then you can set a timer and it's gonna nicely count down because it's a countdown obviously so you can make this if you're making a website and you want to have a little countdown or maybe you're counting down your days till you die that's fine as well or maybe you want to meet somebody special and then you do a little countdown by the time you get together and then you're gonna okay let's get going so all i have here is just a little file just an index html there's nothing really added to it um i just added a font so you can do that as well just link my style.css and app.js all right so you should be able to do this it's super easy and you know the style that css is pretty much empty just removing the basic styles and just adding that font and the app.js is completely empty so nothing to worry about i have an illustration here that i got off the internet but again i'm going to link everything in the description on github or something but it's really not that necessary to be honest it's just a random picture so i'm gonna give you a little bit to set it all up so i'm gonna wait patiently here three two one time's up okay let's go so let's open this thing up how do you do that i forgot i haven't been programming in a while okay there we go i click this button and there we go we have an empty file fantastico fantastical testicle um okay so let's go in here uh in the file and then let's throw up some html so it's gonna be pretty simple it's not gonna be too much to it i'm just gonna create a section here that's gonna be dedicated dedicated to this countdown so coming soon all right this this is kind of like a front page what you can also do is program it so when the timer goes to zero you can remove this page and then load up an actual website maybe we can do that in the future that's actually a cool idea why haven't i thought about this sooner damn it anyway so in this countdown we're going to have a div now the reason why i'm adding a div is because this is uh because i'm going to add flex flexbox to this and basically i'm going to have the image down below so i want to basically align them nicely so in here i'm just going to add the h2 saying we are opening up soon all right or whatever you want and then in here we're gonna have a countdown like this all right and in here we're gonna have the containers so basically uh we're gonna have a container for each of these so the day the date text and the actual time all right so we're just going to say container day like this and then here we're going to have a h3 with a class of day like that and this is going to be our actual time and below that we're actually going to have the text of day all right so that this time is actually this that's going to be updated and then day is the text so we're pretty much just gonna duplicate this container a few more times and just change up so we're gonna have day we're gonna have hour minute and second all right so just update these things so here we're gonna go and say hour minute and secondo second all right and make sure you also update the classes here so day hour minute and second actually we should have done it here as well so second minute all righty and then hour and day all right so just a countdown with all of these things in here and that's pretty much all we need i guess we could add uh the image so let's see where we add that outside um okay so let's make this a section actually section like that let me just update it really quickly so we're not filled we're not filled up with so many divs okay so basically after this big div here all right here we we're just going to add our image image example 8 svg fantastic name okay wow and it's done thank you very i'm joking this is the one all right so everything is good now all we need to do is add a little bit of styling so what we're going to do is i'm just going to grab the h2 because that's the only thing i have the big title i'm just gonna add a big font size so really big like that five ram is fine and then we're gonna do a font weight of bold why can i not switch between these in an easy fashion there we go that's okay so nice and big and bold um let's go down here to the coming soon section all right so this is the the whole shebang and i'm just going to add a min height to this of 100 so it's kind of like a full page all right vh is going to basically take your screen size and basically means 100 of your screen size i'm going to add display flex all right just like that and what is the display flexing well it's display flexing this part and this part right here all right because if we check in here we add the display flex to the coming soon so it's basically gonna display flex this big div and then the image all right so that's what it's affecting right now okay so now what we can do is just align items to center and as you can see okay it's it's not that nice because we need to change the direction again if you have display flex all your content will flow horizontally but we can modify this and add it vertically if we just do if we do flex direction column all right that's going to switch it up so as you can see everything is centered for a horizontally now but we also want to center it vertically so you can do justify content center just like that so now everything is centered and always remember when you don't add flex direction column these two are modified so justify content and align items so basically if i have flex direction column align item center it aligns it horizontally but if i don't have flex direction column then it does it vertically all right so it's a bit of just imagine when you add this property column these two basically change places that's it but it doesn't really matter who even cares you just try both of them out until you figure it out anyway so let's just move on okay so now these two containers are centered which is super cool now we also need to do it with this so the countdown down here so the way we can do that is the same so we can just grab the countdown display flex again again that's gonna put everything uh horizontally so now we can just add a justify content justify content and we can do center if we want to like that but that's not going to look good what we can do is add a space around just to kind of push everything out now if you want these to touch kind of the edge of the text here you can do space between like that all right but i'm gonna do space around okay there we go now let's go down here just grab our day our hour our minute and second and just make these a bit bigger make sure you add comma here otherwise you're gonna be screwed and it's gonna error out okay so let's just do a font size of tree ram all right let's see there we go much bigger and that's pretty much it that's all we need now i also want to align these in the center so the time with the day and the way you do that is you go to the countdown and just say text align center and look at that there we go perfectly aligned fantastico um i also want to add a bit of padding to this upper upper h2 here padding 3 ram just space it out a bit there we go much better much much better okay so now all we need to do is javascript with javascript update the time time time time because it makes no freaking sense so let's do that but before we do that let's just grab the image here waiting i believe that's what we gave it we didn't do anything let's just add a class of waiting to this image jump back here and just say height just give it a height like 50 vh make it a bit bigger just like that lovely okay javascript part is going to be super duper easy so join me and let's do it so just to keep this clear and practical i'm going to create a function for every functionality of the on the website so this is going to be specifically for countdown so set this equal to one of these arrow functions and this is how they look like in case you don't know and then we're gonna add a count let's call this count date all right so what are we counting down to i'm gonna say new date all right just like that and in here you basically pass in the countdown date that you want to go to so the format of this is like this month all right so may and then you can do 17 or like 20 or like 30 comma and then the year 2021 and then finally d time so in my case i'm gonna do let's do zero zero zero zero zero zero so as soon as we're at 12 a.m at night that's the that's the target all right so let's save this what we can also do is console log this out to see what's up count date and let's just run this function so just go down here and execute it by adding countdown and parentheses and let's see what we get so there we go look at that we have monday may 17 2020 000 gmt3 eastern european summer time fantastic all right so it gives us the whole shebang but i don't want it to be this format i want it to be all numbers so i can mess around and count down to it using math which i don't know but i figured it out googling so the way you can do that is just go here at the end of this new date and add a dot get time all right so it has a specific method attached to it called get time and as you can see it says it gets the time value in milliseconds so it converts the whole shebang and gives you that big number right there alright so it takes takes the whole time and renders it in milliseconds damn it good so now that we have our millies we can go back here delete this go back here and now what we can do is get the current time so so basically we're getting the difference between the future and now and then and then subtracting it and getting the difference so i'm gonna say cons now so this is basically new date but without adding anything in here get time all right so if you just add a new date that's gonna get our current time uh and now we can get the the difference the gap so we can say cons cap equals count date minus now okay so we have actually the finished number right there in milliseconds okay so now what we need is how how the how the does this time work how does it work well let's let's learn elementary school con seconds so how much how many milliseconds are there in a second a thousand right good so now we can easily calculate the minutes as well so minute is seconds times 60. okay and then we can do hour which is minute times 60 and then we can do day which is hour times 24. there's some dirt on my keyboard be gone hot okay so now we know how time works we can get to the pyramids and aliens okay what do i need to do okay so we have our gap and we have we know how time works now we can calculate basically from this gap how many days are there and how many minutes are there and stuff like that so we can say const let's see calculate the okay so we can say day actually let's do tax day or something like that this is the finished text we can do cap divided by day that's it let's see what it gives us console log text day look at that 16 days that's absolutely correct now it's not it gives you 16.3.396 blah blah so what we need to do is add a mapped off floor which is going to push it down to 16. all right so just take this whole shebang and just add math.floor and just add gap divided by day again what what math.floor does is it pretty much pushes it down to a full number all right it doesn't give you it says here return is the greatest integer less than equal to its numeric argument okay thank you so much floor uh yeah that's all you need to do so look at that now we have 16. fantastic so now we can just apply the same thing to hours so text hour and we can say math.floor and here what we do is say gap and then we add the shebang which i forgot the name of it how's this called oh i don't remember i'm so sorry you can look it up don't be lazy so we can add gap this shebang day and then divided by the hour that's how we get the hour what is this thing called let me google it up um javascript we're learning together everybody it's here i'll find it oh my god i believe i believe we can find it i'll just add a whoa whoa it's here it's here you thought i was smart well as you can see i'm not that smart operators it should be here okay here the it's the freaking modulus division remainder all right and the way this works is is there a simple example here so it basically gives you the remainder of something there should be an example here i'm just just gonna find it let me just search for it oh create a great example here okay no examples anyway basically it just gives you the remainder of a number so so this is how that works and then we can go to the minutes as well and we're pretty much applying the same thing here actually i'm going to show you how this works specifically all you need to do here is just basically change our hour here minute minute and then go down here and then let me also update this to text minute paste it again and then just update this to minute and second okay so the basically the way this works is if i do a console log of let's say we have 18 days right and we do the remainder of two it's going to give us zero and the reason why is basically you divide 18 divided by 2. if it perfectly divides it's gonna give you zero right so in this case it does because you can do 9 and 9 which is going to give you a perfect 18. however if it's 17 here right that's not gonna perfectly divide so if we check now let me close this up we're gonna have one remainder all right so that's basically what's happening here is we do gap and we check the remainder of the day so like 17 and then one right which is going to give us a number and then we divide that by the hour okay so that should be pretty much it now all we need to do is update our actual html so this is going to be super simple all we need to do is just say document the query selector like that and we can grab the day and we can just change the inner text of this and set it equal to our text day and hit save and look at that we have 16. lovely and then we can just pretty much apply the same thing by copy pasting this a few more times we can do hour we can do minute and second and just update this as well here here and here save and look at that we are all done how about that that's pretty freaking cool right now there's one problem this does not update only if you refresh um so that's it i'm not sure how to fix it good luck i'm joking all you need to do is just go down here cut out the again like the way javascript runs is it checks your it sees this function saves it up in memory and then just runs this code once down here because you're only invoking this function once so if you want to run it multiple times you can add a set interval and pass in a function here so it takes two parameters one's the function and the second one is a timer so when do you want to run this well every freaking second because it's a countdown all right and look at that i i was scared it doesn't work but there we go it works it works and again i guess you can just come here and do a little check at the end of the day uh if we go here and do a console log let's do a console log of the gap see this this gap is this counting down yeah okay so this gap is counting down all the way to zero i believe it should freaking it better would be well yeah because it's count date minus now all right so maybe when you can do like an if statement or check if this reaches zero then you can run another function or something right maybe you can create another function if gap falls below let's say like a thousand milliseconds or like ten thousand so it's getting super close to the end then execute code launch the all right and that's so something like that should be it should be quite simple to make it's not that much else to it anyway i got so distracted by that so there we go hope you enjoyed this little thing it's really not that difficult i guess just google up the the way math works and it's it's quite simple so thank you so much for watching hope you enjoyed it hope you learned something new today from your boy deved check out my courses down below if you're interested in learning more about web development thank you so much for joining me on this beautiful it's actually outside it's actually horrible was that thunder that was tundra thank you so much bye

Channel: Dev Ed

Views: 87,114

Keywords: javascript, simple javascript, javascript countdown, javascript tutorial, dev ed, developedbyed, web development

Id: Rib69h2DOxg

Length: 23min 3sec (1383 seconds)

Published: Fri May 07 2021