Countdown For Coming Soon Page Using JavaScript

on June 12, 2017
πŸ”₯ 3796 views
Contents hide
1) Why Use Countdown ?
2) Countdown UI
3) On Window Load
4) Update Timer Function
5) Start Timer Function
6) Countdown Styling

In this tutorial we will see how to create the Custom Countdown For Coming Soon Page Using JavaScript HTML And CSS.

Check out the demo on how to Create the Custom Countdown For Comming Soon Page Using JavaScript.



Why Use Countdown ?

If you are planning for your project, and the first thing you decide is the name of the project. So if you buy a domain of a project name and the project is still pending then you set this template for temperory to anounce your project after some time by using countdown.

 

Let’s us begain to build our custome countdown. we will be using just simple HTML5 CSS3 and the basic JavaScript to build a count down timer.

Countdown UI

index.html

 <body>
    <div id="del-countdown">
      <h1>EVENT COUNTDOWN</h1>
      <div id="clock"></div>
      <div id="units">
        <span>Days</span>
        <span>Hours</span>
        <span>Minutes</span>
        <span>Seconds</span>
      </div>
    </div>
  </body>

By assigning a id to a single div element i.e id="clock" we will create some function that will build the countdown.

On Window Load

countdown.js

window.onload = function(){ // invoke function on window load
  var deadline = new Date("June 30, 2017 17:15:00"); // deadline - end time of countdown
  startTimer("clock", deadline);
};

Let’s start with the beginning, So on window load, we will call a function in that function we will set a variable named as a deadline, this variable will be containing the end time of countdown. and in that we will call an another function named as start time which does not define yet, it has two parameters one contain the clock which is the id that we will be injecting and another is our deadline.

 

Update Timer Function

countdown.js

function updateTimer(deadline){
  var time = deadline - new Date(); //gives the date and time of the instance
  return {
    'days': Math.floor( time/(1000*60*60*24) ),
    'hours': Math.floor( (time/(1000*60*60)) % 24 ),
    'minutes': Math.floor( (time/1000/60) % 60 ),
    'seconds': Math.floor( (time/1000) % 60 ),
    'total' : time
  };
};

From this function we will get the current date and time, and also we will return the object as it contains the math.floor method so it will not show the decimal(float) value instade of it, it will display the integer value. So while returning the function it will get the currnt time and it will divide by 1000(seconds), 60(minutes), 60(Hours) and 24(Hours a day)

 

Start Timer Function

countdown.js

function startTimer(id, deadline){
  var timerInterval = setInterval(function(){
    var clock = document.getElementById(id);
    var timer = updateTimer(deadline);

    clock.innerHTML = '' + timer.days + ''
                    + '' + timer.hours + ''
                    + '' + timer.minutes + ''
                    + '' + timer.seconds + '';

    //animations
    var spans = clock.getElementsByTagName("span");
    animateClock(spans[3]);
    if(timer.seconds == 59) animateClock(spans[2]);
    if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
    if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]);

    //check for end of timer
    if(timer.total < 1){ //if time < 1 Set to '0:0:0' 
      clearInterval(timerInterval);
      clock.innerHTML = '0000';
    }
  }, 1000);
}
// removes and add thr turn class to animate 
function animateClock(span){
  span.className = "turn";
  setTimeout(function(){
    span.className = "";
  },700);
}

At the end of the function we have set the time, so every second it will fire the whole function. In that function we have set getElementById(id) which is pass through the clock, that we declared on window load, and also we create the variable update timer which will invoke the another function, so the updateTimer properties are stored in this variable.
When the countdown ends the β€˜if…else’ statement will set the to zero instead of going negative value.

Countdown Styling

We will add some css to beautiy our countdown page using some animation with its axis and giving some background images, width to make it fancy.

style.css

#geeks-countdown{
  width: 850px;
  margin: 10% auto;
}
#clock span{
  float: left;
  text-align: center;
  font-size: 84px;
  margin: 0 2.5%;
  color: #fff;
  padding: 20px;
  width: 20%;
  border-radius: 20px;
  box-sizing: border-box;
}
#clock:after{
  content: "";
  display: block;
  clear: both;
}
#units span{
  float: left;
  width: 25%;
  text-align: center;
  margin-top: 30px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px; 
}
span.turn{
  animation: turn 1s ease forwards;
}
@keyframes turn{
  0%{transform: rotateY(360deg)}
  100%{transform: rotateY(0deg)}
}

Get SVG background From HERE !

Tags: , , ,