51th Javascript Project - Countdown Timer

all right in this video we are going to see how to create this countdown timer with html css in javascript we're going to start this from scratch that means uh start with a blank page and we'll create html css in javascript required to create this now let us see what it really does now i'm going to set a timer for learning something new called learning angular 10 so the date i'm going to fix this is for is on let's say sixth now let's create it so it says the title and you have two or two days seven hour and 55 minutes to complete and on each second you can see the timing is getting decremented on one second now in case if i have changed my mind i want to reset it i'll click on reset and here you go we are going to start from scratch so start new now in case if the two days is completed what how does the view look like now let me show you that so let me create some task and i'll set the same date as of today and click on create now this is how the timer completes now it says countdown complete you have set this time on the particular day and for the task react.js and in case if you want to refresh click on refresh and there is we have added animation sorry validation as well if you click create it will say that you have to select date to proceed forward now we can see there is a background video going on so let's start it from scratch the first thing what we are going to do is so uh just to give you the intro of my playlist this is going to be the 51th project of my javascript uh project so i'll leave the source code in the description you can follow along you can visit the playlist which has more than 50 videos of similar kind of projects we have started from scratch fine now these are the steps which you are going to follow to create this particular project now to start we need an html document let's create one so if i let me show you what are the documents required to create this html document style sheet script tag script file and finally we need the video file so that is the video which is running on the background now let's create a html file exclamatory first let's save this and let us know let's say that uh we are using html in this document just by naming it visual studio identifies this as an html document i'm going to name this as demo.html now let's create stylesheet demo.css let's create script file demo.js would be good to keep [Music] cool now let's start creating exclamatory tab we have emmet installed so it would give you the plain html template let us link the style sheet first demo.css now let's link the script file the file name is demo.js now the document that we need is we need a parent container so inside the parent container we are going to hold three section the first section is input field in put input container let's use a camel case so that we can copy paste it on the javascript as well so this is the first div the second div is the countdown container dot and the third div is complete container so sorry for the name you can understand that this is going to show you that the container the countdown has completed cool so the first thing first let me show you the html so we have this sections in the input field input container so let's start that countdown timer let's make this h3 and then we have input field let's create a div inside the game let's have a label and i am going to leave this for now and what is a task name and then input field type text since we are using input field we need a form so let's first create form action we don't want action for now we'll just give the name our id as form so this is the first input field let's use the second input field when and the type is going to be date the uh if you're familiar with html you know we can give id so what is the id i'm giving it and whatever id you're giving to the input field the label should have attribute and we need to use the id of the input field on the for attribute so this is for accessibility now dave we need a button type equal to submit and let's give the name as any name start let me show you how does this look demo.html you can see this is exclamatory which got now let's give the video tag inside video we can have source src equal to the name of the file i have given the name of the mp4 file as video video.mp4 and i want this to play mute on mute and i want it to be on loop and i wanted to auto play and i know it control i don't need control so i'm leaving the control attribute as it is now with this simple thing you might have receive or you might have a video on your screen and as we know now let's create an overlay section with div video overlay cool so that's done now i would recommend you to start let's start by this so for all the element i need two things sorry i need some default stylings so let me grab this from my example so i have i'm using the google phone oswald for all the element i'm adding the google font oxford and i'm removing the style which is added by browser so if i show you can see there is the margin and padding on all the sites if i refresh it it is gone now let's add the video div video position fixed left zero top 0 width of 100 vertical width height of 100 vertical height refresh it so i want this to cover it so object fit cover cool now let's have the video overlay let's just copy paste it to avoid the silly spelling mistakes the same way use this except we are we don't have image so we can skip this refresh it let's give the background color white uh let's use the black with transparent rgba 0 is for black and with opacity 0.5 cool you got it now let's take our container at the top or that means at the center so it's very simple get the container div use position absolute top and top from 50 percentage left from 50 percentage transform translate minus percent from left for from y x axis and minus fifty percent from y axis now to see this we need to give width and height let's save it 300 pixel and the height 400 pixel and background color just to see i'm going to make this as white height 3 with 400. cool now we make this transparent as we did for the uh what do you call overlay we'll use we'll use the same trick rgba zero absence of color 0.5 and you got it if you want let's add a box shadow to it one pixel top and bottom one pixel left and right one pixel blur and the color black cool now let's place this whatever we have inside container we have input field that means input container select that input container and we'll use width and height hundred percentage so that it gets the container width and height and we don't need background and i want this to place this at the center so for that we have display flex align items center justify content center and we can use flex direction column so that we can have one below the other instead of one after the other now let's have the color white it's time to increase the font size inside the input container we have h3 font size 30 pixel too much so i'm leaving this to you you can have your own weight then we have let's make this 40 then we have label let's see how does this see it's too big you can see we have to add the height and width width is 500 okay height let's make this 400 500 800 cool now we can increase our font size at our will since i'm on a hurry we can skip the font size i'm leaving this to you you have you have it whatever you feel like let's get into the input field padding top and bottom 10 pixel left and right 10 pixel so let's make this 10 pixel on all sides left and right 30 pixel cool now inside that uh we have form inside form we have div so let's have padding top of the pixel cool now let's try to decrease the padding for input field then we have button so that we can place the button under center let me give a class to it text center this is not bootstrap class but we can make this class with text align center so the button is at center let's let's add style to the button and then let's come arrange the alignment padding top bottom 5 pixel left and right 30 pixel font size cool now if i inspect and let's see what we can do to fix this display flex align item center justify content center we can do this on the div cool but for the second let's have the we have an input field and let's add a margin left of 30 pixel cool i hope the first section is done now let's hide this and work on the second section so choose this input container let's take a space and let's give display none and that's gone now let's try adding anything and let me show you the second section so this is the second section let's create this section so let's hide this or let's minimize this in other word we have countdown container the first thing we need we have a h3 and we'll call this as title let me give a blank title sorry a demo title learning angular 10 then after that we need to display this so let's have a on ul and then we have a list item and inside list item let's have spam and this is going to be the day sorry the number numeric value and then day 2 3 4 then hours minutes seconds sorry for that i have repressed it cool and finally we need a button saying that reset fine now let's get into the css we have heading we have h3 then we have unordered list then we have list item then inside the list item span tag and finally we have button cool let's start designing it h3 everything is set you can see it's not visible let's make the color white and let's have the font size 35 pixel and let's have mix let's take this at the center display flex align item center justify content center and let's have the flex direction column so that instead of uh left instead of aligning it up one after the other we have this one below the other and that's what we got let's have padding bottom 20 pixel now we'll make this list style none so that to remove the bullet list bullet and we'll have display flex so one after the other let's have margin right 20 pixel let's have the font size 30 pixels cool let's try making this display block cool let's try to decrease the font size for the container let's make this 35 pixel cool now to have to make this to the center we need to give height 100 percentage well that's great you see we can make this happen if we don't make this display block we need to increase the crazy font size cool i believe this is right now let's start with the margin top for the button 50 pixel let's add padding top bottom 20 pixel left right 20 pixel let's increase the font size for the button 20 would be too small let's make this 30 and that's right so we have completed this now let's move to the third div by making this display none so this is going to get high now let's reset this and let me show you how the countdown complete section looks like not much to have on the html let's hide this just to avoid the confusion let's have h3 countdown complete then let's have paragraph let's have the same text this would be the demo text we'll be creating it anyhow and then button restart refresh it this is how it looks let's start it by getting into the container inside the container we have h3 inside h3 we have button and then we have paragraph now let's make this height hundred percent so display flex align items center justify content center and of course flex direction column the base font size 20 pixel and color white all right and we just need to add my padding bottom it looks fine the same way padding bottom 10 pixel left right 30 pixel and font size for the button 30 pixel all right so this is uh i think this is fair enough to give you the idea of each section how does it looks let's get this and do the same thing again so it is going to get blank again now let's remove this cool so let's try making this block in case if there is any problem it would show up you see it is the block that is giving you the problem if it is block it is giving problem it need to be flex see this causing problem what we can do is we'll use the same thing and we'll make this on what you call in javascript we'll fix this in javascript so let's remove the first input field display so this is how it looks cool now let's start with the javascript so now to start with what we can do is if i select the date you see i'm able to select the previous state as well i don't want that so that is the first thing we are going to add a minimum attribute to this input type date with javascript that was the first one so the second one is i'm i need to get on submitting this form i want to get these two values so these are the first two things which we are going to cover at present so let's get the html required html let me hide this as well so the first input field we need we have form document dot get element by id let me make this form element then we need to fields let's grab the ben and what then is simply the date date input field so this is required i'll show you why i'm making this global if you notice and the second one is what input title so the first thing when the form is submitted so form element dot add event listener so on submit i'm running a function let me show you the console for now so let's try to submit there is an error let's say form element dot add event listener form element is not a listener event listener i think it's not able to find the element form that was filling spelling mistake we have rectified it now when i click on submit you should see there's a page refresh to stop the page refresh we need to do e dot prevent default this will stop the page refresh now this e is going to have the element uh input fields now let me show you how does it how does that what do i actually mean type something to pick the date and you see you got the element and on there's a this is the object and we have a property called source element so inside the source element it's an array e dot source element so if i pick the first value you should get the title you got the title so to get the value you can use the property so you got it the same way let me store this input title so that is a global one so this is the this is not the global one i'm writing it inside the function so this is one now what we can do is be able to get the date let me submit this and show you type something pick the date click submit it's not showing me because we haven't tried the console dot log this one comma refresh it type something give it now on the message input file is not defined spelling mistake and you got it this one is the date and this one is the title now i want to pass as i said i don't it should not allow me to select the previous date today is october 3 and it shouldn't allow me to select the previous date so for that what we can do is create the date function new date and i need to i need the function to iso string and it is going to return the today it's the function console.log we are going to get the date and time if i submit you see we got the date and time so it's a string and i want it to split into two half so i'll grab the t here dot split and i want to access the first one so to access the first we need to pass the index if i refresh submit now i'm getting the date now this today i need to pass it to the input date get the date dot set attribute and it's minimum comma today now if i show you the html for the date you can see it has only two pro or two attribute type and id so if i submit if i submit on the date you should see three attribute you can see we got three attribute now it will not allow me to select the previous state so this thing i don't want it to be on the function that means i don't want it to run when when i click on submit i want it to run when the page loads so if i refresh again if i select the date and it is not allowing me to select the previous date so find that is working as we thought now let's move to the second section and now we are going to convert the hard code date into milliseconds so we have a function called get time what it does is it is going to give you the milliseconds from date january 1 1970 so if you see it is going to give you the current millisecond right right this is the millisecond of 50 years if you see it starts from january 1 and it's end on october 3 2021. so almost 51 years so this is the uh 51 years milliseconds converted millisecond the same way we are going to do this so that this is how we do in javascript now what we can do is since we got the input field let me console and show you we got the date you see we got the date we have to convert this into milliseconds so new date we need to pass the received date and i need to use get time function and it is the selected date so this is the global variable let's make this as a global variable now if i show you console.log this is going to be the huge number select anything select anything so you got it the huge number it is of about 51 years of milliseconds okay then let's create a function that will update the dom update dom let's create the function at the top so let's get the current time so to get the current time we just need to make this way current date now let's get the difference difference would be current date current time sorry uh the selected date would be bigger than the current okay so we need to give a validation before that if selected date not over here but here difference okay we'll do it later on now let's focus on the difference now what we do is console.log will be getting the difference between the current and the selected data current time minus so this is a selected one and this is the current one now we need to convert this into date so for that you can see they itself give you the parameters to convert let's use this at the top we don't need years we need second said short seconds and this is the basic calculation which we used to do which we do or for calculating the date now let's get this and calculate convert the millisecond into second and i have converted it now we just need to paste this let me show you how does this looks console.log days then we have hours then we have minutes and finally second let's try picking it picking the date let's pick tomorrow it should be less than one day so zero is a day seven is the har and nine minutes two seconds cool now we'll use the html traversing method so we need to hide this on the html let's call this we have used class you can see this is a class everywhere we use class so document dot query selector it's a class just to save time let's do this for the other two also the countdown container and the complete container so in the input fee sorry in the let's make this input hidden dot style dot display equal to none and we have to make the countdown container display block so as i said it's not going to be display block it's going to be display flex cool now we need to populate it we have the container inside the container again we can run query selector we need to find the span we need to use queries at all because as you know we have more than uh one span tag if it is if i have only one spandex i would have used query selector we have more than one so we need to use query selector all now we can access this one by one with array and sorry index number zero dot inner text equal to dollar we use the backticks so this is d y s let's try this anything select today's start and you got day two so that means it is working the same way has minutes seconds half minutes seconds and for the element change the index number and i think we are done now let's get the title on updation we have the title so let's store this into a clover variable instead of this now we can use this we have the value this is the value now we can access the h3 not the not this one we need to select this one we can access the h3 using the countdown the same way we have used span tag we are going to use the same trick again now in this way it is just only one tag so remove the so this one is countdown h3 countdown s3 dot inner text equal to input field and let's try it angular 10 let's queue some date submit learn angular 10 and three dates now the the problem is it is not um as you see on each seconds it is not changing the value so for that let's create another variable count down interval and don't save it let's just declare this let so wherever i have used when uh now wherever i have declared i just want you to add let or bear just to save time i have ignored it now let's create a set interval that would run inside here cut this set interval the function and it should run every 100 millisecond that means one minute one second and save this to a variable called just now we have created countdown interval refresh it let's try giving any number you can see and it is working so now if you see if i click on submit you're getting not a number let's try to rectify this so the number where we are getting is from the input field let's see where we are getting the number update tom here selected data if selected date is nothing there's a problem with my pc [Music] then we can see else we can update this [Music] function [Music] please enter date let's try refreshing this save i think we have to give on input date yes we got it it is going to run only when we give property school that is set now let's work on reset so here on the html the reset button is inside the countdown container let's try to do the same thing as we did for span and the other thing so here we have span let's do the h3 itself button instead of h3 let's replace this with button now let's use dot add event listener so if i click on it i want a function to get executed and that function should stop the timer so here we have the timer variable clear interval then we need to hide the div countdown container countdown container dot style dot display equal to none then we need to show the input field container here it is and we need to make the value blank input field value which we have got it got in the variable when and what dot value equal to nothing same way let's try refreshing it select some title select some date click on timer will start if i reset the timer should stop and it should and this should go away and the form should come timer stopped and you see everything is working fine except the value is not hidden all your value is not blank input date input title get element by id what let's see whether we have properly used the what yes we have here what okay mismatch you can see we have declared it over here and we have again given some values so that's okay now we need to remove this what we can do is let's make this 2 and this also 2 now this would work anything any date start the timer check the console stop the timer and the value is also gone timer is also stopped now let's check uh if the counter is completed that means countdown is compressed to select the same date now the value would be in minus so in this case let's check the difference here it is difference after the difference let's select the whole thing if difference is less than one there's a problem with talking what's causing the problem i don't know if it is greater than zero sorry less than zero then i want to show the third section if it is greater than zero then follow the same procedure so if it is less than zero that means in this case the counter is completed so in this case what we need to do is we need to hide both the section we need to hide the countdown section we need to hide the input section and we need to show the complete section not here on the if block let's check if i select so before that we need to close the timer as well or else it would be a big problem for us let me close the interval as well refresh give any name select the same date and it should go on minus and you can see the date is fixed and we also think i got the title no the title is not set let's try giving react.js on the same day click on start okay you can see we need to populate this everything seems fine but the date is also need to be set so get the complete section we have query selector all again query selector we have h3 dot inner text equal to we can pass the same input field value which we have got over here let's give save this as a global variable now you can pass this value inside the if log where is your over here instead of h3 it should be paragraph and use the backtick and follow the this is going to be there because it's title select the step text input title date here again copy paste it and make it as a global variable for date and we have to get we have got it on the sub page submit over here title selector input data now we can use this over here refresh it let's try let's make this angular 10 final work set the same date check if there is a timer running no timer is not running so angular final okay it is also working time is also working now it's time for the reset option again it's fair and simple as we already did it earlier many times copy paste the same thing get this as a button okay it's a button now now we can use the same trick copy this paste it over here when i click on the button i want to stop the interval anyways it would be stopped and i wanted to show the input field and hiding the container complete container cool let's try an error it says it could not find this value i think we have not defined the container this way we should have already called this now it would work refresh it learn angular 10 select same day click on submit countdown complete everything seems fine if i click again it got to the index page fine i believe the scope of this video was done let's try it learn angular 10 for day after tomorrow click on start the counter is set for one one day six hours and if i reset it it should switch back to the input field again and it should stop the timer let's check timer is stopped now in case if i want to see the countdown complete section react.js i'm sorry for the spelling let's do this on the same day and pretend as our day is completed countdown complete and the timer was set on for this particular task by click reset and again it is taking back to the input field removing the hiding the above to section and showing the first section and removing the value from the input field great that is working that's all for this video

Channel: UI MONK

Views: 48

Keywords: javascript mini project

Id: OKx8JjF6DEA

Length: 57min 16sec (3436 seconds)

Published: Sun Oct 03 2021