Create a Year End Counter in JavaScript

JavaScript

Since new year is coming, it's perfect time to create a new year counter in JavaScript.

First let create a folder YearEndCounter and three files index.html, styles.css and main.js inside it. Also, opened it in VS Code.

YearEndCounterYearEndCounter

Now, in index.html put the basic html which wraps the time in countdown-container class. We have time class four times and for days, hours, minutes and seconds.

We have also linked the main.js and styles.css files and also started the project in Live Server.

index.htmlindex.html

Let's move to the styles.css and put the basic styles. Also notice that we are also putting an image for snow in our project. With the flex, we have everything in center.

styles.cssstyles.css

Now, we will complete the styles by adding CSS for the countdown-container and out counter is at the correct place.

styles.cssstyles.css

Now, it's time to convert the JavaScript and start our counter. So, open the main.js and add the below code. Here, we are taking the endTime as December 31 2020. We are running the function updateCountdown(), every second through setInterval().

Inside the function updateCountdown(),we are just doing the math show the days, hours, minutes and seconds.

main.jsmain.js

This completes our mini-project. You can find the code for the same in my github account here.