Happy New Year -Countdown Timer

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
  <style>
    body {
      text-align: center;
      font-family: sans-serif;
      font-weight: 100;
    }
    
    h1 {
      color: #20c1dd;
      font-weight: 100;
      font-size: 40px;
      margin: 40px 0px 20px;
    }
    
    #happyNewYear-div {
      font-family: sans-serif;
      color: #fff;
      display: inline-block;
      font-weight: 100;
      text-align: center;
      font-size: 30px;
    }
    
    #happyNewYear-div > div {
      padding: 10px;
      border-radius: 3px;
      background: #5aa628;
      display: inline-block;
    }
    
    #happyNewYear-div div > span {
      padding: 15px;
      border-radius: 3px;
      background: #20c1dd;
      display: inline-block;
    }
    
    .smalltext {
      padding-top: 5px;
      font-size: 16px;
    }
  </style>
  <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script>
    $(function() {
      var initializeWatchClock = function(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');

        var updateWatchClock = function() {
          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(interval);
          }
        }

        //Update clock Watch!
        updateWatchClock();
        var interval = setInterval(updateWatchClock, 1000);
      };

      var getTimeRemaining = function(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
        };
      };

      //Calculation for happy new year!
      nextYear = new Date(new Date().getFullYear() + 1, 0, 1);
      today = Date.parse(new Date());
      newYearDay = new Date(nextYear);
      remaningDT = newYearDay - today;
      remanning = new Date(Date.parse(new Date()) + remaningDT);

      initializeWatchClock('happyNewYear-div', remanning);
    });
  </script>
</head>

<body>
  <h1>Happy New Year!</h1>
  <div id="happyNewYear-div">
    <div>
      <span class="days"></span><div class="smalltext">Days</div>
    </div>
    <div>
      <span class="hours"></span><div class="smalltext">Hours</div>
    </div>
    <div>
      <span class="minutes"></span><div class="smalltext">Minutes</div>
    </div>
    <div>
      <span class="seconds"></span><div class="smalltext">Seconds</div>
    </div>
  </div>
  <div>
     <br/><a href="http://www.code-sample.com/" target="_blank">For more examples..</a>
  </div>
</body>
</html>

// Add your javascript here
$(function(){
  $("h1").animate({
    "margin-left": "100px"
  }, "slow");
});

/* Put your css in here */

h1 {
  color: red;
}