Oct
11
2017

Countdown clock in JS using HTML & CSS | JavaScript Tutorials | Web Development Tutorials

This video is about creating a countdown clock in JS using HTML & CSS.

Website: http://samsolomonprabu.com/

Source file: https://drive.google.com/file/d/0B6RD52SkI2-cX0xETEQ0R256V1k/view?usp=sharing
Video Rating: / 5

16 Comments+ Add Comment

  • I couldn't do itdidn't work

  • nice dankeschön

  • Hey, my countdown is not running! I compared my code with yours and can't find what's wrong with it. Please help me find a solution 🙂

    <html>
    <head>
    <style type="text/css">
    body{
    background: #f6f6f6;
    }
    .countdownContainer{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background: #ddd;
    padding: 10px;
    margin-top: 200px;
    }
    .countdown{
    font-size: 60px;
    background-color: black;
    opacity: 0.85;
    }
    </style>
    </head>
    <body>
    <table class="countdownContainer">
    <tr class="info">
    <td colspan="4"></td>
    </tr>
    <tr class="countdown">
    <td id="days">200</td>
    <td id="hours">50</td>
    <td id="minutes">33</td>
    <td id="seconds">12</td>
    </tr>
    <tr>
    <td>Days</td>
    <td>Hours</td>
    <td>Minutes</td>
    <td>Seconds</td>
    </tr>
    </table>
    <script type="text/javascript">

    function countdown(){
    var now = new Date();
    var eventDate = new Date(2017, 07, 12);

    var currentTime = now.getTime();
    var eventTime = eventDate.getTime();

    var remTime = eventTime – currentTime;

    var s = Math.floor(remTime / 1000);
    var m = Math.floor(s / 60);
    var h = Math.floor(m / 60);
    var d = Math.floor(h / 24);
    // var w = Math.floor(d / 7);

    h%= 24;
    m%= 60;
    s%= 60;

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    document.getElementById("days").textContent = d;
    document.getElementById("days").innerText = d;

    // document.getElementById("weeks").textContent = w;
    document.getElementById("hours").textContent = h;
    document.getElementById("minutes").textContent = m;
    document.getElementById("seconds").textContent = s;

    setTimeout(countdown, 1000);
    }
    countdown();
    </script>
    </body>
    </html>

  • Cant get it to work in firefox 🙁 but works great everywhere else

  • Sam, this is a great tutorial. But how do you stop the counter once it hits 0? Right now it starts counting in negative numbers. Thanks!

  • it's not working dude

  • I am working on visual studio

  • it's not even working on sublime

  • Thank you very much for this tutorial!

  • hey can I have help? How can i detect when the timer reaches 0 so I could make an output like, "the timer has reached 0"

  • Great video. Is there an easy tweak to make it count UP from a certain date instead of count down? Thanks

  • hy

  • Great Work, but I have a problem in new date function, when I give it a date of the event and try to print it in the console it gives me a wrong date, it adds about 30 days or month more ! how can I fix it thanks in advanced.

  • Nice, but the date not finish 00:00:00:00 🙁

  • Thank you

  • This is a very good work

Leave a comment