title
Coding Challenge #66: JavaScript Countdown Timer
description
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
detail
{'title': 'Coding Challenge #66: JavaScript Countdown Timer', 'heatmap': [{'end': 367.095, 'start': 333.698, 'weight': 0.854}], 'summary': 'Demonstrates creating a countdown timer in the browser using setinterval, proposing the use of millis in p5.js for precision, explaining the process of creating a countdown timer in javascript, and utilizing url query parameters for dynamic web page functionality, including the addition of sound functionality upon timer completion.', 'chapters': [{'end': 106.207, 'segs': [{'end': 87.591, 'src': 'embed', 'start': 0.389, 'weight': 0, 'content': [{'end': 6.034, 'text': 'Hello Welcome to a coding challenge where I make exactly this, a countdown clock timer in the browser.', 'start': 0.389, 'duration': 5.645}, {'end': 14.02, 'text': "Now, I did it with a function called setInterval because it's a nice demonstration how setInterval works, and it's really nice.", 'start': 6.134, 'duration': 7.886}, {'end': 19.584, 'text': "But I have to admit, I've learned since after making the challenge that it's not such an accurate way of doing it.", 'start': 14.34, 'duration': 5.244}, {'end': 26.99, 'text': "Number one is if the browser starts to get locked up, set interval isn't actually going to happen at the correct time,", 'start': 21.706, 'duration': 5.284}, {'end': 29.952, 'text': 'and so your timer can slowly get off over time.', 'start': 26.99, 'duration': 2.962}, {'end': 35.496, 'text': 'More accurate would actually be to check the milliseconds since the page was loaded,', 'start': 30.572, 'duration': 4.924}, {'end': 39.82, 'text': 'which is something you can do with a function called millis in p5..', 'start': 35.496, 'duration': 4.324}, {'end': 40.94, 'text': 'So you can watch this video.', 'start': 39.88, 'duration': 1.06}, {'end': 41.861, 'text': "I hope it'll be interesting to you.", 'start': 40.96, 'duration': 0.901}, {'end': 47.726, 'text': "I'm going to make a part two where I redo the timer using millis, and it's perhaps a bit more accurate.", 'start': 41.881, 'duration': 5.845}, {'end': 50.548, 'text': 'But both of them are interesting, useful ways to program things.', 'start': 47.786, 'duration': 2.762}, {'end': 51.629, 'text': 'Okay, enjoy.', 'start': 50.748, 'duration': 0.881}, {'end': 56.394, 'text': 'Five, four, three, two, one.', 'start': 51.649, 'duration': 4.745}, {'end': 59.277, 'text': "Hello, it's a coding challenge.", 'start': 57.796, 'duration': 1.481}, {'end': 62.338, 'text': "And this coding challenge, I'm going to do exactly that, but I'm going to program it.", 'start': 59.597, 'duration': 2.741}, {'end': 65.18, 'text': 'I am going to program a timer in JavaScript.', 'start': 62.798, 'duration': 2.382}, {'end': 71.743, 'text': "I'm going to use the p5.js library for some of the elements that I'm going to put into the web page that will do the timer thing.", 'start': 65.239, 'duration': 6.504}, {'end': 75.004, 'text': "But otherwise, it's just that, a little simple timer.", 'start': 72.083, 'duration': 2.921}, {'end': 76.025, 'text': 'This should be easy.', 'start': 75.405, 'duration': 0.62}, {'end': 76.805, 'text': "It shouldn't take very long.", 'start': 76.065, 'duration': 0.74}, {'end': 82.788, 'text': "And actually the reason why I'm building this timer is because I'm going to do a coding challenge with a timer on which I've done in the past but haven't in a while.", 'start': 76.845, 'duration': 5.943}, {'end': 84.769, 'text': 'So imagine a timer going on right now.', 'start': 83.128, 'duration': 1.641}, {'end': 86.07, 'text': "Let's say this is going to take 15 minutes.", 'start': 84.809, 'duration': 1.261}, {'end': 87.591, 'text': 'I think we can do this in 15 minutes.', 'start': 86.51, 'duration': 1.081}], 'summary': 'Coding challenge to create a countdown timer using setinterval, then learned to use millis for accuracy. will revisit with millis in part two.', 'duration': 87.202, 'max_score': 0.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw389.jpg'}], 'start': 0.389, 'title': 'Countdown timer coding challenge', 'summary': 'Demonstrates creating a countdown timer in the browser using setinterval, acknowledging its inaccuracy, and proposes using millis in p5.js for more precision. the presenter plans to create a more accurate timer in part two, emphasizing the usefulness and interest in both approaches.', 'chapters': [{'end': 106.207, 'start': 0.389, 'title': 'Countdown timer coding challenge', 'summary': 'Demonstrates creating a countdown timer in the browser using setinterval, but later acknowledges its inaccuracy and proposes using millis in p5.js for more precision. the presenter plans to create a more accurate timer in part two, emphasizing the usefulness and interest in both approaches.', 'duration': 105.818, 'highlights': ['The presenter initially creates a countdown timer in the browser using setInterval, showcasing its functionality, but subsequently acknowledges its inaccuracy when the browser is locked up, leading to a slowly drifting timer over time.', 'The presenter suggests using the millis function in p5.js library as a more accurate way of tracking time in the browser, highlighting its precision and hinting at a part two where the timer will be redone using this method.', 'The presenter plans to create a more accurate timer in part two using millis, emphasizing the interest and usefulness of both the initial setInterval approach and the proposed millis method for programming timers in JavaScript.', 'The presenter mentions using the p5.js library for creating elements in the web page for the timer, indicating the use of additional resources for the coding challenge.', 'The presenter explains the motivation behind creating the timer, which is to prepare for a coding challenge and aims to make it easy for others to replicate the functionality of a timer like the one in Google, estimating that the task can be completed in 15 minutes.']}], 'duration': 105.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw389.jpg', 'highlights': ['The presenter plans to create a more accurate timer in part two, emphasizing the usefulness and interest in both approaches.', 'The presenter suggests using the millis function in p5.js library as a more accurate way of tracking time in the browser, highlighting its precision and hinting at a part two where the timer will be redone using this method.', 'The presenter initially creates a countdown timer in the browser using setInterval, showcasing its functionality, but subsequently acknowledges its inaccuracy when the browser is locked up, leading to a slowly drifting timer over time.', 'The presenter explains the motivation behind creating the timer, which is to prepare for a coding challenge and aims to make it easy for others to replicate the functionality of a timer like the one in Google, estimating that the task can be completed in 15 minutes.', 'The presenter mentions using the p5.js library for creating elements in the web page for the timer, indicating the use of additional resources for the coding challenge.']}, {'end': 330.596, 'segs': [{'end': 164.859, 'src': 'embed', 'start': 106.207, 'weight': 3, 'content': [{'end': 111.352, 'text': "you could probably come up with a much more creative version of this or use this in some other kind of application that you're doing.", 'start': 106.207, 'duration': 5.145}, {'end': 114.913, 'text': "Okay, so what do we need to get started? Let's leave this page.", 'start': 111.992, 'duration': 2.921}, {'end': 116.734, 'text': 'Let me go to my code here.', 'start': 115.494, 'duration': 1.24}, {'end': 119.655, 'text': "So there's really nothing in my code but the setup function.", 'start': 117.014, 'duration': 2.641}, {'end': 124.057, 'text': 'And the setup function with the p5.js library is like the page is loaded function.', 'start': 119.675, 'duration': 4.382}, {'end': 126.839, 'text': "So it's the place you can put all your code when it starts.", 'start': 124.097, 'duration': 2.742}, {'end': 132.921, 'text': 'But actually what I want to do before I do that is I want to add something to the page itself.', 'start': 127.299, 'duration': 5.622}, {'end': 136.723, 'text': "So I'm just going to add a paragraph element and I'm going to put timer in it.", 'start': 133.301, 'duration': 3.422}, {'end': 140.38, 'text': "And let's just do that for a second.", 'start': 138.559, 'duration': 1.821}, {'end': 142.802, 'text': 'And I am going to hit refresh.', 'start': 141.161, 'duration': 1.641}, {'end': 145.204, 'text': "And you can see, look, there's that paragraph element there at the top.", 'start': 142.862, 'duration': 2.342}, {'end': 148.006, 'text': "Now, I forgot there's some styling in here that I don't want.", 'start': 145.444, 'duration': 2.562}, {'end': 148.647, 'text': 'So there it is.', 'start': 148.227, 'duration': 0.42}, {'end': 150.168, 'text': "I'm going to make it bigger.", 'start': 148.667, 'duration': 1.501}, {'end': 152.53, 'text': "So you can see, that's all I've got so far.", 'start': 150.448, 'duration': 2.082}, {'end': 157.814, 'text': 'But what I want to do is display the amount of time left in that paragraph element.', 'start': 152.93, 'duration': 4.884}, {'end': 159.695, 'text': "And I'm going to do that with JavaScript.", 'start': 158.094, 'duration': 1.601}, {'end': 162.237, 'text': "I'm going to control that paragraph through JavaScript.", 'start': 159.715, 'duration': 2.522}, {'end': 164.859, 'text': 'So to be able to access it, I need to give it an ID.', 'start': 162.478, 'duration': 2.381}], 'summary': 'Using p5.js to set up a timer display through javascript with an added paragraph element.', 'duration': 58.652, 'max_score': 106.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw106207.jpg'}, {'end': 286.895, 'src': 'embed', 'start': 237.392, 'weight': 0, 'content': [{'end': 246.415, 'text': 'And now what I want to do is I want to every second, and I could do this less than a second, but my timer is only going to be in seconds.', 'start': 237.392, 'duration': 9.023}, {'end': 249.796, 'text': 'I want to every second increase this number.', 'start': 246.835, 'duration': 2.961}, {'end': 251.016, 'text': 'So I want it just to count seconds.', 'start': 249.836, 'duration': 1.18}, {'end': 252.097, 'text': "Let's start as that first.", 'start': 251.056, 'duration': 1.041}, {'end': 254.877, 'text': 'Guess what? There is a function in JavaScript.', 'start': 252.437, 'duration': 2.44}, {'end': 256.178, 'text': 'This is not p5 now.', 'start': 254.897, 'duration': 1.281}, {'end': 259.499, 'text': 'This is a native JavaScript function called setInterval.', 'start': 256.458, 'duration': 3.041}, {'end': 263.38, 'text': 'And what I could do with setInterval is I could say time it.', 'start': 260.459, 'duration': 2.921}, {'end': 266.109, 'text': '1,000.', 'start': 265.625, 'duration': 0.484}, {'end': 275.208, 'text': 'Now what does this do? SetInterval is saying, hey, I want a certain event to happen every so often.', 'start': 266.109, 'duration': 9.099}, {'end': 277.91, 'text': "There's also setTimeout for I just want this event to happen once.", 'start': 275.368, 'duration': 2.542}, {'end': 281.031, 'text': 'But I want an event to happen every so often.', 'start': 278.37, 'duration': 2.661}, {'end': 285.394, 'text': 'I want it to happen every 1,000 milliseconds.', 'start': 281.252, 'duration': 4.142}, {'end': 286.895, 'text': '1,000 milliseconds is one second.', 'start': 285.414, 'duration': 1.481}], 'summary': 'Using setinterval function in javascript to increase a number every second.', 'duration': 49.503, 'max_score': 237.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw237392.jpg'}], 'start': 106.207, 'title': 'Creating timers with javascript', 'summary': "Covers creating timers on webpages using p5.js, adding elements to display the timer, and controlling its display through javascript. it also explains using javascript's setinterval function to create a timer that counts seconds, triggering an event every 1,000 milliseconds to update the timer display.", 'chapters': [{'end': 185.533, 'start': 106.207, 'title': 'Creating a timer with javascript', 'summary': 'Discusses using javascript to create a timer on a webpage using the p5.js library, adding a paragraph element to display the timer, and controlling its display through javascript.', 'duration': 79.326, 'highlights': ['Using the setup function with the p5.js library as the page is loaded function The setup function with the p5.js library serves as the page is loaded function for adding code to start.', 'Adding a paragraph element to display the timer on the webpage A paragraph element is added to the webpage to display the timer.', 'Controlling the paragraph display through JavaScript by giving it an ID The paragraph display is controlled through JavaScript by assigning it an ID.']}, {'end': 330.596, 'start': 185.973, 'title': 'Javascript timer using setinterval', 'summary': "Discusses using javascript's setinterval function to create a timer that counts seconds, where setinterval is utilized to trigger an event every 1,000 milliseconds (1 second) to update the timer display.", 'duration': 144.623, 'highlights': ['Utilizing setInterval to trigger an event every 1,000 milliseconds (1 second) to update the timer display The setInterval function is used to specify that an event, in this case, updating the timer display, should occur every 1,000 milliseconds (1 second).', 'Using the native JavaScript function setInterval to create a timer that counts seconds The chapter explains how to use the setInterval function to create a timer that counts seconds by triggering an event every 1,000 milliseconds (1 second) to update the timer display.', 'Explanation of the setInterval function and its purpose in JavaScript The chapter provides an explanation of the setInterval function in JavaScript, which is utilized to schedule the execution of a function at specified intervals, in this case, every 1,000 milliseconds (1 second) for the timer update.']}], 'duration': 224.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw106207.jpg', 'highlights': ['Using the native JavaScript function setInterval to create a timer that counts seconds', 'Explanation of the setInterval function and its purpose in JavaScript', 'Utilizing setInterval to trigger an event every 1,000 milliseconds (1 second) to update the timer display', 'Adding a paragraph element to display the timer on the webpage', 'Controlling the paragraph display through JavaScript by giving it an ID', 'Using the setup function with the p5.js library as the page is loaded function']}, {'end': 676.538, 'segs': [{'end': 435.646, 'src': 'heatmap', 'start': 333.698, 'weight': 0, 'content': [{'end': 343.858, 'text': "I'm going to have a global variable and I'm going to call it counter and I'm going to set it equal to zero and in time it I'm going to say counter plus,", 'start': 333.698, 'duration': 10.16}, {'end': 348.161, 'text': 'plus and timer.html.', 'start': 343.858, 'duration': 4.303}, {'end': 348.561, 'text': 'counter.', 'start': 348.161, 'duration': 0.4}, {'end': 360.468, 'text': 'So what this is going to do is now, it is going to every second increase the counter, and then update the DOM element.', 'start': 349.301, 'duration': 11.167}, {'end': 361.989, 'text': 'Okay, here we go.', 'start': 361.188, 'duration': 0.801}, {'end': 367.095, 'text': 'Zero, one, two, three, four.', 'start': 363.547, 'duration': 3.548}, {'end': 375.71, 'text': "Thank you! Okay, coding! Okay, anyway, so we get a timer and it's counting now.", 'start': 368.378, 'duration': 7.332}, {'end': 377.17, 'text': "Here's the thing.", 'start': 375.77, 'duration': 1.4}, {'end': 378.511, 'text': 'I Want it to count backwards?', 'start': 377.17, 'duration': 1.341}, {'end': 385.793, 'text': 'So I wanted to count down to zero, not up up because I want a countdown timer.', 'start': 379.391, 'duration': 6.402}, {'end': 386.673, 'text': 'I mean we could.', 'start': 385.793, 'duration': 0.88}, {'end': 392.235, 'text': 'and also, when it gets to 60, I wanted to say one minute in zero seconds and not 61 seconds.', 'start': 386.673, 'duration': 5.562}, {'end': 394.695, 'text': 'these are, these are two different problems.', 'start': 392.235, 'duration': 2.46}, {'end': 398.477, 'text': "I don't know which to tackle first, and Let's do the counting down.", 'start': 394.695, 'duration': 3.782}, {'end': 399.418, 'text': 'Why not?', 'start': 399.018, 'duration': 0.4}, {'end': 404.563, 'text': "Okay, so let's say okay, so what I need is the.", 'start': 399.999, 'duration': 4.564}, {'end': 411.229, 'text': "I need a variable like lifespan or timers, but what's a good word for the amount of time left?", 'start': 404.563, 'duration': 6.666}, {'end': 417.435, 'text': 'Time left equals.', 'start': 415.553, 'duration': 1.882}, {'end': 426.34, 'text': "Time left equals, let's just say, 60.", 'start': 422.438, 'duration': 3.902}, {'end': 427.901, 'text': 'So what I want to do then?', 'start': 426.34, 'duration': 1.561}, {'end': 435.646, 'text': 'if time left is 60, what I want is to always update Time left minus counter.', 'start': 427.901, 'duration': 7.745}], 'summary': 'Developing a countdown timer feature with initial time set to 60 seconds.', 'duration': 104.089, 'max_score': 333.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw333698.jpg'}, {'end': 554.52, 'src': 'embed', 'start': 527.43, 'weight': 1, 'content': [{'end': 531.351, 'text': 'So I could convert that into seconds, but I just want that number two.', 'start': 527.43, 'duration': 3.921}, {'end': 533.672, 'text': 'And so what I can actually do is I can say floor.', 'start': 531.791, 'duration': 1.881}, {'end': 541.591, 'text': 'Floor is an operation to a number that takes off the decimal place.', 'start': 535.106, 'duration': 6.485}, {'end': 545.453, 'text': "Even if it was 2.9999999999, I'm still going to get 2.", 'start': 541.711, 'duration': 3.742}, {'end': 552.398, 'text': 'So the number of minutes is floor seconds divided by 60, and then how many seconds do I have left??', 'start': 545.453, 'duration': 6.945}, {'end': 554.52, 'text': 'The number of seconds is what?', 'start': 552.979, 'duration': 1.541}], 'summary': 'Convert seconds to minutes and seconds, using the floor operation to round down.', 'duration': 27.09, 'max_score': 527.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw527430.jpg'}, {'end': 614.498, 'src': 'embed', 'start': 582.346, 'weight': 5, 'content': [{'end': 588.068, 'text': 'So all I need to do now is say, I can use the modulus operator.', 'start': 582.346, 'duration': 5.722}, {'end': 590.509, 'text': '122 modulus 60, two.', 'start': 588.088, 'duration': 2.421}, {'end': 594.53, 'text': "Modulus gives you the remainder of division, so that's the number of seconds left.", 'start': 591.129, 'duration': 3.401}, {'end': 598.012, 'text': 'So S modulus 60.', 'start': 594.891, 'duration': 3.121}, {'end': 600.753, 'text': 'So minutes is S divided by 60, get rid of the decimal.', 'start': 598.012, 'duration': 2.741}, {'end': 605.694, 'text': 'Seconds is S modulus 60, or divide the remainder of the division with 60.', 'start': 601.033, 'duration': 4.661}, {'end': 614.498, 'text': "So now if I go here, And then I'm going to say return minutes plus a colon plus seconds.", 'start': 605.694, 'duration': 8.804}], 'summary': 'Using modulus operator to calculate minutes and seconds from total seconds.', 'duration': 32.152, 'max_score': 582.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw582346.jpg'}], 'start': 331.557, 'title': 'Creating countdown timer in javascript', 'summary': 'Explains the process of creating a countdown timer in javascript, detailing the use of a global variable, updating the dom element every second, and converting seconds into minutes and seconds to achieve the specified time format.', 'chapters': [{'end': 435.646, 'start': 331.557, 'title': 'Creating countdown timer in javascript', 'summary': "Explains the process of creating a countdown timer in javascript, detailing the use of a global variable 'counter' to update the dom element every second, the desire for the timer to count down to zero and display 'one minute and zero seconds' instead of '61 seconds', and the introduction of a variable 'time left' to facilitate the countdown.", 'duration': 104.089, 'highlights': ["Introducing a global variable 'counter' to increment and update the DOM element every second, facilitating the countdown functionality.", "Desiring the timer to count down to zero and display 'one minute and zero seconds' instead of '61 seconds', posing a specific requirement for the countdown functionality.", "Introducing a variable 'time left' to facilitate the countdown, with an initial value of 60, outlining the approach for updating 'time left' with the difference between the set time and the 'counter'."]}, {'end': 676.538, 'start': 435.646, 'title': 'Countdown timer function', 'summary': 'Explains how to create a function to convert seconds into minutes and seconds, using the floor and modulus operators to calculate the minutes and seconds left, achieving a countdown timer with the specified time format.', 'duration': 240.892, 'highlights': ["The function 'convert seconds' is created to convert the total seconds into minutes and seconds, utilizing the floor operation to obtain the number of minutes and the modulus operator to determine the remaining seconds, resulting in a formatted output of minutes and seconds.", 'The floor operation is utilized to calculate the number of minutes by dividing the total seconds by 60 and removing the decimal part, ensuring the correct integer value for the minutes in the countdown timer.', 'The modulus operator is employed to compute the remaining seconds by obtaining the remainder of the division of total seconds by 60, enabling the accurate display of the seconds left in the countdown timer.']}], 'duration': 344.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw331557.jpg', 'highlights': ["Introducing a global variable 'counter' to increment and update the DOM element every second, facilitating the countdown functionality.", "The function 'convert seconds' is created to convert the total seconds into minutes and seconds, utilizing the floor operation to obtain the number of minutes and the modulus operator to determine the remaining seconds, resulting in a formatted output of minutes and seconds.", "Desiring the timer to count down to zero and display 'one minute and zero seconds' instead of '61 seconds', posing a specific requirement for the countdown functionality.", "Introducing a variable 'time left' to facilitate the countdown, with an initial value of 60, outlining the approach for updating 'time left' with the difference between the set time and the 'counter'.", 'The floor operation is utilized to calculate the number of minutes by dividing the total seconds by 60 and removing the decimal part, ensuring the correct integer value for the minutes in the countdown timer.', 'The modulus operator is employed to compute the remaining seconds by obtaining the remainder of the division of total seconds by 60, enabling the accurate display of the seconds left in the countdown timer.']}, {'end': 953.997, 'segs': [{'end': 722.632, 'src': 'embed', 'start': 676.779, 'weight': 3, 'content': [{'end': 679.3, 'text': 'So I can use number format to say I always want two digits.', 'start': 676.779, 'duration': 2.521}, {'end': 680.08, 'text': 'Oh, this is good.', 'start': 679.52, 'duration': 0.56}, {'end': 683.802, 'text': 'So I can say number format minutes, two.', 'start': 680.901, 'duration': 2.901}, {'end': 686.904, 'text': 'Number format seconds, two.', 'start': 685.083, 'duration': 1.821}, {'end': 692.027, 'text': 'And now if I do that and go back, there we go.', 'start': 687.224, 'duration': 4.803}, {'end': 700.107, 'text': "Now let's change it to five minutes, which is, 300 seconds There we go now.", 'start': 692.247, 'duration': 7.86}, {'end': 705.269, 'text': 'This is awkward because, really, if I want to have a timer, I probably want to say the number of minutes and, of course,', 'start': 700.147, 'duration': 5.122}, {'end': 709.371, 'text': 'I might want to say the number of minutes and seconds, all that sort of stuff.', 'start': 705.269, 'duration': 4.102}, {'end': 711.492, 'text': "but Now I've got this timer.", 'start': 709.371, 'duration': 2.121}, {'end': 714.733, 'text': 'what I want to do, actually what I want to be able to do, is just add a.', 'start': 711.492, 'duration': 3.241}, {'end': 719.291, 'text': 'I want to be able to add something to the URL.', 'start': 716.67, 'duration': 2.621}, {'end': 721.531, 'text': 'So this might be something you may or may not be familiar with.', 'start': 719.531, 'duration': 2}, {'end': 722.632, 'text': "You've probably seen this.", 'start': 721.551, 'duration': 1.081}], 'summary': 'Demonstration of setting time format to two digits for minutes and seconds, and adjusting timer length to 5 minutes (300 seconds)', 'duration': 45.853, 'max_score': 676.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw676779.jpg'}, {'end': 779.286, 'src': 'embed', 'start': 747.225, 'weight': 2, 'content': [{'end': 748.506, 'text': 'The key is min for minutes.', 'start': 747.225, 'duration': 1.281}, {'end': 750.727, 'text': 'The number is 5.', 'start': 748.866, 'duration': 1.861}, {'end': 753.73, 'text': "And I actually probably don't even, I could just do this, something simpler.", 'start': 750.727, 'duration': 3.003}, {'end': 754.99, 'text': "I don't need to be so elaborate.", 'start': 753.75, 'duration': 1.24}, {'end': 757.332, 'text': "But there's actually a thing in p5.", 'start': 755.231, 'duration': 2.101}, {'end': 765.336, 'text': 'Query, how do I go back here? Query, URL params, oh yeah.', 'start': 759.411, 'duration': 5.925}, {'end': 768.118, 'text': 'So this is what I want, URL params.', 'start': 765.736, 'duration': 2.382}, {'end': 774.482, 'text': 'This function is a function that gives you those URL parameters dynamically.', 'start': 768.478, 'duration': 6.004}, {'end': 779.286, 'text': "It's a p5 function that wraps all this native JavaScript you would need to do this.", 'start': 775.183, 'duration': 4.103}], 'summary': "Using p5's url params function simplifies dynamic parameter retrieval.", 'duration': 32.061, 'max_score': 747.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw747225.jpg'}, {'end': 953.997, 'src': 'embed', 'start': 906.051, 'weight': 0, 'content': [{'end': 906.612, 'text': '50 minute timer.', 'start': 906.051, 'duration': 0.561}, {'end': 911.795, 'text': 'So now I have a generic web page that any amount that I plug into it, it runs a timer.', 'start': 906.652, 'duration': 5.143}, {'end': 915.698, 'text': "Now, if I say 65, it's not giving me one hour.", 'start': 911.835, 'duration': 3.863}, {'end': 921.762, 'text': "So I'm going to leave this as an exercise for you, but let's at least make it ding when it gets to the end.", 'start': 916.338, 'duration': 5.424}, {'end': 924.444, 'text': 'Of course, now I can only make it a one minute timer.', 'start': 921.782, 'duration': 2.662}, {'end': 927.566, 'text': "So let's leave it at one minute for a second.", 'start': 925.945, 'duration': 1.621}, {'end': 929.788, 'text': "So I'm going to, I have a nice little sound here.", 'start': 927.787, 'duration': 2.001}, {'end': 933.871, 'text': "I'm going to, it's called, it's a file in my folder called ding.mp3.", 'start': 930.248, 'duration': 3.623}, {'end': 936.892, 'text': 'And I am going to.', 'start': 935.772, 'duration': 1.12}, {'end': 946.075, 'text': "when the timer is up, I am going to say I'm going to add a function preload, which is a function for p5, where I can load media assets.", 'start': 936.892, 'duration': 9.183}, {'end': 953.997, 'text': "And I'm going to say var ding, ding equals load sound ding.mp3.", 'start': 947.075, 'duration': 6.922}], 'summary': 'Creating a generic web page with a 1-minute timer and adding a ding sound at the end.', 'duration': 47.946, 'max_score': 906.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw906051.jpg'}], 'start': 676.779, 'title': 'Using url query parameters for dynamic web page functionality', 'summary': "Demonstrates using number format to display minutes and seconds and discusses the need to add a feature to the url for a timer. additionally, it explores the usage of url query parameters to dynamically adjust web page functionality, including the p5 function 'url params' and its application in creating a generic web page timer that can be adjusted via the url, and the addition of sound functionality upon timer completion.", 'chapters': [{'end': 722.632, 'start': 676.779, 'title': 'Url timer format', 'summary': 'Demonstrates using number format to display minutes and seconds, followed by discussing the need to add a feature to the url for a timer.', 'duration': 45.853, 'highlights': ['The use of number format to display minutes and seconds, ensuring two digits for each (e.g. 05 minutes, 300 seconds).', 'Discussion on the need to add a feature to the URL for a timer, indicating a desire for additional functionality.']}, {'end': 953.997, 'start': 722.912, 'title': 'Using url query parameters for dynamic web page functionality', 'summary': "Discusses the usage of url query parameters to dynamically adjust web page functionality, including the p5 function 'url params' and its application in creating a generic web page timer that can be adjusted via the url, and the addition of sound functionality upon timer completion.", 'duration': 231.085, 'highlights': ["The p5 function 'URL params' dynamically retrieves URL parameters for web page functionality.", 'Demonstrates the creation of a generic web page timer that can be adjusted via URL parameters, with an example of setting a 50-minute timer.', "Introduces the addition of sound functionality, utilizing the 'load sound' function in p5, to play a sound upon timer completion."]}], 'duration': 277.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw676779.jpg', 'highlights': ['Demonstrates the creation of a generic web page timer that can be adjusted via URL parameters, with an example of setting a 50-minute timer.', "Introduces the addition of sound functionality, utilizing the 'load sound' function in p5, to play a sound upon timer completion.", "The p5 function 'URL params' dynamically retrieves URL parameters for web page functionality.", 'The use of number format to display minutes and seconds, ensuring two digits for each (e.g. 05 minutes, 300 seconds).', 'Discussion on the need to add a feature to the URL for a timer, indicating a desire for additional functionality.']}, {'end': 1294.097, 'segs': [{'end': 1064.337, 'src': 'embed', 'start': 1030.582, 'weight': 0, 'content': [{'end': 1037.285, 'text': "So I'm going to say clear interval interval and set the counter back to zero, Or I'm going to comment that on.", 'start': 1030.582, 'duration': 6.703}, {'end': 1038.746, 'text': 'so this should actually stop it.', 'start': 1037.285, 'duration': 1.461}, {'end': 1040.567, 'text': "So let's, let's make that.", 'start': 1038.746, 'duration': 1.821}, {'end': 1045.348, 'text': "let's just give it like a 10 second timer for testing when I don't pass in minutes.", 'start': 1040.567, 'duration': 4.781}, {'end': 1046.924, 'text': 'So now here we go.', 'start': 1046.262, 'duration': 0.662}, {'end': 1048.544, 'text': '10, 9, 8, 7, 6, 5, 4, 3, 2, 1.', 'start': 1046.944, 'duration': 1.6}, {'end': 1064.337, 'text': 'Ta-da! There you go, JavaScript counter made with p5.js and some other stuff.', 'start': 1048.547, 'duration': 15.79}], 'summary': 'Javascript counter stopped after 10 seconds.', 'duration': 33.755, 'max_score': 1030.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw1030582.jpg'}, {'end': 1172.152, 'src': 'embed', 'start': 1145.153, 'weight': 2, 'content': [{'end': 1151.057, 'text': "Because what I want to do, instead of having the counter, is, and I'm going to call this current time.", 'start': 1145.153, 'duration': 5.904}, {'end': 1156.401, 'text': 'I want to say current time equals.', 'start': 1151.077, 'duration': 5.324}, {'end': 1157.021, 'text': 'what do I want?', 'start': 1156.401, 'duration': 0.62}, {'end': 1167.247, 'text': 'I want the current millis minus the start time and then what I want to do is divide that by 1,000..', 'start': 1157.582, 'duration': 9.665}, {'end': 1172.152, 'text': "to get the number of seconds, right? Because if 5,000 milliseconds have passed, that's actually five seconds.", 'start': 1167.247, 'duration': 4.905}], 'summary': 'Code calculates current time in seconds using millis and start time', 'duration': 26.999, 'max_score': 1145.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw1145153.jpg'}], 'start': 955.637, 'title': 'Javascript timer implementation', 'summary': 'Covers creating a javascript timer with p5.js, including stopping, restarting, using set interval and clear interval functions, with a 10-second demonstration. it also discusses the implementation of a more accurate timer using the millis function and ensuring precision.', 'chapters': [{'end': 1102.181, 'start': 955.637, 'title': 'Javascript timer with p5.js', 'summary': 'Explains how to create a javascript timer using p5.js, including stopping and restarting the timer, and using set interval and clear interval functions, with a 10-second demonstration and the potential for adding creative features and variations.', 'duration': 146.544, 'highlights': ['Creating a JavaScript timer using p5.js The transcript explains the process of creating a JavaScript timer using p5.js, demonstrating the use of counter, time left, and ding.play for audio cues.', 'Stopping and restarting the timer The chapter discusses the methods for stopping and restarting the timer, including setting the counter back to zero and using clear interval function.', 'Demonstration with a 10-second timer A 10-second timer is demonstrated, providing a practical example of the timer functionality.', 'Potential for adding creative features and variations The chapter mentions the potential for adding creative features and variations to the timer, emphasizing the versatility and customization options.']}, {'end': 1294.097, 'start': 1102.201, 'title': 'Timer accuracy and implementation', 'summary': 'Discusses the implementation of a more accurate timer using the millis function, which counts the number of milliseconds that have passed since the start of the program, and the division by 1,000 to obtain the number of seconds, ensuring a more precise timer.', 'duration': 191.896, 'highlights': ['The millis function is utilized to measure the elapsed time in milliseconds, providing a more accurate timer implementation.', 'The current time is calculated by subtracting the start time from the current millis and then dividing by 1,000 to obtain the number of seconds, ensuring precision.', 'The use of floor function to round down the calculated time to remove decimal places, ensuring a more straightforward and precise timer.']}], 'duration': 338.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/MLtAMg9_Svw/pics/MLtAMg9_Svw955637.jpg', 'highlights': ['Creating a JavaScript timer using p5.js, demonstrating counter, time left, and audio cues', 'Demonstration of a 10-second timer, providing a practical example of the timer functionality', 'Utilizing millis function for a more accurate timer implementation', 'Calculation of elapsed time in milliseconds, ensuring precision']}], 'highlights': ['Demonstrates creating a countdown timer in the browser using setinterval, proposing the use of millis in p5.js for precision, explaining the process of creating a countdown timer in javascript, and utilizing url query parameters for dynamic web page functionality, including the addition of sound functionality upon timer completion.', 'The presenter suggests using the millis function in p5.js library as a more accurate way of tracking time in the browser, highlighting its precision and hinting at a part two where the timer will be redone using this method.', 'Demonstrates the creation of a generic web page timer that can be adjusted via URL parameters, with an example of setting a 50-minute timer.', "Introducing a global variable 'counter' to increment and update the DOM element every second, facilitating the countdown functionality.", 'The presenter initially creates a countdown timer in the browser using setInterval, showcasing its functionality, but subsequently acknowledges its inaccuracy when the browser is locked up, leading to a slowly drifting timer over time.']}