Holiday Countdown

Started by Mick, Nov 27, 2019

Nov 27, 2019 Last Edit: May 25, 2020 by Mick
"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