title
Simple Javascript Countdown Tutorial

description
Check out my courses to become a PRO! https://developedbyed.com/ 🎁Support me on Patreon for exclusive episodes, discord and more! https://www.patreon.com/dev_ed Have you ever wanted to implement a super simple javascript countdown to your website? No? okay goodbye 🛴 Follow me on: Twitch: https://www.twitch.tv/developedbyed Twitter: https://twitter.com/developedbyed Instagram: https://www.instagram.com/developedbyed/ Github: https://github.com/developedbyed/ #javascript

detail
{'title': 'Simple Javascript Countdown Tutorial', 'heatmap': [{'end': 332.408, 'start': 305.447, 'weight': 0.743}, {'end': 581.692, 'start': 567.097, 'weight': 0.713}, {'end': 706.264, 'start': 690.921, 'weight': 0.849}, {'end': 915.317, 'start': 884.932, 'weight': 0.773}, {'end': 1206.439, 'start': 1191.104, 'weight': 0.746}, {'end': 1231.778, 'start': 1217.676, 'weight': 0.717}, {'end': 1277.988, 'start': 1258.319, 'weight': 0.855}], 'summary': 'Learn to create a simple countdown project with html, css, and javascript, setting up sections for day, hour, minute, and second, styling web page sections, and creating countdown functions with javascript, including time calculation and remainder calculation.', 'chapters': [{'end': 113.636, 'segs': [{'end': 113.636, 'src': 'embed', 'start': 43.531, 'weight': 0, 'content': [{'end': 49.874, 'text': "Just a simple little thing here that says we're opening up soon and then you can set the timer and it's going to nicely count down,", 'start': 43.531, 'duration': 6.343}, {'end': 53.055, 'text': "because it's a fucking countdown obviously.", 'start': 49.874, 'duration': 3.181}, {'end': 61.679, 'text': "So you can make this if you're making a website and you want to have a little countdown or maybe you're counting down your days till you die.", 'start': 53.996, 'duration': 7.683}, {'end': 62.74, 'text': "That's fine as well.", 'start': 61.719, 'duration': 1.021}, {'end': 69.723, 'text': "Or maybe you want to meet somebody special and then you do a little countdown by the time you get together and then you're going to.", 'start': 63.22, 'duration': 6.503}, {'end': 72.39, 'text': "Okay, let's get going.", 'start': 71.169, 'duration': 1.221}, {'end': 79.656, 'text': 'So all I have here is just a little file, just an index HTML.', 'start': 72.79, 'duration': 6.866}, {'end': 81.237, 'text': "There's nothing really added to it.", 'start': 79.676, 'duration': 1.561}, {'end': 85.72, 'text': 'I just added a font so you can do that as well.', 'start': 83.298, 'duration': 2.422}, {'end': 88.763, 'text': 'Just link my style.css and app.js.', 'start': 86, 'duration': 2.763}, {'end': 89.283, 'text': 'All right.', 'start': 89.043, 'duration': 0.24}, {'end': 90.524, 'text': 'So you should be able to do this.', 'start': 89.303, 'duration': 1.221}, {'end': 91.805, 'text': "It's super easy.", 'start': 90.944, 'duration': 0.861}, {'end': 95.628, 'text': 'And the style.css is pretty much empty.', 'start': 93.126, 'duration': 2.502}, {'end': 100.752, 'text': 'Just removing the basic styles and just adding that font and the app.js is completely empty.', 'start': 96.008, 'duration': 4.744}, {'end': 102.673, 'text': 'So nothing to worry about.', 'start': 101.452, 'duration': 1.221}, {'end': 109.575, 'text': "I have an illustration here that I got off the internet, But again I'm gonna link everything in the description on github or something.", 'start': 102.673, 'duration': 6.902}, {'end': 113.636, 'text': "but it's really not that necessary, to be honest, It's just a random picture.", 'start': 109.575, 'duration': 4.061}], 'summary': 'A tutorial on creating a simple countdown for a website with basic files and instructions.', 'duration': 70.105, 'max_score': 43.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg43531.jpg'}], 'start': 2.951, 'title': 'Creating a countdown with deved', 'summary': 'Introduces the creation of a countdown project, emphasizing the simplicity of the process and discussing the required components, including html, css, and javascript. it also highlights the potential applications for the countdown.', 'chapters': [{'end': 113.636, 'start': 2.951, 'title': 'Creating a countdown with deved', 'summary': 'Introduces the creation of a countdown, offering insights into a new project and discussing the components required, including html, css, and javascript, emphasizing the simplicity of the process and the potential applications for the countdown.', 'duration': 110.685, 'highlights': ['The chapter discusses the creation of a countdown, demonstrating a new project idea and highlighting the components needed, including HTML, CSS, and JavaScript.', "The speaker emphasizes the simplicity of the process, indicating that it is 'super easy' to achieve, potentially appealing to a wide audience.", 'The potential applications for the countdown are mentioned, including its use in website development or personal events, such as counting down days until a special occasion or meeting someone.', 'The speaker mentions the availability of resources, such as fonts and illustrations, and offers to provide links for further guidance, contributing to the accessibility of the project.']}], 'duration': 110.685, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg2951.jpg', 'highlights': ['The chapter discusses the creation of a countdown, emphasizing the components needed: HTML, CSS, and JavaScript.', "The speaker emphasizes the simplicity of the process, indicating that it is 'super easy' to achieve.", 'The potential applications for the countdown are mentioned, including its use in website development or personal events.', 'The speaker mentions the availability of resources, such as fonts and illustrations, contributing to the accessibility of the project.']}, {'end': 293, 'segs': [{'end': 204.337, 'src': 'embed', 'start': 162.018, 'weight': 0, 'content': [{'end': 167.841, 'text': 'So when the timer goes to zero, you can remove this page and then load up an actual website.', 'start': 162.018, 'duration': 5.823}, {'end': 169.102, 'text': 'Maybe we can do that in the future.', 'start': 167.901, 'duration': 1.201}, {'end': 170.342, 'text': "That's actually a cool idea.", 'start': 169.142, 'duration': 1.2}, {'end': 172.983, 'text': "Why haven't I thought about this sooner? Damn it.", 'start': 171.183, 'duration': 1.8}, {'end': 176.105, 'text': "Anyway So in this countdown, we're going to have a div.", 'start': 173.704, 'duration': 2.401}, {'end': 184.283, 'text': "Now, the reason why I'm adding a div is because this is, uh, because I'm going to add flex box to this.", 'start': 176.205, 'duration': 8.078}, {'end': 186.324, 'text': "And basically I'm going to have the image down below.", 'start': 184.503, 'duration': 1.821}, {'end': 188.366, 'text': 'So I want to basically align them nicely.', 'start': 186.444, 'duration': 1.922}, {'end': 193.449, 'text': "So in here, I'm just going to add the H2 saying we are opening up soon.", 'start': 189.006, 'duration': 4.443}, {'end': 195.411, 'text': 'All right.', 'start': 193.469, 'duration': 1.942}, {'end': 196.251, 'text': 'Or whatever you want.', 'start': 195.431, 'duration': 0.82}, {'end': 200.114, 'text': "And then in here, we're going to have a countdown like this.", 'start': 197.312, 'duration': 2.802}, {'end': 202.115, 'text': 'All right.', 'start': 200.134, 'duration': 1.981}, {'end': 204.337, 'text': "And in here, we're going to have the containers.", 'start': 202.195, 'duration': 2.142}], 'summary': 'Creating a countdown with flexbox and a message for an upcoming website launch.', 'duration': 42.319, 'max_score': 162.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg162018.jpg'}], 'start': 113.656, 'title': 'Setting up a countdown timer with html', 'summary': 'Covers the process of creating a countdown timer using html, which involves setting up sections for the countdown, integrating flex box for alignment, and including containers for day, hour, minute, and second.', 'chapters': [{'end': 293, 'start': 113.656, 'title': 'Countdown timer setup with html', 'summary': 'Discusses setting up a countdown timer using html, including creating sections for the countdown, adding flex box for alignment, and incorporating containers for day, hour, minute, and second.', 'duration': 179.344, 'highlights': ['Creating sections for the countdown, adding flex box for alignment, and incorporating containers for day, hour, minute, and second.', 'Discussing the idea of removing the countdown page and loading an actual website when the timer reaches zero.', 'Describing the process of adding HTML elements such as H2 and containers for day, hour, minute, and second within the countdown section.']}], 'duration': 179.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg113656.jpg', 'highlights': ['Creating sections for the countdown, adding flex box for alignment, and incorporating containers for day, hour, minute, and second.', 'Describing the process of adding HTML elements such as H2 and containers for day, hour, minute, and second within the countdown section.', 'Discussing the idea of removing the countdown page and loading an actual website when the timer reaches zero.']}, {'end': 616.09, 'segs': [{'end': 381.775, 'src': 'heatmap', 'start': 305.447, 'weight': 0, 'content': [{'end': 309.07, 'text': "So we're not filled, we're not filled up with so many divs.", 'start': 305.447, 'duration': 3.623}, {'end': 318.878, 'text': "Okay So basically after this big div here, all right here, we were, we're just going to add our image, image example, eight SVG.", 'start': 310.011, 'duration': 8.867}, {'end': 319.799, 'text': 'Fantastic name.', 'start': 318.978, 'duration': 0.821}, {'end': 322.601, 'text': 'Okay Wow.', 'start': 320.66, 'duration': 1.941}, {'end': 323.402, 'text': "And it's done.", 'start': 322.781, 'duration': 0.621}, {'end': 324.603, 'text': "Thank you very, I'm joking.", 'start': 323.562, 'duration': 1.041}, {'end': 325.484, 'text': 'This is the one.', 'start': 324.923, 'duration': 0.561}, {'end': 326.925, 'text': 'All right.', 'start': 326.665, 'duration': 0.26}, {'end': 329.546, 'text': 'So everything is good.', 'start': 328.405, 'duration': 1.141}, {'end': 332.408, 'text': 'Now, all we need to do is add a little bit of styling.', 'start': 329.886, 'duration': 2.522}, {'end': 336.171, 'text': "So what we're going to do is I'm just going to grab the H2.", 'start': 333.169, 'duration': 3.002}, {'end': 338.754, 'text': "Cause that's the only thing I have the big title.", 'start': 336.792, 'duration': 1.962}, {'end': 340.855, 'text': "I'm just going to add a big font size.", 'start': 338.934, 'duration': 1.921}, {'end': 344.298, 'text': 'So really big like that five Ram is fine.', 'start': 341.776, 'duration': 2.522}, {'end': 347.721, 'text': "And then we're going to do a font weight of bold.", 'start': 345.139, 'duration': 2.582}, {'end': 354.812, 'text': 'Why can I not switch between these in an easy fashion? There we go.', 'start': 349.349, 'duration': 5.463}, {'end': 355.972, 'text': "That's okay.", 'start': 355.272, 'duration': 0.7}, {'end': 357.333, 'text': 'So nice and big and bold.', 'start': 356.012, 'duration': 1.321}, {'end': 361.495, 'text': "Let's go down here to the coming soon section.", 'start': 359.314, 'duration': 2.181}, {'end': 364.356, 'text': 'All right, so this is the whole shebang.', 'start': 361.855, 'duration': 2.501}, {'end': 367.417, 'text': "And I'm just gonna add a min height to this of 100.", 'start': 364.376, 'duration': 3.041}, {'end': 369.599, 'text': "So it's kind of like a full page.", 'start': 367.417, 'duration': 2.182}, {'end': 375.621, 'text': 'All right, VH is gonna basically take your screen size and basically means 100% of your screen size.', 'start': 370.239, 'duration': 5.382}, {'end': 378.734, 'text': "I'm going to add display flex.", 'start': 377.534, 'duration': 1.2}, {'end': 380.335, 'text': 'All right.', 'start': 380.095, 'duration': 0.24}, {'end': 381.775, 'text': 'Just like that.', 'start': 380.995, 'duration': 0.78}], 'summary': 'Adding image example svg, applying styling with big fonts and min height.', 'duration': 83.413, 'max_score': 305.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg305447.jpg'}, {'end': 473.759, 'src': 'embed', 'start': 440.888, 'weight': 3, 'content': [{'end': 444.07, 'text': 'justify content center, just like that.', 'start': 440.888, 'duration': 3.182}, {'end': 445.251, 'text': 'Now everything is centered.', 'start': 444.21, 'duration': 1.041}, {'end': 454.156, 'text': "And always remember when you don't add flex direction column, these two are modified.", 'start': 446.291, 'duration': 7.865}, {'end': 456.958, 'text': 'So justify content and align items.', 'start': 454.757, 'duration': 2.201}, {'end': 466.124, 'text': 'So basically if I have flex direction column, align item center, it aligns it horizontally.', 'start': 457.959, 'duration': 8.165}, {'end': 473.759, 'text': "But if I don't have flex direction column, then it does it vertically all right?", 'start': 467.085, 'duration': 6.674}], 'summary': 'Flexbox properties can modify alignment—horizontal or vertical—based on flex direction.', 'duration': 32.871, 'max_score': 440.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg440888.jpg'}, {'end': 584.713, 'src': 'heatmap', 'start': 542.057, 'weight': 4, 'content': [{'end': 545.761, 'text': "Okay So let's just do a font size of 3rem.", 'start': 542.057, 'duration': 3.704}, {'end': 547.583, 'text': 'All right.', 'start': 545.901, 'duration': 1.682}, {'end': 550.026, 'text': "Let's see.", 'start': 549.445, 'duration': 0.581}, {'end': 551.407, 'text': 'There we go.', 'start': 550.987, 'duration': 0.42}, {'end': 551.888, 'text': 'Much bigger.', 'start': 551.447, 'duration': 0.441}, {'end': 554.551, 'text': "And that's pretty much it.", 'start': 553.489, 'duration': 1.062}, {'end': 555.572, 'text': "That's all we need.", 'start': 554.891, 'duration': 0.681}, {'end': 558.995, 'text': 'Now I also want to align these in the center.', 'start': 555.612, 'duration': 3.383}, {'end': 564.061, 'text': 'So the time with the day and the way you do that is you go to the countdown and just say text align center.', 'start': 559.055, 'duration': 5.006}, {'end': 566.156, 'text': 'And look at that.', 'start': 565.655, 'duration': 0.501}, {'end': 566.816, 'text': 'There we go.', 'start': 566.376, 'duration': 0.44}, {'end': 567.978, 'text': 'Perfectly aligned.', 'start': 567.097, 'duration': 0.881}, {'end': 577.631, 'text': 'Fantastico I also want to add a bit of padding to this upper Upper H2 here, padding 3rem.', 'start': 568.438, 'duration': 9.193}, {'end': 579.511, 'text': 'Just space it out a bit.', 'start': 577.991, 'duration': 1.52}, {'end': 580.132, 'text': 'There we go.', 'start': 579.591, 'duration': 0.541}, {'end': 580.592, 'text': 'Much better.', 'start': 580.152, 'duration': 0.44}, {'end': 581.692, 'text': 'Much, much better.', 'start': 580.952, 'duration': 0.74}, {'end': 584.713, 'text': 'Okay, so now all we need to do is JavaScript.', 'start': 582.512, 'duration': 2.201}], 'summary': 'Adjusted font size to 3rem, aligned text center, and added padding 3rem to upper h2.', 'duration': 42.656, 'max_score': 542.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg542057.jpg'}, {'end': 624.656, 'src': 'embed', 'start': 594.736, 'weight': 6, 'content': [{'end': 596.937, 'text': "I believe that's what we gave it.", 'start': 594.736, 'duration': 2.201}, {'end': 598.237, 'text': "We didn't do anything.", 'start': 597.337, 'duration': 0.9}, {'end': 600.678, 'text': "Let's just add a class of waiting to this image.", 'start': 598.257, 'duration': 2.421}, {'end': 603.739, 'text': 'Jump back here and just say height.', 'start': 601.998, 'duration': 1.741}, {'end': 606.381, 'text': 'Just give it a height, like 50 VH.', 'start': 604.739, 'duration': 1.642}, {'end': 608.925, 'text': 'Make it a bit bigger, just like that.', 'start': 606.882, 'duration': 2.043}, {'end': 612.931, 'text': 'Lovely Okay, JavaScript part is going to be super duper easy.', 'start': 609.005, 'duration': 3.926}, {'end': 616.09, 'text': "So join me and let's do it.", 'start': 614.329, 'duration': 1.761}, {'end': 622.175, 'text': "So just to keep this clear and practical, I'm going to create a function for every functionality of the, on the website.", 'start': 616.771, 'duration': 5.404}, {'end': 624.656, 'text': 'So this is going to be specifically for countdown.', 'start': 622.355, 'duration': 2.301}], 'summary': 'Creating a javascript function for countdown on a website.', 'duration': 29.92, 'max_score': 594.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg594736.jpg'}], 'start': 298.362, 'title': 'Web page section styling and display flex in web design', 'summary': 'Covers updating a web page section with reduced divs, adding an image, and styling the h2 heading with a font size of 5rem and font weight of bold. it also discusses using display flex to create a full-page layout, aligning items horizontally and vertically, applying spacing and font size adjustments, with a brief mention of javascript updates.', 'chapters': [{'end': 354.812, 'start': 298.362, 'title': 'Web page section styling', 'summary': 'Covers updating a web page section to reduce the number of divs, adding an image, and applying styling to the h2 heading with a font size of 5rem and font weight of bold.', 'duration': 56.45, 'highlights': ['The chapter covers updating a web page section to reduce the number of divs, adding an image, and applying styling to the H2 heading with a font size of 5rem and font weight of bold.', 'Adding an image, for example, an SVG, to the web page section.', 'Applying styling to the H2 heading with a font size of 5rem and font weight of bold.', 'Updating the web page section to reduce the number of divs.']}, {'end': 616.09, 'start': 355.272, 'title': 'Display flex and alignment in web design', 'summary': 'Discusses using display flex to create a full-page layout, aligning items horizontally and vertically, and applying spacing and font size adjustments, with a brief mention of javascript updates.', 'duration': 260.818, 'highlights': ['Using display flex to create a full-page layout with a min height of 100, and VH to take 100% of the screen size.', 'Aligning items horizontally by adding flex direction column, and vertically by using justify content and align items.', 'Applying spacing using justify content with space around, and adjusting font size to 3rem for specific elements.', 'Briefly mentioning the need for JavaScript updates and adding a class and height to an image.']}], 'duration': 317.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg298362.jpg', 'highlights': ['Using display flex to create a full-page layout with a min height of 100, and VH to take 100% of the screen size.', 'Applying styling to the H2 heading with a font size of 5rem and font weight of bold.', 'Adding an image, for example, an SVG, to the web page section.', 'Aligning items horizontally by adding flex direction column, and vertically by using justify content and align items.', 'Applying spacing using justify content with space around, and adjusting font size to 3rem for specific elements.', 'Updating the web page section to reduce the number of divs.', 'Briefly mentioning the need for JavaScript updates and adding a class and height to an image.']}, {'end': 857.582, 'segs': [{'end': 642.177, 'src': 'embed', 'start': 616.771, 'weight': 2, 'content': [{'end': 622.175, 'text': "So just to keep this clear and practical, I'm going to create a function for every functionality of the, on the website.", 'start': 616.771, 'duration': 5.404}, {'end': 624.656, 'text': 'So this is going to be specifically for countdown.', 'start': 622.355, 'duration': 2.301}, {'end': 630.16, 'text': "So set this equal to one of these arrow functions, and this is how they look like in case you don't know.", 'start': 625.197, 'duration': 4.963}, {'end': 633.282, 'text': "And then we're going to add a count.", 'start': 630.961, 'duration': 2.321}, {'end': 635.624, 'text': "Let's call this count date.", 'start': 633.943, 'duration': 1.681}, {'end': 636.304, 'text': 'All right.', 'start': 636.044, 'duration': 0.26}, {'end': 640.007, 'text': "So what are we counting down to? I'm going to say new date.", 'start': 636.865, 'duration': 3.142}, {'end': 642.177, 'text': 'All right.', 'start': 641.897, 'duration': 0.28}], 'summary': 'Creating a countdown function for website functionality.', 'duration': 25.406, 'max_score': 616.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg616771.jpg'}, {'end': 706.264, 'src': 'heatmap', 'start': 672.544, 'weight': 3, 'content': [{'end': 681.511, 'text': "So as soon as we're at 12 a.m. at night, that's the target.", 'start': 672.544, 'duration': 8.967}, {'end': 682.252, 'text': 'All right.', 'start': 681.831, 'duration': 0.421}, {'end': 683.473, 'text': "So let's save this.", 'start': 682.552, 'duration': 0.921}, {'end': 687.476, 'text': "What we can also do is console log this out to see what's up.", 'start': 684.093, 'duration': 3.383}, {'end': 688.217, 'text': 'Count date.', 'start': 687.716, 'duration': 0.501}, {'end': 690.841, 'text': "And let's just run this function.", 'start': 689.281, 'duration': 1.56}, {'end': 694.802, 'text': 'So just go down here and execute it by adding countdown and parentheses.', 'start': 690.921, 'duration': 3.881}, {'end': 697.063, 'text': "And let's see what we get.", 'start': 696.262, 'duration': 0.801}, {'end': 698.603, 'text': 'So there we go.', 'start': 697.603, 'duration': 1}, {'end': 698.943, 'text': 'Look at that.', 'start': 698.623, 'duration': 0.32}, {'end': 706.264, 'text': 'We have Monday, May 17th, 2020, 0 0 0 GMT three Eastern European summertime.', 'start': 698.983, 'duration': 7.281}], 'summary': 'Countdown function executed successfully at 12 a.m. on monday, may 17th, 2020.', 'duration': 26.399, 'max_score': 672.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg672544.jpg'}, {'end': 748.961, 'src': 'embed', 'start': 722.629, 'weight': 0, 'content': [{'end': 729.291, 'text': 'So the way you can do that is just go here at the end of this new date and add a dot get time.', 'start': 722.629, 'duration': 6.662}, {'end': 733.453, 'text': 'It has a specific method attached to it called getTime.', 'start': 729.851, 'duration': 3.602}, {'end': 737.435, 'text': 'As you can see, it says it gets the time value in milliseconds.', 'start': 734.414, 'duration': 3.021}, {'end': 741.517, 'text': 'It converts the whole shebang and gives you that big number right there.', 'start': 737.455, 'duration': 4.062}, {'end': 748.441, 'text': 'It takes the whole time and renders it in milliseconds.', 'start': 742.258, 'duration': 6.183}, {'end': 748.961, 'text': 'Damn it.', 'start': 748.641, 'duration': 0.32}], 'summary': 'The gettime method converts the time value into milliseconds.', 'duration': 26.332, 'max_score': 722.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg722629.jpg'}, {'end': 857.582, 'src': 'embed', 'start': 813.81, 'weight': 1, 'content': [{'end': 820.212, 'text': 'So how much, how many milliseconds are there in a second? A thousand, right? Good.', 'start': 813.81, 'duration': 6.402}, {'end': 823.373, 'text': 'So now we can easily calculate the minutes as well.', 'start': 821.072, 'duration': 2.301}, {'end': 826.753, 'text': 'So minute is second times 60.', 'start': 823.673, 'duration': 3.08}, {'end': 834.435, 'text': 'Okay And then we can do hour, which is minute times 60.', 'start': 826.753, 'duration': 7.682}, {'end': 842.352, 'text': 'And then we can do day, which is hour times 24.', 'start': 834.435, 'duration': 7.917}, {'end': 845.014, 'text': "There's some dirt on my keyboard.", 'start': 842.352, 'duration': 2.662}, {'end': 847.695, 'text': 'Be gone, tot.', 'start': 846.255, 'duration': 1.44}, {'end': 853.059, 'text': 'Okay So now we know how time works.', 'start': 849.397, 'duration': 3.662}, {'end': 857.582, 'text': 'We can get to the pyramids and aliens.', 'start': 854.88, 'duration': 2.702}], 'summary': '1 second = 1000 milliseconds, time conversions up to days.', 'duration': 43.772, 'max_score': 813.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg813810.jpg'}], 'start': 616.771, 'title': 'Creating countdown functions', 'summary': 'Covers creating a countdown function for a website, specifying date, month, year, and time with console log verification, and calculating time difference in milliseconds, seconds, minutes, hours, and days using javascript.', 'chapters': [{'end': 698.943, 'start': 616.771, 'title': 'Countdown function for website', 'summary': 'Explains the creation of a countdown function for a website, specifying the date, month, year, and time, and including a console log for verification.', 'duration': 82.172, 'highlights': ['A function is created for the countdown functionality on the website, specifying the countdown date as well as the month, year, and time format.', 'The countdown function includes a console log to display the countdown date for verification.']}, {'end': 857.582, 'start': 698.983, 'title': 'Counting down to a specific date', 'summary': 'Discusses how to calculate and display the time difference in milliseconds, seconds, minutes, hours, and days between a specific date and the current date using javascript.', 'duration': 158.599, 'highlights': ['The method getTime() is used to get the time value in milliseconds from a specific date, enabling the calculation of the time difference between the future date and the current date.', 'The time difference in milliseconds is obtained by subtracting the current date from the future date.', 'The calculation of time in milliseconds, seconds, minutes, hours, and days is demonstrated, with 1 second being equal to 1000 milliseconds, 1 minute being equal to 60 seconds, 1 hour being equal to 60 minutes, and 1 day being equal to 24 hours.']}], 'duration': 240.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg616771.jpg', 'highlights': ['The method getTime() is used to get the time value in milliseconds from a specific date, enabling the calculation of the time difference between the future date and the current date.', 'The calculation of time in milliseconds, seconds, minutes, hours, and days is demonstrated, with 1 second being equal to 1000 milliseconds, 1 minute being equal to 60 seconds, 1 hour being equal to 60 minutes, and 1 day being equal to 24 hours.', 'A function is created for the countdown functionality on the website, specifying the countdown date as well as the month, year, and time format.', 'The countdown function includes a console log to display the countdown date for verification.']}, {'end': 1105.196, 'segs': [{'end': 1040.184, 'src': 'heatmap', 'start': 884.932, 'weight': 0, 'content': [{'end': 891.077, 'text': "Okay So we can say they actually let's do text day or something like that.", 'start': 884.932, 'duration': 6.145}, {'end': 893.199, 'text': 'This is the finished text.', 'start': 891.617, 'duration': 1.582}, {'end': 897.422, 'text': 'We can do cap divided by day.', 'start': 894.079, 'duration': 3.343}, {'end': 898.623, 'text': "That's it.", 'start': 898.283, 'duration': 0.34}, {'end': 899.584, 'text': "Let's see what it gives us.", 'start': 898.703, 'duration': 0.881}, {'end': 902.687, 'text': 'Console log text day.', 'start': 900.065, 'duration': 2.622}, {'end': 907.57, 'text': 'Look at that 16 days.', 'start': 906.209, 'duration': 1.361}, {'end': 908.631, 'text': "That's absolutely correct.", 'start': 907.63, 'duration': 1.001}, {'end': 911.654, 'text': "Now it's not, it gives you 16.3.", 'start': 909.172, 'duration': 2.482}, {'end': 915.317, 'text': '396, blah, blah, blah.', 'start': 911.654, 'duration': 3.663}, {'end': 921.062, 'text': 'So what we need to do is add a math.floor, which is going to push it down to 16.', 'start': 915.757, 'duration': 5.305}, {'end': 922.663, 'text': 'All right.', 'start': 921.062, 'duration': 1.601}, {'end': 932.672, 'text': 'So just take this whole shebang and just add math.floor and just add gap divided by day.', 'start': 923.844, 'duration': 8.828}, {'end': 940.073, 'text': 'Again, what, what math.floor does is it pretty much pushes it down to a full number.', 'start': 933.109, 'duration': 6.964}, {'end': 940.613, 'text': 'All right.', 'start': 940.413, 'duration': 0.2}, {'end': 949.839, 'text': "It doesn't give you, it says here return is the greatest integer less than equal to its numeric argument.", 'start': 940.773, 'duration': 9.066}, {'end': 951.46, 'text': 'Okay Thank you so much floor.', 'start': 950.039, 'duration': 1.421}, {'end': 955.002, 'text': "Uh, yeah, that's all you need to do.", 'start': 952.62, 'duration': 2.382}, {'end': 955.962, 'text': 'So look at that.', 'start': 955.402, 'duration': 0.56}, {'end': 957.783, 'text': 'Now we have 16.', 'start': 956.002, 'duration': 1.781}, {'end': 960.725, 'text': 'Fantastic So now we can just apply the same thing to hours.', 'start': 957.783, 'duration': 2.942}, {'end': 962.146, 'text': 'So text hour.', 'start': 961.285, 'duration': 0.861}, {'end': 965.594, 'text': 'And we can say math.floor.', 'start': 963.933, 'duration': 1.661}, {'end': 973.057, 'text': 'And here, what we do is say gap, and then we add the shebang, which I forgot the name of it.', 'start': 966.814, 'duration': 6.243}, {'end': 977.599, 'text': "How's this called? Oh, I don't remember.", 'start': 974.077, 'duration': 3.522}, {'end': 978.339, 'text': "I'm so sorry.", 'start': 977.659, 'duration': 0.68}, {'end': 980.32, 'text': 'You can look it up.', 'start': 979.66, 'duration': 0.66}, {'end': 981.881, 'text': "Don't be lazy.", 'start': 981.1, 'duration': 0.781}, {'end': 987.343, 'text': 'So we can add gap, this shebang day, and then divided by the hour.', 'start': 982.441, 'duration': 4.902}, {'end': 989.104, 'text': "That's how we get the hour.", 'start': 987.963, 'duration': 1.141}, {'end': 997.88, 'text': 'What is this thing called? Let me Google it up.', 'start': 990.845, 'duration': 7.035}, {'end': 1004.105, 'text': "Um, JavaScript we're learning together.", 'start': 1000.662, 'duration': 3.443}, {'end': 1006.146, 'text': "Everybody it's here.", 'start': 1004.185, 'duration': 1.961}, {'end': 1007.487, 'text': "I'll find it.", 'start': 1006.787, 'duration': 0.7}, {'end': 1010.009, 'text': 'Oh my God.', 'start': 1009.469, 'duration': 0.54}, {'end': 1015.093, 'text': 'I believe, I believe we can find it.', 'start': 1011.391, 'duration': 3.702}, {'end': 1019.257, 'text': "I'll just add a whoa.", 'start': 1017.255, 'duration': 2.002}, {'end': 1023.172, 'text': "Whoa, it's here.", 'start': 1022.011, 'duration': 1.161}, {'end': 1024.633, 'text': "It's here.", 'start': 1023.892, 'duration': 0.741}, {'end': 1026.394, 'text': 'You thought I was smart.', 'start': 1025.333, 'duration': 1.061}, {'end': 1030.217, 'text': "Well, as you can see, I'm not that smart operators.", 'start': 1026.574, 'duration': 3.643}, {'end': 1030.977, 'text': 'It should be here.', 'start': 1030.337, 'duration': 0.64}, {'end': 1039.282, 'text': "Okay Here it's the fricking modulus division remainder.", 'start': 1032.739, 'duration': 6.543}, {'end': 1040.184, 'text': 'All right.', 'start': 1039.303, 'duration': 0.881}], 'summary': 'Using math.floor, 16 days and hours are calculated from a given value.', 'duration': 146.105, 'max_score': 884.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg884932.jpg'}, {'end': 1112.503, 'src': 'embed', 'start': 1079.686, 'weight': 4, 'content': [{'end': 1082.687, 'text': "And we're pretty much applying the same thing here.", 'start': 1079.686, 'duration': 3.001}, {'end': 1085.688, 'text': "Actually, I'm going to show you how this works specifically.", 'start': 1083.367, 'duration': 2.321}, {'end': 1092.551, 'text': 'All you need to do here is just basically change our hour here, minute, minute, and then go down here.', 'start': 1086.048, 'duration': 6.503}, {'end': 1099.334, 'text': 'And then let me also update this to text minute, paste it again.', 'start': 1092.891, 'duration': 6.443}, {'end': 1105.196, 'text': 'And then just update this to minute and second.', 'start': 1102.215, 'duration': 2.981}, {'end': 1112.503, 'text': "Okay, so basically the way this works is if I do a console log of, let's say we have 18 days right?", 'start': 1105.598, 'duration': 6.905}], 'summary': 'Demonstration of updating time values in code for specific functionality.', 'duration': 32.817, 'max_score': 1079.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg1079686.jpg'}], 'start': 859.663, 'title': 'Javascript time calculation', 'summary': 'Explains how to calculate days and hours from a gap using javascript, including using math.floor to obtain whole numbers. it demonstrates calculating 16 days and the number of hours using the given gap and the day. additionally, it discusses the javascript modulus operator and time calculation, emphasizing the importance of finding the remainder in division and demonstrating its application in time calculation.', 'chapters': [{'end': 997.88, 'start': 859.663, 'title': 'Calculating days and hours from gap', 'summary': 'Explains how to calculate the number of days and hours from a given gap using javascript, including using math.floor to obtain whole numbers. it demonstrates calculating 16 days and the number of hours using the given gap and the day.', 'duration': 138.217, 'highlights': ['The chapter explains how to calculate the number of days from a given gap by dividing the gap by the day and using math.floor to obtain a whole number, resulting in 16 days.', 'The process of using math.floor is detailed, illustrating how it pushes down a number to the greatest integer less than or equal to its numeric argument, ensuring whole number results.', 'Additionally, it demonstrates the process of calculating the number of hours by adding the shebang day and dividing it by the hour, employing math.floor for obtaining the whole number of hours.']}, {'end': 1105.196, 'start': 1000.662, 'title': 'Javascript modulus operator and time calculation', 'summary': 'Discusses the javascript modulus operator and time calculation, highlighting the importance of finding the remainder in division and demonstrating how to apply the concept in time calculation.', 'duration': 104.534, 'highlights': ['The modulus operator in JavaScript gives the remainder of a division, providing a simple example and explaining its functionality.', 'The speaker demonstrates applying the same concept to time calculation, emphasizing the process of updating hour, minute, and second variables.', 'The transcript includes a humorous tone and self-deprecating comments.']}], 'duration': 245.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg859663.jpg', 'highlights': ['The chapter explains how to calculate the number of days from a given gap by dividing the gap by the day and using math.floor to obtain a whole number, resulting in 16 days.', 'The process of using math.floor is detailed, illustrating how it pushes down a number to the greatest integer less than or equal to its numeric argument, ensuring whole number results.', 'Additionally, it demonstrates the process of calculating the number of hours by adding the shebang day and dividing it by the hour, employing math.floor for obtaining the whole number of hours.', 'The modulus operator in JavaScript gives the remainder of a division, providing a simple example and explaining its functionality.', 'The speaker demonstrates applying the same concept to time calculation, emphasizing the process of updating hour, minute, and second variables.']}, {'end': 1380.403, 'segs': [{'end': 1133.328, 'src': 'embed', 'start': 1105.598, 'weight': 0, 'content': [{'end': 1112.503, 'text': "Okay, so basically the way this works is if I do a console log of, let's say we have 18 days right?", 'start': 1105.598, 'duration': 6.905}, {'end': 1117.426, 'text': "And we do the remainder of two, it's going to give us zero.", 'start': 1112.903, 'duration': 4.523}, {'end': 1123.31, 'text': 'And the reason why is basically you divide 18 divided by two.', 'start': 1117.546, 'duration': 5.764}, {'end': 1129.215, 'text': "If it perfectly divides, it's going to give you zero, right? So in this case it does.", 'start': 1124.531, 'duration': 4.684}, {'end': 1133.328, 'text': 'because you can do nine and nine, which is gonna give you a perfect 18.', 'start': 1129.906, 'duration': 3.422}], 'summary': 'Console log of 18 days, remainder of two, results in zero due to perfect division.', 'duration': 27.73, 'max_score': 1105.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg1105598.jpg'}, {'end': 1206.439, 'src': 'heatmap', 'start': 1165.597, 'weight': 4, 'content': [{'end': 1170.039, 'text': 'Now, all we need to do is update our actual HTML.', 'start': 1165.597, 'duration': 4.442}, {'end': 1171.72, 'text': 'So this is going to be super simple.', 'start': 1170.439, 'duration': 1.281}, {'end': 1183.367, 'text': 'All we need to do is, uh, just say document dot query selector like that.', 'start': 1172.681, 'duration': 10.686}, {'end': 1189.291, 'text': 'And we can grab the day and we can just change the inner text of this.', 'start': 1184.948, 'duration': 4.343}, {'end': 1194.267, 'text': 'Set it equal to our text day and hit save.', 'start': 1191.104, 'duration': 3.163}, {'end': 1196.389, 'text': 'And look at that.', 'start': 1195.749, 'duration': 0.64}, {'end': 1197.671, 'text': 'We have 16.', 'start': 1196.429, 'duration': 1.242}, {'end': 1202.055, 'text': 'Lovely And then we can just pretty much apply the same thing by copy pasting this a few more times.', 'start': 1197.671, 'duration': 4.384}, {'end': 1203.296, 'text': 'We can do hour.', 'start': 1202.556, 'duration': 0.74}, {'end': 1206.439, 'text': 'We can do minute and a second.', 'start': 1204.237, 'duration': 2.202}], 'summary': 'Update html with javascript to display time data. simple and efficient method used to change text content.', 'duration': 32.074, 'max_score': 1165.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg1165597.jpg'}, {'end': 1248.43, 'src': 'heatmap', 'start': 1217.676, 'weight': 0.717, 'content': [{'end': 1218.817, 'text': 'We are all done.', 'start': 1217.676, 'duration': 1.141}, {'end': 1223.241, 'text': "How about that? That's pretty freaking cool, right? Now there's one problem.", 'start': 1219.418, 'duration': 3.823}, {'end': 1224.603, 'text': 'This does not update.', 'start': 1223.562, 'duration': 1.041}, {'end': 1225.944, 'text': 'Only if you refresh.', 'start': 1225.063, 'duration': 0.881}, {'end': 1230.657, 'text': "Um, so that's it.", 'start': 1229.416, 'duration': 1.241}, {'end': 1231.778, 'text': "I'm not sure how to fix it.", 'start': 1230.737, 'duration': 1.041}, {'end': 1232.659, 'text': 'Good luck.', 'start': 1232.298, 'duration': 0.361}, {'end': 1233.239, 'text': "I'm joking.", 'start': 1232.819, 'duration': 0.42}, {'end': 1241.765, 'text': 'All you need to do is just go down here, cut out the, again, like the way JavaScript runs is it checks your shit.', 'start': 1234.18, 'duration': 7.585}, {'end': 1248.43, 'text': 'It sees this function, saves it up in memory, and then just runs this code once down here.', 'start': 1242.426, 'duration': 6.004}], 'summary': 'Javascript function needs to be fixed to update without refresh.', 'duration': 30.754, 'max_score': 1217.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg1217676.jpg'}, {'end': 1286.255, 'src': 'heatmap', 'start': 1251.232, 'weight': 1, 'content': [{'end': 1256.237, 'text': 'So if you want to run it multiple times, you can add a set interval and pass in a function here.', 'start': 1251.232, 'duration': 5.005}, {'end': 1257.718, 'text': 'So it takes two parameters.', 'start': 1256.317, 'duration': 1.401}, {'end': 1261.542, 'text': "One's the function and the second one is a timer.", 'start': 1258.319, 'duration': 3.223}, {'end': 1265.246, 'text': "So when do you want to run this? Well, every fricking second, cause it's a countdown.", 'start': 1261.722, 'duration': 3.524}, {'end': 1266.407, 'text': 'All right.', 'start': 1266.026, 'duration': 0.381}, {'end': 1267.348, 'text': 'And look at that.', 'start': 1266.767, 'duration': 0.581}, {'end': 1271.122, 'text': "I was scared it doesn't work, but there we go.", 'start': 1268.94, 'duration': 2.182}, {'end': 1271.743, 'text': 'It works.', 'start': 1271.342, 'duration': 0.401}, {'end': 1272.924, 'text': 'It works.', 'start': 1272.423, 'duration': 0.501}, {'end': 1277.988, 'text': 'And again, I guess you can just come here and do a little check at the end of the day.', 'start': 1273.564, 'duration': 4.424}, {'end': 1286.255, 'text': "Uh, if we go here and do a console log, let's do a console log of the gap.", 'start': 1278.008, 'duration': 8.247}], 'summary': 'Code successfully runs every second for countdown.', 'duration': 35.023, 'max_score': 1251.232, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg1251232.jpg'}, {'end': 1362.204, 'src': 'embed', 'start': 1313.23, 'weight': 3, 'content': [{'end': 1319.955, 'text': 'So maybe when you can do like an if statement or check if this reaches zero, then you can run another function or something right?', 'start': 1313.23, 'duration': 6.725}, {'end': 1321.376, 'text': 'Maybe you can create another function.', 'start': 1319.975, 'duration': 1.401}, {'end': 1328.141, 'text': "If gap falls below, let's say like a thousand milliseconds or like 10, 000.", 'start': 1322.097, 'duration': 6.044}, {'end': 1329.823, 'text': "So it's getting super close to the end.", 'start': 1328.141, 'duration': 1.682}, {'end': 1335.047, 'text': 'Then execute code, launch the bullshit.', 'start': 1330.283, 'duration': 4.764}, {'end': 1337.119, 'text': 'All right.', 'start': 1336.798, 'duration': 0.321}, {'end': 1343.169, 'text': 'And so something like that should be, it should be quite simple to make.', 'start': 1338.1, 'duration': 5.069}, {'end': 1346.575, 'text': "It's not that much else to it anyway.", 'start': 1344.932, 'duration': 1.643}, {'end': 1349.596, 'text': 'I got so distracted by that.', 'start': 1348.035, 'duration': 1.561}, {'end': 1350.557, 'text': 'So there we go.', 'start': 1350.076, 'duration': 0.481}, {'end': 1352.078, 'text': 'Hope you enjoyed this little thing.', 'start': 1350.817, 'duration': 1.261}, {'end': 1353.739, 'text': "It's really not that difficult.", 'start': 1352.138, 'duration': 1.601}, {'end': 1359.222, 'text': "I guess just Google up the way math works and it's quite simple.", 'start': 1353.759, 'duration': 5.463}, {'end': 1361.284, 'text': 'So thank you so much for watching.', 'start': 1359.703, 'duration': 1.581}, {'end': 1362.204, 'text': 'Hope you enjoyed it.', 'start': 1361.504, 'duration': 0.7}], 'summary': "Suggests using if statement, launching code if gap falls below 1000-10000 milliseconds. it's quite simple.", 'duration': 48.974, 'max_score': 1313.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg1313230.jpg'}], 'start': 1105.598, 'title': 'Javascript functions', 'summary': 'Covers javascript remainder calculation and countdown functions, explaining how to calculate remainders when dividing days, update html dynamically, address a refresh issue, create a countdown function using setinterval and if statements, and update countdown timer every second.', 'chapters': [{'end': 1230.657, 'start': 1105.598, 'title': 'Javascript remainder calculation', 'summary': 'Explains how to calculate remainders in javascript when dividing days, updating html dynamically, and addressing a refresh issue.', 'duration': 125.059, 'highlights': ['The chapter explains how to calculate remainders in JavaScript when dividing days, updating HTML dynamically, and addressing a refresh issue.', 'It demonstrates dividing days in JavaScript and obtaining the remainder, such as 18 divided by 2 resulting in 0 remainder, while 17 divided by 2 results in 1 remainder.', 'It illustrates dynamically updating HTML using JavaScript by changing the inner text of elements based on calculations, showing the updated values without refreshing the page.']}, {'end': 1380.403, 'start': 1230.737, 'title': 'Javascript countdown function', 'summary': 'Explains how to create a javascript countdown function using setinterval and if statements to execute code based on time intervals, with an example of updating a countdown timer every second.', 'duration': 149.666, 'highlights': ['By using setInterval in JavaScript, you can invoke a function at regular intervals, such as updating a countdown timer every fricking second.', 'A key point is the use of if statements to check if the countdown reaches a specific time, like below 1000 milliseconds, to execute additional code.', 'The speaker emphasizes that creating a JavaScript countdown function is quite simple and suggests looking up how math works to understand the process better.']}], 'duration': 274.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rib69h2DOxg/pics/Rib69h2DOxg1105598.jpg', 'highlights': ['The chapter explains how to calculate remainders in JavaScript when dividing days, updating HTML dynamically, and addressing a refresh issue.', 'By using setInterval in JavaScript, you can invoke a function at regular intervals, such as updating a countdown timer every fricking second.', 'It demonstrates dividing days in JavaScript and obtaining the remainder, such as 18 divided by 2 resulting in 0 remainder, while 17 divided by 2 results in 1 remainder.', 'A key point is the use of if statements to check if the countdown reaches a specific time, like below 1000 milliseconds, to execute additional code.', 'It illustrates dynamically updating HTML using JavaScript by changing the inner text of elements based on calculations, showing the updated values without refreshing the page.', 'The speaker emphasizes that creating a JavaScript countdown function is quite simple and suggests looking up how math works to understand the process better.']}], 'highlights': ['The method getTime() calculates time difference between future and current date', 'Using setInterval to update countdown timer every second', 'Creating countdown function with specified date, month, year, and time format', 'Applying display flex for full-page layout with min height of 100 and VH for 100% screen size', 'Calculating days by dividing gap by day and using math.floor for whole number result']}