Coding Challenge #66: JavaScript Countdown Timer




In this video, I use the p5.js library to create a web-based countdown timer. I discuss the native JavaScript method setInterval() and well as p5’s millis().

Support this channel on Patreon: https://patreon.com/codingtrain
To buy Coding Train merchandise: https://codingtrain.storenvy.com

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Contact:
Twitter: https://twitter.com/shiffman
The Coding Train website: http://thecodingtrain.com/

Links discussed in this video:
millis() reference: https://p5js.org/reference/#/p5/millis
getURLParams() reference: https://p5js.org/reference/#/p5/getURLParams

Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code

p5.js: https://p5js.org/
Processing: https://processing.org

For More Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
For an Intro to Programming using p5.js: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Original source


36 responses to “Coding Challenge #66: JavaScript Countdown Timer”

  1. What is wrong with my code?
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script>
    var counter = 7202;
    var timeleft = 0;
    function setup(){
    var h = parseInt((counter-timeleft) / 3600);
    var m = parseInt((counter-timeleft) / 60);
    var s = parseInt((counter-timeleft) % 60);
    document.getElementById("counter").innerHTML = h+':'+m+':'+s;
    timeleft++;
    }
    setInterval(setup, 1000);
    </script>
    </head>

    <body>
    <p id="counter"></p>
    </body>

    </html>

    It's output 2 hours : 120 minutes and 2 sec
    If I put 3600 i works

  2. Actually, the floor function returns the NEXT SMALLEST integer, not just the number without the decimals as you state at 8:58. The difference is evident when you use floor with negative numbers. E.g., floor (-3.5) is -4, not -3. A good way to chop off the decimals is to bitwise OR (the | operator) with the number with zero. Bitwise operators only operates on integers, so it drops the decimals before doing the operation, and bitwise OR with zero leaves the number (integer) unchanged.

    E.g., 3.5 | 0 is 3 and -3.5 | 0 is -3, which is frequently what you want instead of what floor() gives you.

  3. I understand you are an advocate of p5.js for it's ease of use? Can you give me any selling points compared to phaser.io ? (just wondering if there's any functionality) Either way I love your work, was a huge help to get me thinking about solving problems. The way you walk through the logic is very insightful.

  4. can anyone explain me what was the startTime variable for? i didn't understand it… i mean, it will stay at zero every time right? so why should we subtract zero from the current millis? i got rid of it and the code still works fine (i'm a beginner btw)

  5. @Nacht Schrei Hey Nacht schrei ich nehme mal an das du ein Deutscher bist so wie ich daher schreib ich mal Deutsch und ja stimmt schon das wenn man weiss was man will das es dann nicht mehr so schwer ist. Aber ich kenne Programmierer die nun ja vielleicht nicht so gut sind wie coding train aber trotzdem keine Ahnung haben von (vor allem)Ethical Hacking:).

  6. By the way, you can "lock" the browser by not releasing the JS thread. For example,

    var d = Date.now(); while (Date.now() – d < 3000);

    will do the trick and lock up the browser for 3 seconds.

  7. Hi, can someone who owns the book the "natural of code" recommend me the book? About me: I study
    human-technology-interaction in germany. At the moment i`m in the 5th semester that means that i`m not a beginner in programming. My biggest question or fear is that this book is aimed for a different target group (beginners) and it will be a wrong decision to buy this book.

  8. would have done this with millis() right away, setting timers with intervals is bad conduct, and clunky to code too.
    btw you didn't remove that code, so rip, you're now checking for millis() accuracy with an interval of once per second, which produces exactly the same flaws as before

Leave a Reply