title
Build A Music App With Javascript Tutorial
description
Check out my courses here!
https://developedbyed.com
Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
#javascript #webdevelopment #css
Today we are going to learn how to create a music app from scratch with vanilla javascript, css and html.
In this vanilla javascript project we are going to take a look at how we can implement an audio track and add different sounds to it.
This project is recommended for anyone interested in learning beginner web development projects/javascript projects from scratch.
đź“• Things covered in this video:
- How to add sounds to the audio track
- How to play sounds in javascript
- Adding dynamic colors to our animations.
đź“” Materials used in this video:
Starter Files: https://github.com/DevEdwin/vanilla-js-beatmaker
❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed
đź›´ Follow me on:
Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads
Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0
http://creativecommons.org/licenses/b...
detail
{'title': 'Build A Music App With Javascript Tutorial', 'heatmap': [{'end': 255.071, 'start': 222.257, 'weight': 0.707}, {'end': 290.135, 'start': 267.954, 'weight': 0.705}, {'end': 345.223, 'start': 309.574, 'weight': 0.862}, {'end': 609.555, 'start': 575.541, 'weight': 0.833}, {'end': 902.429, 'start': 887.558, 'weight': 1}, {'end': 1213.523, 'start': 1181.105, 'weight': 0.873}, {'end': 1297.78, 'start': 1262.083, 'weight': 0.884}, {'end': 1381.886, 'start': 1348.253, 'weight': 0.769}], 'summary': 'Learn to create a drum machine and a tap music web app using vanilla javascript with colorful pads and visual elements, style audio tracks with html, css, and font, add color palette and flex display, handle sound playback and fix issues, and create visual effects like colorful bubbles and jumping balls with event listeners and javascript functions.', 'chapters': [{'end': 52.274, 'segs': [{'end': 52.274, 'src': 'embed', 'start': 9.207, 'weight': 0, 'content': [{'end': 18.544, 'text': "Hey there, my gorgeous friends on the internet, in this episode we're gonna take vanilla javascript and we're gonna create drum machine.", 'start': 9.207, 'duration': 9.337}, {'end': 21.026, 'text': 'as you can see down here, we have some colorful pads.', 'start': 18.544, 'duration': 2.482}, {'end': 25.51, 'text': 'when we click on them, they make various sounds and we can create cool beats with them.', 'start': 21.026, 'duration': 4.484}, {'end': 29.833, 'text': "we also have these colorful balls, because hey, who doesn't like colorful balls?", 'start': 25.51, 'duration': 4.323}, {'end': 33.276, 'text': 'i swear to god if colorful balls demonetizes me.', 'start': 29.833, 'duration': 3.443}, {'end': 40.725, 'text': "get your laptop ready, get your coffee ready, don't spill it like i did and let's get coding Alrighty.", 'start': 33.276, 'duration': 7.449}, {'end': 47.23, 'text': 'so the only thing that we need to start are basically these sounds, and you can get them on my GitHub repo so you can download them,', 'start': 40.725, 'duration': 6.505}, {'end': 48.431, 'text': "and that's basically all we need.", 'start': 47.23, 'duration': 1.201}, {'end': 52.274, 'text': "Also, shout out to Patab because that's where these sounds are from.", 'start': 48.531, 'duration': 3.743}], 'summary': 'Create a drum machine using vanilla javascript with colorful pads and balls, making various sounds to create cool beats.', 'duration': 43.067, 'max_score': 9.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A9207.jpg'}], 'start': 9.207, 'title': 'Creating a drum machine with vanilla javascript', 'summary': 'Focuses on the creation of a drum machine using vanilla javascript, featuring colorful pads that produce various sounds when clicked. the github repository offers downloadable sounds for use.', 'chapters': [{'end': 52.274, 'start': 9.207, 'title': 'Creating drum machine with vanilla javascript', 'summary': 'Features the creation of a drum machine using vanilla javascript, with colorful pads that produce various sounds when clicked, and the availability of sounds for download on the github repo.', 'duration': 43.067, 'highlights': ['The chapter focuses on creating a drum machine with vanilla JavaScript, featuring colorful pads that produce various sounds when clicked.', "The sounds required for the drum machine can be downloaded from the presenter's GitHub repo.", 'The sounds used in the drum machine are credited to Patab.']}], 'duration': 43.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A9207.jpg', 'highlights': ['The chapter focuses on creating a drum machine with vanilla JavaScript, featuring colorful pads that produce various sounds when clicked.', "The sounds required for the drum machine can be downloaded from the presenter's GitHub repo.", 'The sounds used in the drum machine are credited to Patab.']}, {'end': 486.381, 'segs': [{'end': 98.983, 'src': 'embed', 'start': 52.294, 'weight': 0, 'content': [{'end': 58.659, 'text': "Okay, so we have the sounds and we can create an index.html and let's get started doing the markup.", 'start': 52.294, 'duration': 6.365}, {'end': 59.719, 'text': 'Come on.', 'start': 59.239, 'duration': 0.48}, {'end': 62.64, 'text': "Why you do this? It's trying to add it to the folder.", 'start': 59.759, 'duration': 2.881}, {'end': 63.78, 'text': 'New Okay.', 'start': 63.04, 'duration': 0.74}, {'end': 66.641, 'text': "Index.html It's outside of the folder now.", 'start': 64.019, 'duration': 2.622}, {'end': 67.781, 'text': 'Good All right.', 'start': 67.061, 'duration': 0.72}, {'end': 69.362, 'text': "Let's generate a project.", 'start': 67.821, 'duration': 1.541}, {'end': 74.983, 'text': "We're going to name this tap music because we're tapping with our fingers to create music.", 'start': 69.742, 'duration': 5.241}, {'end': 76.364, 'text': "I'm going to create a header here.", 'start': 75.023, 'duration': 1.341}, {'end': 86.929, 'text': "And basically what I want here is only let's actually create a whole section for this app, because I'm going to add a display flex to everything,", 'start': 76.884, 'duration': 10.045}, {'end': 88.871, 'text': "and let's just name this app okay?", 'start': 86.929, 'duration': 1.942}, {'end': 91.494, 'text': "So we have a whole app and it's just one screen.", 'start': 88.911, 'duration': 2.583}, {'end': 92.415, 'text': "that's all we need.", 'start': 91.494, 'duration': 0.921}, {'end': 98.983, 'text': "And here I'm gonna have a header and I'm just gonna add a H1 to this and it's gonna say tap music.", 'start': 92.816, 'duration': 6.167}], 'summary': 'Creating a tap music project with a header and a single screen.', 'duration': 46.689, 'max_score': 52.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A52294.jpg'}, {'end': 149.198, 'src': 'embed', 'start': 118.334, 'weight': 2, 'content': [{'end': 124.578, 'text': "I'm really trying hard not to say colorful balls, but that's basically where everything is going to go there.", 'start': 118.334, 'duration': 6.244}, {'end': 128.24, 'text': "Okay, and for the last section, we're going to create one called pads.", 'start': 125.058, 'duration': 3.182}, {'end': 131.142, 'text': 'So these are the actual clickable things.', 'start': 128.38, 'duration': 2.762}, {'end': 132.843, 'text': "So I'm going to include all of them here.", 'start': 131.422, 'duration': 1.421}, {'end': 139.427, 'text': "And the way we do that is I'm just going to create a diff called pads, and then we're going to add the individual pads like so.", 'start': 133.043, 'duration': 6.384}, {'end': 140.628, 'text': "So it's going to be pad one.", 'start': 139.487, 'duration': 1.141}, {'end': 149.198, 'text': "pad two, I'm just going to copy these six times because I think we have six, one, two, three, four, five and six.", 'start': 141.508, 'duration': 7.69}], 'summary': 'Creating clickable pads, including six pads in total.', 'duration': 30.864, 'max_score': 118.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A118334.jpg'}, {'end': 185.684, 'src': 'embed', 'start': 160.251, 'weight': 3, 'content': [{'end': 165.294, 'text': "The reason why I'm adding this div is because we cannot style the audio tag.", 'start': 160.251, 'duration': 5.043}, {'end': 166.935, 'text': 'We cannot add styles to them.', 'start': 165.374, 'duration': 1.561}, {'end': 176.379, 'text': 'Now, in music, you generally want to have style in your music, but in HTML and CSS, you cannot add styles to the audio track.', 'start': 167.255, 'duration': 9.124}, {'end': 177.76, 'text': 'That was a horrible joke.', 'start': 176.68, 'duration': 1.08}, {'end': 178.42, 'text': "I'm sorry.", 'start': 177.92, 'duration': 0.5}, {'end': 179.061, 'text': "Let's move.", 'start': 178.581, 'duration': 0.48}, {'end': 180.361, 'text': 'I need to go to the doctor.', 'start': 179.181, 'duration': 1.18}, {'end': 181.862, 'text': "Okay, that's one.", 'start': 180.742, 'duration': 1.12}, {'end': 184.123, 'text': 'The second one is audio.', 'start': 182.202, 'duration': 1.921}, {'end': 185.684, 'text': "And let's just go through each of them.", 'start': 184.283, 'duration': 1.401}], 'summary': 'Difficulty in styling audio tags in html and css discussed humorously.', 'duration': 25.433, 'max_score': 160.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A160251.jpg'}, {'end': 255.071, 'src': 'heatmap', 'start': 213.352, 'weight': 4, 'content': [{'end': 218.575, 'text': "But Audio, this one's gonna be UFO.", 'start': 213.352, 'duration': 5.223}, {'end': 220.496, 'text': "All right, that's all we need here.", 'start': 219.195, 'duration': 1.301}, {'end': 222.217, 'text': "Now I'm gonna quickly go up here.", 'start': 220.556, 'duration': 1.661}, {'end': 227.139, 'text': "I'm gonna add a link tag and we're gonna just create a CSS, style.css.", 'start': 222.257, 'duration': 4.882}, {'end': 229.321, 'text': "We're gonna link it up here.", 'start': 227.98, 'duration': 1.341}, {'end': 232.783, 'text': "And I'm also gonna add, my voice is going away.", 'start': 229.341, 'duration': 3.442}, {'end': 235.664, 'text': "I'm also gonna add this Montserrat font here.", 'start': 232.803, 'duration': 2.861}, {'end': 237.545, 'text': "So let's go to select fonts.", 'start': 236.064, 'duration': 1.481}, {'end': 240.827, 'text': 'You can go to fonts.google.com, click this.', 'start': 237.725, 'duration': 3.102}, {'end': 241.908, 'text': "I'm gonna just copy.", 'start': 240.947, 'duration': 0.961}, {'end': 244.088, 'text': 'Where is the copy? I forgot.', 'start': 242.888, 'duration': 1.2}, {'end': 245.469, 'text': "I'm just going to grab everything here.", 'start': 244.148, 'duration': 1.321}, {'end': 248.189, 'text': 'Just paste it above the CSS tag.', 'start': 245.909, 'duration': 2.28}, {'end': 248.809, 'text': 'Hit save.', 'start': 248.209, 'duration': 0.6}, {'end': 255.071, 'text': "And I'm also going to copy the font family so I can add it to the body just so everything is on Montserrat.", 'start': 249.31, 'duration': 5.761}], 'summary': 'Adding ufo audio and montserrat font to website', 'duration': 27.475, 'max_score': 213.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A213352.jpg'}, {'end': 296.341, 'src': 'heatmap', 'start': 267.954, 'weight': 0.705, 'content': [{'end': 270.455, 'text': 'Now we can open up live server and see what we got.', 'start': 267.954, 'duration': 2.501}, {'end': 270.995, 'text': 'Look at that.', 'start': 270.515, 'duration': 0.48}, {'end': 273.116, 'text': 'Beautiful Perfect.', 'start': 271.015, 'duration': 2.101}, {'end': 278.482, 'text': "And for now, actually, I'm going to quickly just jump back to our index.html.", 'start': 273.657, 'duration': 4.825}, {'end': 290.135, 'text': "And I'm going to add in here the visual, I'm just going to add a H1 with visual just so we see everything kind of a representation of the section.", 'start': 278.502, 'duration': 11.633}, {'end': 292.177, 'text': "Okay, so that's what we got.", 'start': 290.916, 'duration': 1.261}, {'end': 296.341, 'text': "I'm going to grab the body and I'm just going to add this font family of Montserrat.", 'start': 292.257, 'duration': 4.084}], 'summary': 'Using live server, added visual representation with h1 and montserrat font.', 'duration': 28.387, 'max_score': 267.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A267954.jpg'}, {'end': 345.223, 'src': 'heatmap', 'start': 303.628, 'weight': 5, 'content': [{'end': 309.234, 'text': "So I'm just going to add a height of 100 VH just so it's full screen.", 'start': 303.628, 'duration': 5.606}, {'end': 310.935, 'text': "We're going to add a display flex.", 'start': 309.574, 'duration': 1.361}, {'end': 313.539, 'text': 'flex direction column.', 'start': 312.017, 'duration': 1.522}, {'end': 322.272, 'text': 'So it goes like this, a justify content space around and a align item center.', 'start': 313.639, 'duration': 8.633}, {'end': 325.954, 'text': 'All right, hit save and basically everything comes down like so.', 'start': 322.853, 'duration': 3.101}, {'end': 327.755, 'text': 'So here is going to be the title.', 'start': 326.195, 'duration': 1.56}, {'end': 331.317, 'text': 'Here is going to be our visual and down here are going to be the pads.', 'start': 327.975, 'duration': 3.342}, {'end': 334.258, 'text': 'Actually, space here is too much.', 'start': 331.977, 'duration': 2.281}, {'end': 336.799, 'text': "So let's just add space between.", 'start': 334.318, 'duration': 2.481}, {'end': 341.181, 'text': 'So everything is like kind of and this is like all the way up here.', 'start': 336.999, 'duration': 4.182}, {'end': 345.223, 'text': "This one is going to be perfectly in the center and this one's going to be all the way down here.", 'start': 341.241, 'duration': 3.982}], 'summary': 'Styling adjustments made for full screen display with specific layout modifications.', 'duration': 27.689, 'max_score': 303.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A303628.jpg'}], 'start': 52.294, 'title': 'Tap music web app development', 'summary': 'Focuses on developing a tap music web app, creating a project with a header, visual elements, and clickable pads, and styling audio tracks in html using divs, css, montserrat font, flexbox, and padding.', 'chapters': [{'end': 139.427, 'start': 52.294, 'title': 'Creating tap music web app', 'summary': 'Focuses on creating a tap music web app, where the instructor generates a project and structures the app with a header, visual elements, and clickable pads.', 'duration': 87.133, 'highlights': ["The instructor starts by generating a project named 'tap music' for creating music by tapping fingers.", "The app is structured with a header that includes an H1 tag saying 'tap music' and a paragraph stating 'make music with only one tap'.", "Visual elements are organized within a div called 'visual', while clickable pads are included in a div called 'pads'."]}, {'end': 486.381, 'start': 139.487, 'title': 'Html and css audio styling', 'summary': 'Covers adding audio tracks to html using divs, linking css, and styling with montserrat font, and visual representation using flexbox and padding.', 'duration': 346.894, 'highlights': ['Adding audio tracks using divs The speaker copies six divs for audio tracks and explains the need for using divs to style audio tags in HTML and CSS.', 'Styling with Montserrat font and CSS linking The speaker adds a link tag for style.css, includes the Montserrat font, and applies CSS reset and font styling to the HTML.', 'Visual representation using flexbox and padding The speaker demonstrates using flexbox to align content, adds padding to divs for visual representation, and explains the selection of divs for styling.']}], 'duration': 434.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A52294.jpg', 'highlights': ["The instructor starts by generating a project named 'tap music' for creating music by tapping fingers.", "The app is structured with a header that includes an H1 tag saying 'tap music' and a paragraph stating 'make music with only one tap'.", "Visual elements are organized within a div called 'visual', while clickable pads are included in a div called 'pads'.", 'Adding audio tracks using divs The speaker copies six divs for audio tracks and explains the need for using divs to style audio tags in HTML and CSS.', 'Styling with Montserrat font and CSS linking The speaker adds a link tag for style.css, includes the Montserrat font, and applies CSS reset and font styling to the HTML.', 'Visual representation using flexbox and padding The speaker demonstrates using flexbox to align content, adds padding to divs for visual representation, and explains the selection of divs for styling.']}, {'end': 756.443, 'segs': [{'end': 550.569, 'src': 'embed', 'start': 487.101, 'weight': 0, 'content': [{'end': 490.003, 'text': 'And we need to add basically all the colors to them.', 'start': 487.101, 'duration': 2.902}, {'end': 496.507, 'text': "So I'm going to add pad one and I'm just going to do background and I have the color saved here.", 'start': 490.383, 'duration': 6.124}, {'end': 500.85, 'text': "So it's going to be 60D394.", 'start': 496.627, 'duration': 4.223}, {'end': 502.091, 'text': "That's the first one.", 'start': 501.07, 'duration': 1.021}, {'end': 504.893, 'text': 'The second one is going to be background.', 'start': 502.131, 'duration': 2.762}, {'end': 505.733, 'text': "We're going to do D36060.", 'start': 504.953, 'duration': 0.78}, {'end': 513.36, 'text': 'again, you can choose random colors here.', 'start': 511.477, 'duration': 1.883}, {'end': 515.462, 'text': 'i just picked out a few.', 'start': 513.36, 'duration': 2.102}, {'end': 523.611, 'text': "background we're gonna do c4, c0, 60, d3 and pad 4.", 'start': 515.462, 'duration': 8.149}, {'end': 533.52, 'text': "we're almost done with the pain, i promise, And actually this is not gonna work obviously.", 'start': 523.611, 'duration': 9.909}, {'end': 535.061, 'text': "So let's add the background.", 'start': 533.66, 'duration': 1.401}, {'end': 537.462, 'text': "Four, let's do five.", 'start': 535.761, 'duration': 1.701}, {'end': 538.502, 'text': "You know, I'm lazy.", 'start': 537.662, 'duration': 0.84}, {'end': 540.543, 'text': "I'm just gonna copy this, paste it in here.", 'start': 538.522, 'duration': 2.021}, {'end': 546.106, 'text': "And then I'm gonna just kind of hover over this and we have this nice thing in VS Code.", 'start': 540.984, 'duration': 5.122}, {'end': 550.569, 'text': 'Then I can just kind of scroll through everything and just pick another color.', 'start': 546.467, 'duration': 4.102}], 'summary': 'Adding various colors for backgrounds, including 60d394, d36060, c4c060d3, and more.', 'duration': 63.468, 'max_score': 487.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A487101.jpg'}, {'end': 618.601, 'src': 'heatmap', 'start': 575.541, 'weight': 1, 'content': [{'end': 581.942, 'text': 'but we can change this behavior again if we add display flex to the pads and everything is just going to work like magic.', 'start': 575.541, 'duration': 6.401}, {'end': 586.964, 'text': 'so up here at the pads we can just add a display flex, but the beam by the boom, everything is fixed.', 'start': 581.942, 'duration': 5.022}, {'end': 588.004, 'text': 'take a look at that.', 'start': 586.964, 'duration': 1.04}, {'end': 591.946, 'text': "But I kind of want to stretch these so they're not too close to each other.", 'start': 588.844, 'duration': 3.102}, {'end': 600.75, 'text': 'So to stretch them, we can just go to the pads div here and I can add a flex one, which basically stretches to the available space.', 'start': 592.366, 'duration': 8.384}, {'end': 602.071, 'text': 'And there we go.', 'start': 601.431, 'duration': 0.64}, {'end': 603.372, 'text': "That's all we need here.", 'start': 602.171, 'duration': 1.201}, {'end': 609.555, 'text': 'We can actually get rid of this visual and then we can implement our animation.', 'start': 604.332, 'duration': 5.223}, {'end': 612.497, 'text': "But for now, let's get going with JavaScript.", 'start': 609.915, 'duration': 2.582}, {'end': 614.898, 'text': "So let's create a JavaScript file.", 'start': 612.997, 'duration': 1.901}, {'end': 618.601, 'text': "I'm going to do index.js right in here.", 'start': 615.359, 'duration': 3.242}], 'summary': 'Adding display flex to the pads and stretching them with flex one improves layout and space distribution.', 'duration': 43.06, 'max_score': 575.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A575541.jpg'}, {'end': 692.035, 'src': 'embed', 'start': 662.403, 'weight': 5, 'content': [{'end': 666.085, 'text': "So we have a class on the divs, but we don't have a class on the audio.", 'start': 662.403, 'duration': 3.682}, {'end': 671.569, 'text': 'So I just want to go on these and add a class of sound to each audio track.', 'start': 666.486, 'duration': 5.083}, {'end': 675.192, 'text': "I'm just going to copy this and paste it to each individual sound.", 'start': 671.669, 'duration': 3.523}, {'end': 678.973, 'text': 'So we added, we have all the sounds stored in here.', 'start': 675.692, 'duration': 3.281}, {'end': 681.193, 'text': 'Now we can also store the pads.', 'start': 679.393, 'duration': 1.8}, {'end': 686.374, 'text': "so the things that we're clicking on and that's going to be document.queryselector.", 'start': 681.193, 'duration': 5.181}, {'end': 692.035, 'text': "all again, make sure it's all and then we can do pads and I'm going to get all the divs and the pads.", 'start': 686.374, 'duration': 5.661}], 'summary': "Adding 'sound' class to each audio track and selecting all divs and pads", 'duration': 29.632, 'max_score': 662.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A662403.jpg'}, {'end': 761.627, 'src': 'embed', 'start': 733.03, 'weight': 2, 'content': [{'end': 737.993, 'text': "So I'm going to loop over these and I have access to all the single pads in here.", 'start': 733.03, 'duration': 4.963}, {'end': 741.614, 'text': 'I can add an event listener to each one of them.', 'start': 738.013, 'duration': 3.601}, {'end': 743.975, 'text': 'So pad.addEventListener.', 'start': 741.794, 'duration': 2.181}, {'end': 748.918, 'text': "And basically, whenever I click on each pad, I'm gonna run a function.", 'start': 744.376, 'duration': 4.542}, {'end': 753.461, 'text': "Now careful, I'm gonna do a normal function here, so I have access to the keyword.", 'start': 749.038, 'duration': 4.423}, {'end': 755.503, 'text': 'this, which is gonna refer to the pad.', 'start': 753.461, 'duration': 2.042}, {'end': 756.443, 'text': 'all right?', 'start': 755.503, 'duration': 0.94}, {'end': 761.627, 'text': 'So in here, what we can do now is we can play the sound.', 'start': 757.084, 'duration': 4.543}], 'summary': 'Looping over single pads to add event listener for playing sound.', 'duration': 28.597, 'max_score': 733.03, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A733030.jpg'}], 'start': 487.101, 'title': 'Css color palette and html display flex with javascript event listeners', 'summary': 'Involves adding multiple color codes to create a color palette in a css file, with examples such as 60d394, d36060, and c4c060d3. it also explains the use of display flex in html to change layout behavior and the implementation of event listeners in javascript to handle user clicks on specific elements, with a focus on storing and manipulating audio elements and their associated divs.', 'chapters': [{'end': 550.569, 'start': 487.101, 'title': 'Adding color palette in css', 'summary': 'Involves adding multiple color codes to create a color palette in a css file, with examples such as 60d394, d36060, and c4c060d3.', 'duration': 63.468, 'highlights': ['Adding multiple color codes, 60D394, D36060, and C4C060D3, to create a color palette in a CSS file.', 'Demonstrating the process of selecting and applying different colors using the VS Code interface.']}, {'end': 756.443, 'start': 551.209, 'title': 'Html display flex and javascript event listeners', 'summary': 'Explains the use of display flex in html to change layout behavior and the implementation of event listeners in javascript to handle user clicks on specific elements, with a focus on storing and manipulating audio elements and their associated divs.', 'duration': 205.234, 'highlights': ["The chapter explains the use of display flex in HTML to change layout behavior The chapter demonstrates how adding display flex to the pads in HTML changes the layout behavior, causing everything to work 'like magic' and stretch as desired.", 'The implementation of event listeners in JavaScript to handle user clicks on specific elements The transcript details the use of event listeners in JavaScript to handle user clicks on specific elements, such as pads, by adding an event listener to each pad and running a function on click.', 'Storing and manipulating audio elements and their associated divs The chapter outlines the process of storing audio elements and their associated divs using document.querySelector and querySelectorAll in JavaScript, allowing for manipulation and control of the audio elements.']}], 'duration': 269.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A487101.jpg', 'highlights': ['Adding multiple color codes, 60D394, D36060, and C4C060D3, to create a color palette in a CSS file.', 'The chapter explains the use of display flex in HTML to change layout behavior.', 'The implementation of event listeners in JavaScript to handle user clicks on specific elements.', 'Demonstrating the process of selecting and applying different colors using the VS Code interface.', "The chapter demonstrates how adding display flex to the pads in HTML changes the layout behavior, causing everything to work 'like magic' and stretch as desired.", 'Storing and manipulating audio elements and their associated divs using document.querySelector and querySelectorAll in JavaScript.']}, {'end': 1006.591, 'segs': [{'end': 884.017, 'src': 'embed', 'start': 813.426, 'weight': 0, 'content': [{'end': 816.188, 'text': "Source, and I'm going to go to index.js.", 'start': 813.426, 'duration': 2.762}, {'end': 816.849, 'text': 'Hit save.', 'start': 816.288, 'duration': 0.561}, {'end': 818.49, 'text': "And let's take a look.", 'start': 817.549, 'duration': 0.941}, {'end': 820.732, 'text': "And it's going to say sounds is not defined.", 'start': 818.65, 'duration': 2.082}, {'end': 823.915, 'text': 'Why is sounds not defined? Well, we have function scope.', 'start': 821.112, 'duration': 2.803}, {'end': 827.859, 'text': 'So everything in here is only available in here.', 'start': 823.955, 'duration': 3.904}, {'end': 832.643, 'text': "So sounds, since it's in this one, it's not going to be available in the global scope.", 'start': 827.919, 'duration': 4.724}, {'end': 838.567, 'text': "So we have to copy this from here and actually paste it in here, and then we're going to have access to it.", 'start': 832.903, 'duration': 5.664}, {'end': 839.607, 'text': "Let's take a look.", 'start': 838.967, 'duration': 0.64}, {'end': 844.548, 'text': 'As you can see, we have a node list, zero being the first sound, two, one, two, three, four, five, six.', 'start': 839.787, 'duration': 4.761}, {'end': 847.569, 'text': 'So to access them, we have to do sound zero.', 'start': 844.888, 'duration': 2.681}, {'end': 848.949, 'text': "That's going to be the first sound.", 'start': 847.609, 'duration': 1.34}, {'end': 850.59, 'text': 'And as you can see, bubbles.', 'start': 849.449, 'duration': 1.141}, {'end': 852.67, 'text': 'Perfect. But how can we do this??', 'start': 850.87, 'duration': 1.8}, {'end': 854.45, 'text': 'How can we access each sound??', 'start': 852.71, 'duration': 1.74}, {'end': 858.632, 'text': 'Well, what we also have access to in this foreach.', 'start': 855.091, 'duration': 3.541}, {'end': 863.813, 'text': 'if we just add parentheses on top and I add a comma, we also get access to index.', 'start': 858.632, 'duration': 5.181}, {'end': 871.174, 'text': 'index being the 0, 1, 2, 3, 4, 5, the number of each sound.', 'start': 865.053, 'duration': 6.121}, {'end': 884.017, 'text': 'So what we can do here is we can just call sounds, sounds like so, and rather we can do play, but we need to select each individual one.', 'start': 871.695, 'duration': 12.322}], 'summary': 'Scope and access of sounds in javascript, using function scope and foreach to access and play individual sounds.', 'duration': 70.591, 'max_score': 813.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A813426.jpg'}, {'end': 914.357, 'src': 'heatmap', 'start': 887.558, 'weight': 1, 'content': [{'end': 890.981, 'text': 'Alright, and if I hit save and we go back here.', 'start': 887.558, 'duration': 3.423}, {'end': 893.182, 'text': "Oh, that's way too loud.", 'start': 891.001, 'duration': 2.181}, {'end': 894.623, 'text': 'I apologize.', 'start': 893.923, 'duration': 0.7}, {'end': 899.026, 'text': 'So, let me actually lower the sound here on the desktop.', 'start': 895.063, 'duration': 3.963}, {'end': 902.429, 'text': 'Alright, even more.', 'start': 901.788, 'duration': 0.641}, {'end': 903.409, 'text': "That's too loud.", 'start': 902.449, 'duration': 0.96}, {'end': 908.733, 'text': 'So, whenever we click, we get the sound playing.', 'start': 903.789, 'duration': 4.944}, {'end': 914.357, 'text': "The problem is, if I click this one and I try to click multiple times, it doesn't work.", 'start': 909.233, 'duration': 5.124}], 'summary': 'Troubleshooting sound issue: unable to play multiple times.', 'duration': 26.799, 'max_score': 887.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A887558.jpg'}, {'end': 960.6, 'src': 'embed', 'start': 915.626, 'weight': 1, 'content': [{'end': 917.407, 'text': "As you can see, I'm clicking like crazy.", 'start': 915.626, 'duration': 1.781}, {'end': 917.947, 'text': "It doesn't work.", 'start': 917.427, 'duration': 0.52}, {'end': 926.211, 'text': 'Now, if I go through each one, it does work, but the track needs to finish before we can click again, which is a big problem.', 'start': 918.667, 'duration': 7.544}, {'end': 931.634, 'text': 'So how can we fix that? Well, the problem is that the current time keeps on going.', 'start': 926.531, 'duration': 5.103}, {'end': 937.557, 'text': 'And what we need to do is before we play the sound, we actually need to reset.', 'start': 932.254, 'duration': 5.303}, {'end': 947.307, 'text': "the current time and by resetting the current time when we click, it's always going to start, because the way it works now is again.", 'start': 938.257, 'duration': 9.05}, {'end': 953.394, 'text': "the track needs to finish all the three seconds and it's not going to play again because it keeps on playing.", 'start': 947.307, 'duration': 6.087}, {'end': 959.16, 'text': "But if we reset the sound when we start clicking again, then it's going to play normally.", 'start': 953.734, 'duration': 5.426}, {'end': 960.6, 'text': 'So big words.', 'start': 959.54, 'duration': 1.06}], 'summary': 'The track needs to finish before we can click again, so reset the current time to fix the problem.', 'duration': 44.974, 'max_score': 915.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A915626.jpg'}], 'start': 757.084, 'title': 'Sound playback in javascript', 'summary': 'Covers accessing, playing sounds, and fixing sound playback issue in javascript. it explains using arrays, encountering scope issues, accessing sounds from a node list, and fixing playback issues to enable multiple clicks without problems.', 'chapters': [{'end': 832.643, 'start': 757.084, 'title': 'Playing sounds in javascript', 'summary': 'Covers accessing and playing sounds in javascript, using an array to store sounds, but encountering scope issues with accessing the sounds globally.', 'duration': 75.559, 'highlights': ['The chapter covers accessing and playing sounds in JavaScript', 'Using an array to store sounds for easy access', 'Encountering scope issues when trying to access sounds globally']}, {'end': 884.017, 'start': 832.903, 'title': 'Accessing and playing sounds in javascript', 'summary': 'Discusses accessing and playing sounds in javascript, explaining the process of accessing sounds from a node list and utilizing foreach to access the index of each sound.', 'duration': 51.114, 'highlights': ['The forEach method provides access to the index of each sound in the node list, allowing for individual selection and manipulation.', 'Accessing sounds from a node list involves using the sound index, for example sound zero being the first sound, to select and manipulate specific sounds.']}, {'end': 1006.591, 'start': 884.057, 'title': 'Fixing sound playback issue', 'summary': 'Discusses fixing a sound playback issue where the sound track needs to finish before being able to click again, and the solution involves resetting the current time before playing the sound, enabling multiple clicks without issues.', 'duration': 122.534, 'highlights': ['The problem is that the current time keeps on going, and before playing the sound, the current time needs to be reset to zero, allowing for normal playback and multiple clicks without issues.', 'The solution involves resetting the current time before playing the sound, enabling multiple clicks without issues.', 'The chapter discusses fixing a sound playback issue where the sound track needs to finish before being able to click again, and the solution involves resetting the current time before playing the sound.']}], 'duration': 249.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A757084.jpg', 'highlights': ['The chapter covers accessing and playing sounds in JavaScript', 'The solution involves resetting the current time before playing the sound, enabling multiple clicks without issues.', 'Using an array to store sounds for easy access', 'The forEach method provides access to the index of each sound in the node list, allowing for individual selection and manipulation.', 'Encountering scope issues when trying to access sounds globally', 'Accessing sounds from a node list involves using the sound index, for example sound zero being the first sound, to select and manipulate specific sounds.', 'The problem is that the current time keeps on going, and before playing the sound, the current time needs to be reset to zero, allowing for normal playback and multiple clicks without issues.', 'The chapter discusses fixing a sound playback issue where the sound track needs to finish before being able to click again, and the solution involves resetting the current time before playing the sound.']}, {'end': 1394.761, 'segs': [{'end': 1094.268, 'src': 'embed', 'start': 1050.731, 'weight': 4, 'content': [{'end': 1068.203, 'text': "so we have this we're going to go down here before the last bracket and then we're going to create a function that Don't ask me why I added these bubbles.", 'start': 1050.731, 'duration': 17.472}, {'end': 1073.047, 'text': "I thought it was very cool for some reason, but I'm gonna create a function called create bubbles.", 'start': 1068.263, 'duration': 4.784}, {'end': 1076.89, 'text': "I'm gonna set this equal to an arrow function.", 'start': 1073.067, 'duration': 3.823}, {'end': 1078.411, 'text': "So we're gonna add an arrow function.", 'start': 1076.95, 'duration': 1.461}, {'end': 1082.435, 'text': "And in here, what I want to do is I'm going to create a bubble.", 'start': 1079.151, 'duration': 3.284}, {'end': 1084.718, 'text': "So I'm going to say const bubble, like so.", 'start': 1082.555, 'duration': 2.163}, {'end': 1088.101, 'text': "It's going to be equal to document.createElement.", 'start': 1085.038, 'duration': 3.063}, {'end': 1090.664, 'text': "We're going to create an element out of thin air.", 'start': 1088.482, 'duration': 2.182}, {'end': 1093.207, 'text': "And what I'm going to create is a div.", 'start': 1091.325, 'duration': 1.882}, {'end': 1094.268, 'text': 'All right.', 'start': 1093.948, 'duration': 0.32}], 'summary': "Creating a function 'create bubbles' to generate div elements for bubbles.", 'duration': 43.537, 'max_score': 1050.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A1050731.jpg'}, {'end': 1144.947, 'src': 'embed', 'start': 1120.166, 'weight': 3, 'content': [{'end': 1126.087, 'text': 'Okay So now what we can do is we can just change the bubble dot style dot background color.', 'start': 1120.166, 'duration': 5.921}, {'end': 1130.879, 'text': "it's gonna be equal to colors.", 'start': 1127.637, 'duration': 3.242}, {'end': 1134.461, 'text': 'all right the colors and in here.', 'start': 1130.879, 'duration': 3.582}, {'end': 1135.342, 'text': 'so this one.', 'start': 1134.461, 'duration': 0.881}, {'end': 1138.463, 'text': 'how do we get the each individual?', 'start': 1135.342, 'duration': 3.121}, {'end': 1139.684, 'text': 'so whatever we click on?', 'start': 1138.463, 'duration': 1.221}, {'end': 1144.947, 'text': "Well, we have index in here, so I'm gonna just grab the index from here and paste it in here.", 'start': 1140.124, 'duration': 4.823}], 'summary': 'Changing bubble dot style background color using index', 'duration': 24.781, 'max_score': 1120.166, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A1120166.jpg'}, {'end': 1222.229, 'src': 'heatmap', 'start': 1181.105, 'weight': 0, 'content': [{'end': 1184.646, 'text': 'and now what we can do is we can just add a bubble dot style.', 'start': 1181.105, 'duration': 3.541}, {'end': 1187.687, 'text': 'dot animation is going to be equal to.', 'start': 1184.646, 'duration': 3.041}, {'end': 1192.59, 'text': "i'm going to create a, a jump, one second with ease.", 'start': 1187.687, 'duration': 4.903}, {'end': 1197.332, 'text': "okay, perfect hit save, and let's create this jump thingy.", 'start': 1192.59, 'duration': 4.742}, {'end': 1200.294, 'text': "Alrighty, let's create the keyframes for this.", 'start': 1198.192, 'duration': 2.102}, {'end': 1204.657, 'text': 'All we have to do is add a keyframes like so, and we can make this jump.', 'start': 1200.394, 'duration': 4.263}, {'end': 1207.319, 'text': 'What we want to do is start from 0%.', 'start': 1205.117, 'duration': 2.202}, {'end': 1209.86, 'text': "I'm going to do 50% and also 100%.", 'start': 1207.319, 'duration': 2.541}, {'end': 1213.523, 'text': "So let's get 100% here as well.", 'start': 1209.86, 'duration': 3.663}, {'end': 1215.665, 'text': 'I want to start from bottom zero.', 'start': 1213.843, 'duration': 1.822}, {'end': 1217.286, 'text': 'Okay, so all the way from the bottom.', 'start': 1215.685, 'duration': 1.601}, {'end': 1222.229, 'text': 'And then what I want to do is start from left, like 20%.', 'start': 1217.806, 'duration': 4.423}], 'summary': 'Adding bubble dot style with jump animation using keyframes.', 'duration': 51.409, 'max_score': 1181.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A1181105.jpg'}, {'end': 1335.242, 'src': 'heatmap', 'start': 1262.083, 'weight': 1, 'content': [{'end': 1268.904, 'text': '50 So make sure everything is the same border radius is going to be 50% just so we can make them nice and round.', 'start': 1262.083, 'duration': 6.821}, {'end': 1271.785, 'text': "And I think, I think that's going to be it.", 'start': 1269.625, 'duration': 2.16}, {'end': 1273.666, 'text': "I'm going to add a bottom of zero.", 'start': 1271.905, 'duration': 1.761}, {'end': 1275.966, 'text': "So this is the position we're going to start off from.", 'start': 1273.726, 'duration': 2.24}, {'end': 1276.666, 'text': "Let's take a look.", 'start': 1276.006, 'duration': 0.66}, {'end': 1278.847, 'text': 'And as you can see, it goes up like that.', 'start': 1277.307, 'duration': 1.54}, {'end': 1281.192, 'text': 'Very cool.', 'start': 1280.612, 'duration': 0.58}, {'end': 1282.973, 'text': 'Now there are a few problems with this.', 'start': 1281.412, 'duration': 1.561}, {'end': 1288.476, 'text': 'Problem one being that this one is in the front here and I kind of want to put it in the back.', 'start': 1283.713, 'duration': 4.763}, {'end': 1290.336, 'text': "So to do that, it's super simple.", 'start': 1288.856, 'duration': 1.48}, {'end': 1297.78, 'text': "We can just go up here to the visual div and we can add the z index of minus one and it's going to hide behind like so.", 'start': 1290.376, 'duration': 7.404}, {'end': 1301.963, 'text': 'Another problem with this is performance.', 'start': 1299.46, 'duration': 2.503}, {'end': 1303.965, 'text': 'This is terrible for performance.', 'start': 1302.323, 'duration': 1.642}, {'end': 1311.254, 'text': "And what I mean by that is if we go on this visual class here, as you can see, we're creating these bubbles, but they're never ending.", 'start': 1304.005, 'duration': 7.249}, {'end': 1312.675, 'text': "They're going, look at that.", 'start': 1311.674, 'duration': 1.001}, {'end': 1314.578, 'text': 'Oh my goodness.', 'start': 1313.777, 'duration': 0.801}, {'end': 1316.18, 'text': 'our app is going to crash.', 'start': 1315.058, 'duration': 1.122}, {'end': 1317.722, 'text': "So we don't want this to happen.", 'start': 1316.44, 'duration': 1.282}, {'end': 1323.169, 'text': 'What we want to do is we want to create one and when it leaves off screen or when the animation ends, we want to get rid of it.', 'start': 1317.742, 'duration': 5.427}, {'end': 1331.579, 'text': 'All we have to do is get the bubble all right, because this is what we want to remove and add an event listener, an animation end to this.', 'start': 1323.349, 'duration': 8.23}, {'end': 1335.242, 'text': "after the animation ends, we're going to run a simple function.", 'start': 1331.579, 'duration': 3.663}], 'summary': 'Setting border radius to 50%, adjusting z-index, and improving performance by removing bubbles after animation ends.', 'duration': 44.866, 'max_score': 1262.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A1262083.jpg'}, {'end': 1394.761, 'src': 'heatmap', 'start': 1348.253, 'weight': 7, 'content': [{'end': 1353.638, 'text': "well, this bubble, and since we're doing a normal function, we can just say this just remove this.", 'start': 1348.253, 'duration': 5.385}, {'end': 1354.339, 'text': 'hit, save.', 'start': 1353.638, 'duration': 0.701}, {'end': 1356.26, 'text': "let's go back to our app, f12.", 'start': 1354.339, 'duration': 1.921}, {'end': 1358.042, 'text': "let's take a look, hit it.", 'start': 1356.26, 'duration': 1.782}, {'end': 1361.343, 'text': "let's open this up app.", 'start': 1359.022, 'duration': 2.321}, {'end': 1364.203, 'text': 'we have the visual click click, click, click.', 'start': 1361.343, 'duration': 2.86}, {'end': 1367.524, 'text': 'as you can see, they get removed right after the animation ends.', 'start': 1364.203, 'duration': 3.321}, {'end': 1368.844, 'text': 'so we can go crazy.', 'start': 1367.524, 'duration': 1.32}, {'end': 1369.964, 'text': "and that's it for me today.", 'start': 1368.844, 'duration': 1.12}, {'end': 1371.644, 'text': 'everybody. hopefully you enjoyed this project.', 'start': 1369.964, 'duration': 1.68}, {'end': 1372.705, 'text': 'let me know what you think.', 'start': 1371.644, 'duration': 1.061}, {'end': 1373.485, 'text': 'i cannot believe.', 'start': 1372.705, 'duration': 0.78}, {'end': 1374.405, 'text': 'i cannot believe.', 'start': 1373.485, 'duration': 0.92}, {'end': 1376.825, 'text': "we're almost at 7 000 subscribers.", 'start': 1374.405, 'duration': 2.42}, {'end': 1377.646, 'text': "it's going crazy.", 'start': 1376.825, 'duration': 0.821}, {'end': 1379.206, 'text': 'what are you guys doing to me?', 'start': 1377.646, 'duration': 1.56}, {'end': 1381.886, 'text': "oh my goodness, i might go full time, i don't even know.", 'start': 1379.206, 'duration': 2.68}, {'end': 1387.21, 'text': "it looks like it looks like i'm gonna teach on youtube awesome things, and I'm happy with that.", 'start': 1381.886, 'duration': 5.324}, {'end': 1389.453, 'text': 'So again, I really want to thank you.', 'start': 1387.29, 'duration': 2.163}, {'end': 1390.274, 'text': 'Thank you so much.', 'start': 1389.533, 'duration': 0.741}, {'end': 1393.098, 'text': 'And until next time, have a wonderful day.', 'start': 1390.595, 'duration': 2.503}, {'end': 1394.761, 'text': 'Colored balls.', 'start': 1394.08, 'duration': 0.681}], 'summary': 'Demonstrated a function, removed bubbles, and celebrated reaching 7,000 subscribers on youtube.', 'duration': 15.555, 'max_score': 1348.253, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A1348253.jpg'}], 'start': 1006.711, 'title': 'Creating visual effects with javascript', 'summary': "Details creating colorful bubbles and animated jumping balls with javascript. it involves selecting elements, utilizing functions, setting background colors, utilizing keyframes and event listeners, and mentions the content creator's excitement about nearing 7,000 subscribers on youtube.", 'chapters': [{'end': 1170.2, 'start': 1006.711, 'title': 'Creating colorful bubbles with javascript', 'summary': "Details the process of creating colorful bubbles with javascript, involving selecting elements, creating a function to generate bubbles, and setting their background colors based on an array of colors. the function 'create bubbles' is utilized to attach the bubbles to a visual div.", 'duration': 163.489, 'highlights': ["The function 'create bubbles' is utilized to attach the bubbles to a visual div. It involves creating a function called 'create bubbles' as an arrow function and using it to attach the bubbles to the visual div.", 'Setting the background colors of the bubbles based on an array of colors. The process involves setting the background colors of the bubbles by accessing the colors array and using the index to select the specific color for each bubble.', 'Selecting elements and creating a function to generate bubbles. The chapter details the process of selecting elements using document.querySelector and creating a function to generate bubbles using document.createElement.']}, {'end': 1394.761, 'start': 1170.82, 'title': 'Creating animated jumping balls', 'summary': "Discusses the process of creating animated jumping balls using keyframes and event listeners, addressing performance issues and achieving the desired visual effect, with a mention of the content creator's excitement about nearing 7,000 subscribers on youtube.", 'duration': 223.941, 'highlights': ['The process of creating animated jumping balls using keyframes and event listeners is detailed, addressing performance issues and achieving the desired visual effect.', 'The content creator expresses excitement about nearing 7,000 subscribers on YouTube and the possibility of going full time, reflecting on the impact of teaching on the platform.', 'The steps for adding keyframes to create the jumping animation for the balls are explained, including specific percentages and positioning details.', 'The performance issues related to the endless creation of bubbles during the animation are identified, and a solution involving event listeners and a function to remove bubbles after animation completion is outlined.', 'The addition of a z-index of minus one to the visual div to position it behind other elements is mentioned as a solution to a specific problem with the front positioning of an element.']}], 'duration': 388.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2VJlzeEVL8A/pics/2VJlzeEVL8A1006711.jpg', 'highlights': ['The process of creating animated jumping balls using keyframes and event listeners is detailed, addressing performance issues and achieving the desired visual effect.', 'The performance issues related to the endless creation of bubbles during the animation are identified, and a solution involving event listeners and a function to remove bubbles after animation completion is outlined.', 'The steps for adding keyframes to create the jumping animation for the balls are explained, including specific percentages and positioning details.', 'Setting the background colors of the bubbles based on an array of colors. The process involves setting the background colors of the bubbles by accessing the colors array and using the index to select the specific color for each bubble.', "The function 'create bubbles' is utilized to attach the bubbles to a visual div. It involves creating a function called 'create bubbles' as an arrow function and using it to attach the bubbles to the visual div.", 'Selecting elements and creating a function to generate bubbles. The chapter details the process of selecting elements using document.querySelector and creating a function to generate bubbles using document.createElement.', 'The addition of a z-index of minus one to the visual div to position it behind other elements is mentioned as a solution to a specific problem with the front positioning of an element.', 'The content creator expresses excitement about nearing 7,000 subscribers on YouTube and the possibility of going full time, reflecting on the impact of teaching on the platform.']}], 'highlights': ['The process of creating animated jumping balls using keyframes and event listeners is detailed, addressing performance issues and achieving the desired visual effect.', 'The performance issues related to the endless creation of bubbles during the animation are identified, and a solution involving event listeners and a function to remove bubbles after animation completion is outlined.', 'The steps for adding keyframes to create the jumping animation for the balls are explained, including specific percentages and positioning details.', 'Setting the background colors of the bubbles based on an array of colors. The process involves setting the background colors of the bubbles by accessing the colors array and using the index to select the specific color for each bubble.', "The function 'create bubbles' is utilized to attach the bubbles to a visual div. It involves creating a function called 'create bubbles' as an arrow function and using it to attach the bubbles to the visual div.", 'Selecting elements and creating a function to generate bubbles. The chapter details the process of selecting elements using document.querySelector and creating a function to generate bubbles using document.createElement.', 'The addition of a z-index of minus one to the visual div to position it behind other elements is mentioned as a solution to a specific problem with the front positioning of an element.', 'The chapter discusses fixing a sound playback issue where the sound track needs to finish before being able to click again, and the solution involves resetting the current time before playing the sound.']}