First let create a folder SnowFlakes and three files index.html, styles.css and main.js inside it. Also, opened it in VS Code.
Now, in index.html put the basic html which wraps the time in countdown-container class. We are also including the font-awesome css and the styles.css. Next, we are also adding the script.js at the end.
Next, we are adding the basic css in styles.css. Here, we are including a google font and also giving a flex container.
Next, we will make the counter perfect with the help of flex again. We are creating both countdown-container and time as flex.
Next, let’s add the logic to update the timer. 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.
Next, we will start the code to show the snow flakes. So, inside a createSnowFlake() function, we are creating a font-awesome fa-snowflake and appending it to the body.
We are also calling the createSnowFlake() function.
Now, go back to styles.css to add the css for a single flake which will move from top to down, due to animation.
animation: fall linear forwards;
Now, in main.js we are adding dynamic random styles for left, animation-duration, opacity and font-size.
We are calling the createSnowFlake() every 50ms through setInterval().
It is very important to use setTimeout() to remove the snow_flake or else the browser will continue to create the snow flakes and will crash.
Now, our project is complete and will show the snow flakes.
You can find the code for the project in this github repo.