Coding Challenge #66: JavaScript Countdown Timer

Publicado el: 25 marzo 2017
en el canal de: 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

En esta página del sitio puede ver el video en línea Coding Challenge #66: JavaScript Countdown Timer de Duración hora minuto segunda en buena calidad , que subió el usuario The Coding Train 25 marzo 2017, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 210,244 veces y le gustó 3.1 mil a los espectadores. Disfruta viendo!

18,715

849