Live Demo - How to create countdown timer and clock usign javascript ?

See Free Live Demo example of This countdown timer and clock design create usign html,css and javascript. In this countdown timer demo you can display remaining days,remaining hours,remaining minutes,remaining seconds. this is also like demo of countdown clock. this countdown timer you can use in remaining offer time. you can...

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed" rel="stylesheet">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="offset-lg-2 col-lg-8 col-sm-12 col-12 countdown-main">
            <h3><i class="fa fa-clock-o" aria-hidden="true"></i> Countdown Left Timer</h3>
            <div class="row time">
                <div id="day" class="col-lg-3 countdown"></div>
                <div id="hour" class="col-lg-3 countdown"></div>
                <div id="minute" class="col-lg-3 countdown"></div>
                <div id="second" class="col-lg-3 countdown"></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

var countDownDate = new Date("12, 21, 2018 15:37:25").getTime();
    var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var days = ("0" + Math.floor(distance / (1000 * 60 * 60 * 24))).slice(-2);
    var hours = ("0" + Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2);
    var minutes = ("0" + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).slice(-2);
    var seconds = ("0" + Math.floor((distance % (1000 * 60)) / 1000)).slice(-2);

var day = "";
    for (var i = 0; i < days.length; i++) {
      day = day + "<div>"+days[i]+"</div>";
    }

var hour = "";
    for (var i = 0; i < hours.length; i++) {
      hour = hour + "<div>"+hours[i]+"</div>";
    }

var minute = "";
    for (var i = 0; i < minutes.length; i++) {
      minute = minute + "<div>"+minutes[i]+"</div>";
    }

var second = "";
    for (var i = 0; i < seconds.length; i++) {
      second = second + "<div>"+seconds[i]+"</div>";
    }

var day = "<div class='sub'>"+day+"</div><p class='text'>days</p>";
    var hour = "<div class='sub'>"+hour+"</div><p class='text'>hours</p>";
    var minute = "<div class='sub'>"+minute+"</div><p class='text'>minutes</p>";
    var second = "<div class='sub'>"+second+"</div><p class='text'>seconds</p>";

document.getElementById("day").innerHTML = day;
    document.getElementById("hour").innerHTML = hour;
    document.getElementById("minute").innerHTML = minute;
    document.getElementById("second").innerHTML = second;

if (distance < 0) {
      clearInterval(x);
      document.getElementById("day").innerHTML = "EXPIRED";
      document.getElementById("hour").innerHTML = "EXPIRED";
      document.getElementById("minute").innerHTML = "EXPIRED";
      document.getElementById("second").innerHTML = "EXPIRED";
    }
    }, 1000);