Javascript Christmas Countdown Days with Snowflake

Javascript Christmas Countdown Days

Hey, Christmas is coming soon and each day pass, the bigger event comes closer. Today we have awesome countdown days using Javascript. I am going to share that! before I go ahead, you can also have a look simple Jquery countdown plugin.

This Countdown is designed by CSS and adds the counter function using Javascript. It’s designed in nice animated Snowflake background.

Make sure to check out our previous article about CSS Christmas Tree with Gift Box

Four boxes placed over the background that shows the days, hours, mints and second remaining and the text “Christmas Countdown” just above the boxes.

Do you have a design page where you are selling products? And want to give some kind of promotion for this special event? If yes, then this is great fun of design really help you to make something unique.

Ok, let’s start with HTML and see how it look like:

HTML Markup

The HTML isn’t much complicated, all we are going to use few divs for each section. First of all, we have defined the main wrapper which ID clockdiv that hold the inner child divs.

Each section separately places inside child div. You can see the below HTML code, each inner div hold the span for numbers and a div with class name smalltext have info text.

<div id="clockdiv">
  <div class="inner">
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div class="inner">
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div class="inner">
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div class="inner">
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

CSS Styles

The body tag needs to define some basic styles and we have added font family, color white, text-align center and background image.

We used animation property to define the snow animation which we created using @keyframe.

/* http://material.colorion.co/palette/3320 */
body {
  font-family: 'Righteous', cursive;
  color:white;
  text-align: center;
  background: #dd4848;
  background-image: url('https://i.imgur.com/BiSmXaq.png'), url('https://i.imgur.com/XHuy0NJ.png'), url('https://i.imgur.com/okpRxJU.png');
  -webkit-animation: snow 20s linear infinite;
  -moz-animation: snow 20s linear infinite;
  -ms-animation: snow 20s linear infinite;
  animation: snow 20s linear infinite;
}

Here is snow animation created using @keyframes.

@-webkit-keyframes snow {
  0% { background-position: 0px, 0px, 0px, 0xp, 0xp, 0xp}
  50% { background-color: #dc5959 }
  100% { background-position: 500px 1000px, 400px 400px, 300px 300px;
  background-color: #dd4848;
  }
}
@-moz-keyframes snow {
  0% { background-position: 0px, 0px, 0px, 0xp, 0xp, 0xp}
  50% { background-color: #dc5959 }
  100% { background-position: 500px 1000px, 400px 400px, 300px 300px;
  background-color: #dd4848;
  }
}
@-ms-keyframes snow {
  0% { background-position: 0px, 0px, 0px, 0xp, 0xp, 0xp}
  50% { background-color: #dc5959 }
  100% { background-position: 500px 1000px, 400px 400px, 300px 300px;
  background-color: #dd4848;
  }
}
@keyframes snow {
  0% { background-position: 0px, 0px, 0px, 0xp, 0xp, 0xp}
  50% { background-color: #dc5959 }
  100% { background-position: 500px 1000px, 400px 400px, 300px 300px;
  background-color: #dd4848;
  }
}

Just style the heading by adding font size, color, and text-shadow.

h1 {
  text-align:center;
  font-size: 60px;
  color:white;
  text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
  margin-bottom: 10px;
  margin-top: 100px;
}

The main container has width 100% whereas the inner is boxed so we have set width and height 80px. We also apply the gradient for inner div.

#clockdiv {
  width: 1000px;
  width: 100%;
  top:50%;
  left:50%;
  font-size: 50px;
}
.inner {
  display:inline-block;
  border: 5px solid white;
  padding: 20px;
  width: 80px;
  height: 80px;
  box-shadow: 5px 5px 5px rgba(0,0,0, 0.5);
  background: repeating-linear-gradient(55deg, 
    rgba(221, 72, 72, 0.1), 
    rgba(221, 72, 72, 0.1) 5px,
    rgba(255, 255, 255, 0.2) 5px, 
    rgba(255, 255, 255, 0.2) 10px);
}
.inner .smalltext {
  font-size: 20px;
  text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}

At the end of CSS, we added text-shadow to numbers to make them look good.

.days {
  text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}
.hours {
  text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}
.minutes {
  text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}
.seconds {
  text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}

The Javascript

To remember that, the javascript may not work on the local server so you need to upload the files to the live server to make sure it’s work.

Here is complete code for javascript.

/* https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/ */
function getTimeRemaining(endtime){
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60);
  var minutes = Math.floor( (t/1000 / 60) % 60);
  var hours = Math.floor( (t/(1000 * 60 * 60)) % 24);
  var days = Math.floor( t/(1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
function initializeClock(id, endtime){
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');
  
  function updateClock(){
    var t = getTimeRemaining(endtime);
    
    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
    
    if(t.total <= 0){
      clearInterval(timeinterval);
    }
  }
  updateClock();
  var timeinterval = setInterval(updateClock,1000);
}
var deadline = '2016-12-24';
initializeClock('clockdiv', deadline);
//

That it! We are done with Christmas Countdown Days. Just grab this code and implement into your website.

Christmas Countdown Days Demo

Here is the demo version of a countdown to see how it work.

See the Pen Christmas Countdown Snowflake background by Jonni Aaltonen (@Aladini) on CodePen.

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *