Coding Challenge #66: JavaScript Countdown Timer

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=MLtAMg9_Svw


Duration: 21:48
207,251 views
3,157

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/66-javascript-countdown-timer

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

🎥 Previous video: https://youtu.be/ZNH0MuQ51m4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/IIrC5Qcb2G4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🔗 millis() reference: https://p5js.org/reference/#/p5/millis
🔗 getURLParams() reference: https://p5js.org/reference/#/p5/getURLParams
🔴 Coding Train Live 87: https://youtu.be/hVSHlFjTeqg?t=1355s

Related Coding Challenges:
🚂 #74 Clock: https://youtu.be/E4RyStef-gY

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/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 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-of-Conduct

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

#countdowntimer #setinterval #p5js #javascript



Other Videos By The Coding Train


2017-04-24Coding Challenge #69: Evolutionary Steering Behaviors - Part 3
2017-04-20Coding Challenge #69: Evolutionary Steering Behaviors - Part 2
2017-04-18Coding Challenge #69: Evolutionary Steering Behaviors - Part 1
2017-04-15Live Stream #89: Session 2 of “Intelligence and Learning”
2017-03-30Coding Challenge #68: Breadth-First Search Part 2
2017-03-30Coding Challenge #68: Breadth-First Search Part 1
2017-03-291.1: Introduction to Session 1 - Intelligence and Learning
2017-03-28Introduction to "Intelligence and Learning"
2017-03-27Coding Challenge #67: Pong!
2017-03-26Live Stream #88: Session 1 of “Intelligence and Learning”
2017-03-25Coding Challenge #66: JavaScript Countdown Timer
2017-03-23Your Perfect Tech Talk with Saron Yitbarek
2017-03-22Coding Challenge #65.2: Visualizing a Binary Tree
2017-03-21Coding Challenge #65.1: Binary Search Tree
2017-03-20Coding Train Live 87: Timer in JavaScript, Pong and Binary Tree
2017-03-20Live Stream #87.2: Intro to "Intelligence and Learning" Class - Part 2
2017-03-20Coding Train Live #87.1: Intro to "Intelligence and Learning" Class (+ Fire Alarm!) - Part 1
2017-03-19Coding Challenge #64.4: Inverse Kinematics - Multiple
2017-03-18Coding Challenge #64.3: Inverse Kinematics - Fixed Point
2017-03-17Coding Challenge #64.2: Inverse Kinematics
2017-03-16Coding Challenge #64.1: Forward Kinematics


Tags:
JavaScript (Programming Language)
live
programming
daniel shiffman
creative coding
coding challenge
tutorial
coding
challenges
coding train
the coding train
counter
countdown
countdown coding
counter javascript
javascript timer
js timer
p5.js timer
coding challenge timer
programming timer
javascript
timer
p5.js
p5.js tutorial