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”
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
i love canvas right
please make a timer in processing.
On page refresh.. timer will restart…
You are a great presenter and it is immediately clear that this is not your first coding rodeo. One would be fortunate to learn from you in person.
any have any idea of what i went wrong when as i can't get the timer.html() to display anything
oh… he did it!!! yay i asked for this thank you!!
Subscribe to my channel to receive programming courses 🙂
Dude i love you ..
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.
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.
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)
greate!
let's start using 'let'
hwo does he run his programs in local host
can you make a cookie with JavaScript?
Why don't you start programming with pure JS, it's more challenging
Hello, and thank you! Your videos very funny and interesting ^_^
Do you have some video about how to create own javascript library?
@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:).
@iceman4154 HEY cool
Hi! I love your videos! Which one would you recommend to start learning js? (It'll be my 2nd language, first one is Java)
hey, what does "noCanvas();" do?
I have developed a countdown with romans numerals. Are you interested?
Is that an Apple Watch you are wearing
6:07 first version done
The setup function is called once. So, how is the timer changing every second? Shouldn't the timer.html() be inside the draw function?
YeaY !
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.
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.
Hi Daniel i made pretty much similar looking timer , except that i added pretty urls to it 🙂
so its kinda a little bit more easy to change the numbers of mins at the end of url.
http://www.cooltimer.ga/min/15
Wasn't your name Coding Rainbow??
lel i had to do this in my javascript exam yesterday
You irritate my youtube startpage:
Topic: Trains
Videos: Coding Train Studio Tour, Fastest Train in the world, How is a train built
xD
ding.mp3 and the bell are off pitched..
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
15:27 "lets leave it at 1 minute for a second"