How to Add a Custom Countdown Clock to Your Wix Website – Wix Code Tutorial 2020 – Velo

today i’m going to show you how you can use a countdown timer for your website using wix code also known as corvette what’s up you guys welcome back to another nino tutorial and today we’re going to be going over how you can create a countdown timer for your website so i just went ahead and just put something together here as you can see i have a strip here i have text and it’s basically my site go undergoing maintenance okay i thought this
was really cool uh tutorial that you know i would like to share with you guys and i was just thinking to myself huh how can i actually put a timer on there without having to use the standard timer maybe i want to mix things up make things look cool and pretty and whatever you guys want to do or want to design up you can definitely do that here and you can do it manually so let’s go ahead and get started and show how you can create that mainly
only by using corvette all right so let’s go ahead what i’m going to do here is i have a box here and then a two text boxes right here okay right next to each other text 79 and text 78 okay so what i’m going to do here is i’m going to go ahead and copy this so i’m going to press ctrl c and then i’m going to press ctrl v all right as you can see it actually copied that and what i’m going to do is i’m going to do the minutes after this one so we’re
going to say minutes okay and then we’re going to duplicate this here and i’m just gonna show you guys how i’m actually really doing it right now just so that you know everybody’s on the same page all right so we’re going to do hours okay and once we do hours then we’re going to do days and then i’m going to go ahead and center it up just a tad bit for you guys all right so let’s say days reason why i don’t have years on here is because you know
we’re not going to be doing a full year maintenance so i’m not going to put years here but it’s easy enough to put years down here if you wanted to but like i said i’m just doing something very quick and useful all right so i’m going to go ahead and group all of these together and then i’m just going to center them okay and boom there we have it all right so i’m going to go ahead and label these things here i’m just gonna label this uh days so
i’m gonna come down here to my properties and events and i’m just gonna label that days okay then here i’m going to label this hours and then as you can get the gist of it everything else is going to be the same yada yada minutes seconds stuff like that up wrong one second awesome so now that we have that all ready and ready to go what i want to do here now is i want to focus in on my code so let’s go ahead and drag this up just a tad bit all
right now in this code we’re just going to put everything in the wix on ready function okay or we can actually create our own function how about that let’s go ahead and do that so we’re going to say function and we’re going to say timer and then the parameter is going to be the parameter and so that’s how we’re going to do it all right so let’s go ahead and start with getting the date okay this is a specific date that you want the countdown to go
down two okay so let’s go ahead and create our uh countdown date so we’re gonna say let date equal new date and we’re going to put this in a format and we’re going to say it’s going to be for let’s see march 17th 20 21 and at the time we’re gonna do it is 12 30 uh and we’re just gonna say that’s 12 30 you know what no let’s let’s do no i’ll just keep it at 12 30. yeah so we’re just going to do 12 30 just like that all right now we’re going to
say uh dot get time all right because we want to get the time of this stuff is going to put this into a numeric value that we’ll have to use in our timer uh in our countdown timer okay so this is timer you know i’m just gonna change that to countdown and then say timer okay now as you can see i’m setting the date as this here okay what i’m going to do now is i’m going to come down here and i’m going to say let’s let’s see downtime equal and we’re
going to set this to a set interval okay so that this interval can keep going uh on and on until the break is done until we actually clear that interval and stop it okay so we’re going to make that an interval then we’re going to put inside of it a function okay so we’re going to say function and what we’re going to do here is i’m going to get started with that code alright so this is the gist of the countdown timer now what we want to do is we
want to get the actual time that is right now that our visitor is showing right now okay so we’re gonna go ahead and say let now time equal new date but we’re not gonna set that date to anything okay we’re just going to say new date dot get time all right and then semicolon all right so now we just need to calculate the difference between the actual date and then also our time right now okay so we’re just going to say uh difference diff okay
equals and what we’re gonna say is date minus now okay now time and then what we’re gonna do here is we’re gonna get the days okay so i’m just going to say days equal and we’re going to use math dot floor okay and we’re going to get that time left divided by the amount of days okay so we’re gonna do the difference divided by a thousand times 60 times 60 times 24 okay so there’s 24 hours there’s 60 minutes in an hour there’s 60 seconds in a minute
and then there’s a thousand seconds within oh sorry yeah a thousand thousandths of a second like that’s what that’s what the time is all about okay so uh that is one of them okay so we got that we got our days now all we have to do here is get the days then the hours then the minutes and the seconds so let me go ahead and type that out real quick just give me a second so as you can see i have my code right here and what you can see with this code
is that i have the days the hours the minutes and the seconds okay there can be a different way that we do this right here uh so if you guys don’t want to go through that tedious process what you guys could do is uh really just label this a thousand times 60 and then use this a thousand times 60 as like one uh variable and then you can use that variable here and then also you can use that variable here and it will definitely save up space if
you’re looking to save up space but there is a method to people’s madness so definitely choose however you want i’m just going to go with this right now i think it’s just very uh nice and suitable for me all right so as you can see here we’re gonna go ahead and get the days okay just like we did up at the top so get uh we’re gonna get the text of that element and what we’re going to label it as is days okay now this is a number what we want to do
is we want to change this to a string so we’re going to say days days.tostring okay and then what we’re going to do here is we’re going to create the same type of layout for the rest of our elements just so that we can tie the numbers to those elements okay all right so i think what i want to do here is i want to create another message okay a message that you know that that it’s complete that the time is complete all right and what i want to do
here is uh you know what no well yeah i do want to put a message there so what i’m going to do here is since i group these together here as a group one what i’m gonna do is i’m going to go ahead and say group one dot expand okay and then i’m gonna put a different element below here uh so that that can show when it’s completed all right um so let’s go ahead and see what i want to put down all right so i actually just created a box here and then
also i created a button here uh for you guys so go ahead and do that if you will but uh this is just to let people go back to the home page all right so i’m gonna go ahead and keep that collapsed and that’s gonna be box 13. all right and then this group one i’m going to go ahead and collapse as well as this as well uh and then what we’re going to do here is going to do is below here we’re going to say box 13 dot collapse okay so as you can see
we’re going to go ahead and expand that once the date hits march 17th at 12 30 okay so right now we are almost done so all we have to do now is to see what do what time do we have left okay is that time at zero or if is not then what we need to do is that we have time left okay that we have time to keep counting down so it’s going to keep going through that interval that we set it up as okay and we’re gonna go into that in just a few seconds but
just letting you know we need to create an if else statement here so that if we do have a difference that is not zero then we need to keep the count going okay but if the count is zero then what we need to do is show that go home go to home page so that we have finished the maintenance and it is redirecting them back to the main page if you know someone was just stuck on the maintenance page uh when it was completed okay but i highly suggest that
if you’re gonna use this for maintenance website uh if you’re using this for a maintenance page i highly suggest that you guys get that date just right so that you know people won’t be waiting okay and also when it triggers it won’t take them to a home page that’s not complete so just be wary about that uh i think you guys can set up something where this can be pulled from a database as well and i actually go into databases in one of my tutorials
in the right-hand corner as i speak right now and that will give you a little gist of like what how do you how do you go about the collection databases uh that wix has to offer so just go ahead and check that out and you’ll actually know what i’m talking about all right and so here what i want to do is i want to create an if else statement all right so if um if the difference is greater than zero what we want to do is we want to continue the the
time okay so we’re just going to put in comments uh continue all right continue the time or the timer all right and then if all else fails okay if all those fails and it comes down to zero that means that we have reached the time that it’s supposed to be completed what we need to do is we need to clear this interval all right so we’re going to say clear interval and we’re going to put that down time in parentheses okay that way we can clear that
timeout okay uh well excuse me we can clear that interval and it can time out and it doesn’t have to repeat itself on that visitors web page okay so we’re gonna come down here we’re gonna go ahead and open that all right we’re gonna expand that box 13 all right which has the go to home page all right by that time we should be good we should be done all right so we’re gonna expand that and also at the same time what we’re gonna do is collapse the
group all right so group one dot collapse all right and as you can see i left my semicolons out so make sure you put your semicolons in there it really doesn’t matter too much right now because everything is going line by line but once you get into some complicated code i’m pretty sure that you should use the semicolons to to really like break up and break down each line okay so that is about it i think yeah that is about it so everything is good
to go all right and then all we have to do is add the time interval so right now it’s only going to hit every single time okay what we need to do this at is a second all right we’re going to do this at the second so what we can do here is we’re going to say a thousand okay so each second so just like we see here this is a thousandth of a second and so i guess that is about it for the countdown timer and that is about it so all we have to do is
come up back to our on ready uh function all right and what we’re gonna do here is we’re going to go ahead and make sure that that group one is actually uh collapsed all right because we won’t we don’t want to show it just yet we want to show it once we call the countdown timer so we’re going to go ahead and collapse that and we’re going to call the countdown timer all right we’re not going to create any parameter in there so i suggest that you
just delete the parameter all right and so right here we actually have a almost working countdown timer all we have to do now is go ahead and test this thing all right so all we have to do is just test this thing and we should be good to go all right so what i’m going to do here is actually i’m going to create in a sync function just so that everything can go in order and everything can get every uh all of the information can be stored correctly
so i’m just gonna say a sync and then i’m gonna say await new date uh dot get time okay so this will wait for the date actually to get the time and then it will go straight into our uh our interval which is pretty much the countdown timer but we gave it another name which is downtime all right so with all that being said and all that being completed uh as you can see i have my group one collapsed and then also my box 13 collapsed all right so
let’s go ahead bring this down and let’s test this sucker out alright so i’m gonna click save because everybody needs to save what they’re doing and once you save it then head on over to the preview button and press it and as you can see right here guys we have 97 days 17 hours and 32 minutes and 47 seconds since 46 45 44. you know and that that is that is a long time for maintenance so uh i don’t i don’t know why i don’t know why is that long i
don’t know why so i hope you guys enjoyed this tutorial this little quick short bit tutorial uh definitely give it a shot and if you guys have any questions drop it below thank you so much for watching you guys and if you like this video hit that like button subscribe if you aren’t already and i’ll see you in the next video guys alright ciao you