How to create countdown time with incredible flip animation

hi everyone in today's episode you're gonna see how to do countdown timer with flip animation it wasn't easy to do for me but i get some experience during this if you enjoy the video please subscribe press the like button or leave a comment it would be great for me so enjoy the episode let's start coding and for the beginning we're gonna create a simple countdown and later we're gonna add animation for flip so gonna be like this just to see that our countdown is broken this hours uh minutes seconds okay then we're going to add some constants in our javascript to fast navigate document query selector like this then you need for each item hours minutes and we're gonna use this constants to find to put their corrupt ready for our countdown timer this and here we're gonna have some object to easier track at the time that left so this seconds here minutes okay and another one thing that we need for countdown the time in milliseconds or better in seconds that left or the final destination like time or total total seconds okay so basic functions that we're gonna create it's neat also we're gonna call it immediately like this uh what we need to handle here uh we will we need uh total seconds to have the value and this value is going to be new date uh so current actually new date and for example we're gonna take here a new year first first 1921 uh minus current date and by this we're gonna retrieve a value in milliseconds but it would be better if we immediately change these two seconds to convert milliseconds to seconds we need to divide it by thousand let's check what we have here actually you can check it command line total seconds as you can see here we have some amount and we need probably to do mass floor or to have the integer valley result part after dot okay and for this we need to have set the set interval in which we put in variable so if our total seconds less than zero we don't need it or we need to clear interval enter one equal set the one here we're gonna have some function and we need to call it each second so it's in a set interval we use them milliseconds so one second it's 1000 milliseconds and if if total seconds less than zero we're gonna do clear interval to stop our timer okay and what we need to do each second we need to do or let's for beginning we just set our time to our uh html for this probably we're gonna um create another function or we don't need it [Music] okay let's see let's create function to count our time and i call it count time but else we cannot count time okay what we're doing here we need to do the next thing if total seconds uh larger than zero so sometimes left we need to do yeah for the beginning we need to set some time here okay let's do it let's create another function but yeah function that i'm [Music] left and for this we need to use our total seconds so time left days equal plus learn to have int number without part of the dot and for this we need to next total seconds total seconds divide by we have in seconds in each minute we have 60 seconds in each hour we have 60 minutes in day we have 24 hours so for this we can do like this and we will have our days let's do almost the same for each part for the hours we don't need to divide it 24 but we need to take the part left when we divide it by module on 24 here for minutes we move this and doing the same but part left after we divide by module on 60 and here we just need to divide it by it's like this and let's set it here time left days it a lot of days left take a look ah yeah here records okay to the new year left time 20 days and some other things okay the next thing that we gonna calculate count time so if total seconds larger than 0 we need to do time left time left seconds minus minus if and also we have the situation when we have uh zero on seconds and we need to set it to 59 for this we're gonna check if time left minutes larger than zero and time left seconds less than euro we're gonna need to do time left seconds 59 and to do time left minutes minus minus oh and almost the same for it looks a bit ugly but the things that we need to calculate during the process so for hours almost the same and hours minus minus and a bit different situation with days because we have 24 hours in one day so here we need to set it hours to 23 and then uh do minus minus four days okay and wouldn't count time in our set interval so let's print here time left okay seems like we have minus one second each iteration and also we're gonna need to forget to also each count time we need to do minus minus total seconds like this and print our time to counter so print time for this we're gonna use our days inner text text equal time left days of course let's and and to call it each time after our calculation okay it looks ugly right now but it's something let's work on our tiles right now we need to create flip animation a bit tricky to do and it's much difficult to deal with and it requires some things to to do with html and css also it's the animation introduced different way the things that i saw uh one of the solution it's to create uh animation on css and then also a bit easier on js i'll show you how to do it using javascript and one third party library so let's do it first of all let's update our html and we need for this to have count down and down close here for each item we would have like the same structure so it's gonna be plus this time element in inside this we're gonna have one with class uh top here we're gonna have number then we have blend top back we need it when we like doing a flip animation to show the number on it your analysis puzzle is zero and almost the same as this but bottom and bottom back and each of this element we need hours minutes and this okay the next thing that we're gonna do from style i'm gonna spit out here a bit because nothing interesting happened here so i'm just gonna add some basic styles our layout then i will start to explain what is going on [Music] so [Music] oh [Music] okay i've just added some basic sides so our app looking a bit better let's start working on our flip animation so each one our time element should be absolute and yeah the next one thing that we're gonna get with our top element one which way it happened in texas um transform the region which changing the position where transformation started this and then when you update transform perspective on which we are looking at it animation what we need to do here is we need to update this function let's start the document also to animate to our animation i'm gonna use this up the library which have different create animation to make an accounting pdm for it but if you interesting use for other doctors this library it has a various different scenarios of visits take a look on their products but here their website inside take a look two things you can do with this library it's really cool to use okay let's add our javascript so example we need to animate four different elements so it's these which we add an item which we're gonna do animation and value let's call it animate and here we're gonna get for example seconds parameters on an element on which we're gonna do our changes and failure i am left let's work on it so first of all we need to get our element play selector we need update all four values with our function and also item here is bottom button these three items we used to show once our ribbon transformation is happening on the ground we need to show the value which we have in one and here we can use our library in which we're gonna do our animations oh sub two which item we're gonna do this for this video an element reselector this one for top element so it's first part of flip uh what i'm gonna do time with this is happening for example 0.7 seconds and actually the things that we need to do right here we have application x minus 183 damn from out once our function is complete we need to update the babies on alt inner texture and um yes is flip animation already happening but first time it's good news for us uh let's get another set animation to the final part of amazing so we're gonna do it for element selector pop back this time and which what kind of animation here what's the same is happening but json x here here we have drops off yes it's fine fine fine okay let's continue working on our styles now top we define it let's define our bottom this bottom styles here we just need to index one and put them before and i have an attempt just for our account important let's define what come with another part of our animation the things here should be clear it's one first of all first one so now flip is up and another one went down so this one should be within this 2 0 okay what sam here we need to show it with the tintex we gonna cover some uh elements that we need so here we for full leads we're gonna show the number set click here right now [Music] with this you like hiding some part of animation it's important to have it here back here here we need to define transform this one respect to the hundred pixels and uh update that's almost good spawn and i have positioned okay click here something alone let's see what exactly one [Music] it's not alright up set here okay on some items since yeah here after so you're almost almost done i saw it here it's don't yes first time i've spent a lot of time looking what i forget to add and it was just one smaller row as usual our box so small but after adding this one our app is working and animation flip is working correct so the final thing that i was missing that after our animation is complete uh we need to set property top to return this on our start position to do a new rotation that's it that's what one simple person is so let's now do our animate clip function for each item so this hours minutes this place yeah hours and actually and this as you can see one thing happened here we need to add zero here this is just one uh number so if number less than 10 we need to get zero and we need to stop doing this we need to check if our item changes so for this we're gonna do we are gonna take some value from channel it's gonna use quite soft [Music] uh we gonna define this here we need to add zero funnel for this we're gonna use our radio and keep its length from 10 and we're gonna add zero in front of it it's ready it's now first layer here instead of maybe we're gonna update it and um person here when you and jump i'm gonna compare this current value and if you say ah it's gonna be bye foreign [Music] so you will compare one types of data finally it's welcoming i'm gonna do first some more stunnings just hit here social icons and get text under each of element but in general and we did it i hope you enjoy the video and you know right now how to do countdown timer with this challenging animation so please subscribe the channel press the like button and leave a comment see you in the next videos

Channel: Competent Programming

Views: 4,166

Keywords: javascript, javascript project, learn javascript, javascript for beginners, javascript tutorial, vanilla javascript, programming, html, html for beginners, learn javascript for beginners, cp js, competent programming, countdown timer, flip clock, flip clock timer, css, coding, development, code, web, frontend, tutorial, coding tutorial, learn coding, learn programming, countdown, countdown timer javascript, timer javascript, countdown timer tutorial javascript

Id: t56nSwjozf0

Length: 47min 9sec (2829 seconds)

Published: Sun Dec 20 2020