Coding Challenge #66: JavaScript Countdown Timer

Veröffentlicht am: 25 März 2017
auf dem Kanal: 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

Auf dieser Seite können Sie das Online-Video Coding Challenge #66: JavaScript Countdown Timer mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer The Coding Train 25 März 2017 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 210,244 Mal angesehen und es wurde von 3.1 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

132