Coding Challenge #66: JavaScript Countdown Timer

Published: 25 March 2017
on channel: The Coding Train

210,244

3.1k

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(). Code: https://thecodingtrain.com/challenges...

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s...

🎥 Previous video:    • Coding Challenge #65.1: Binary Search Tree
🎥 Next video:    • Can I code Pong?
🎥 All videos:    • Coding Challenges

References:
🔗 millis() reference: https://p5js.org/reference/#/p5/millis
🔗 getURLParams() reference: https://p5js.org/reference/#/p5/getUR...
🔴 Coding Train Live 87:    • Coding Train Live 87: Timer in JavaScript,...

Related Coding Challenges:
🚂 #74 Clock:    • Coding Challenge #74: Clock with p5.js

Timestamps:
0:00 Introduction
0:52 Describe challenge
1:56 Let's code
2:12 Display timer
3:50 Decide what to display
4:12 Introduce setInterval
5:10 Mention requestAnimationFrame
5:30 Increment counter with setInterval
6:15 Count backwards
7:38 Choose to display minutes and seconds
8:08 Calculate minutes with floor
9:10 Calculate seconds with modulo
10:04 Display minutes and seconds
10:45 Format values with nf
11:50 Describe URL query parameters
12:34 Get parameters with getURLparams
13:40 Handle missing parameter
14:43 Handle minute parameter
15:18 Add sound
16:22 Stop timer
16:58 Stop interval with clearInterval
17:18 Test timer
17:40 Conclusion and creative possibilities
18:10 Addendum: refine timer with millis
18:58 Replace counter with current time
19:49 Debugging
20:45 Conclusion

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain
📸 Instagram:   / the.coding.train

🎥 Coding Challenges:    • Coding Challenges
🎥 Intro to Programming:    • Start learning here!

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-o...

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...

#countdowntimer #setinterval #p5js #javascript

On this page of the site you can watch the video online Coding Challenge #66: JavaScript Countdown Timer with a duration of hours minute second in good quality, which was uploaded by the user The Coding Train 25 March 2017, share the link with friends and acquaintances, this video has already been watched 210,244 times on youtube and it was liked by 3.1 thousand viewers. Enjoy your viewing!