Holiday Countdown

Written by Mick in Tutorials on 27 Nov 2019

"Holiday Countdown"
Here's a simple, very cool and yet awesome JavaScript New Year and Christmas Countdowns with falling snow block for your sidebar. Yes, Very simple and extremely easy to use.





The CSS:

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
box-sizing: border-box;
}

.newyear {
background-color: #323975;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Muli', sans-serif;
height: 350px;
overflow: hidden;
margin: 0;
text-align: center;
}

.newyear h1 {
        color: #fff;
        font-size: 20px;
}

.fa-snowflake {
color: #fff;
position: absolute;
top: -20px;
animation: fall linear forwards;
        z-index: 999;
}

@keyframes fall {
to {
transform: translateY(100vh);
}
}

.countdown-container {
display: flex;
}

.time {
display: flex;
font-size: 1.2em;
flex-direction: column;
margin: 0 10px;
}

.time h1 {
margin-bottom: 0;
        color: #fff;
}

.time small {
color: #fff;
}



The HTML:
<div class="newyear"><h1>New Year is Coming!</h1>
<div class="countdown-container">
<div class="time">
<h1 id="days">00</h1>
<small>days</small>
</div>
<div class="time">
<h1 id="hours">00</h1>
<small>hours</small>
</div>
<div class="time">
<h1 id="minutes">00</h1>
<small>minutes</small>
</div>
<div class="time">
<h1 id="seconds">00</h1>
<small>seconds</small>
</div>
</div>
</div>



The Script:
const body = document.body;
const endTime = new Date('December 31 2020 23:59:59');
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');


setInterval(updateCountdown, 1000)
setInterval(createSnowFlake, 100);


function updateCountdown() {
const startTime = new Date();
const diff = endTime - startTime;
const days = Math.floor(diff / 1000 / 60 / 60 / 24);
const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
const minutes = Math.floor(diff / 1000 / 60) % 60;
const seconds = Math.floor(diff / 1000) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = hours < 10 ? '0'+hours : hours;
minutesEl.innerHTML = minutes < 10 ? '0'+minutes : minutes;
secondsEl.innerHTML = seconds < 10 ? '0'+seconds : seconds;
}

function createSnowFlake() {
const snow_flake = document.createElement('i');
snow_flake.classList.add('far');
snow_flake.classList.add('fa-snowflake');
snow_flake.style.width = Math.random() * 10 + 10 + 'px';
snow_flake.style.left = Math.random() * window.innerWidth + 'px';
snow_flake.style.animationDuration = Math.random() * 3 + 2 + 's';
snow_flake.style.opacity = Math.random();

body.appendChild(snow_flake);

setTimeout(() => {
snow_flake.remove();
}, 5000);
}



Now let's add all this into a HTML block and activate:
<style>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
box-sizing: border-box;
}

.newyear {
background-color: #323975;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Muli', sans-serif;
height: 350px;
overflow: hidden;
margin: 0;
text-align: center;
}

.newyear h1 {
        color: #fff;
        font-size: 20px;
}

.fa-snowflake {
color: #fff;
position: absolute;
top: -20px;
animation: fall linear forwards;
        z-index: 999;
}

@keyframes fall {
to {
transform: translateY(100vh);
}
}

.countdown-container {
display: flex;
}

.time {
display: flex;
font-size: 1.2em;
flex-direction: column;
margin: 0 10px;
}

.time h1 {
margin-bottom: 0;
        color: #fff;
}

.time small {
color: #fff;
}
</style>


<div class="newyear"><h1>New Year is Coming!</h1>
<div class="countdown-container">
<div class="time">
<h1 id="days">00</h1>
<small>days</small>
</div>
<div class="time">
<h1 id="hours">00</h1>
<small>hours</small>
</div>
<div class="time">
<h1 id="minutes">00</h1>
<small>minutes</small>
</div>
<div class="time">
<h1 id="seconds">00</h1>
<small>seconds</small>
</div>
</div>
</div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" />
<script>
const body = document.body;
const endTime = new Date('December 31 2020 23:59:59');
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');


setInterval(updateCountdown, 1000)
setInterval(createSnowFlake, 100);


function updateCountdown() {
const startTime = new Date();
const diff = endTime - startTime;
const days = Math.floor(diff / 1000 / 60 / 60 / 24);
const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
const minutes = Math.floor(diff / 1000 / 60) % 60;
const seconds = Math.floor(diff / 1000) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = hours < 10 ? '0'+hours : hours;
minutesEl.innerHTML = minutes < 10 ? '0'+minutes : minutes;
secondsEl.innerHTML = seconds < 10 ? '0'+seconds : seconds;
}

function createSnowFlake() {
const snow_flake = document.createElement('i');
snow_flake.classList.add('far');
snow_flake.classList.add('fa-snowflake');
snow_flake.style.width = Math.random() * 10 + 10 + 'px';
snow_flake.style.left = Math.random() * window.innerWidth + 'px';
snow_flake.style.animationDuration = Math.random() * 3 + 2 + 's';
snow_flake.style.opacity = Math.random();

body.appendChild(snow_flake);

setTimeout(() => {
snow_flake.remove();
}, 5000);
}
</script>



Christmas Countdown:



<style>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
box-sizing: border-box;
}

.xmas {
background-color: #d63031;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Muli', sans-serif;
height: 350px;
overflow: hidden;
margin: 0;
text-align: center;
}

.xmas h1 {
        color: #fff;
        font-size: 20px;
}

.fa-snowflake {
color: #fff;
position: absolute;
top: -20px;
animation: fall linear forwards;
        z-index: 999;
}

@keyframes fall {
to {
transform: translateY(100vh);
}
}

.countdown-container {
display: flex;
}

.time {
display: flex;
font-size: 1.2em;
flex-direction: column;
margin: 0 10px;
}

.time h1 {
margin-bottom: 0;
        color: #fff;
}

.time small {
color: #fff;
}
</style>


<div class="xmas"><h1>Santa is Coming!</h1>
<div class="countdown-container">
<div class="time">
<h1 id="days">00</h1>
<small>days</small>
</div>
<div class="time">
<h1 id="hours">00</h1>
<small>hours</small>
</div>
<div class="time">
<h1 id="minutes">00</h1>
<small>minutes</small>
</div>
<div class="time">
<h1 id="seconds">00</h1>
<small>seconds</small>
</div>
</div>
</div>

<script>
const body = document.body;
const endTime = new Date('December 24 2020 23:59:59');
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');


setInterval(updateCountdown, 1000)
setInterval(createSnowFlake, 100);


function updateCountdown() {
const startTime = new Date();
const diff = endTime - startTime;
const days = Math.floor(diff / 1000 / 60 / 60 / 24);
const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
const minutes = Math.floor(diff / 1000 / 60) % 60;
const seconds = Math.floor(diff / 1000) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = hours < 10 ? '0'+hours : hours;
minutesEl.innerHTML = minutes < 10 ? '0'+minutes : minutes;
secondsEl.innerHTML = seconds < 10 ? '0'+seconds : seconds;
}

function createSnowFlake() {
const snow_flake = document.createElement('i');
snow_flake.classList.add('far');
snow_flake.classList.add('fa-snowflake');
snow_flake.style.width = Math.random() * 10 + 10 + 'px';
snow_flake.style.left = Math.random() * window.innerWidth + 'px';
snow_flake.style.animationDuration = Math.random() * 3 + 2 + 's';
snow_flake.style.opacity = Math.random();

body.appendChild(snow_flake);

setTimeout(() => {
snow_flake.remove();
}, 5000);
}
</script>


Reference: https://codepen.io/FlorinPop17/pen/xxxEqGj
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    

0 Comments

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.