Home Web Development JavaScript New Years Countdown Timer With jQuery and Bootstrap Layout | Time Left

New Years Countdown Timer With jQuery and Bootstrap Layout | Time Left

December 28, 2019

5912

How we can create a countdown timer to show how time left for the new year? Solution: See this New Years Countdown Timer With jQuery and Bootstrap Layout, Time Left Check.

Previously I have shared a JavaScript countdown timer, this is also similar to that but it’s for the new year and with a neon glow effect on hover. Basically, this new years countdown is for showing how many days, hours, minutes, and seconds left for January 1st or new year. Now the time gap fills then the timer will become a greeting message.

Today you will learn to create a program to check how many times left for 2020. Basically, there is a heading and four boxes, the heading is info about the program and the first box is for showing days, second for hours, third for minutes, and fourth for the second. On new year I men 1st of January it becomes a happy new year message. And the cool fact of this program is, it has a neon glow effect on hover.

So, Today I am sharing New Years Countdown Timer With jQuery and Bootstrap Layout. There I have used bootstrap for responsive layout design with less CSS codes, and countdown programs based on jQuery. As we know it is a JS library that’s why I am putting this program in the JavaScript category. You can use this program on your website for information and give a wish about the new year.

If you are thinking now how the program actually is, then see the preview given below.

Preview Of Time Left For 1 January Program

See this video preview to getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/countdown-timer.mp4?_=1

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

New Years Countdown Timer Source Code

Before sharing source code, let’s talk about it. First I have created the layout using the bootstrap grid system ( col-md-*, cod-lg-*, etc). I have created two sections for each box, one for top content and one for bottom content. The top part contains the number and the bottom part contains like day, hour, etc. In the HTML file, I have created many divs for creating the layout with pre-built class names.

Now using CSS I have done little things like neon hover effect, and gave border-radius to creating a rounded rectangle. As you know Bootstrap is used for creating responsive elements, but there I have used CSS @media query for reducing the size of some elements on a small screen. The neon glow is based on the text-shadow command.

jQuery handling here the countdown feature of this program. First, it gets the current date and time and checks the gap between 1 January. There I have used JS math command for calculating days, hours, minutes, and seconds. When the time gap becomes complete it will show a happy new year greeting message.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>New Year Countdown | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="wrapper">
  <div class="container text-center">
    <div class="col-md-12">
      <h1 id="header" class="">New Year Countdown</h1>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="clock">
        <div class="well top-section">
          <div id="days" class="num">00</div>
        </div>
        <div class="well bottom-section">
          <div id="days-text" class="text">Days</div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="clock">
        <div class="well top-section">
          <div id="hours" class="num">00</div>
        </div>
        <div class="well bottom-section">
          <div id="hours-text" class="text">Hours</div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="clock">
        <div class="well top-section">
          <div id="mins" class="num">00</div>
        </div>
        <div class="well bottom-section">
          <div id="mins-text" class="text">Minutes</div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="clock">
        <div class="well top-section">
          <div id="secs" class="num">00</div>
        </div>
        <div class="well bottom-section">
          <div id="secs-text" class="text">Seconds</div>
        </div>
      </div>
    </div>
    <div id="info" class="small"></div>
  </div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>New Year Countdown | Webdevtrick.com</title>

</head>

<body>

<h1 id="header" class="">New Year Countdown</h1>

</div>

</div>

</div>

</div>

<div id="hours-text" class="text">Hours</div>

</div>

</div>

<div id="mins-text" class="text">Minutes</div>

</div>

</div>

<div id="secs-text" class="text">Seconds</div>

</div>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden;
}

body {
  background: transparent;
  color: #ffffff;
}

.bluelight {
  text-shadow: 0 0 10px #3498DB,
               0 0 20px #3498DB,
               0 0 30px #3498DB,
               0 0 40px #2980B9,
               0 0 70px #2980B9,
               0 0 80px #2980B9,
               0 0 100px #2980B9,
               0 0 150px #2980B9;
}

.clock {
    overflow: hidden;
}

.col-md-12 {
    overflow: hidden;
    padding-bottom: 20px;
}

.top-section {
  margin-bottom: 0px;
  border-radius: 5px 5px 0px 0px;
  background-color: #34495E;
  border: 0px;
}

.bottom-section {
  margin-top: 0px;
  border-radius: 0px 0px 5px 5px;
  background-color: #2C3E50;
  border: 0px;
}

@media (min-width: 768px) {
  .num {
    font-size: 100px;
  }
}

@media (max-width: 767px) {
  .num {
    font-size: 50px;
  }
}

@media (max-width: 480px) {
  .num {
    font-size: 30px;
  }
}

@media (min-width: 768px) {
  .text {
    font-size: 35px;
  }
}

@media (max-width: 767px) {
  .text {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .text {
    font-size: 15px;
  }
}

@media (min-width: 768px) {
  body {
    padding-top: 75px;
  }
}

h1 {
  padding-top: 10px;
}

@media (min-width: 768px) {
  h1 {
    margin-bottom: 75px;
    font-size: 100px;
  }
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

html {

height: 100%;

background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);

overflow: hidden;

}

body {

background: transparent;

color: #ffffff;

}

.bluelight {

text-shadow: 0 0 10px #3498DB,

0 0 20px #3498DB,

0 0 30px #3498DB,

0 0 40px #2980B9,

0 0 70px #2980B9,

0 0 80px #2980B9,

0 0 100px #2980B9,

0 0 150px #2980B9;

}

.clock {

overflow: hidden;

}

.col-md-12 {

overflow: hidden;

padding-bottom: 20px;

}

.top-section {

margin-bottom: 0px;

border-radius: 5px 5px 0px 0px;

background-color: #34495E;

border: 0px;

}

.bottom-section {

margin-top: 0px;

border-radius: 0px 0px 5px 5px;

background-color: #2C3E50;

border: 0px;

}

@media (min-width: 768px) {

.num {

font-size: 100px;

}

@media (max-width: 767px) {

.num {

font-size: 50px;

}

@media (max-width: 480px) {

.num {

font-size: 30px;

}

@media (min-width: 768px) {

.text {

font-size: 35px;

}

@media (max-width: 767px) {

.text {

font-size: 20px;

}

@media (max-width: 480px) {

.text {

font-size: 15px;

}

@media (min-width: 768px) {

body {

padding-top: 75px;

}

h1 {

padding-top: 10px;

}

@media (min-width: 768px) {

h1 {

margin-bottom: 75px;

font-size: 100px;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
function timeLeft(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
  };
};

$(document).ready(function() {
  var today = new Date();
  var deadline = 'January 1 ' + (today.getFullYear() + 1) + " 00:00:00";
  if (today.getMonth() == 0 && today.getDate() == 1) {
    deadline = 'January 1 ' + (today.getFullYear()) + " 00:00:00";
  };
  
  $("#header").hover(function() {
    $(this).toggleClass('bluelight');
  });
  
  $(".clock").hover(function() {
    $(this).toggleClass('bluelight');
  });
  
  var setClock = function(newyear){
    var timeinterval = setInterval(function(){
      var t = timeLeft(newyear);
      $('#days').text(t.days);
      $('#hours').text(t.hours);
      $('#mins').text(('0' + t.minutes).slice(-2));
      $('#secs').text(('0' + t.seconds).slice(-2));
      if(t.total<=0){
        clearInterval(timeinterval);
        var now = new Date();
        var yearStr = now.getFullYear().toString();
        $('#header').text("Happy New Year!!!");
        $('#days').text(yearStr[0]);
        $('#days-text').text("Happy");
        $('#hours').text(yearStr[1]);
        $('#hours-text').text("New");
        $('#mins').text(yearStr[2]);
        $('#mins-text').text("Year");
        $('#secs').text(yearStr[3]);
        $('#secs-text').text("!!!");
        $('#info').text("Countdown starts again tomorrow!");
      }
    },1000);
  };
  
  setClock(deadline);
  
});

// Code By Webdevtrick ( https://webdevtrick.com )

function timeLeft(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

};

$(document).ready(function() {

var today = new Date();

var deadline = 'January 1 ' + (today.getFullYear() + 1) + " 00:00:00";

if (today.getMonth() == 0 && today.getDate() == 1) {

deadline = 'January 1 ' + (today.getFullYear()) + " 00:00:00";

};

$("#header").hover(function() {

$(this).toggleClass('bluelight');

});

$(".clock").hover(function() {

$(this).toggleClass('bluelight');

});

var setClock = function(newyear){

var timeinterval = setInterval(function(){

var t = timeLeft(newyear);

$('#days').text(t.days);

$('#hours').text(t.hours);

$('#mins').text(('0' + t.minutes).slice(-2));

$('#secs').text(('0' + t.seconds).slice(-2));

if(t.total<=0){

clearInterval(timeinterval);

var now = new Date();

var yearStr = now.getFullYear().toString();

$('#header').text("Happy New Year!!!");

$('#days').text(yearStr[0]);

$('#days-text').text("Happy");

$('#hours').text(yearStr[1]);

$('#hours-text').text("New");

$('#mins').text(yearStr[2]);

$('#mins-text').text("Year");

$('#secs').text(yearStr[3]);

$('#secs-text').text("!!!");

$('#info').text("Countdown starts again tomorrow!");

}

},1000);

};

setClock(deadline);

});

That’s It. Now you have successfully created New Years Countdown Timer With jQuery and Bootstrap Layout, Time Left Check Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.