Coding Challenge #66: JavaScript Countdown Timer

From the creator

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 Co

Published 2017-03-25 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.