Holiday Countdown

in Tutorials on 27 Nov 2019

sell  html  css  javascript


Holiday Countdown
Here's a simple, very cool and yet awesome JavaScript Holiday Countdown with falling snow flakes 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;
    line-height: 24px;
}

.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 2021 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;
    line-height: 24px;
}

.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 2021 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;
     line-height: 24px;
}

.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 2021 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



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com 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.

idesignSMF.com | SimpleMachines.org



1 Comments

Updated to the year 2021.
#1
rocket_launch

Free Forever. Our themes will always be free. Forever. Period.