title
Build 15 JavaScript Projects - Vanilla JavaScript Course

description
Sharpen your JavaScript skills by building 15 projects using plain JavaScript without frameworks. In this tutorial course, you will be taught step-by-step how to build JavaScript projects. 💻 Code: https://github.com/john-smilga/javascript-basic-projects 🔗 View completed projects: https://www.vanillajavascriptprojects.com/ ✏️ Course created by John Smilga. Check out his YouTube channel: https://www.youtube.com/codingaddict 🔗 John Smilga's website: https://www.johnsmilga.com ⭐️ Course Contents ⭐️ ⌨️ (00:00) Intro ⌨️ (07:01) Color Flipper ⌨️ (30:25) Counter ⌨️ (44:04) Reviews ⌨️ (1:11:29) Navbar ⌨️ (1:26:21) Sidebar ⌨️ (1:39:03) Modal ⌨️ (1:48:26) Questions ⌨️ (2:16:25) Menu ⌨️ (3:16:13) Video ⌨️ (3:32:45) Scroll ⌨️ (4:36:15) Tabs ⌨️ (4:58:53) Countdown ⌨️ (5:56:35) Lorem Ipsum ⌨️ (6:18:23) Grocery ⌨️ (8:01:14) Slider -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Build 15 JavaScript Projects - Vanilla JavaScript Course', 'heatmap': [{'end': 3027.962, 'start': 2720.2, 'weight': 1}], 'summary': "Course 'build 15 javascript projects - vanilla javascript course' covers 15 vanilla javascript projects, including setting up projects, handling buttons, dom manipulation, implementing toggle functionality, dynamic frontend development, refactoring javascript, video projects, smooth scrolling, dynamic web content, countdown timers, form logic, to-do lists, local storage management, and setting up a javascript slider.", 'chapters': [{'end': 132.663, 'segs': [{'end': 66.742, 'src': 'embed', 'start': 0.149, 'weight': 1, 'content': [{'end': 10.016, 'text': "Hello, everyone, and welcome to 15 basic vanilla JavaScript project video, where we'll sharpen our JavaScript skills by building cool projects.", 'start': 0.149, 'duration': 9.867}, {'end': 17.541, 'text': "Since there are quite a few projects, I'm just going to show you how you can navigate to our website, where you can find all the projects.", 'start': 10.436, 'duration': 7.105}, {'end': 21.904, 'text': 'So that way you can explore all of them yourself on your own time.', 'start': 17.901, 'duration': 4.003}, {'end': 28.166, 'text': "So if you'd want to see all the projects that we're going to build in action, just navigate to john smilka.com.", 'start': 22.364, 'duration': 5.802}, {'end': 32.287, 'text': 'Again, the URL is www john smilka.com.', 'start': 28.626, 'duration': 3.661}, {'end': 34.448, 'text': 'Keep on scrolling past the courses.', 'start': 32.768, 'duration': 1.68}, {'end': 38.57, 'text': 'And then in the latest project, look for the JavaScript project.', 'start': 34.869, 'duration': 3.701}, {'end': 41.591, 'text': 'And then in here, just click on the home icon.', 'start': 39.23, 'duration': 2.361}, {'end': 45.773, 'text': "And you'll navigate to a website where you can see all the projects.", 'start': 42.291, 'duration': 3.482}, {'end': 50.235, 'text': 'And if you want to see how the project is going to look like, just click on a card.', 'start': 46.013, 'duration': 4.222}, {'end': 53.096, 'text': "And then of course, you'll see the project in action.", 'start': 50.875, 'duration': 2.221}, {'end': 55.697, 'text': 'So for example, this is going to be our reviewers project.', 'start': 53.396, 'duration': 2.301}, {'end': 63.501, 'text': "if you would want to see I don't know menu project, this is going to be another one where we will be filtering all the menu items.", 'start': 56.397, 'duration': 7.104}, {'end': 66.742, 'text': "And we'll take a look at how we can add them dynamically.", 'start': 63.781, 'duration': 2.961}], 'summary': 'Access 15 basic vanilla javascript projects on johnsmilka.com to explore and see them in action.', 'duration': 66.593, 'max_score': 0.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf4149.jpg'}, {'end': 110.176, 'src': 'embed', 'start': 91.448, 'weight': 0, 'content': [{'end': 106.154, 'text': 'One thing that I would want to mention is that during the project we will not use our functions and few other possible ES six syntax options simply because these projects were built as a practice for the course DOM module.', 'start': 91.448, 'duration': 14.706}, {'end': 110.176, 'text': 'And at that point in the course, we simply have not covered ES six yet.', 'start': 106.554, 'duration': 3.622}], 'summary': 'Functions and es6 syntax not used in project due to course limitations.', 'duration': 18.728, 'max_score': 91.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf491448.jpg'}], 'start': 0.149, 'title': '15 vanilla javascript projects', 'summary': 'Introduces 15 basic vanilla javascript projects available on johnsmilka.com, allowing viewers to explore and interact. these projects are part of a javascript course and utilize provided css, excluding the use of es6 syntax due to the course structure.', 'chapters': [{'end': 132.663, 'start': 0.149, 'title': '15 vanilla javascript projects', 'summary': 'Introduces 15 basic vanilla javascript projects available on johnsmilka.com, where viewers can explore and interact with the projects, which are part of a javascript course, with css provided and es6 syntax not used due to the course structure.', 'duration': 132.514, 'highlights': ['The projects are available on johnsmilka.com for viewers to explore and interact with.', 'The projects are part of a JavaScript course and consist of JavaScript tutorial and many other projects.', 'CSS for the projects is already created, and users only need to add a few classes in their HTML.', 'ES6 syntax is not utilized in the projects due to the course structure, but an extensive ES6 module is available in the course.']}], 'duration': 132.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf4149.jpg', 'highlights': ['The projects are available on johnsmilka.com for viewers to explore and interact with.', 'CSS for the projects is already created, and users only need to add a few classes in their HTML.', 'The projects are part of a JavaScript course and consist of JavaScript tutorial and many other projects.', 'ES6 syntax is not utilized in the projects due to the course structure, but an extensive ES6 module is available in the course.']}, {'end': 1136.484, 'segs': [{'end': 788.139, 'src': 'embed', 'start': 762.808, 'weight': 7, 'content': [{'end': 768.19, 'text': "So each and every time I'm going to click on a button, I'll change the background color for my body.", 'start': 762.808, 'duration': 5.382}, {'end': 770.891, 'text': 'And that is actually going to be our first task.', 'start': 768.95, 'duration': 1.941}, {'end': 773.372, 'text': 'how are we going to target the body??', 'start': 771.531, 'duration': 1.841}, {'end': 782.356, 'text': "Well, since we know that the body is the property on a document object, in order to show you that I'm just going to console log it document body.", 'start': 773.792, 'duration': 8.564}, {'end': 788.139, 'text': 'And then if we check it out, our dev tools will see that in the console, we have our body.', 'start': 782.996, 'duration': 5.143}], 'summary': 'Task: change body background color on button click', 'duration': 25.331, 'max_score': 762.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf4762808.jpg'}, {'end': 888.556, 'src': 'embed', 'start': 861.655, 'weight': 0, 'content': [{'end': 866.479, 'text': "But for the time being, we'll just have it as a hard coded value of two.", 'start': 861.655, 'duration': 4.824}, {'end': 874.486, 'text': "And then like I said, we'll use our document object, then we'll look for the body, then style property, not styles, style.", 'start': 866.98, 'duration': 7.506}, {'end': 879.831, 'text': 'And then more specifically, the background color has this value in the properties.', 'start': 875.067, 'duration': 4.764}, {'end': 884.355, 'text': 'And of course, you can see that Visual Studio code is giving me nice suggestions.', 'start': 880.571, 'duration': 3.784}, {'end': 888.556, 'text': "And for the time being, we'll set it up to a colors.", 'start': 884.995, 'duration': 3.561}], 'summary': 'Using a hard-coded value of 2, accessing background color from document object and setting up colors.', 'duration': 26.901, 'max_score': 861.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf4861655.jpg'}, {'end': 940.148, 'src': 'embed', 'start': 910.943, 'weight': 8, 'content': [{'end': 917.066, 'text': "And again, we'll do the same thing colors, And then we'll have a random number, let's save it.", 'start': 910.943, 'duration': 6.123}, {'end': 926.272, 'text': "And then of course, the moment I'll click on my button, you'll see that I'll access my third item, because of course, I'm using the index number two.", 'start': 917.287, 'duration': 8.985}, {'end': 929.975, 'text': "And then of course, I can refresh, and I'll do the same thing.", 'start': 927.153, 'duration': 2.822}, {'end': 940.148, 'text': "So all this is nice and dandy, but how we can actually make this more interesting, where we'll get a random number from our array.", 'start': 930.555, 'duration': 9.593}], 'summary': 'Using index number two, access the third item in the array.', 'duration': 29.205, 'max_score': 910.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf4910943.jpg'}, {'end': 982.368, 'src': 'embed', 'start': 960.048, 'weight': 6, 'content': [{'end': 968.275, 'text': 'Now not accept any parameters, but I will return from my function, a math random method.', 'start': 960.048, 'duration': 8.227}, {'end': 969.996, 'text': 'I will invoke it.', 'start': 969.035, 'duration': 0.961}, {'end': 973.78, 'text': 'And then of course, within my callback, I want to display it somewhere.', 'start': 970.397, 'duration': 3.383}, {'end': 978.084, 'text': "So I'm just going to go here with get random number.", 'start': 974.32, 'duration': 3.764}, {'end': 982.368, 'text': "That is of course my function, I'm just invoking my get random function.", 'start': 978.624, 'duration': 3.744}], 'summary': 'The function returns a random number using math.random method.', 'duration': 22.32, 'max_score': 960.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf4960048.jpg'}, {'end': 1109.741, 'src': 'embed', 'start': 1060.019, 'weight': 1, 'content': [{'end': 1065.041, 'text': "of course, if you add more items, you'll have bigger length, but the moment our length is four.", 'start': 1060.019, 'duration': 5.022}, {'end': 1069.783, 'text': "So we're just multiplying the random number we're getting by four.", 'start': 1065.561, 'duration': 4.222}, {'end': 1080.609, 'text': "And then, since I said that we'll be getting these random numbers between zero and one, we'll have a result between zero and then three,", 'start': 1070.344, 'duration': 10.265}, {'end': 1085.432, 'text': "point something, but it's never going to be four, because our value is never going to be one.", 'start': 1080.609, 'duration': 4.823}, {'end': 1095.715, 'text': "And I'll test it out by just saying that I would want to multiply that by colors and then length, which again in our case is for an RC.", 'start': 1086.372, 'duration': 9.343}, {'end': 1100.296, 'text': "if we click few times that we're essentially generating these numbers.", 'start': 1095.715, 'duration': 4.581}, {'end': 1106.578, 'text': "Notice, like I said, it's going to be from zero point something, all the way up to three point something.", 'start': 1100.936, 'duration': 5.642}, {'end': 1109.741, 'text': "of course, in our case, it doesn't get there, I can keep on clicking.", 'start': 1106.92, 'duration': 2.821}], 'summary': 'Random number multiplied by four generates result between 0 and 3.', 'duration': 49.722, 'max_score': 1060.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf41060019.jpg'}], 'start': 133.243, 'title': 'Setting up javascript projects, html and javascript logic, and using math methods', 'summary': 'Covers setting up javascript projects from johnsmoke.com, introduces the color flipper project with two setups, setting up index html and javascript logic, and using math methods in javascript to generate random numbers and manipulate arrays.', 'chapters': [{'end': 476.516, 'start': 133.243, 'title': 'Setting up javascript projects', 'summary': 'Discusses setting up javascript projects, obtaining starter projects from johnsmoke.com, navigating to github to clone or download the starter project, using setup and final folders for each project, and the importance of understanding not to directly copy and paste code from the final project. the chapter also introduces the first project, the color flipper, which involves changing the background color of a web page and displaying the color name. it includes two setups: a simple one with a fixed array of colors and a hex color setup with the ability to generate unique hex colors on the fly.', 'duration': 343.273, 'highlights': ['Obtaining starter projects from johnsmoke.com', 'Navigating to GitHub to clone or download the starter project', 'Using setup and final folders for each project', 'Importance of not directly copying and pasting code from the final project', 'Introduction of the first project, the color flipper']}, {'end': 805.99, 'start': 476.636, 'title': 'Setting up index html and javascript logic', 'summary': 'Covers setting up the index html with a navbar and main elements, then setting up javascript logic to change the background color of the body using an event listener and accessing the colors array.', 'duration': 329.354, 'highlights': ['Setting up the index HTML with a navbar, main elements, and button for JavaScript', 'Defining the colors array and accessing elements in JavaScript', 'Setting up an event listener to change the background color of the body']}, {'end': 1136.484, 'start': 806.45, 'title': 'Using math methods in javascript', 'summary': "Discusses using the 'math' object in javascript to generate random numbers between 0 and 3, and the use of the 'floor' method to round down to the closest integer, providing insights on array manipulation and practical application of these methods in coding.", 'duration': 330.034, 'highlights': ["The chapter explains using the 'Math' object in JavaScript to generate random numbers between 0 and 3 by leveraging the 'Math.random' method and multiplying the result by the array length, offering practical insights into array manipulation and random number generation.", "It demonstrates the use of the 'floor' method from the 'Math' object to round down the generated numbers to the closest integer, providing a solution to the issue of obtaining fractional values when generating random numbers.", "The transcript provides an example of using the 'console.log' method to display the generated random numbers, aiding in understanding the values obtained during the random number generation process."]}], 'duration': 1003.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf4133243.jpg', 'highlights': ['Introduction of the first project, the color flipper', 'Setting up the index HTML with a navbar, main elements, and button for JavaScript', 'Obtaining starter projects from johnsmoke.com', 'Navigating to GitHub to clone or download the starter project', 'Using setup and final folders for each project', 'Importance of not directly copying and pasting code from the final project', 'Defining the colors array and accessing elements in JavaScript', 'Setting up an event listener to change the background color of the body', "The chapter explains using the 'Math' object in JavaScript to generate random numbers between 0 and 3 by leveraging the 'Math.random' method and multiplying the result by the array length, offering practical insights into array manipulation and random number generation", "It demonstrates the use of the 'floor' method from the 'Math' object to round down the generated numbers to the closest integer, providing a solution to the issue of obtaining fractional values when generating random numbers", "The transcript provides an example of using the 'console.log' method to display the generated random numbers, aiding in understanding the values obtained during the random number generation process"]}, {'end': 2144.752, 'segs': [{'end': 1692.04, 'src': 'embed', 'start': 1667.146, 'weight': 0, 'content': [{'end': 1673.51, 'text': "So this is going to be a, we can try 11, maybe, let's see, okay, that is going to be B.", 'start': 1667.146, 'duration': 6.364}, {'end': 1675.511, 'text': 'And as you can see, our color is changing.', 'start': 1673.51, 'duration': 2.001}, {'end': 1680.013, 'text': "But of course, we're still getting all six values exactly the same.", 'start': 1675.551, 'duration': 4.462}, {'end': 1683.795, 'text': 'And we already know what we need to do, we need to set up a function.', 'start': 1680.893, 'duration': 2.902}, {'end': 1687.257, 'text': 'And we already actually have all the functionality.', 'start': 1684.495, 'duration': 2.762}, {'end': 1692.04, 'text': 'the only difference is going to be what is going to be the length that we use.', 'start': 1687.257, 'duration': 4.783}], 'summary': 'Testing 11 values, color change, same 6 values, function setup, length difference.', 'duration': 24.894, 'max_score': 1667.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf41667146.jpg'}, {'end': 1886.399, 'src': 'embed', 'start': 1851.972, 'weight': 1, 'content': [{'end': 1854.014, 'text': "Of course, I'll navigate back to my project.", 'start': 1851.972, 'duration': 2.042}, {'end': 1856.536, 'text': "And we'll start with index HTML.", 'start': 1854.514, 'duration': 2.022}, {'end': 1864.523, 'text': "So instead of this awesome one, we'll place a main element within the main element, we'll have our container.", 'start': 1856.896, 'duration': 7.627}, {'end': 1867.986, 'text': "And then within the container, we'll start with a header one.", 'start': 1865.103, 'duration': 2.883}, {'end': 1870.408, 'text': "And we'll just type counter.", 'start': 1868.946, 'duration': 1.462}, {'end': 1873.11, 'text': "Let's save it and see what we'll have.", 'start': 1871.068, 'duration': 2.042}, {'end': 1874.571, 'text': 'So I have my counter value.', 'start': 1873.39, 'duration': 1.181}, {'end': 1878.894, 'text': "Okay, Good, then we'll have a span.", 'start': 1874.811, 'duration': 4.083}, {'end': 1886.399, 'text': "So right after heading one, we'll have span with an ID of span, and we'll hard code it to be zero.", 'start': 1879.495, 'duration': 6.904}], 'summary': 'Creating a project with a main element, a header, and a counter value.', 'duration': 34.427, 'max_score': 1851.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf41851972.jpg'}], 'start': 1139.207, 'title': 'Generating random hex colors and building a counter project', 'summary': 'Demonstrates generating random hex colors using javascript and outlines the process of creating a counter project with dynamic color changes based on the count value. it covers the process of generating random hex colors through a loop and building a counter that can increase, decrease, and reset the count.', 'chapters': [{'end': 1344.206, 'start': 1139.207, 'title': 'Generating random hex colors', 'summary': 'Demonstrates generating random hex colors and sets up the functionality to pick a hex color using javascript, with examples of the code and the resulting color changes.', 'duration': 204.999, 'highlights': ['The chapter demonstrates generating random hex colors and sets up the functionality to pick a hex color using JavaScript.', 'Explanation of the code and the resulting color changes are presented, with examples of the process.', 'The use of math floor and math random to generate random numbers between zero and three is demonstrated.']}, {'end': 1618.803, 'start': 1345.458, 'title': 'Generating random hex colors', 'summary': 'Outlines the process of generating a random hex color through a loop that runs six times, adding a value from the array to create the color, and updating the background and text content accordingly.', 'duration': 273.345, 'highlights': ['The loop runs six times to generate the random hex color, with each iteration adding a value from the array, resulting in a unique color. (Quantifiable: Loop runs six times)', 'The hex color is created by adding values from the array to a variable, and the resulting color is applied to both the background and text content. (Quantifiable: Color applied to background and text content)', 'The function aims to generate a random number and retrieve a random item from the array to ensure the colors are not repetitive. (Quantifiable: Aim to generate random number and retrieve random item)']}, {'end': 1826.109, 'start': 1619.363, 'title': 'Generating random hex colors', 'summary': 'Explains the process of generating random hex colors using javascript, including the use of a loop to iterate through the color array and a function to return a random number multiplied by the length of the hex array, resulting in dynamic color changes on the web page.', 'duration': 206.746, 'highlights': ['The process of generating random hex colors using JavaScript involves using a loop to iterate through the color array and a function to return a random number multiplied by the length of the hex array.', 'The function to return a random number multiplied by the length of the hex array ensures dynamic color changes on the web page.', "The demonstration showcases the dynamic generation of hex colors and the real-time application of the generated colors to the web page's background and span text."]}, {'end': 2144.752, 'start': 1826.249, 'title': 'Building a counter project', 'summary': 'Covers the process of building a counter project, which includes creating a counter that can increase, decrease, and reset the count, with the color changing based on the count value, and also delves into setting up the logic in javascript to handle the functionality of the counter project.', 'duration': 318.503, 'highlights': ['Creating the counter project with HTML and CSS', 'Setting up the logic in JavaScript to handle counter functionality']}], 'duration': 1005.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf41139207.jpg', 'highlights': ['The loop runs six times to generate the random hex color, with each iteration adding a value from the array, resulting in a unique color. (Quantifiable: Loop runs six times)', 'The function aims to generate a random number and retrieve a random item from the array to ensure the colors are not repetitive. (Quantifiable: Aim to generate random number and retrieve random item)', 'The process of generating random hex colors using JavaScript involves using a loop to iterate through the color array and a function to return a random number multiplied by the length of the hex array.', "The demonstration showcases the dynamic generation of hex colors and the real-time application of the generated colors to the web page's background and span text.", 'The chapter demonstrates generating random hex colors and sets up the functionality to pick a hex color using JavaScript.']}, {'end': 3318.562, 'segs': [{'end': 3027.962, 'src': 'heatmap', 'start': 2720.2, 'weight': 1, 'content': [{'end': 2721.94, 'text': 'And of course, I have my our reviews.', 'start': 2720.2, 'duration': 1.74}, {'end': 2724.401, 'text': 'And then I have my underline as well.', 'start': 2722.52, 'duration': 1.881}, {'end': 2727.422, 'text': 'And after that, I would want to set up the actual review.', 'start': 2725.021, 'duration': 2.401}, {'end': 2729.402, 'text': "So let's see where the div ends.", 'start': 2727.962, 'duration': 1.44}, {'end': 2733.804, 'text': "Right here, we'll have the comment with a value of review.", 'start': 2730.062, 'duration': 3.742}, {'end': 2738.065, 'text': "And then you know what, I think I'm going to scroll down a little bit, just so you can see it better.", 'start': 2733.824, 'duration': 4.241}, {'end': 2741.886, 'text': "We'll have the article with a class of review.", 'start': 2738.645, 'duration': 3.241}, {'end': 2746.391, 'text': "And then within the article, we'll start by placing the image container.", 'start': 2742.606, 'duration': 3.785}, {'end': 2749.675, 'text': "So there's going to be a div with a class of image container.", 'start': 2746.831, 'duration': 2.844}, {'end': 2752.278, 'text': "Within the container, we'll have our image.", 'start': 2750.215, 'duration': 2.063}, {'end': 2757.404, 'text': "And you'll see that in the setup files, you'll have the person one jpg.", 'start': 2753.039, 'duration': 4.365}, {'end': 2759.327, 'text': "So that's the image you're looking for.", 'start': 2757.945, 'duration': 1.382}, {'end': 2763.289, 'text': "Now, of course, later, we'll use our data from the JavaScript.", 'start': 2759.807, 'duration': 3.482}, {'end': 2768.292, 'text': "But for the time being, while we're still setting up the HTML, we'll just use a local image.", 'start': 2763.709, 'duration': 4.583}, {'end': 2772.495, 'text': "So say here, I'm looking for person one jpg.", 'start': 2768.892, 'duration': 3.603}, {'end': 2776.497, 'text': 'And then I would want to add the ID for my image.', 'start': 2772.995, 'duration': 3.502}, {'end': 2782.28, 'text': "So in this case, I'm going to say the ID will be person, IMG, let's save it.", 'start': 2776.977, 'duration': 5.303}, {'end': 2788.865, 'text': 'And we should have our card, at least some part of the card And then we should also see the image.', 'start': 2782.821, 'duration': 6.044}, {'end': 2790.166, 'text': 'Okay, awesome.', 'start': 2789.045, 'duration': 1.121}, {'end': 2794.931, 'text': 'After that, we will have the heading for with an ID of author.', 'start': 2790.687, 'duration': 4.244}, {'end': 2796.592, 'text': "So it's right here ID.", 'start': 2795.511, 'duration': 1.081}, {'end': 2801.537, 'text': 'And the ID will be author, as far as the name will hard go in the beginning.', 'start': 2797.413, 'duration': 4.124}, {'end': 2807.903, 'text': "So I'll have it as Sarah Jones, then let's have a paragraph which will represent the job.", 'start': 2802.238, 'duration': 5.665}, {'end': 2810.245, 'text': 'So what job the person is doing.', 'start': 2808.624, 'duration': 1.621}, {'end': 2816.948, 'text': "And then in this case, I'm going to go with UX designer, UX as a designer.", 'start': 2810.825, 'duration': 6.123}, {'end': 2821.45, 'text': "And once I have the job, I think I'm going to go with an info.", 'start': 2817.768, 'duration': 3.682}, {'end': 2824.651, 'text': 'So paragraph with an ID of info.', 'start': 2821.87, 'duration': 2.781}, {'end': 2827.092, 'text': "And then here, I'm going to go with 20 words.", 'start': 2825.131, 'duration': 1.961}, {'end': 2828.873, 'text': "And we'll save it.", 'start': 2828.033, 'duration': 0.84}, {'end': 2830.614, 'text': 'So that should do it for the card.', 'start': 2829.293, 'duration': 1.321}, {'end': 2833.495, 'text': 'And now I would want to add, of course, my buttons.', 'start': 2831.134, 'duration': 2.361}, {'end': 2837.877, 'text': "So I'll go first with a next one, and previous one.", 'start': 2834.095, 'duration': 3.782}, {'end': 2844.181, 'text': 'So where I have the article, still within the article, I will set up my pre even next buttons.', 'start': 2838.497, 'duration': 5.684}, {'end': 2847.503, 'text': 'So pre next buttons.', 'start': 2844.681, 'duration': 2.822}, {'end': 2852.946, 'text': "And in this case, I'm going to go with div button container.", 'start': 2848.203, 'duration': 4.743}, {'end': 2860.31, 'text': "And then within this container, I'll have my two buttons, one with a class of pre button, and the other one with a next button.", 'start': 2853.506, 'duration': 6.804}, {'end': 2866.034, 'text': "And in there, I'll place my font awesome icons, which also by the way, you have access to.", 'start': 2860.711, 'duration': 5.323}, {'end': 2869.439, 'text': 'So you have a folder, well, we have the font awesome icons.', 'start': 2866.374, 'duration': 3.065}, {'end': 2875.007, 'text': "So let's start with a button, the class will be priv btn.", 'start': 2869.919, 'duration': 5.088}, {'end': 2880.394, 'text': "And then within a button, we'll have a fa s, fa Chevron.", 'start': 2875.167, 'duration': 5.227}, {'end': 2882.896, 'text': 'Chevron icon.', 'start': 2881.796, 'duration': 1.1}, {'end': 2884.977, 'text': "And we'll have left.", 'start': 2884.077, 'duration': 0.9}, {'end': 2886.237, 'text': "So that's the value.", 'start': 2885.357, 'duration': 0.88}, {'end': 2888.438, 'text': 'Chevron left and save it.', 'start': 2886.638, 'duration': 1.8}, {'end': 2889.438, 'text': "That's the button.", 'start': 2888.738, 'duration': 0.7}, {'end': 2891.039, 'text': 'And now copy and paste.', 'start': 2889.899, 'duration': 1.14}, {'end': 2894.18, 'text': 'And the only thing that I would need to change the class.', 'start': 2891.339, 'duration': 2.841}, {'end': 2897.341, 'text': "So instead of left, we'll have the right one.", 'start': 2894.68, 'duration': 2.661}, {'end': 2903.868, 'text': 'And then if you want to do a challenge with me later, then I would suggest setting up the button right away.', 'start': 2897.941, 'duration': 5.927}, {'end': 2907.772, 'text': "So again, if you don't want the button, then you can just ignore it.", 'start': 2904.508, 'duration': 3.264}, {'end': 2912.717, 'text': "So right after this div, I'm just gonna say a random button.", 'start': 2908.292, 'duration': 4.425}, {'end': 2916.281, 'text': "And I'll have a button with a class of random button.", 'start': 2913.858, 'duration': 2.423}, {'end': 2925.354, 'text': "btn And then as far as the text, surprise me, we'll save it, we have our HTML.", 'start': 2918.183, 'duration': 7.171}, {'end': 2929.76, 'text': 'So of course, now we can start working on our logic using JavaScript.', 'start': 2925.774, 'duration': 3.986}, {'end': 2933.521, 'text': 'while hard coding all my values is awesome.', 'start': 2930.799, 'duration': 2.722}, {'end': 2939.065, 'text': 'Probably a better option would be using JavaScript, where we can set up our functionality.', 'start': 2934.221, 'duration': 4.844}, {'end': 2943.128, 'text': "And in order to do that, we'll have to navigate to app and JS.", 'start': 2939.785, 'duration': 3.343}, {'end': 2947.931, 'text': "And once we arrive here, we'll see that we'll have the array.", 'start': 2944.008, 'duration': 3.923}, {'end': 2954.936, 'text': "And then within that array, we'll have items, and each item represents specific person.", 'start': 2948.511, 'duration': 6.425}, {'end': 2963.722, 'text': 'So we have your name, we have the ID as a side note that will not use as was just mimic a more like real world response.', 'start': 2955.536, 'duration': 8.186}, {'end': 2965.603, 'text': 'Then we also have the job.', 'start': 2964.302, 'duration': 1.301}, {'end': 2970.246, 'text': 'So that of course, would represent whatever we have right underneath the name.', 'start': 2965.983, 'duration': 4.263}, {'end': 2975.85, 'text': "then we'll have the image which I'm just hosting on a cloud memory, just for the easier access.", 'start': 2970.246, 'duration': 5.604}, {'end': 2978.112, 'text': 'And then also we have the text.', 'start': 2976.251, 'duration': 1.861}, {'end': 2983.436, 'text': 'And then before we continue, I want to address the elephant in the room.', 'start': 2978.913, 'duration': 4.523}, {'end': 2988.939, 'text': 'Yes, normally, you would get this type of data using Ajax requests.', 'start': 2984.056, 'duration': 4.883}, {'end': 2990.42, 'text': 'So it would be somewhere else.', 'start': 2989.039, 'duration': 1.381}, {'end': 2993.722, 'text': 'And then you just perform a HTTP request.', 'start': 2991.02, 'duration': 2.702}, {'end': 2996.444, 'text': "Why we're setting up data locally.", 'start': 2994.483, 'duration': 1.961}, {'end': 2997.765, 'text': "Well, it's very simple.", 'start': 2996.464, 'duration': 1.301}, {'end': 3002.668, 'text': "We haven't covered what is Ajax and how to set up HTTP request.", 'start': 2998.145, 'duration': 4.523}, {'end': 3007.391, 'text': "That's why for the time being, we will use local data.", 'start': 3003.288, 'duration': 4.103}, {'end': 3012.374, 'text': 'And again, it is an array array of objects here.', 'start': 3007.891, 'duration': 4.483}, {'end': 3020.498, 'text': 'Each object represents different person with different name with different job with different image, as well as different text.', 'start': 3012.894, 'duration': 7.604}, {'end': 3023.099, 'text': 'And we have total four items.', 'start': 3021.178, 'duration': 1.921}, {'end': 3027.962, 'text': "That's why as we'll be navigating back and forth, we will have four items.", 'start': 3023.62, 'duration': 4.342}], 'summary': 'Setting up html and javascript for a review card with four items.', 'duration': 307.762, 'max_score': 2720.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf42720200.jpg'}, {'end': 2912.717, 'src': 'embed', 'start': 2881.796, 'weight': 0, 'content': [{'end': 2882.896, 'text': 'Chevron icon.', 'start': 2881.796, 'duration': 1.1}, {'end': 2884.977, 'text': "And we'll have left.", 'start': 2884.077, 'duration': 0.9}, {'end': 2886.237, 'text': "So that's the value.", 'start': 2885.357, 'duration': 0.88}, {'end': 2888.438, 'text': 'Chevron left and save it.', 'start': 2886.638, 'duration': 1.8}, {'end': 2889.438, 'text': "That's the button.", 'start': 2888.738, 'duration': 0.7}, {'end': 2891.039, 'text': 'And now copy and paste.', 'start': 2889.899, 'duration': 1.14}, {'end': 2894.18, 'text': 'And the only thing that I would need to change the class.', 'start': 2891.339, 'duration': 2.841}, {'end': 2897.341, 'text': "So instead of left, we'll have the right one.", 'start': 2894.68, 'duration': 2.661}, {'end': 2903.868, 'text': 'And then if you want to do a challenge with me later, then I would suggest setting up the button right away.', 'start': 2897.941, 'duration': 5.927}, {'end': 2907.772, 'text': "So again, if you don't want the button, then you can just ignore it.", 'start': 2904.508, 'duration': 3.264}, {'end': 2912.717, 'text': "So right after this div, I'm just gonna say a random button.", 'start': 2908.292, 'duration': 4.425}], 'summary': 'Instruction to change button class from left to right and setting up a random button after a div.', 'duration': 30.921, 'max_score': 2881.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf42881796.jpg'}, {'end': 3259.839, 'src': 'embed', 'start': 3233.899, 'weight': 2, 'content': [{'end': 3241.945, 'text': 'So what I would want to do, once my document loads, then I would want to access whatever item from the array.', 'start': 3233.899, 'duration': 8.046}, {'end': 3244.207, 'text': 'So whatever number you have, I have zero.', 'start': 3242.346, 'duration': 1.861}, {'end': 3246.849, 'text': "So I'll be selecting the first item.", 'start': 3244.667, 'duration': 2.182}, {'end': 3251.333, 'text': 'And then all the variables that I have the image author job and info.', 'start': 3247.51, 'duration': 3.823}, {'end': 3253.754, 'text': "Well, I'll replace those values.", 'start': 3251.773, 'duration': 1.981}, {'end': 3255.376, 'text': "So let's start very simply.", 'start': 3254.255, 'duration': 1.121}, {'end': 3259.839, 'text': 'And we can do that by using DOM content loaded.', 'start': 3256.136, 'duration': 3.703}], 'summary': 'Access and replace array items after document load using dom content loaded.', 'duration': 25.94, 'max_score': 3233.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf43233899.jpg'}], 'start': 2145.173, 'title': 'Javascript button handling', 'summary': 'Discusses using for each method to iterate through buttons, adding event listeners for handling clicks, and setting up a reviews project using html and javascript. it showcases the ability to access, manipulate, and update button properties and counts.', 'chapters': [{'end': 2220.985, 'start': 2145.173, 'title': 'Using for each method', 'summary': 'Discusses the usage of the for each method to iterate through a list of buttons and access each item using a callback function, demonstrating the ability to access and manipulate each button individually.', 'duration': 75.812, 'highlights': ['The for each method is used to iterate through a list of buttons, allowing access to each item using a callback function.', 'The callback function allows parameter access to each item in the list, demonstrating the ability to manipulate each button individually.', 'The flexibility to name the parameter as per preference without affecting functionality is showcased, emphasizing the versatility of the for each method.']}, {'end': 2624.605, 'start': 2221.686, 'title': 'Event listener and button click handling', 'summary': 'Focuses on adding event listeners to buttons, handling button clicks, and updating the count based on the button clicked, showcasing the use of event object, current target, class list, and if statements, ultimately changing the color of the count based on its value.', 'duration': 402.919, 'highlights': ['Adding event listeners to buttons and handling button clicks', 'Updating count based on the button clicked', 'Changing the color of the count based on its value']}, {'end': 3318.562, 'start': 2624.605, 'title': 'Setting up reviews project', 'summary': 'Discusses setting up the reviews project using html and javascript, including creating the layout, accessing elements, and displaying initial items from an array. the project involves looping over reviews, setting up random reviews, and prompting a challenge for the audience.', 'duration': 693.957, 'highlights': ['The chapter discusses setting up the reviews project using HTML and JavaScript.', 'The project involves looping over reviews, setting up random reviews, and prompting a challenge for the audience.', "The event 'Dom content loaded' is used to display the initial item from the array when the document loads."]}], 'duration': 1173.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf42145173.jpg', 'highlights': ['The for each method is used to iterate through a list of buttons, allowing access to each item using a callback function.', 'Adding event listeners to buttons and handling button clicks', 'The project involves looping over reviews, setting up random reviews, and prompting a challenge for the audience.']}, {'end': 4278.048, 'segs': [{'end': 3351.266, 'src': 'embed', 'start': 3319.142, 'weight': 3, 'content': [{'end': 3322.985, 'text': 'Well, technically I could just access it using reviews array correct,', 'start': 3319.142, 'duration': 3.843}, {'end': 3328.689, 'text': 'because we have reviews and then I can have my square brackets and then pass in my current item.', 'start': 3322.985, 'duration': 5.704}, {'end': 3333.532, 'text': "But I think it's going to be a little bit faster, if I assign it to a variable.", 'start': 3329.229, 'duration': 4.303}, {'end': 3336.134, 'text': "So I'm going to go here comes on them.", 'start': 3334.013, 'duration': 2.121}, {'end': 3341.678, 'text': "And then we'll have reviews array, since I would want to access items from my array.", 'start': 3336.995, 'duration': 4.683}, {'end': 3344.02, 'text': "And then I'll just pass my current item.", 'start': 3342.198, 'duration': 1.822}, {'end': 3351.266, 'text': 'again, whatever your value is over here, just make sure that you have values from zero to three.', 'start': 3344.64, 'duration': 6.626}], 'summary': 'Accessing array items can be done directly or by assigning to a variable, which may be faster.', 'duration': 32.124, 'max_score': 3319.142, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf43319142.jpg'}, {'end': 3505.434, 'src': 'embed', 'start': 3481.963, 'weight': 4, 'content': [{'end': 3488.525, 'text': "So if I'm trying to access something with a value of four, that would mean index of four, of course, there's nothing there.", 'start': 3481.963, 'duration': 6.562}, {'end': 3491.186, 'text': "That's the only reason why we're getting this error.", 'start': 3489.005, 'duration': 2.181}, {'end': 3494.007, 'text': "Again, I'll go back to my zero one.", 'start': 3491.726, 'duration': 2.281}, {'end': 3496.228, 'text': "And now I'd want to target the rest of them.", 'start': 3494.747, 'duration': 1.481}, {'end': 3502.692, 'text': 'Now when I say rest of them, what do I mean? Well, I have the author, I have the job, and I have the info.', 'start': 3497.188, 'duration': 5.504}, {'end': 3505.434, 'text': "So one by one, we'll have the author.", 'start': 3503.172, 'duration': 2.262}], 'summary': 'Error due to accessing index four with no value. targeting author, job, and info.', 'duration': 23.471, 'max_score': 3481.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf43481963.jpg'}, {'end': 3557.135, 'src': 'embed', 'start': 3524.824, 'weight': 5, 'content': [{'end': 3527.905, 'text': "And then we'll have job and then text content.", 'start': 3524.824, 'duration': 3.081}, {'end': 3529.365, 'text': "We'll do that too.", 'start': 3528.565, 'duration': 0.8}, {'end': 3534.907, 'text': 'And this is going to be equal to my item job again, the property in my item object.', 'start': 3530.026, 'duration': 4.881}, {'end': 3539.609, 'text': 'And then last one will be my info, and then text content.', 'start': 3535.567, 'duration': 4.042}, {'end': 3542.93, 'text': 'And that is equal to item and then dot text.', 'start': 3539.949, 'duration': 2.981}, {'end': 3543.95, 'text': "we'll save it.", 'start': 3543.47, 'duration': 0.48}, {'end': 3549.252, 'text': 'And of course, all these four values are now applied once the document loads.', 'start': 3544.25, 'duration': 5.002}, {'end': 3550.473, 'text': 'Okay, awesome.', 'start': 3549.632, 'duration': 0.841}, {'end': 3557.135, 'text': "And now I guess we can start working on this functionality, where once I press, I'll change the item.", 'start': 3550.953, 'duration': 6.182}], 'summary': 'Instructions for setting job, text content, info, and function', 'duration': 32.311, 'max_score': 3524.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf43524824.jpg'}, {'end': 3746.713, 'src': 'embed', 'start': 3696.798, 'weight': 1, 'content': [{'end': 3705.303, 'text': "So based on when we would want to call it, I'm just gonna say show person and then pass in current item, show person pass in current item.", 'start': 3696.798, 'duration': 8.505}, {'end': 3709.504, 'text': 'Now technically, you could access current item and the way it is.', 'start': 3705.882, 'duration': 3.622}, {'end': 3718.768, 'text': "But since I wanted to practice on how we can pass in some arguments and actually use those arguments, that's why I set up here as a parameter.", 'start': 3709.964, 'duration': 8.804}, {'end': 3727.531, 'text': "Again, technically, if you really wanted to, and I'll show you that at the end, we can just access the current item, since it is global anyway.", 'start': 3719.168, 'duration': 8.363}, {'end': 3730.533, 'text': 'But again, that is as a side note.', 'start': 3727.991, 'duration': 2.542}, {'end': 3736.968, 'text': "So Now let's set up those two event listeners, we have one for the pre and one for next.", 'start': 3730.913, 'duration': 6.055}, {'end': 3742.971, 'text': "So have comment, I guess here, we'll say show next person.", 'start': 3737.628, 'duration': 5.343}, {'end': 3744.872, 'text': "And you're not let me scroll down.", 'start': 3743.611, 'duration': 1.261}, {'end': 3746.713, 'text': 'So we have more.', 'start': 3744.952, 'duration': 1.761}], 'summary': 'Setting up event listeners for showing next person, and accessing current item as a parameter.', 'duration': 49.915, 'max_score': 3696.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf43696798.jpg'}, {'end': 3830.031, 'src': 'embed', 'start': 3799.517, 'weight': 0, 'content': [{'end': 3801.057, 'text': "And of course, I didn't change the class.", 'start': 3799.517, 'duration': 1.54}, {'end': 3804.299, 'text': 'So my bad, I did not change the class, let me save it.', 'start': 3801.617, 'duration': 2.682}, {'end': 3805.559, 'text': 'Now I have next button.', 'start': 3804.679, 'duration': 0.88}, {'end': 3807.66, 'text': "And now of course, we're selecting correctly.", 'start': 3805.919, 'duration': 1.741}, {'end': 3811.182, 'text': "And I'm just showing you that that yes, mistakes happen.", 'start': 3808.38, 'duration': 2.802}, {'end': 3813.623, 'text': "That's part of being a developer.", 'start': 3811.822, 'duration': 1.801}, {'end': 3816.084, 'text': 'Once in a while, we make a mistake.', 'start': 3814.083, 'duration': 2.001}, {'end': 3819.686, 'text': "And of course, when we talk about me, it's probably more than once in a while.", 'start': 3816.564, 'duration': 3.122}, {'end': 3821.807, 'text': "But anyway, that's a different topic.", 'start': 3819.706, 'duration': 2.101}, {'end': 3823.888, 'text': 'So we have a show person.', 'start': 3822.207, 'duration': 1.681}, {'end': 3825.008, 'text': "Okay, now I'm calling.", 'start': 3823.908, 'duration': 1.1}, {'end': 3830.031, 'text': "And now you'll see that each and every time we'll click will access different person.", 'start': 3825.028, 'duration': 5.003}], 'summary': 'Demonstrating code mistakes and rectification in development. emphasizing the inevitability of errors and their resolution.', 'duration': 30.514, 'max_score': 3799.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf43799517.jpg'}], 'start': 3319.142, 'title': 'Javascript array and dom manipulation', 'summary': 'Covers array access, variable assignment, and dom manipulation techniques in javascript, including accessing array items, navigating through array items, and setting up event listeners for click events.', 'chapters': [{'end': 3502.692, 'start': 3319.142, 'title': 'Array access and variable assignment', 'summary': 'Discusses accessing array items, assigning them to variables, and accessing properties like image, author, job, and info, while cautioning against accessing items with indexes exceeding the array length.', 'duration': 183.55, 'highlights': ['Assigning array items to variables can improve speed and readability, especially when accessing multiple properties within the items.', "Accessing array items with indexes exceeding the array length can lead to errors, as demonstrated by the 'property image of undefined' error when trying to access the fourth item in a 0-based index array.", 'Emphasizing the importance of ensuring that accessed indexes fall within the valid range of the array, specifically noting the valid range of indexes in the given array as 0 to 3.']}, {'end': 3819.686, 'start': 3503.172, 'title': 'Javascript dom manipulation', 'summary': 'Covers the process of manipulating the dom using javascript, such as accessing and modifying elements, creating functions, and setting up event listeners for click events.', 'duration': 316.514, 'highlights': ['Creating a function for DOM manipulation', 'Setting up event listeners for click events', 'Accessing and modifying elements in the DOM']}, {'end': 4278.048, 'start': 3819.706, 'title': 'Accessing and navigating array items', 'summary': 'Demonstrates accessing and navigating through array items, handling errors when accessing items outside the array bounds, and adding a random item feature using event listeners and random number generation.', 'duration': 458.342, 'highlights': ['Demonstration of accessing and navigating through array items', 'Handling errors when accessing items outside the array bounds', 'Adding a random item feature using event listeners and random number generation']}], 'duration': 958.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf43319142.jpg', 'highlights': ['Assigning array items to variables can improve speed and readability, especially when accessing multiple properties within the items.', 'Emphasizing the importance of ensuring that accessed indexes fall within the valid range of the array, specifically noting the valid range of indexes in the given array as 0 to 3.', "Accessing array items with indexes exceeding the array length can lead to errors, as demonstrated by the 'property image of undefined' error when trying to access the fourth item in a 0-based index array.", 'Demonstration of accessing and navigating through array items', 'Adding a random item feature using event listeners and random number generation', 'Creating a function for DOM manipulation', 'Setting up event listeners for click events', 'Handling errors when accessing items outside the array bounds', 'Accessing and modifying elements in the DOM']}, {'end': 5364.916, 'segs': [{'end': 4577.133, 'src': 'embed', 'start': 4551.362, 'weight': 4, 'content': [{'end': 4560.914, 'text': "In the style CSS, you'll have a links class, which at the moment has this height zero or four hidden, and then transition is equal to transition.", 'start': 4551.362, 'duration': 9.552}, {'end': 4565.679, 'text': 'And then another class show links has the height of 10 REMs.', 'start': 4561.494, 'duration': 4.185}, {'end': 4575.531, 'text': 'Now why this height is 10 REMs, because my height over here, once the links are open, is 160 pixels, which is 10 REMs.', 'start': 4566.24, 'duration': 9.291}, {'end': 4577.133, 'text': 'So that answers this question.', 'start': 4575.851, 'duration': 1.282}], 'summary': 'The show links class has a height of 10 rems, which is 160 pixels when links are open.', 'duration': 25.771, 'max_score': 4551.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf44551362.jpg'}, {'end': 4700.141, 'src': 'embed', 'start': 4670.862, 'weight': 0, 'content': [{'end': 4674.063, 'text': 'And now what I would want to do is just manually add this class.', 'start': 4670.862, 'duration': 3.201}, {'end': 4677.164, 'text': 'So notice, I have my own art list with a class of links.', 'start': 4674.443, 'duration': 2.721}, {'end': 4680.325, 'text': "And in here, I'm just gonna write show links.", 'start': 4677.744, 'duration': 2.581}, {'end': 4683.446, 'text': 'Now once I add it, check it out, of course, I can see the links.', 'start': 4680.785, 'duration': 2.661}, {'end': 4690.328, 'text': 'Now if the class is already there, and if we remove it, then of course, my class disappears.', 'start': 4683.966, 'duration': 6.362}, {'end': 4693.517, 'text': "And this is exactly what we'll do using JavaScript.", 'start': 4690.936, 'duration': 2.581}, {'end': 4694.758, 'text': "we'll target the button.", 'start': 4693.517, 'duration': 1.241}, {'end': 4700.141, 'text': "then, once we click the button, we'll check whether the show links class is already on the on our list.", 'start': 4694.758, 'duration': 5.383}], 'summary': "Manually adding 'show links' class enables displaying links in the list.", 'duration': 29.279, 'max_score': 4670.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf44670862.jpg'}, {'end': 4742.328, 'src': 'embed', 'start': 4714.99, 'weight': 6, 'content': [{'end': 4719.233, 'text': "So I'll head back to my project, and I'm looking for app js.", 'start': 4714.99, 'duration': 4.243}, {'end': 4722.495, 'text': "And then in the app js, you'll find some comments.", 'start': 4719.733, 'duration': 2.762}, {'end': 4726.478, 'text': 'And of course, I will explain what they mean in a second.', 'start': 4722.535, 'duration': 3.943}, {'end': 4734.203, 'text': "But we'll start by targeting two things, we will target our nav toggle, as well as links, and I'll assign them to some kind of variables.", 'start': 4726.818, 'duration': 7.385}, {'end': 4738.246, 'text': 'So now toggle, and that will be equal to document.', 'start': 4734.663, 'duration': 3.583}, {'end': 4742.328, 'text': "Since I have a class there, I think I'm going to go with query selector.", 'start': 4739.186, 'duration': 3.142}], 'summary': 'In the app js, the speaker targets nav toggle and links using variables.', 'duration': 27.338, 'max_score': 4714.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf44714990.jpg'}, {'end': 4836.744, 'src': 'embed', 'start': 4807.239, 'weight': 1, 'content': [{'end': 4809.021, 'text': "And of course, I'll open up the dev tools.", 'start': 4807.239, 'duration': 1.782}, {'end': 4812.824, 'text': "Since it's very important to us to see what is happening here.", 'start': 4810.021, 'duration': 2.803}, {'end': 4813.524, 'text': 'So console.', 'start': 4812.864, 'duration': 0.66}, {'end': 4819.849, 'text': 'And then once I click notice, I have the list of classes that the links currently have.', 'start': 4813.864, 'duration': 5.985}, {'end': 4826.014, 'text': "Now, of course, the only class that's there is links class, because we haven't added the show links.", 'start': 4820.33, 'duration': 5.684}, {'end': 4827.795, 'text': "Okay, that's awesome.", 'start': 4826.554, 'duration': 1.241}, {'end': 4830.558, 'text': 'But then what are our next steps?', 'start': 4828.276, 'duration': 2.282}, {'end': 4836.744, 'text': 'Well, what happens is not only we have a class list, but then we also have methods.', 'start': 4831.098, 'duration': 5.646}], 'summary': 'Opening dev tools allows inspection of classes and methods in the console.', 'duration': 29.505, 'max_score': 4807.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf44807239.jpg'}, {'end': 4972.396, 'src': 'embed', 'start': 4943.268, 'weight': 2, 'content': [{'end': 4949.93, 'text': 'But if the show links class is not already added to my links, then of course, I would want to add it.', 'start': 4943.268, 'duration': 6.662}, {'end': 4955.151, 'text': 'And again, I will come this out, just so you can have it for your own reference.', 'start': 4950.67, 'duration': 4.481}, {'end': 4962.573, 'text': "But I'm going to go if then links, then again, a class list, and we're looking for contains a method.", 'start': 4955.611, 'duration': 6.962}, {'end': 4965.774, 'text': "And I'm going to pass in show links.", 'start': 4963.313, 'duration': 2.461}, {'end': 4972.396, 'text': "And if that is the case, if the show links is already there, again, we're setting up a toggle functionality.", 'start': 4966.394, 'duration': 6.002}], 'summary': 'Adding show links class to links and setting up toggle functionality.', 'duration': 29.128, 'max_score': 4943.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf44943268.jpg'}], 'start': 4278.648, 'title': 'Implementing toggle functionality', 'summary': 'Covers creating a navbar toggle project, css and javascript implementation, and javascript toggle functionality, with a focus on manipulating visibility, and media queries for different screen sizes.', 'chapters': [{'end': 4423.3, 'start': 4278.648, 'title': 'Navbar toggle project', 'summary': 'Covers creating a navbar toggle project, involving setting up a navbar with toggle functionality for smaller screens and iterating over arrays to display links, with a detailed walkthrough of the html setup and the use of existing html resources.', 'duration': 144.652, 'highlights': ['Creating a navbar toggle project', 'Iterating over arrays to display links', 'Detailed walkthrough of HTML setup']}, {'end': 4830.558, 'start': 4423.721, 'title': 'Implementing toggle functionality in web development', 'summary': 'Details the process of implementing toggle functionality on a website, involving css and javascript, aiming to toggle the display of links on different screen sizes and understanding the general concept behind the toggle functionality.', 'duration': 406.837, 'highlights': ['The chapter details the process of implementing toggle functionality on a website, involving CSS and JavaScript, aiming to toggle the display of links on different screen sizes and understanding the general concept behind the toggle functionality.', 'The height for the links is set to 10 REMs on a bigger screen, and the functionality involves toggling the show links class to display or hide the links.', 'The JavaScript code involves targeting the nav toggle and links, setting up event listeners, and understanding the class list property to check for the presence of the show links class.']}, {'end': 5364.916, 'start': 4831.098, 'title': 'Javascript toggle functionality', 'summary': 'Demonstrates the implementation of javascript toggle functionality using methods like contains, add, remove, and toggle, as well as the usage of a one-liner toggle method, affecting the class list to manipulate the visibility of elements and the importance of media queries in adjusting element visibility across different screen sizes.', 'duration': 533.818, 'highlights': ['The chapter demonstrates the implementation of JavaScript toggle functionality using methods like contains, add, remove, and toggle, affecting the class list to manipulate the visibility of elements.', 'The usage of a one-liner toggle method is showcased, providing a more concise alternative to achieve toggle functionality by affecting the class list.', 'The importance of media queries in adjusting element visibility across different screen sizes is emphasized, highlighting the need to add a height of auto to the links for proper visibility.']}], 'duration': 1086.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf44278648.jpg', 'highlights': ['Creating a navbar toggle project', 'The chapter demonstrates the implementation of JavaScript toggle functionality using methods like contains, add, remove, and toggle, affecting the class list to manipulate the visibility of elements.', 'The chapter details the process of implementing toggle functionality on a website, involving CSS and JavaScript, aiming to toggle the display of links on different screen sizes and understanding the general concept behind the toggle functionality.', 'The usage of a one-liner toggle method is showcased, providing a more concise alternative to achieve toggle functionality by affecting the class list.', 'Iterating over arrays to display links', 'The JavaScript code involves targeting the nav toggle and links, setting up event listeners, and understanding the class list property to check for the presence of the show links class.', 'Detailed walkthrough of HTML setup', 'The importance of media queries in adjusting element visibility across different screen sizes is emphasized, highlighting the need to add a height of auto to the links for proper visibility.', 'The height for the links is set to 10 REMs on a bigger screen, and the functionality involves toggling the show links class to display or hide the links.']}, {'end': 6908.167, 'segs': [{'end': 5417.506, 'src': 'embed', 'start': 5365.557, 'weight': 0, 'content': [{'end': 5376.048, 'text': 'And then the same goes for social media icons, where we have on our list list items, and then each item is just a link to a social media account.', 'start': 5365.557, 'duration': 10.491}, {'end': 5378.457, 'text': 'again is just a straight up HTML.', 'start': 5376.656, 'duration': 1.801}, {'end': 5382.4, 'text': 'So I thought we could save a little bit of time and skip to typing.', 'start': 5378.878, 'duration': 3.522}, {'end': 5385.302, 'text': "And I'll select everything, I'll copy that.", 'start': 5383.161, 'duration': 2.141}, {'end': 5390.326, 'text': 'And then in the index HTML, I will look for the end of the header.', 'start': 5385.843, 'duration': 4.483}, {'end': 5393.808, 'text': 'So make sure that you copy and paste in the sidebar.', 'start': 5390.686, 'duration': 3.122}, {'end': 5402.495, 'text': 'But right off the sidebar, paste, you should see here the links, as well as social media icons.', 'start': 5394.269, 'duration': 8.226}, {'end': 5405.097, 'text': 'Now of course, I can close my sidebar.', 'start': 5402.975, 'duration': 2.122}, {'end': 5409.2, 'text': 'And we can figure out how to add functionality using JavaScript.', 'start': 5405.697, 'duration': 3.503}, {'end': 5417.506, 'text': 'Before we start typing away our JavaScript functionality in the app, Jess, I think it will be very crucial that we understand our setup.', 'start': 5409.52, 'duration': 7.986}], 'summary': 'Adding social media icons to the sidebar using html and planning javascript functionality.', 'duration': 51.949, 'max_score': 5365.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf45365557.jpg'}, {'end': 5766.117, 'src': 'embed', 'start': 5740.23, 'weight': 4, 'content': [{'end': 5747.812, 'text': "So we'll say if sidebar, so if sidebar, and then we have the class list property, of course, and then we have the contents.", 'start': 5740.23, 'duration': 7.582}, {'end': 5756.775, 'text': 'And using the contains, I can just say, if the sidebar has the show sidebar class, then of course, I would want to remove it.', 'start': 5748.513, 'duration': 8.262}, {'end': 5760.356, 'text': "But if it doesn't have the class, I would want to add it.", 'start': 5757.415, 'duration': 2.941}, {'end': 5764.277, 'text': 'So in here, I will say sidebar, then class list.', 'start': 5760.816, 'duration': 3.461}, {'end': 5766.117, 'text': "And then I'll say remove.", 'start': 5764.837, 'duration': 1.28}], 'summary': 'Checks for show sidebar class and removes it if present, adds it if not.', 'duration': 25.887, 'max_score': 5740.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf45740230.jpg'}, {'end': 5955.474, 'src': 'embed', 'start': 5927.857, 'weight': 9, 'content': [{'end': 5935.361, 'text': "So as you can see, we have our functionality, we can see our sidebar, we can hide our sidebar, and we're good to go.", 'start': 5927.857, 'duration': 7.504}, {'end': 5946.288, 'text': "Again, the main thing is to set up CSS where you hide the sidebar by default And then you're just toggling the class that has that value of transform,", 'start': 5935.862, 'duration': 10.426}, {'end': 5947.629, 'text': 'translate zero.', 'start': 5946.288, 'duration': 1.341}, {'end': 5955.474, 'text': "Great And up next, we have the model project, where if I open up the project, you'll see that we'll have some kind of background image.", 'start': 5948.509, 'duration': 6.965}], 'summary': 'Functionality includes toggling sidebar and setting up css for hiding sidebar by default. model project features a background image.', 'duration': 27.617, 'max_score': 5927.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf45927857.jpg'}, {'end': 6001.373, 'src': 'embed', 'start': 5971.403, 'weight': 7, 'content': [{'end': 5975.946, 'text': 'And then some model content, which in our case, again, is just going to be a one sentence.', 'start': 5971.403, 'duration': 4.543}, {'end': 5978.387, 'text': "And of course, we'll have an option of closing the model.", 'start': 5976.466, 'duration': 1.921}, {'end': 5981.869, 'text': 'Once I click the model, notice model is gone.', 'start': 5978.947, 'duration': 2.922}, {'end': 5984.29, 'text': "And we'll start with our HTML.", 'start': 5982.469, 'duration': 1.821}, {'end': 5990.053, 'text': 'So head back to my setup project, and then probably make this site a little bit smaller.', 'start': 5984.67, 'duration': 5.383}, {'end': 5992.334, 'text': "And I don't want the adding one.", 'start': 5990.874, 'duration': 1.46}, {'end': 5995.136, 'text': 'In fact, we will set up our hero first.', 'start': 5993.075, 'duration': 2.061}, {'end': 6001.373, 'text': 'when we talk about hero, we talk about a massive background image, and then some kind of content in the center.', 'start': 5995.589, 'duration': 5.784}], 'summary': 'Creating a model with one-sentence content and setting up a hero with a background image and central content.', 'duration': 29.97, 'max_score': 5971.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf45971403.jpg'}, {'end': 6185.371, 'src': 'embed', 'start': 6153.495, 'weight': 5, 'content': [{'end': 6158.578, 'text': 'And the classes are going to be I f s a f a times.', 'start': 6153.495, 'duration': 5.083}, {'end': 6163.76, 'text': "And once I save, as I keep on repeating, we won't see anything in a browser.", 'start': 6159.238, 'duration': 4.522}, {'end': 6167.062, 'text': 'But we can start working on our functionality.', 'start': 6164.321, 'duration': 2.741}, {'end': 6171.944, 'text': "Since it's not our first rodeo, essentially, we have done quite a few projects together.", 'start': 6167.482, 'duration': 4.462}, {'end': 6178.207, 'text': 'And the setup is almost the same as we had for the sidebar and the navbar.', 'start': 6172.525, 'duration': 5.682}, {'end': 6185.371, 'text': 'I would want to give you a challenge where I want you to try to create a project yourself.', 'start': 6179.068, 'duration': 6.303}], 'summary': 'Classes will meet x times, familiar setup for project challenges.', 'duration': 31.876, 'max_score': 6153.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf46153495.jpg'}], 'start': 5365.557, 'title': 'Javascript web development', 'summary': 'Covers adding social media icons with javascript, creating a javascript sidebar toggle and modal project, implementing a modal overlay with a close button, and setting up a general questions section using classes and divs for effective organization and visual appeal.', 'chapters': [{'end': 5606.448, 'start': 5365.557, 'title': 'Adding social media icons with javascript', 'summary': 'Discusses adding social media icons using javascript, including toggling the sidebar class to show and hide the icons and explaining the use of transform property and translate values for sidebar functionality.', 'duration': 240.891, 'highlights': ['The chapter explains how to add social media icons using JavaScript, including the process of selecting and copying the HTML code for the icons, and pasting it into the index HTML file, saving time and effort.', 'It details the functionality of the sidebar using JavaScript, including the use of the transform property and translate values to hide and show the sidebar, providing a clear understanding of the process.', 'The chapter emphasizes the use of JavaScript to toggle the show sidebar class, enabling the sidebar to appear and disappear based on the presence of the class, showcasing the practical application of JavaScript functionality.']}, {'end': 6045.27, 'start': 5607.347, 'title': 'Javascript sidebar toggle and modal project', 'summary': 'Discusses how to select and manipulate elements in javascript to create a sidebar toggle functionality with event listeners and toggle classes, as well as setting up a modal project with a background image, content, and a button that triggers a model with an overlay, and the option to close the model.', 'duration': 437.923, 'highlights': ['Setting up sidebar toggle functionality', 'Using the toggle method for efficient class toggling', 'Implementing a modal project']}, {'end': 6580.102, 'start': 6045.831, 'title': 'Creating modal overlay and close button', 'summary': 'Discusses creating a modal overlay with a close button, including adding classes and event listeners in javascript, while emphasizing the importance of trying to create the project independently for learning purposes.', 'duration': 534.271, 'highlights': ['The instructor explains the process of creating a modal overlay with a close button, including adding classes and event listeners in JavaScript.', 'Emphasis on trying to create the project independently for learning purposes.']}, {'end': 6908.167, 'start': 6580.782, 'title': 'Setting up general questions section', 'summary': 'Details the process of creating a section for general questions, comprising a title, three articles with single questions, each with a title, a paragraph, and two buttons, utilizing classes and divs for effective organization and visual appeal.', 'duration': 327.385, 'highlights': ['Creating a section for general questions with a title, three articles, single questions, and buttons.', 'Utilizing classes and divs for effective organization and visual appeal.']}], 'duration': 1542.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf45365557.jpg', 'highlights': ['Creating a section for general questions with a title, three articles, single questions, and buttons.', 'The chapter explains how to add social media icons using JavaScript, including the process of selecting and copying the HTML code for the icons, and pasting it into the index HTML file, saving time and effort.', 'The instructor explains the process of creating a modal overlay with a close button, including adding classes and event listeners in JavaScript.', 'The chapter emphasizes the use of JavaScript to toggle the show sidebar class, enabling the sidebar to appear and disappear based on the presence of the class, showcasing the practical application of JavaScript functionality.', 'Using the toggle method for efficient class toggling', 'Utilizing classes and divs for effective organization and visual appeal.', 'Setting up sidebar toggle functionality', 'Implementing a modal project', 'The chapter details the functionality of the sidebar using JavaScript, including the use of the transform property and translate values to hide and show the sidebar, providing a clear understanding of the process.', 'Emphasis on trying to create the project independently for learning purposes.']}, {'end': 8700.985, 'segs': [{'end': 7344.748, 'src': 'embed', 'start': 7317.941, 'weight': 6, 'content': [{'end': 7321.162, 'text': 'And then the button is sitting within the title.', 'start': 7317.941, 'duration': 3.221}, {'end': 7324.142, 'text': "But what I'm looking for is this question.", 'start': 7321.702, 'duration': 2.44}, {'end': 7326.583, 'text': 'So that is going to be the parent of the parent.', 'start': 7324.323, 'duration': 2.26}, {'end': 7331.605, 'text': 'So moment I click on a button, I know that I have clicked on one of the buttons.', 'start': 7327.163, 'duration': 4.442}, {'end': 7337.606, 'text': "And then I'm just going to say get me the parent, and more specifically, parent of the parent.", 'start': 7332.225, 'duration': 5.381}, {'end': 7344.748, 'text': 'So once you get that parent, then just add that show text to a parent.', 'start': 7338.286, 'duration': 6.462}], 'summary': 'The goal is to get the parent of the parent and add show text to it.', 'duration': 26.807, 'max_score': 7317.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf47317941.jpg'}, {'end': 7445.699, 'src': 'embed', 'start': 7411.344, 'weight': 0, 'content': [{'end': 7412.365, 'text': 'the show text class.', 'start': 7411.344, 'duration': 1.021}, {'end': 7418.026, 'text': 'what do you think we would need to add? And I can give you a hint that we just need to repeat the same thing.', 'start': 7413.223, 'duration': 4.803}, {'end': 7420.127, 'text': 'We just go with parent element.', 'start': 7418.566, 'duration': 1.561}, {'end': 7423.029, 'text': "And now you'll notice something really, really cool.", 'start': 7420.648, 'duration': 2.381}, {'end': 7432.435, 'text': "That if I click here, not only I'm referencing the button and the title, but I can also right away access the actual question.", 'start': 7423.609, 'duration': 8.826}, {'end': 7433.635, 'text': 'And that is it.', 'start': 7433.075, 'duration': 0.56}, {'end': 7435.876, 'text': "That's all we actually need.", 'start': 7434.135, 'duration': 1.741}, {'end': 7445.699, 'text': 'Because again, remember, once we have access to that parent, what do we have to do? We already know class list, toggle, and then show text.', 'start': 7436.596, 'duration': 9.103}], 'summary': 'Teaching how to add a repeating element with parent element access and toggling class list', 'duration': 34.355, 'max_score': 7411.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf47411344.jpg'}, {'end': 8457.635, 'src': 'embed', 'start': 8423.325, 'weight': 3, 'content': [{'end': 8424.926, 'text': "So at the moment, we'll just structure one.", 'start': 8423.325, 'duration': 1.601}, {'end': 8430.308, 'text': "we'll do a little bit of copy and paste, just so we can see that our calmly our works.", 'start': 8426.047, 'duration': 4.261}, {'end': 8439.791, 'text': "And then, like I already said, probably 50, 000 times, we'll just grab that code that we have for that item, and add it to our JavaScript.", 'start': 8430.888, 'duration': 8.903}, {'end': 8442.812, 'text': 'And as always, I do like to have the comments here.', 'start': 8440.431, 'duration': 2.381}, {'end': 8447.493, 'text': 'So single item, just because I think it gives a little bit of structure.', 'start': 8442.852, 'duration': 4.641}, {'end': 8457.635, 'text': "So I'll go here and off single item, and then it will be an article, and we'll have a class of single item or not.", 'start': 8448.073, 'duration': 9.562}], 'summary': 'Adding code for single item, aiming for 50,000 impressions', 'duration': 34.31, 'max_score': 8423.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf48423325.jpg'}, {'end': 8605.615, 'src': 'embed', 'start': 8580.776, 'weight': 8, 'content': [{'end': 8587.563, 'text': "And just to double check that my column layout works, I'm going to take my item, and then copy and paste a few times.", 'start': 8580.776, 'duration': 6.787}, {'end': 8590.726, 'text': "Now we don't need to change the values or anything like that.", 'start': 8587.943, 'duration': 2.783}, {'end': 8596.131, 'text': "I just want to see whether on a bigger screen, I'll have to come out And I do, which is awesome.", 'start': 8590.846, 'duration': 5.285}, {'end': 8601.593, 'text': 'So now in this case, I can press Command Z, and go back to that one single item.', 'start': 8596.451, 'duration': 5.142}, {'end': 8605.615, 'text': 'So once I save it, I have all the HTML that I currently lead.', 'start': 8602.053, 'duration': 3.562}], 'summary': 'Testing column layout on bigger screen, works with multiple items, can revert back to single item, and save as html.', 'duration': 24.839, 'max_score': 8580.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf48580776.jpg'}, {'end': 8680.053, 'src': 'embed', 'start': 8654.365, 'weight': 4, 'content': [{'end': 8662.567, 'text': "where again, since we're not getting this from external API, if you ever would want to use that menu array somewhere else,", 'start': 8654.365, 'duration': 8.202}, {'end': 8666.088, 'text': 'just make sure that you also have this images folder.', 'start': 8662.567, 'duration': 3.521}, {'end': 8668.309, 'text': 'And in fact, it is in the route.', 'start': 8666.648, 'duration': 1.661}, {'end': 8677.072, 'text': 'So as you can see here, the path, the dot and then images, that just means that this code will be located in the index HTML.', 'start': 8668.889, 'duration': 8.183}, {'end': 8680.053, 'text': 'And that just references that images array.', 'start': 8677.492, 'duration': 2.561}], 'summary': 'Ensure images folder is available for using the menu array elsewhere.', 'duration': 25.688, 'max_score': 8654.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf48654365.jpg'}], 'start': 6908.968, 'title': 'Javascript functionality and dom traversal', 'summary': 'Covers setting up functionality in javascript for a project, including hiding and displaying question text and icons, and dynamically adding and removing classes using javascript to toggle the visibility of elements. it also emphasizes understanding general concepts before coding and the completion of the project through dom traversal and selectors.', 'chapters': [{'end': 7074.363, 'start': 6908.968, 'title': 'Javascript functionality setup', 'summary': 'Covers setting up functionality in javascript for a project, including hiding and displaying question text and icons based on user interaction, and emphasizing understanding general concepts before coding.', 'duration': 165.395, 'highlights': ['The chapter covers setting up functionality in JavaScript for a project, including hiding and displaying question text and icons based on user interaction.', 'Emphasizes understanding general concepts before coding to have a clear idea of what needs to be accomplished.', 'Describes the process of hiding question text by default and displaying it only after clicking a button, accomplished through CSS classes and the use of display properties.']}, {'end': 8137.612, 'start': 7074.783, 'title': 'Javascript dom traversal and selectors', 'summary': 'Explains how to dynamically add and remove classes using javascript to toggle the visibility of elements, first by traversing the dom and then using selectors inside the element, resulting in the completion of the project.', 'duration': 1062.829, 'highlights': ['The chapter explains how to dynamically add and remove classes using JavaScript to toggle the visibility of elements, first by traversing the DOM and then using selectors inside the element, resulting in the completion of the project.', 'The chapter covers the process of traversing the DOM to select elements and add event listeners, such as adding a click event listener to each button and toggling the show text class to toggle the visibility of the parent question element.', 'The chapter also explores using selectors inside the element to select specific elements within a loop and adding event listeners to toggle the show text class, ultimately achieving the desired functionality.']}, {'end': 8700.985, 'start': 8138.072, 'title': 'Setting up javascript functionality', 'summary': 'Discusses setting up javascript functionality for a project, including selecting elements, populating a page dynamically, and adding filtering options, emphasizing the importance of local data and preparing the html structure before dynamically adding it in javascript.', 'duration': 562.913, 'highlights': ['Setting up JavaScript functionality for a project', 'Emphasizing the importance of local data', 'Preparing the HTML structure before dynamically adding it in JavaScript']}], 'duration': 1792.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf46908968.jpg', 'highlights': ['The chapter covers setting up functionality in JavaScript for a project, including hiding and displaying question text and icons based on user interaction.', 'The chapter explains how to dynamically add and remove classes using JavaScript to toggle the visibility of elements, resulting in the completion of the project.', 'Emphasizes understanding general concepts before coding to have a clear idea of what needs to be accomplished.', 'The chapter covers the process of traversing the DOM to select elements and add event listeners, such as adding a click event listener to each button and toggling the show text class to toggle the visibility of the parent question element.', 'Describes the process of hiding question text by default and displaying it only after clicking a button, accomplished through CSS classes and the use of display properties.', 'The chapter also explores using selectors inside the element to select specific elements within a loop and adding event listeners to toggle the show text class, ultimately achieving the desired functionality.', 'Emphasizing the importance of local data', 'Preparing the HTML structure before dynamically adding it in JavaScript', 'Setting up JavaScript functionality for a project']}, {'end': 10579.567, 'segs': [{'end': 9376.306, 'src': 'embed', 'start': 9351.33, 'weight': 2, 'content': [{'end': 9358.693, 'text': "But the reason why we're adding here empty parentheses is because then we won't have these annoying commas in between.", 'start': 9351.33, 'duration': 7.363}, {'end': 9359.914, 'text': "So let's save it.", 'start': 9359.173, 'duration': 0.741}, {'end': 9363.616, 'text': "And you'll see that we will have a one giant string.", 'start': 9360.034, 'duration': 3.582}, {'end': 9370.742, 'text': "Now, if you want that, you'll see that in between them, you'll have those commas.", 'start': 9364.097, 'duration': 6.645}, {'end': 9372.963, 'text': 'So let me find we have article here.', 'start': 9371.262, 'duration': 1.701}, {'end': 9376.306, 'text': 'And notice in between articles, you have this comma.', 'start': 9373.744, 'duration': 2.562}], 'summary': 'Demonstrating how to avoid annoying commas by adding empty parentheses, resulting in a single string without them.', 'duration': 24.976, 'max_score': 9351.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf49351330.jpg'}, {'end': 9521.226, 'src': 'embed', 'start': 9496.294, 'weight': 1, 'content': [{'end': 9504.177, 'text': "If we wouldn't want to repeat ourselves, it would be better if I would place all this functionality in a function.", 'start': 9496.294, 'duration': 7.883}, {'end': 9509.079, 'text': "And then as a parameter in a function, I'll pass in the array.", 'start': 9505.137, 'duration': 3.942}, {'end': 9513.16, 'text': 'And again, it will make way more sense as we set up the filtering.', 'start': 9509.379, 'duration': 3.781}, {'end': 9521.226, 'text': 'At the moment, you would be like, Okay, why is this guy refactoring the code again, in order to set up filtering, it will just make sense.', 'start': 9513.54, 'duration': 7.686}], 'summary': 'Refactor functionality into a function to set up filtering.', 'duration': 24.932, 'max_score': 9496.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf49496294.jpg'}, {'end': 9570.304, 'src': 'embed', 'start': 9544.409, 'weight': 5, 'content': [{'end': 9548.811, 'text': 'And then like I said, this item will be looking for the array.', 'start': 9544.409, 'duration': 4.402}, {'end': 9551.993, 'text': 'So this function will be looking for some kind of array.', 'start': 9549.151, 'duration': 2.842}, {'end': 9554.354, 'text': "Now in this case, we'll still use our menu one.", 'start': 9552.413, 'duration': 1.941}, {'end': 9558.336, 'text': "But since it is parameter, I'm going to call this menu items.", 'start': 9554.874, 'duration': 3.462}, {'end': 9560.557, 'text': "that's going to be my parameter.", 'start': 9559.056, 'duration': 1.501}, {'end': 9564.12, 'text': 'And as an argument, yes, initially, we will still pass our menu.', 'start': 9560.657, 'duration': 3.463}, {'end': 9570.304, 'text': "But as we start filtering, you'll see why it's so convenient for us to have it as a function.", 'start': 9564.68, 'duration': 5.624}], 'summary': "The function will be looking for an array, using 'menu items' as a parameter to filter the menu.", 'duration': 25.895, 'max_score': 9544.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf49544409.jpg'}, {'end': 10390.789, 'src': 'embed', 'start': 10368.983, 'weight': 0, 'content': [{'end': 10378.245, 'text': "In this case, and again we can just leave that for your reference, just in case you ever want to, but we'll go with if category.", 'start': 10368.983, 'duration': 9.262}, {'end': 10379.146, 'text': 'if that is the case,', 'start': 10378.245, 'duration': 0.901}, {'end': 10389.208, 'text': "if the category is equal to all so that would be all button and I'll need to sign this to a string then I want to call my display menu items.", 'start': 10379.146, 'duration': 10.062}, {'end': 10390.789, 'text': "So that's going to be my function.", 'start': 10389.628, 'duration': 1.161}], 'summary': "Function 'display menu items' is called if the category is 'all'.", 'duration': 21.806, 'max_score': 10368.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf410368983.jpg'}], 'start': 8701.525, 'title': 'Javascript frontend development', 'summary': 'Covers displaying items on the screen, javascript map method, dynamic menu setup, adding event listeners, and dynamic menu filtering. it includes examples and emphasizes the importance of dynamic frontend development.', 'chapters': [{'end': 8964.988, 'start': 8701.525, 'title': 'Displaying items on the screen', 'summary': 'Explains the process of displaying items on the screen using javascript, including the use of dom manipulation, event listeners, and iterating over data array to dynamically populate html elements.', 'duration': 263.463, 'highlights': ['The process of displaying items on the screen involves using DOM manipulation, event listeners, and iterating over data array to dynamically populate HTML elements.', 'The importance of understanding the basics of displaying items on the screen is emphasized, as it is crucial when working with JavaScript.', 'The use of window add event listener to listen for the DOM content loaded event, and a callback function to access the menu array and dynamically populate the items, is demonstrated.', "The concept of 'dressing up' items in HTML is introduced, involving the iteration over the items array and the addition of corresponding data into the HTML elements."]}, {'end': 9201.349, 'start': 8965.008, 'title': 'Javascript map method', 'summary': 'Introduces the map method in javascript, showcasing how it can be used to iterate through an array, modify its structure, and access specific properties, ultimately preparing a customized response with quantifiable examples', 'duration': 236.341, 'highlights': ["The map method is introduced, demonstrating its ability to iterate through an array, access each item, and modify the array's structure, with an example showcasing the customization of a response using template strings.", "The process of accessing specific properties of the items in the array, such as the 'title' property, using the template string and the dollar sign, is explained, resulting in a customized response with unique titles referencing the original array values.", "The demonstration of the map method includes the modification of the array's structure to create a response with unique titles corresponding to the original array values, thus showcasing the practical application of the method.", 'The chapter also emphasizes the utilization of the map method to prepare a customized response, highlighting the ability to access and modify specific properties of the items in the array, resulting in a quantifiable outcome with unique titles matching the original array values.']}, {'end': 9831.698, 'start': 9201.349, 'title': 'Dynamic menu setup with javascript', 'summary': 'Covers the process of dynamically populating a menu by accessing object properties, joining items into a single string, and adding the string as data using inner html. it also emphasizes the importance of setting up the functionality in a function to facilitate filtering setup.', 'duration': 630.349, 'highlights': ['The chapter covers the process of dynamically populating a menu by accessing object properties, joining items into a single string, and adding the string as data using inner HTML.', 'Emphasizes the importance of setting up the functionality in a function to facilitate filtering setup.']}, {'end': 10165.912, 'start': 9832.359, 'title': 'Adding event listeners and using data set property', 'summary': 'Explains adding event listeners to buttons, demonstrating the data set property to access values and using it to create functionality for category filtering in a web application.', 'duration': 333.553, 'highlights': ['The chapter explains the process of adding event listeners to buttons in JavaScript.', 'The chapter demonstrates the use of the data set property to access specific values associated with HTML elements.', 'The chapter showcases the process of utilizing the data set property to create functionality for category filtering in a web application.']}, {'end': 10579.567, 'start': 10166.612, 'title': 'Dynamic menu filtering', 'summary': 'Explains how to dynamically filter a menu array based on category ids, and discusses the importance of setting up dynamic category values to avoid hardcoding and the limitations it presents.', 'duration': 412.955, 'highlights': ['The chapter explains how to dynamically filter a menu array based on category IDs, and discusses the importance of setting up dynamic category values to avoid hardcoding and the limitations it presents.', "The function 'display menu items' looks for the array and uses the filter method to filter out items based on the category value, resulting in a new array with specific items.", 'It emphasizes the importance of setting up dynamic category values to avoid hardcoding and the limitations it presents.']}], 'duration': 1878.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf48701525.jpg', 'highlights': ["The map method iterates through an array, accessing and modifying the array's structure, showcasing practical application (4)", 'Displaying items on the screen involves DOM manipulation, event listeners, and dynamic population of HTML elements (1)', 'Importance of understanding basics of displaying items on the screen is emphasized for working with JavaScript (1)', 'Dynamically populating a menu involves accessing object properties, joining items into a single string, and adding as data using inner HTML (3)', 'Adding event listeners to buttons in JavaScript and utilizing the data set property for category filtering (4)', 'Dynamically filtering a menu array based on category IDs, emphasizing the importance of dynamic category values (5)']}, {'end': 11846.381, 'segs': [{'end': 10864.034, 'src': 'embed', 'start': 10838.639, 'weight': 0, 'content': [{'end': 10843.7, 'text': 'So I would want to store this in the categories array since I know that map returns a new array.', 'start': 10838.639, 'duration': 5.061}, {'end': 10850.044, 'text': "So my callback function I'll have my item, I'm not going to be very creative with my parameter.", 'start': 10844.14, 'duration': 5.904}, {'end': 10857.529, 'text': "And I'm just going to say that as we're iterating over my array, I would like to return item, and then category.", 'start': 10850.484, 'duration': 7.045}, {'end': 10864.034, 'text': "And as always, I do prefer console logging everything, just so we can see that we're all on the same page.", 'start': 10858.109, 'duration': 5.925}], 'summary': 'Storing in categories array, iterating over array to return item and category.', 'duration': 25.395, 'max_score': 10838.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf410838639.jpg'}, {'end': 11110.453, 'src': 'embed', 'start': 11082.339, 'weight': 5, 'content': [{'end': 11085.841, 'text': "once we write out the code, I'll cover in greater detail what we're doing.", 'start': 11082.339, 'duration': 3.502}, {'end': 11089.603, 'text': "but item category, let's save it.", 'start': 11085.841, 'duration': 3.762}, {'end': 11091.224, 'text': "So here's what is happening.", 'start': 11090.203, 'duration': 1.021}, {'end': 11094.765, 'text': "First of all, we can see in a console that I'm getting all my unique categories.", 'start': 11091.304, 'duration': 3.461}, {'end': 11098.467, 'text': 'I have all I have breakfast, lunch, shakes and dinner.', 'start': 11095.346, 'duration': 3.121}, {'end': 11100.869, 'text': "As you can see, I'm not repeating them.", 'start': 11099.528, 'duration': 1.341}, {'end': 11104.751, 'text': 'But what is happening here in the function body is followed.', 'start': 11101.349, 'duration': 3.402}, {'end': 11110.453, 'text': "where I have the if statement, and I'm saying if values.", 'start': 11105.251, 'duration': 5.202}], 'summary': 'Identifying unique categories: breakfast, lunch, shakes, dinner.', 'duration': 28.114, 'max_score': 11082.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf411082339.jpg'}, {'end': 11341.903, 'src': 'embed', 'start': 11318.93, 'weight': 1, 'content': [{'end': 11326.034, 'text': 'Now, of course, once I have set up my buttons that is only the start I would need to set this up as a string,', 'start': 11318.93, 'duration': 7.104}, {'end': 11329.175, 'text': 'because we still have each and every value in our array.', 'start': 11326.034, 'duration': 3.141}, {'end': 11332.057, 'text': 'And remember, we need to use join method for that.', 'start': 11329.335, 'duration': 2.722}, {'end': 11341.903, 'text': 'But then we have multiple ways we can either do it the long way where we have display menu, and then I just reassign it to display menu join.', 'start': 11332.617, 'duration': 9.286}], 'summary': 'Setting up buttons and converting array values to a string using the join method.', 'duration': 22.973, 'max_score': 11318.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf411318930.jpg'}], 'start': 10579.567, 'title': 'Dynamic menu button setup and javascript refactoring', 'summary': 'Discusses dynamically setting up menu buttons, emphasizing dynamic data handling and javascript implementation. it also covers refactoring javascript code using map and reduce methods to get unique categories, highlighting the importance of reduce method.', 'chapters': [{'end': 10768.224, 'start': 10579.567, 'title': 'Dynamic button setup for menu items', 'summary': 'Discusses the process of dynamically generating and setting up buttons for menu categories, emphasizing the need for dynamic data handling and javascript implementation, outlining the steps and challenges involved.', 'duration': 188.657, 'highlights': ['The need for dynamic data handling and JavaScript implementation for menu buttons', 'Process of dynamically generating and setting up buttons for menu categories', 'Challenges in handling unique categories and incorporating JavaScript']}, {'end': 10991.142, 'start': 10768.764, 'title': 'Refactoring javascript code with map and reduce', 'summary': 'Covers refactoring javascript code to get unique categories using the map and reduce methods, highlighting the importance of using reduce to achieve this and emphasizing the power of the reduce method.', 'duration': 222.378, 'highlights': ['The importance of getting unique categories is emphasized, as without it, displaying buttons for categories will result in displaying 10 buttons instead of the desired unique categories.', 'The use of the reduce method to get unique categories is highlighted, showcasing the power and utility of the reduce method in JavaScript.', 'The process of using the map method to iterate over the menu array and return only the categories is explained, demonstrating the initial step in the refactoring process.', 'The significance of practicing with the reduce method is emphasized, highlighting its effectiveness and importance in JavaScript programming.', 'The concept of setting an initial value and returning an array, rather than just summing up values, is explained in the context of using the reduce method to achieve the desired result.']}, {'end': 11369.266, 'start': 10991.803, 'title': 'Using reduce to get unique categories', 'summary': 'Explains how to use the reduce method to get unique categories from an array, iterating over each item and checking for duplicates, resulting in a smoother process for adding the categories as buttons to the menu.', 'duration': 377.463, 'highlights': ['Using the reduce method to iterate over the array and check for duplicates, resulting in the retrieval of unique categories, such as breakfast, lunch, shakes, and dinner.', 'Demonstrating the use of the map method to create category buttons, dynamically wrapping the category values in HTML buttons and using the join method to convert the array into a string.', 'Explaining the process of using the if statement to check if the item category is already in the array and conditionally adding it if not, resulting in the retrieval of unique categories.', 'Emphasizing the necessity to return the values in each iteration when using the reduce method, as failing to do so would disrupt the functionality.']}, {'end': 11846.381, 'start': 11369.506, 'title': 'Dynamic button addition and event handling', 'summary': 'Discusses dynamically adding buttons to the dom using javascript, handling event listeners for the buttons, and the importance of accessing dynamically added elements after they are added to the dom rather than before.', 'duration': 476.875, 'highlights': ['The importance of accessing dynamically added elements after they are added to the DOM rather than before.', 'Adding event listeners for dynamically added buttons.', 'Adding buttons dynamically to the DOM using JavaScript.']}], 'duration': 1266.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf410579567.jpg', 'highlights': ['The process of dynamically generating and setting up buttons for menu categories', 'The use of the reduce method to get unique categories is highlighted', 'The importance of getting unique categories is emphasized', 'Using the reduce method to iterate over the array and check for duplicates', 'Adding buttons dynamically to the DOM using JavaScript', 'Demonstrating the use of the map method to create category buttons', 'The concept of setting an initial value and returning an array is explained', 'The necessity to return the values in each iteration when using the reduce method', 'Emphasizing the necessity to return the values in each iteration when using the reduce method', 'The importance of accessing dynamically added elements after they are added to the DOM']}, {'end': 12812.054, 'segs': [{'end': 11950.059, 'src': 'embed', 'start': 11920.703, 'weight': 3, 'content': [{'end': 11927.487, 'text': "So I'm going to go with controls muted, autoplay loop, that should do it.", 'start': 11920.703, 'duration': 6.784}, {'end': 11931.369, 'text': "So once I save it, you'll notice that we'll have access to controls.", 'start': 11927.947, 'duration': 3.422}, {'end': 11936.632, 'text': 'So the user can control the video, video will be muted by default.', 'start': 11932.009, 'duration': 4.623}, {'end': 11939.693, 'text': 'And the moment it loads, it will start playing.', 'start': 11937.332, 'duration': 2.361}, {'end': 11941.254, 'text': "That's why we'll have the autoplay.", 'start': 11939.913, 'duration': 1.341}, {'end': 11950.059, 'text': "At the very end we have the loop, which just means that once the video is done we'll start playing it from the start again.", 'start': 11941.934, 'duration': 8.125}], 'summary': 'Video settings: muted, autoplay, loop for user control and playback.', 'duration': 29.356, 'max_score': 11920.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf411920703.jpg'}, {'end': 12212.23, 'src': 'embed', 'start': 12185.053, 'weight': 0, 'content': [{'end': 12189.116, 'text': 'But I would want to start by selecting two things on the one to select my button.', 'start': 12185.053, 'duration': 4.063}, {'end': 12192.478, 'text': 'And then also want to select my video container.', 'start': 12189.816, 'duration': 2.662}, {'end': 12197.621, 'text': 'So in the index HTML, the button has a class of switch btn.', 'start': 12193.078, 'duration': 4.543}, {'end': 12201.224, 'text': 'And the video one has the video container class.', 'start': 12198.182, 'duration': 3.042}, {'end': 12205.526, 'text': 'So those are the few things that I would want to select in order to set up my button.', 'start': 12201.764, 'duration': 3.762}, {'end': 12208.348, 'text': "And I'm going to go with variable btn.", 'start': 12206.227, 'duration': 2.121}, {'end': 12212.23, 'text': "Then I'll use document query selector.", 'start': 12209.028, 'duration': 3.202}], 'summary': 'Selects button and video container using class and query selector.', 'duration': 27.177, 'max_score': 12185.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf412185053.jpg'}, {'end': 12349.725, 'src': 'embed', 'start': 12319.207, 'weight': 1, 'content': [{'end': 12321.908, 'text': 'So go with btn class list.', 'start': 12319.207, 'duration': 2.701}, {'end': 12326.87, 'text': "class list, and then we'll go with add function.", 'start': 12322.768, 'duration': 4.102}, {'end': 12328.992, 'text': "And then in here, I'll pass slide.", 'start': 12327.331, 'duration': 1.661}, {'end': 12333.094, 'text': "So if the button does not have the slide class, then we'll add it.", 'start': 12329.392, 'duration': 3.702}, {'end': 12335.595, 'text': "However, we'll also have an option for else.", 'start': 12333.114, 'duration': 2.481}, {'end': 12337.536, 'text': "And in here, I'm going to go with btn.", 'start': 12336.176, 'duration': 1.36}, {'end': 12340.638, 'text': 'class list, and then remove.', 'start': 12338.817, 'duration': 1.821}, {'end': 12349.725, 'text': "Now why am I adding this functionality in this case, because in my statement, I'm checking whether the button does not have the slide class.", 'start': 12341.139, 'duration': 8.586}], 'summary': 'Add functionality to check and manipulate button classes.', 'duration': 30.518, 'max_score': 12319.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf412319207.jpg'}, {'end': 12690.184, 'src': 'embed', 'start': 12657.26, 'weight': 2, 'content': [{'end': 12661.182, 'text': 'And then we can do it right after we have set up our event listener for the button.', 'start': 12657.26, 'duration': 3.922}, {'end': 12663.423, 'text': "First, I'll target my preloader.", 'start': 12661.642, 'duration': 1.781}, {'end': 12668.167, 'text': 'here a comment preloader.', 'start': 12665.224, 'duration': 2.943}, {'end': 12676.934, 'text': "And I'll go with const preloader variable of an document query selector.", 'start': 12668.987, 'duration': 7.947}, {'end': 12682.238, 'text': "Again, I'm looking for the preloader cross preloader class.", 'start': 12676.994, 'duration': 5.244}, {'end': 12686.802, 'text': 'And I would want to listen for the load event on the window.', 'start': 12683.239, 'duration': 3.563}, {'end': 12690.184, 'text': 'So go with window, then add event listener.', 'start': 12687.202, 'duration': 2.982}], 'summary': 'Setting up an event listener for the button and targeting the preloader using query selector.', 'duration': 32.924, 'max_score': 12657.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf412657260.jpg'}], 'start': 11846.812, 'title': 'Video project setup', 'summary': 'Covers setting up html for a video project, adding video element with attributes, button to control video, addressing visibility issues with overlay and z-index. it also includes setting up video controls, adding a preloader using javascript and html, and implementing a preloader using the load event to hide it once the whole page has loaded.', 'chapters': [{'end': 12184.593, 'start': 11846.812, 'title': 'Setting up html for video project', 'summary': 'Covers setting up the html for a video project, including adding a video element with attributes, setting up a button to control the video, and addressing visibility issues with the heading text by adding an overlay to the image and adjusting the z-index.', 'duration': 337.781, 'highlights': ['Adding video element with attributes and classes', 'Addressing visibility issues with heading text', 'Setting up a button to control the video']}, {'end': 12547.157, 'start': 12185.053, 'title': 'Video controls and preloader setup', 'summary': 'Covers setting up video controls to pause and play the video based on button click events, and adding a preloader to display while the video loads, using javascript and html.', 'duration': 362.104, 'highlights': ['Setting up video controls to pause and play the video based on button click events', 'Adding a preloader to display while the video loads']}, {'end': 12812.054, 'start': 12548.397, 'title': 'Javascript preloader implementation', 'summary': "Discusses the implementation of a preloader using the load event instead of dom content loaded, to hide the preloader once the whole page, including all dependent resources, has loaded, demonstrated with the addition of the class 'hide preloader'.", 'duration': 263.657, 'highlights': ['The load event is fired when the whole page has loaded, including all dependent resources such as style sheets and images, which is why it is used to hide the preloader, unlike the DOM content loaded event.', "The preloader is hidden by adding the class 'hide preloader' once the page loads completely, which is demonstrated by targeting the preloader and adding the class using JavaScript.", 'The project implementation ensures that the preloader is displayed while the page is loading, but disappears once the page load is complete, allowing the video to be displayed.']}], 'duration': 965.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf411846812.jpg', 'highlights': ['Setting up video controls to pause and play the video based on button click events', 'Adding a preloader to display while the video loads', 'The load event is used to hide the preloader once the whole page has loaded', "The preloader is hidden by adding the class 'hide preloader' once the page loads completely"]}, {'end': 13721.171, 'segs': [{'end': 13115.712, 'src': 'embed', 'start': 13085.285, 'weight': 0, 'content': [{'end': 13086.806, 'text': "After that, I'll have my button.", 'start': 13085.285, 'duration': 1.521}, {'end': 13092.449, 'text': "And we'll have a class of nav toggle nav hyphen toggle.", 'start': 13087.486, 'duration': 4.963}, {'end': 13095.131, 'text': "And here we'll place a font awesome icon.", 'start': 13093.09, 'duration': 2.041}, {'end': 13099.974, 'text': 'So I fa s and fa and then hyphen bars.', 'start': 13095.592, 'duration': 4.382}, {'end': 13102.736, 'text': "So now of course, we're setting up our toggle icon.", 'start': 13100.415, 'duration': 2.321}, {'end': 13108.982, 'text': 'Good And right after my header div, I would want to place my links.', 'start': 13103.417, 'duration': 5.565}, {'end': 13115.712, 'text': 'Now the difference is going to be that in the index HTML, we will have a container for the links.', 'start': 13109.503, 'duration': 6.209}], 'summary': 'Setting up toggle icon and adding links in html', 'duration': 30.427, 'max_score': 13085.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf413085285.jpg'}, {'end': 13233.01, 'src': 'embed', 'start': 13183.763, 'weight': 2, 'content': [{'end': 13185.004, 'text': "So I'm going to go here banner.", 'start': 13183.763, 'duration': 1.241}, {'end': 13187.787, 'text': "And we'll have a div with a class of banner.", 'start': 13185.845, 'duration': 1.942}, {'end': 13190.249, 'text': "And then we'll have another container.", 'start': 13187.807, 'duration': 2.442}, {'end': 13191.79, 'text': 'So just a container.', 'start': 13190.709, 'duration': 1.081}, {'end': 13196.614, 'text': 'So not a links container, like we had before, just a simple container.', 'start': 13192.09, 'duration': 4.524}, {'end': 13202.8, 'text': "And in here, let's write anyone with a text of scroll project.", 'start': 13197.115, 'duration': 5.685}, {'end': 13207.504, 'text': "And we'll have some kind of paragraph with I don't know, 20 words or something like that.", 'start': 13203.56, 'duration': 3.944}, {'end': 13217.437, 'text': 'So lorem 20, I have my paragraph, and then I would want to set up a link that will also scroll around our project.', 'start': 13208.084, 'duration': 9.353}, {'end': 13221.042, 'text': 'And as a side note, as you can see, my typing is just excellent.', 'start': 13217.957, 'duration': 3.085}, {'end': 13223.865, 'text': 'So this, of course, is going to be scroll project.', 'start': 13221.462, 'duration': 2.403}, {'end': 13233.01, 'text': "And the reason why I'm setting this link because I want to showcase that you're not limited to set up a smooth scroll only in your nav.", 'start': 13224.706, 'duration': 8.304}], 'summary': 'Setting up a banner with a div, container, text, and link for smooth scrolling.', 'duration': 49.247, 'max_score': 13183.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf413183763.jpg'}, {'end': 13285.451, 'src': 'embed', 'start': 13255.351, 'weight': 3, 'content': [{'end': 13259.955, 'text': "And again, the href will be specific, where it's going to be hashtag and then tours.", 'start': 13255.351, 'duration': 4.604}, {'end': 13265.039, 'text': "And then in here, I'll have class, the class will be scroll link.", 'start': 13260.635, 'duration': 4.404}, {'end': 13266.58, 'text': 'So the same as in my navbar.', 'start': 13265.139, 'duration': 1.441}, {'end': 13271.184, 'text': "And then just for styling, I'm going to have btn and btn white.", 'start': 13267, 'duration': 4.184}, {'end': 13277.367, 'text': "And as far as the text, I'm going to go with explore doors, we'll save it, I have my link, beautiful.", 'start': 13271.564, 'duration': 5.803}, {'end': 13285.451, 'text': "And then, like I said, since I would want to set up a more realistic scenario, we'll just add some sections with some title,", 'start': 13277.808, 'duration': 7.643}], 'summary': 'Setting up specific href for tours, adding class scroll link and styling with btn white.', 'duration': 30.1, 'max_score': 13255.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf413255351.jpg'}], 'start': 12813.274, 'title': 'Implementing smooth scrolling and dynamic navigation', 'summary': 'Discusses implementing a scroll event for dynamic class addition while scrolling, setting up smooth scroll functionality, dynamic navigation with back to top button, screen setups for different pixel sizes, and smooth scrolling setup with navigation links and dynamic copyright year update using javascript.', 'chapters': [{'end': 12886.556, 'start': 12813.274, 'title': 'Scroll event and smooth scroll implementation', 'summary': 'Discusses implementing a scroll event to dynamically add a class to a number while scrolling and setting up smooth scroll functionality, along with the use of more html and dynamically setting the date using javascript.', 'duration': 73.282, 'highlights': ['Implementing scroll event to dynamically add a class to a number based on scrolling and setting up smooth scroll functionality.', 'Using more HTML to create a realistic project scenario with multiple sections.', 'Dynamically setting the date using JavaScript for a more dynamic and interactive user experience.']}, {'end': 13157.934, 'start': 12887.277, 'title': 'Setting up dynamic navigation', 'summary': 'Covers setting up a dynamic navigation with a back to top button, dynamic screen setups for different pixel sizes, and multiple setups for big and small screens. it involves adding html elements and functionality in app.js, with a focus on navbar setup and link containers.', 'duration': 270.657, 'highlights': ['Setting up a dynamic navigation with back to top button', 'Dynamic screen setups for different pixel sizes', 'Multiple setups for big and small screens', 'Focus on navbar setup and link containers']}, {'end': 13721.171, 'start': 13158.474, 'title': 'Setting up smooth scrolling', 'summary': 'Explains how to set up smooth scrolling on a website, including adding navigation links, setting up sections with ids for scrolling, and dynamically updating the copyright year using javascript.', 'duration': 562.697, 'highlights': ['Explaining how to set up smooth scrolling on a website', 'Adding navigation links and classes for smooth scrolling', 'Setting up sections with IDs for scrolling', 'Dynamically updating the copyright year using JavaScript']}], 'duration': 907.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf412813274.jpg', 'highlights': ['Setting up smooth scroll functionality with dynamic class addition based on scrolling', 'Dynamic navigation with back to top button and screen setups for different pixel sizes', 'Adding navigation links and classes for smooth scrolling and setting up sections with IDs', 'Dynamically setting the date and copyright year using JavaScript for a more interactive user experience', 'Using more HTML to create a realistic project scenario with multiple sections', 'Focus on navbar setup and link containers for different screen setups']}, {'end': 16573.919, 'segs': [{'end': 15956.524, 'src': 'embed', 'start': 15933.224, 'weight': 4, 'content': [{'end': 15940.789, 'text': "So that is of course going to be the container for our links, we'll be looking for the fixed class, whether we have added to a number or not.", 'start': 15933.224, 'duration': 7.565}, {'end': 15945.192, 'text': "And then we're also going to have to change this position a little bit.", 'start': 15941.449, 'duration': 3.743}, {'end': 15947.214, 'text': "So here, I'll add a comment.", 'start': 15945.712, 'duration': 1.502}, {'end': 15951.298, 'text': "And I'm purposely pushing this position down, because I'll change this value in a second.", 'start': 15947.294, 'duration': 4.004}, {'end': 15956.524, 'text': "But what I'm looking for here is calculate the heights.", 'start': 15951.839, 'duration': 4.685}], 'summary': 'Modifying container for links, adjusting position, and calculating heights.', 'duration': 23.3, 'max_score': 15933.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf415933224.jpg'}, {'end': 16340.618, 'src': 'embed', 'start': 16314.96, 'weight': 1, 'content': [{'end': 16322.886, 'text': "Again, why we're doing that, because when we made the calculations at this point, we're still calculating the height of the number.", 'start': 16314.96, 'duration': 7.926}, {'end': 16326.269, 'text': 'But in our setup, we already started scrolling.', 'start': 16323.367, 'duration': 2.902}, {'end': 16329.592, 'text': 'So of course, we removed that number from the normal flow.', 'start': 16326.689, 'duration': 2.903}, {'end': 16332.414, 'text': 'And now we need to actually change that value.', 'start': 16330.052, 'duration': 2.362}, {'end': 16340.618, 'text': "That's why, once we add our code notice, even when we are sitting nicely at the top of document, so our nav bar is not fixed,", 'start': 16332.834, 'duration': 7.784}], 'summary': 'Modifying code to adjust nav bar position based on calculations.', 'duration': 25.658, 'max_score': 16314.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf416314960.jpg'}, {'end': 16456.315, 'src': 'embed', 'start': 16429.457, 'weight': 2, 'content': [{'end': 16432.779, 'text': 'And of course, container height will be whatever I have the links there.', 'start': 16429.457, 'duration': 3.322}, {'end': 16436.562, 'text': "So I'll save it, we'll try out on a bigger screen.", 'start': 16433.461, 'duration': 3.101}, {'end': 16438.764, 'text': "Now let me see what I'll have.", 'start': 16436.582, 'duration': 2.182}, {'end': 16440.586, 'text': 'So at the moment, I have the home.', 'start': 16439.345, 'duration': 1.241}, {'end': 16449.091, 'text': 'So of course, I navigate home, I open up my links, then I navigate to about and of course, I navigate there, I close my links.', 'start': 16441.026, 'duration': 8.065}, {'end': 16452.213, 'text': "And I'm exactly where I want it to be.", 'start': 16449.831, 'duration': 2.382}, {'end': 16456.315, 'text': 'Now in this case, of course, I would like to also look for services.', 'start': 16452.833, 'duration': 3.482}], 'summary': 'Testing website navigation on a bigger screen, accessing home, about, and services.', 'duration': 26.858, 'max_score': 16429.457, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf416429456.jpg'}, {'end': 16504.919, 'src': 'embed', 'start': 16475.289, 'weight': 0, 'content': [{'end': 16479.529, 'text': "again, the gotcha there is that we're just calculating for the height.", 'start': 16475.289, 'duration': 4.24}, {'end': 16484.491, 'text': "So we're just checking if the nav height is bigger than 82.", 'start': 16479.91, 'duration': 4.581}, {'end': 16487.413, 'text': 'That means that I have these links involved.', 'start': 16484.491, 'duration': 2.922}, {'end': 16492.594, 'text': "And that's why I would need to add that value to my element.", 'start': 16488.413, 'duration': 4.181}, {'end': 16499.776, 'text': "Because if you remember, in the beginning, when we were subtracting that value, this is exactly what we're doing right now.", 'start': 16493.014, 'duration': 6.762}, {'end': 16504.919, 'text': "So what I'm saying here is position is equal to element offset top and nav height.", 'start': 16500.297, 'duration': 4.622}], 'summary': 'Calculating for the height, checking if nav height is bigger than 82, adding value to element for position calculation.', 'duration': 29.63, 'max_score': 16475.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf416475289.jpg'}], 'start': 13721.752, 'title': 'Dynamic navigation setup', 'summary': 'Covers setting up dynamic dates, toggling links, calculating element heights in css, implementing smooth scrolling, and fixing and positioning the navbar for accurate navigation, including downsides and user experience enhancement.', 'chapters': [{'end': 14038.186, 'start': 13721.752, 'title': 'Dynamic link toggling and date setup', 'summary': 'Discusses setting up a dynamic date for projects to avoid manual updates, and demonstrates how to toggle links dynamically. it also highlights the downside of this approach when the content changes, affecting the link display.', 'duration': 316.434, 'highlights': ['Setting up a dynamic date for projects helps avoid manual updates, ensuring the date remains current.', 'Demonstrating how to toggle links dynamically by calculating the height and adding a class to show the links.', 'Highlighting the downside of dynamically toggling links when the content changes, affecting the link display.']}, {'end': 14762.283, 'start': 14038.566, 'title': 'Dynamically calculating element height in css', 'summary': 'Covers dynamically calculating the height of elements in css, using the getboundingclientrect method to dynamically set the height of the container and links based on the number of links, ensuring that the layout adjusts dynamically, and handling inline css style overriding.', 'duration': 723.717, 'highlights': ['Using getBoundingClientRect method to dynamically set the height of the container and links based on the number of links.', 'Handling inline CSS style overriding by setting the height to auto and adding the important flag.', 'Demonstrating the use of the getBoundingClientRect method to get the height of elements and checking the height for the parent element.']}, {'end': 15635.124, 'start': 14762.924, 'title': 'Dynamic navbar and scroll button', 'summary': 'Demonstrates the dynamic setup for toggling the links, including the implementation of a fixed navbar and a back-to-top scroll button based on scroll height and smooth scrolling functionality. the detailed setup involves adding and removing classes based on scroll position and implementing smooth scrolling for navigation.', 'duration': 872.2, 'highlights': ['The chapter demonstrates the dynamic setup for toggling the links, including the implementation of a fixed navbar and a back-to-top scroll button based on scroll height and smooth scrolling functionality.', 'The detailed setup involves adding and removing classes based on scroll position and implementing smooth scrolling for navigation.', 'The implementation of a fixed navbar and a back-to-top scroll button is demonstrated based on scroll height and smooth scrolling functionality.', 'The setup involves adding and removing classes based on scroll position and implementing smooth scrolling for navigation.', 'The detailed setup involves adding and removing classes based on scroll position and implementing smooth scrolling for navigation.']}, {'end': 16004.975, 'start': 15635.544, 'title': 'Implementing smooth scroll and closing links', 'summary': 'Discusses implementing smooth scroll functionality and closing links on a smaller screen, utilizing methods like offset top and get bounding client rect to calculate heights and position for scrolling, and closing the toggle navbar to enhance user experience.', 'duration': 369.431, 'highlights': ['The process of implementing smooth scroll functionality, utilizing methods like offset top and get bounding client rect to calculate the height and position for scrolling, and closing the toggle navbar to enhance user experience.', "Using offset top method to obtain the top position of the element in pixels, such as 838 pixels for 'about' and 1645 pixels for 'tours'.", 'Demonstrating the usage of window scroll to method for vertical navigation, scrolling 100 pixels from the top, and dynamically setting the position for scrolling purposes.']}, {'end': 16573.919, 'start': 16005.555, 'title': 'Navbar positioning and fixing', 'summary': 'Explains the process of fixing and positioning the navbar based on its class, calculating the adjusted position by subtracting the navbar height, and dynamically adjusting for different screen sizes, ensuring accurate navigation to sections.', 'duration': 568.364, 'highlights': ['Explaining the process of adjusting the position based on the navbar class and subtracting the navbar height for accurate navigation', 'Dynamically adjusting the position for different screen sizes by considering the navbar and container heights', 'Console logging different position values based on the fixed or unfixed state of the navbar']}], 'duration': 2852.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf413721752.jpg', 'highlights': ['Demonstrating the process of implementing smooth scroll functionality using methods like offset top and get bounding client rect', 'The chapter demonstrates the dynamic setup for toggling links, including the implementation of a fixed navbar and a back-to-top scroll button', 'Explaining the process of adjusting the position based on the navbar class and subtracting the navbar height for accurate navigation', 'Using getBoundingClientRect method to dynamically set the height of the container and links based on the number of links', 'Setting up a dynamic date for projects helps avoid manual updates, ensuring the date remains current']}, {'end': 18443.138, 'segs': [{'end': 17024.674, 'src': 'embed', 'start': 16997.757, 'weight': 2, 'content': [{'end': 17002.96, 'text': "So for the time being, I have the active active active, don't worry, we'll delete it actually later.", 'start': 16997.757, 'duration': 5.203}, {'end': 17006.002, 'text': 'But then first, I would want to change these values here.', 'start': 17003.46, 'duration': 2.542}, {'end': 17010.345, 'text': 'I said, they would need to match whatever have 40 IDs.', 'start': 17006.562, 'duration': 3.783}, {'end': 17015.608, 'text': 'So if I had history, vision and goals, same thing should be here.', 'start': 17010.805, 'duration': 4.803}, {'end': 17018.91, 'text': 'So the second one will be my vision.', 'start': 17016.129, 'duration': 2.781}, {'end': 17021.672, 'text': 'And the third one will be goals.', 'start': 17019.911, 'duration': 1.761}, {'end': 17024.674, 'text': "So let's fix them like so.", 'start': 17022.973, 'duration': 1.701}], 'summary': 'Changing values to match 40 ids for history, vision, and goals.', 'duration': 26.917, 'max_score': 16997.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf416997757.jpg'}, {'end': 17109.963, 'src': 'embed', 'start': 17082.757, 'weight': 3, 'content': [{'end': 17087.303, 'text': "So in this case, I'm going to copy and paste, and I'll place it where I have the history.", 'start': 17082.757, 'duration': 4.546}, {'end': 17089.426, 'text': 'So copy and paste, I have my history.', 'start': 17087.864, 'duration': 1.562}, {'end': 17093.272, 'text': "Now, of course, don't worry, we will be displaying all of them.", 'start': 17089.967, 'duration': 3.305}, {'end': 17098.919, 'text': "But then the moment we'll remove that class of active, then we'll be able to see only one item.", 'start': 17093.752, 'duration': 5.167}, {'end': 17105.762, 'text': "And I'm looking for my vision, of course, vision where you are, here you go.", 'start': 17099.82, 'duration': 5.942}, {'end': 17109.963, 'text': "Let's keep on scrolling right after our heading, copy and paste.", 'start': 17105.782, 'duration': 4.181}], 'summary': 'Demonstrating how to copy and paste to display and remove items.', 'duration': 27.206, 'max_score': 17082.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf417082757.jpg'}, {'end': 17155.094, 'src': 'embed', 'start': 17129.389, 'weight': 5, 'content': [{'end': 17136.577, 'text': 'So again, let me copy and paste my paragraph, right after the goals, I should have something like that.', 'start': 17129.389, 'duration': 7.188}, {'end': 17144.105, 'text': 'And then like I said, I would want to remove this class of active from all of them, but just leave it on the first one.', 'start': 17137.217, 'duration': 6.888}, {'end': 17151.993, 'text': "Okay, because again, this class of active will be the one that's responsible of hiding or showing the content.", 'start': 17144.645, 'duration': 7.348}, {'end': 17155.094, 'text': 'So let me delete from the second one.', 'start': 17152.773, 'duration': 2.321}], 'summary': "Removing 'active' class from all elements except the first to control content visibility.", 'duration': 25.705, 'max_score': 17129.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf417129389.jpg'}, {'end': 17928.275, 'src': 'embed', 'start': 17895.284, 'weight': 1, 'content': [{'end': 17901.345, 'text': "The reason why you don't have any padding there on the top, because we should have here a section class.", 'start': 17895.284, 'duration': 6.061}, {'end': 17905.206, 'text': "And I'm looking for the section class.", 'start': 17902.205, 'duration': 3.001}, {'end': 17906.546, 'text': 'So once I add,', 'start': 17905.726, 'duration': 0.82}, {'end': 17917.371, 'text': "you'll see that we will have our padding on top back to the JavaScript if I have history or some displaying history version or goals and I can click all day long.", 'start': 17906.546, 'duration': 10.825}, {'end': 17928.275, 'text': "And then as long as you have the data set that is matching the ID, every time you'll click on a button, you'll display the matching content.", 'start': 17918.151, 'duration': 10.124}], 'summary': 'Adding a section class will restore the top padding, allowing for content display on button click.', 'duration': 32.991, 'max_score': 17895.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf417895284.jpg'}, {'end': 18001.172, 'src': 'embed', 'start': 17969.051, 'weight': 4, 'content': [{'end': 17978.414, 'text': "And we'll start by placing in the section, we don't want to have one, we want a section with a class of section, and then center class.", 'start': 17969.051, 'duration': 9.363}, {'end': 17982.415, 'text': "Now within a section, I'll place my image first.", 'start': 17979.114, 'duration': 3.301}, {'end': 17987.656, 'text': "So let me have my image comments, then we'll have the article.", 'start': 17983.115, 'duration': 4.541}, {'end': 17995.69, 'text': "And then for the article, we right away we'll add a class of gift and then hyphen IMG.", 'start': 17988.477, 'duration': 7.213}, {'end': 18001.172, 'text': 'Within the article place our image, the actual path is gift.', 'start': 17996.311, 'duration': 4.861}], 'summary': "Creating a section with a class of 'section' and 'center' and placing an image within the article.", 'duration': 32.121, 'max_score': 17969.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf417969051.jpg'}, {'end': 18354.817, 'src': 'embed', 'start': 18326.359, 'weight': 0, 'content': [{'end': 18328.761, 'text': "And then also I'd want to get all the heading force.", 'start': 18326.359, 'duration': 2.402}, {'end': 18334.684, 'text': "And the heading force I'm talking about are the hours, minutes, and days and seconds.", 'start': 18329.861, 'duration': 4.823}, {'end': 18337.186, 'text': "So let's start by selecting all three things.", 'start': 18335.245, 'duration': 1.941}, {'end': 18341.349, 'text': "So const, I guess I'll give the same variable name.", 'start': 18337.266, 'duration': 4.083}, {'end': 18342.349, 'text': 'So giveaway.', 'start': 18341.369, 'duration': 0.98}, {'end': 18347.152, 'text': 'And that will be equal to document that query selector.', 'start': 18343.47, 'duration': 3.682}, {'end': 18351.915, 'text': "And then I'm looking for my class of giveaway, giveaway.", 'start': 18348.113, 'duration': 3.802}, {'end': 18354.817, 'text': 'And also would want to select my deadline.', 'start': 18352.836, 'duration': 1.981}], 'summary': 'Select all heading force including hours, minutes, days, and seconds.', 'duration': 28.458, 'max_score': 18326.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf418326359.jpg'}], 'start': 16574.699, 'title': 'Creating dynamic web content', 'summary': 'Discusses setting up tabs project, creating dynamic content with javascript, displaying project content dynamically, utilizing event bubbling and event target in javascript, and setting up a countdown timer project.', 'chapters': [{'end': 16678.391, 'start': 16574.699, 'title': 'Tabs project setup and structure', 'summary': 'Discusses setting up a tabs project with a boat section, including the structure of the html setup and the addition of specific elements within the section.', 'duration': 103.692, 'highlights': ['Setting up a tabs project with a boat section', 'Adding HTML elements within the section']}, {'end': 16828.538, 'start': 16678.631, 'title': 'Setting up button container in html', 'summary': 'Explains the process of setting up a button container in html with three buttons, each assigned a class and a data id, to dynamically show and hide content using javascript.', 'duration': 149.907, 'highlights': ['The process involves setting up a button container with three buttons, each assigned a class and a data ID.', 'The buttons are set up to dynamically show and hide content using JavaScript.']}, {'end': 17082.277, 'start': 16829.378, 'title': 'Creating dynamic content with javascript', 'summary': 'Discusses the process of creating dynamic content with javascript, including the use of active classes to showcase which button has been clicked and dynamically showing or hiding content based on the active class. it also covers setting up the ids and values to match the button names and adding different html content for a more interesting display.', 'duration': 252.899, 'highlights': ['The process of creating dynamic content with JavaScript', 'Use of active classes to showcase which button has been clicked', 'Setting up the IDs and values to match the button names', 'Adding different HTML content for a more interesting display']}, {'end': 17428.288, 'start': 17082.757, 'title': 'Dynamic project content', 'summary': 'Discusses dynamically displaying project content by using javascript to attach event listeners and manipulate classes, targeting specific elements such as buttons, articles, and the about container.', 'duration': 345.531, 'highlights': ['The chapter discusses dynamically displaying project content by using JavaScript to attach event listeners and manipulate classes.', 'Targeting specific elements such as buttons, articles, and the about container.', 'Attaching a click event listener to the about container to dynamically check the target element when clicked.']}, {'end': 17917.371, 'start': 17428.989, 'title': 'Event bubbling and event target in javascript', 'summary': 'Explains how to utilize event bubbling and event target in javascript to manipulate content and buttons, showcasing how to access and manipulate elements based on data attributes and event targets.', 'duration': 488.382, 'highlights': ['Utilizing event bubbling and event target to access and manipulate elements', 'Accessing and manipulating elements based on data attributes', 'Removing and adding classes based on event target and data attributes']}, {'end': 18443.138, 'start': 17918.151, 'title': 'Countdown timer project', 'summary': 'Covers the process of setting up a countdown timer project, including creating sections, adding images and text, setting up a deadline, and selecting elements with javascript.', 'duration': 524.987, 'highlights': ['The chapter discusses setting up a countdown timer project, including creating sections, adding images and text, and setting up a deadline.', 'The process involves selecting elements with JavaScript, such as the deadline, giveaway section, and heading elements.', 'The tutorial demonstrates utilizing query selectors in JavaScript to efficiently select and manipulate elements within the project.', 'The explanation includes setting up a section with a class, placing images, adding classes to articles, and hard coding the deadline date and time.', 'The project involves creating a countdown timer that accurately calculates the remaining time until the deal ends, with elements for days, hours, minutes, and seconds.']}], 'duration': 1868.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf416574699.jpg', 'highlights': ['Utilizing event bubbling and event target to access and manipulate elements - Paragraph 5', 'The process involves setting up a countdown timer project, including creating sections, adding images and text, and setting up a deadline - Paragraph 6', 'The chapter discusses dynamically displaying project content by using JavaScript to attach event listeners and manipulate classes - Paragraph 4', 'The process of creating dynamic content with JavaScript - Paragraph 3', 'The process involves setting up a button container with three buttons, each assigned a class and a data ID - Paragraph 2', 'Setting up a tabs project with a boat section - Paragraph 1']}, {'end': 21691.836, 'segs': [{'end': 20282.545, 'src': 'embed', 'start': 20257.45, 'weight': 1, 'content': [{'end': 20264.434, 'text': "what that tells me, though, is that there's not too many hours in there, at least currently, because I still have two full days.", 'start': 20257.45, 'duration': 6.984}, {'end': 20270.418, 'text': 'But what I would want to do is use the math floor, because I would want to even round it down more.', 'start': 20264.875, 'duration': 5.543}, {'end': 20278.242, 'text': "Now just to show the actual situation where we would use that, why don't we increase this number to maybe 15.", 'start': 20270.958, 'duration': 7.284}, {'end': 20282.545, 'text': "And then of course, in here, I'll just remove that am because that's not gonna work.", 'start': 20278.242, 'duration': 4.303}], 'summary': 'Discussion on using math floor function and increasing a number to 15.', 'duration': 25.095, 'max_score': 20257.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf420257450.jpg'}, {'end': 20395.594, 'src': 'embed', 'start': 20350.518, 'weight': 0, 'content': [{'end': 20354.082, 'text': 'So again, I want to check how many full hours are in there.', 'start': 20350.518, 'duration': 3.564}, {'end': 20358.968, 'text': 'And then only what is left, then I would want to use that one hour.', 'start': 20354.783, 'duration': 4.185}, {'end': 20360.809, 'text': "I'm sorry, the one minute.", 'start': 20359.548, 'duration': 1.261}, {'end': 20365.333, 'text': 'And I can get that one minute by dividing off one minute.', 'start': 20361.39, 'duration': 3.943}, {'end': 20370.038, 'text': "And you're probably thinking, okay, in this case, I didn't care about the full hour.", 'start': 20365.734, 'duration': 4.304}, {'end': 20376.144, 'text': 'So why am I passing in here, the full hour, or you know what, sorry, not hours, one hour.', 'start': 20370.098, 'duration': 6.046}, {'end': 20377.365, 'text': 'So one hour.', 'start': 20376.824, 'duration': 0.541}, {'end': 20381.607, 'text': "why am I passing this one hour, because it's just much easier.", 'start': 20377.865, 'duration': 3.742}, {'end': 20386.65, 'text': "Because in this case, I don't care if this gets me back 48.", 'start': 20382.087, 'duration': 4.563}, {'end': 20387.17, 'text': "I really don't.", 'start': 20386.65, 'duration': 0.52}, {'end': 20388.991, 'text': "What I'm looking for is this remainder.", 'start': 20387.57, 'duration': 1.421}, {'end': 20395.594, 'text': 'So I just say, whatever the time difference modules the one hour, so see how many minutes are left.', 'start': 20389.411, 'duration': 6.183}], 'summary': 'Calculating remaining minutes after subtracting one hour from time difference.', 'duration': 45.076, 'max_score': 20350.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf420350518.jpg'}, {'end': 20852.024, 'src': 'embed', 'start': 20817.889, 'weight': 2, 'content': [{'end': 20821.37, 'text': 'Why have the errors because we passed our deadline.', 'start': 20817.889, 'duration': 3.481}, {'end': 20827.431, 'text': "So how do we fix that? You see what happens when we have our set interval, we're getting back a value.", 'start': 20821.83, 'duration': 5.601}, {'end': 20828.912, 'text': 'And we have another function.', 'start': 20827.831, 'duration': 1.081}, {'end': 20831.312, 'text': 'And that is clearing the interval.', 'start': 20829.332, 'duration': 1.98}, {'end': 20840.834, 'text': 'That was is important that we invoke our get remaining time after set interval, because I want to have an access to my condom.', 'start': 20831.792, 'duration': 9.042}, {'end': 20852.024, 'text': "Okay, so within get remaining time, all the way in the bottom, I'm going to say if t, if t is less than zero, so when t is going to be less than zero,", 'start': 20841.314, 'duration': 10.71}], 'summary': 'Discussion on fixing errors and invoking functions for set interval and remaining time.', 'duration': 34.135, 'max_score': 20817.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf420817889.jpg'}, {'end': 21671.202, 'src': 'embed', 'start': 21642.378, 'weight': 4, 'content': [{'end': 21645.18, 'text': 'But eventually, we will place our content in there.', 'start': 21642.378, 'duration': 2.802}, {'end': 21651.86, 'text': 'So class of lorem, text, and we have our HTML.', 'start': 21645.541, 'duration': 6.319}, {'end': 21658.625, 'text': 'So we have the structure, again, we can submit form all day long, nothing is happening.', 'start': 21652.46, 'duration': 6.165}, {'end': 21662.088, 'text': 'Once we add JavaScript, then of course, we only have the functionality.', 'start': 21658.885, 'duration': 3.203}, {'end': 21667.76, 'text': 'far as the JavaScript, we already know the drill, we need to navigate to app js.', 'start': 21662.717, 'duration': 5.043}, {'end': 21671.202, 'text': "And you'll see there a array.", 'start': 21668.621, 'duration': 2.581}], 'summary': 'The transcript discusses adding javascript functionality to a web form and navigating to the app.js file to work with an array.', 'duration': 28.824, 'max_score': 21642.378, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf421642378.jpg'}], 'start': 18443.678, 'title': 'Javascript date manipulation and countdown timer functionality', 'summary': 'Demonstrates using javascript to manipulate dates, retrieve date components, set up a countdown timer, and convert time values, covering dynamic formatting, array setup, calculation process, and timer project implementation.', 'chapters': [{'end': 18800.438, 'start': 18443.678, 'title': 'Javascript date manipulation', 'summary': 'Demonstrates the use of query selector to efficiently select and manipulate multiple elements using javascript, followed by setting up and formatting a future date dynamically, including the considerations for zero-based indexing and 24-hour clock format.', 'duration': 356.76, 'highlights': ['The use of query selector to efficiently select and manipulate multiple elements using JavaScript, leading to a more concise and scalable codebase.', 'Demonstration of setting up and formatting a future date dynamically, including the considerations for zero-based indexing and 24-hour clock format, providing actionable insights for practical implementation.', "Explanation of zero-based indexing for months in JavaScript's date function, offering a clear understanding of the indexing paradigm and its impact on date representation.", "Illustration of 24-hour clock format for specifying time in JavaScript's date function, enabling precise time representation and manipulation."]}, {'end': 19477.876, 'start': 18801.019, 'title': 'Working with javascript date objects', 'summary': 'Covers working with javascript date objects, including retrieving the year, hours, minutes, month, date, and weekday from a given date, using methods like getfullyear, gethours, getminutes, getmonth, getdate, and getday, as well as setting up arrays to represent months and weekdays.', 'duration': 676.857, 'highlights': ['Retrieving the year, hours, and minutes from a given date using getFullYear, getHours, and getMinutes methods respectively, to display current or future time.', 'Explaining the use of arrays to represent months and weekdays, and accessing the values from these arrays based on the returned number from getMonth and getDay methods.', 'Describing the process of setting up a date object and outlining the method to retrieve the date using the getDate method.']}, {'end': 20395.594, 'start': 19478.596, 'title': 'Creating countdown timer functionality', 'summary': 'Details the process of setting up a countdown timer for a giveaway, including calculations for days, hours, minutes, and seconds based on the difference between future and current dates, using milliseconds and dividing them to obtain the remaining time values.', 'duration': 916.998, 'highlights': ['Setting up countdown functionality', 'Calculating time difference using milliseconds', 'Explanation of time unit conversions', 'Obtaining values for days, hours, minutes, and seconds', 'Utilizing modulus operation to handle remainder']}, {'end': 20928.614, 'start': 20396.134, 'title': 'Time conversion and countdown', 'summary': 'Covers the process of converting days to hours, minutes, and seconds, setting up an array for values, iterating over items to populate the html, adding zeros to values less than 10, and implementing a countdown function that updates every second and handles expiration.', 'duration': 532.48, 'highlights': ['The process of converting days to hours, minutes, and seconds is explained, along with the array setup for values and iteration over items to populate the HTML.', 'The addition of zeros to values less than 10 is demonstrated, ensuring consistent formatting for single-digit values.', 'The implementation of a countdown function that updates every second and handles expiration is showcased, providing real-time updates and handling expired deadlines.']}, {'end': 21691.836, 'start': 20928.714, 'title': 'Countdown timer project', 'summary': 'Explains how to create a countdown timer using javascript, involving setting future time, calculating remaining time, and handling expiration, with a focus on adding 10 days to the current date for the timer to always work, and a brief mention of the upcoming project on generating hipster ipsum text using javascript forms and random numbers.', 'duration': 763.122, 'highlights': ['The chapter explains the process of setting the future time and creating a countdown timer using JavaScript.', 'The process of adding 10 days to the current date to ensure the countdown timer always works is explained.', 'The upcoming project of generating hipster ipsum text using JavaScript forms and random numbers is briefly mentioned.']}], 'duration': 3248.158, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf418443678.jpg', 'highlights': ['Demonstration of setting up and formatting a future date dynamically, including zero-based indexing and 24-hour clock format.', 'The use of query selector to efficiently select and manipulate multiple elements using JavaScript.', 'The process of setting up a date object and outlining the method to retrieve the date using the getDate method.', 'The process of converting days to hours, minutes, and seconds is explained, along with array setup and iteration over items.', 'The implementation of a countdown function that updates every second and handles expiration is showcased.']}, {'end': 22620.52, 'segs': [{'end': 21778.391, 'src': 'embed', 'start': 21750.064, 'weight': 1, 'content': [{'end': 21751.827, 'text': 'my article with the class of result.', 'start': 21750.064, 'duration': 1.763}, {'end': 21756.594, 'text': 'And that one will be document then query selector.', 'start': 21752.668, 'duration': 3.926}, {'end': 21759.538, 'text': "And we're looking for lorem text.", 'start': 21757.435, 'duration': 2.103}, {'end': 21760.619, 'text': "So that's the class.", 'start': 21759.858, 'duration': 0.761}, {'end': 21765.566, 'text': 'Once I have selected all these three things, I would want to listen for the event.', 'start': 21761.22, 'duration': 4.346}, {'end': 21768.488, 'text': "but I'm not going to be listening for a click event.", 'start': 21766.187, 'duration': 2.301}, {'end': 21771.409, 'text': "I'll be listening for a submit event.", 'start': 21768.508, 'duration': 2.901}, {'end': 21774.63, 'text': "And that's why we'll add this event to a form.", 'start': 21771.669, 'duration': 2.961}, {'end': 21778.391, 'text': 'So we have our form, then we go with add event listener.', 'start': 21775.05, 'duration': 3.341}], 'summary': 'Using query selector to select elements and adding submit event listener to form.', 'duration': 28.327, 'max_score': 21750.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf421750064.jpg'}, {'end': 22102.519, 'src': 'embed', 'start': 22073.486, 'weight': 0, 'content': [{'end': 22075.908, 'text': "And that's the value that I'm getting back.", 'start': 22073.486, 'duration': 2.422}, {'end': 22078.099, 'text': 'So we have an option for empty value.', 'start': 22076.437, 'duration': 1.662}, {'end': 22081.683, 'text': 'And let me write some comments here, empty value.', 'start': 22078.84, 'duration': 2.843}, {'end': 22087.089, 'text': 'We also have an option of adding a number that is less than zero.', 'start': 22082.884, 'duration': 4.205}, {'end': 22088.57, 'text': "So that's not what we want.", 'start': 22087.509, 'duration': 1.061}, {'end': 22096.339, 'text': 'So right here, negative one that will represent my negative values, then also I can write more than nine, correct.', 'start': 22089.131, 'duration': 7.208}, {'end': 22098.377, 'text': 'So more than nine.', 'start': 22097.176, 'duration': 1.201}, {'end': 22102.519, 'text': "And again, that's not something that I'd want since I have only nine paragraphs.", 'start': 22098.397, 'duration': 4.122}], 'summary': 'Options for values include empty, negative, and greater than nine. seeking specific ranges and types.', 'duration': 29.033, 'max_score': 22073.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf422073486.jpg'}], 'start': 21692.336, 'title': 'Form logic, event listening, input value type, parsing, and displaying random paragraphs', 'summary': "Covers setting up logic to fetch articles, selecting elements using query selector and id, adding event listeners to prevent default form behavior, accessing and parsing input values, and displaying random paragraphs, including handling edge cases and unexpected behavior of input type 'number'. it includes manipulating arrays and using template strings, resulting in wrapped paragraphs with a class of 'result'.", 'chapters': [{'end': 21849.209, 'start': 21692.336, 'title': 'Form logic and event listening', 'summary': 'Covers setting up logic to fetch articles from an array, selecting elements using query selector and id, adding event listeners to prevent default form behavior, and tackling challenges in form submission.', 'duration': 156.873, 'highlights': ['The chapter explains setting up logic to fetch either one to random or all nine articles or paragraphs from the text array.', 'It demonstrates selecting elements such as form, amount, and result using query selector and get element by ID.', 'It covers adding an event listener to prevent the default behavior of form submission using preventDefault method.', 'The chapter addresses the challenge of preventing the default behavior of the form to ensure proper functionality.']}, {'end': 22190.034, 'start': 21849.83, 'title': 'Input value type and parsing', 'summary': "Discusses accessing and parsing input values, revealing the unexpected behavior of input type 'number' returning a string, and setting up conditions based on the input values not being a number, less than zero, or greater than nine.", 'duration': 340.204, 'highlights': ["Input type 'number' returns a string value, not a number, when accessed via JavaScript, despite being restricted to only accept numbers.", 'The need to use parseInt to convert the input string value to a number to ensure correct data type for further processing.', 'Setting up conditions to handle cases where input values are not a number, less than zero, or greater than nine, to display a default paragraph.']}, {'end': 22620.52, 'start': 22190.354, 'title': 'Displaying random paragraphs', 'summary': "Explains how to display random paragraphs based on user input, including handling edge cases like empty string, negative values, and values from one to nine, by manipulating arrays and using template strings, resulting in wrapped paragraphs with a class of 'result'.", 'duration': 430.166, 'highlights': ['The chapter explains how to access a random paragraph from an array and display it using innerHTML, avoiding setting up HTML in the index HTML.', 'It demonstrates handling various scenarios like empty string, negative values, and values from one to nine, by checking conditions and generating random paragraphs or creating a new array based on user input using slice method.', "It also covers iterating over the new array to wrap the paragraphs in actual paragraph tags using the map method and template strings, resulting in the paragraphs being displayed with a class of 'result'."]}], 'duration': 928.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf421692336.jpg', 'highlights': ['The chapter explains setting up logic to fetch either one to random or all nine articles or paragraphs from the text array.', "Input type 'number' returns a string value, not a number, when accessed via JavaScript, despite being restricted to only accept numbers.", 'The chapter explains how to access a random paragraph from an array and display it using innerHTML, avoiding setting up HTML in the index HTML.']}, {'end': 24352.599, 'segs': [{'end': 23017.262, 'src': 'embed', 'start': 22989.627, 'weight': 0, 'content': [{'end': 22996.233, 'text': "And I'll have some kind of placeholder with example of the text somehow here x.", 'start': 22989.627, 'duration': 6.606}, {'end': 23000.315, 'text': "let's say I should have something like that on the screen.", 'start': 22996.974, 'duration': 3.341}, {'end': 23004.617, 'text': "And then still within the form control, let's add our submit button as well.", 'start': 23000.916, 'duration': 3.701}, {'end': 23008.459, 'text': "So I'm going to go with button and type and submit.", 'start': 23005.337, 'duration': 3.122}, {'end': 23013.661, 'text': "And I'll just add a class here with submit button.", 'start': 23009.419, 'duration': 4.242}, {'end': 23017.262, 'text': 'And as far as the text, you can do whatever you want.', 'start': 23014.181, 'duration': 3.081}], 'summary': 'Adding a submit button within form control with a class of submit button.', 'duration': 27.635, 'max_score': 22989.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf422989627.jpg'}, {'end': 23348.447, 'src': 'embed', 'start': 23319.419, 'weight': 6, 'content': [{'end': 23323.961, 'text': 'So that of course is this one div with a class of grocery list.', 'start': 23319.419, 'duration': 4.542}, {'end': 23326.443, 'text': "And I'm just going to name it simply list.", 'start': 23324.842, 'duration': 1.601}, {'end': 23333.872, 'text': "So let's delete also, the class of submit button, we're looking for grocery.", 'start': 23327.703, 'duration': 6.169}, {'end': 23337.177, 'text': 'And then last and last one will be my clear button.', 'start': 23334.733, 'duration': 2.444}, {'end': 23340.041, 'text': 'So clear btn.', 'start': 23338.038, 'duration': 2.003}, {'end': 23341.964, 'text': 'And then the class name is clear button.', 'start': 23340.642, 'duration': 1.322}, {'end': 23343.645, 'text': 'clear button.', 'start': 23342.885, 'duration': 0.76}, {'end': 23348.447, 'text': "And I would want to set up also some variables that we'll use later on.", 'start': 23344.246, 'duration': 4.201}], 'summary': 'Transcript: creating variables and modifying classes for grocery list and buttons.', 'duration': 29.028, 'max_score': 23319.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf423319419.jpg'}, {'end': 23544.175, 'src': 'embed', 'start': 23514.664, 'weight': 5, 'content': [{'end': 23516.865, 'text': 'So I target the input, I assign it to a variable.', 'start': 23514.664, 'duration': 2.201}, {'end': 23518.827, 'text': "And now I'd want to access that value.", 'start': 23517.246, 'duration': 1.581}, {'end': 23522.751, 'text': 'How can I access that value, I can use value property.', 'start': 23519.307, 'duration': 3.444}, {'end': 23531.12, 'text': "So if we'll just console, log grocery and then value, you'll see that whatever we type out so, for example,", 'start': 23523.091, 'duration': 8.029}, {'end': 23534.344, 'text': 'item in console we should have access to it.', 'start': 23531.12, 'duration': 3.224}, {'end': 23536.489, 'text': 'So let me open up my dev tools.', 'start': 23535.128, 'duration': 1.361}, {'end': 23538.43, 'text': 'And of course, there is my item.', 'start': 23536.869, 'duration': 1.561}, {'end': 23542.073, 'text': 'Now, of course, I can submit it, for example, without any kind of value.', 'start': 23538.851, 'duration': 3.222}, {'end': 23544.175, 'text': "And then I'm just gonna have the empty string.", 'start': 23542.473, 'duration': 1.702}], 'summary': 'Demonstrates accessing input values and console logging in javascript.', 'duration': 29.511, 'max_score': 23514.664, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf423514664.jpg'}, {'end': 23932.374, 'src': 'embed', 'start': 23904.206, 'weight': 1, 'content': [{'end': 23908.688, 'text': 'value is truly, value is true.', 'start': 23904.206, 'duration': 4.482}, {'end': 23910.968, 'text': "And I believe that's how you spell it truthfully.", 'start': 23908.968, 'duration': 2}, {'end': 23912.269, 'text': "So let's save it.", 'start': 23911.549, 'duration': 0.72}, {'end': 23919.291, 'text': "And now you'll see that once you type something in, you'll submit, it will say value is truthfully.", 'start': 23912.789, 'duration': 6.502}, {'end': 23929.654, 'text': "Now, of course, in this case, if you have a non operator, so what you're checking here if the value is not true?", 'start': 23920.051, 'duration': 9.603}, {'end': 23932.374, 'text': "if it's false, then of course this will be falsely.", 'start': 23929.654, 'duration': 2.72}], 'summary': 'Demonstration of checking for true and false values in a program.', 'duration': 28.168, 'max_score': 23904.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf423904206.jpg'}, {'end': 24151.133, 'src': 'embed', 'start': 24124.213, 'weight': 7, 'content': [{'end': 24133.819, 'text': "Now what class I'm looking for in the style CSS, if you'll search for class, we have alert, and then we have either danger, or we have success.", 'start': 24124.213, 'duration': 9.606}, {'end': 24135.02, 'text': "That's all we have.", 'start': 24134.4, 'duration': 0.62}, {'end': 24138.823, 'text': 'So one is going to be the red background and red text.', 'start': 24135.701, 'duration': 3.122}, {'end': 24143.246, 'text': 'And then the other one, of course, is going to be green color with a green background.', 'start': 24138.883, 'duration': 4.363}, {'end': 24151.133, 'text': "So within the app js, just because of course, it is going to be a danger, or you know, user hasn't entered the value.", 'start': 24143.946, 'duration': 7.187}], 'summary': 'Css class options for alerts: danger for red, success for green.', 'duration': 26.92, 'max_score': 24124.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf424124213.jpg'}], 'start': 22621.1, 'title': 'Implementing project applications and to-do lists', 'summary': 'Covers the implementation of a project application like a to-do list with examples of generating random paragraphs and setting up a grocery list app, including adding, editing, deleting items, utilizing local storage, and handling form submission logic in javascript.', 'chapters': [{'end': 22803.796, 'start': 22621.1, 'title': 'Project applications and to-do lists', 'summary': 'Covers the implementation of a project application with examples of generating random paragraphs and a to-do list application, explaining the rationale behind including the to-do list in the project.', 'duration': 182.696, 'highlights': ['The project includes a demonstration of generating random paragraphs based on user input such as 9, -1, 0, and 20.', 'The to-do list application is explained as a useful tool for learning a language or a framework, despite not showcasing expertise, and the importance of including it in the project.', 'The to-do list application allows adding, editing, deleting, and storing items using local storage, aiming to serve as a learning tool while not being a portfolio showcase.']}, {'end': 23163.064, 'start': 22804.276, 'title': 'Grocery list app setup', 'summary': 'Details the setup process for a grocery list app, including adding items, editing, deleting, and utilizing local storage to save and display the list upon refresh.', 'duration': 358.788, 'highlights': ['The app allows adding, editing, and deleting items in a grocery list, with the added items being saved in local storage for future access and display upon refresh.', 'The setup process involves creating a form and a list within a section, with specific classes and IDs for elements such as the form, input, and buttons.', 'The detailed HTML structure involves setting up the form, including an alert for empty input, and the list with clear and item buttons, along with edit and delete functionalities.']}, {'end': 23653.589, 'start': 23163.104, 'title': 'Setting up html and javascript functionality', 'summary': 'Discusses setting up the html and javascript functionality for a grocery list app, including hiding and displaying elements, selecting elements using query selectors, setting up variables and event listeners, and obtaining unique ids for items.', 'duration': 490.485, 'highlights': ['The grocery container is hidden by default, and it will only display after adding an item to the list.', 'Using query selectors to select elements by class and ID for the alert, form, item, submit button, container, list, and clear button.', 'Setting up variables for edit element, edit flag, and edit ID, with the edit flag initially set to false.', 'Setting up event listeners for the form submission and obtaining the value of the grocery input, followed by generating a unique ID for the item using the current time in milliseconds.']}, {'end': 24352.599, 'start': 23654.21, 'title': 'Javascript form submission logic', 'summary': 'Discusses the logic for handling form submission in javascript, including conditions for adding items to a list, editing, and handling empty values, and demonstrates the use of truthy and falsy values in simplifying if statements. displaying and removing alerts using a function is also covered.', 'duration': 698.389, 'highlights': ['The chapter discusses the logic for handling form submission in JavaScript, including conditions for adding items to a list, editing, and handling empty values.', 'The chapter demonstrates the use of truthy and falsy values in simplifying if statements.', 'Displaying and removing alerts using a function is also covered.']}], 'duration': 1731.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf422621100.jpg', 'highlights': ['The project includes a demonstration of generating random paragraphs based on user input such as 9, -1, 0, and 20.', 'The app allows adding, editing, and deleting items in a grocery list, with the added items being saved in local storage for future access and display upon refresh.', 'The chapter discusses the logic for handling form submission in JavaScript, including conditions for adding items to a list, editing, and handling empty values.', 'The to-do list application allows adding, editing, deleting, and storing items using local storage, aiming to serve as a learning tool while not being a portfolio showcase.', 'The setup process involves creating a form and a list within a section, with specific classes and IDs for elements such as the form, input, and buttons.', 'The grocery container is hidden by default, and it will only display after adding an item to the list.', 'Using query selectors to select elements by class and ID for the alert, form, item, submit button, container, list, and clear button.', 'Setting up variables for edit element, edit flag, and edit ID, with the edit flag initially set to false.']}, {'end': 26069.656, 'segs': [{'end': 24378.671, 'src': 'embed', 'start': 24353.42, 'weight': 2, 'content': [{'end': 24359.723, 'text': "I'm just going to grab both of these things again, copy and paste, text content should be set to an empty string.", 'start': 24353.42, 'duration': 6.303}, {'end': 24363.485, 'text': 'And then I would want to remove the same class that I just added.', 'start': 24360.643, 'duration': 2.842}, {'end': 24367.122, 'text': "So whatever class I added, I'll just remove it.", 'start': 24364.5, 'duration': 2.622}, {'end': 24371.606, 'text': 'Then of course, we can try it out, try to submit, place in the value.', 'start': 24367.723, 'duration': 3.883}, {'end': 24374.187, 'text': 'And within one second, our alert is gone.', 'start': 24372.006, 'duration': 2.181}, {'end': 24378.671, 'text': "Again, why we went through all this hassle setting up the function, because we'll repeat.", 'start': 24374.488, 'duration': 4.183}], 'summary': 'Removing added class clears alert within one second', 'duration': 25.251, 'max_score': 24353.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf424353420.jpg'}, {'end': 24462.855, 'src': 'embed', 'start': 24437.517, 'weight': 1, 'content': [{'end': 24442.379, 'text': "So if there's some kind of value, and if I'm not editing, then I would want to create an item.", 'start': 24437.517, 'duration': 4.862}, {'end': 24450.885, 'text': "So I'm going to go with some kind of variable name, I'm going to call this element that is document, then create element.", 'start': 24442.899, 'duration': 7.986}, {'end': 24453.147, 'text': "So we're going with this function.", 'start': 24451.206, 'duration': 1.941}, {'end': 24462.855, 'text': "And then what we would want to create what kind of element Well, since in the index HTML, I have my article, that's why I'll create the article.", 'start': 24453.688, 'duration': 9.167}], 'summary': 'Creating an article element in javascript function for document.', 'duration': 25.338, 'max_score': 24437.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf424437517.jpg'}, {'end': 24573.704, 'src': 'embed', 'start': 24544.451, 'weight': 3, 'content': [{'end': 24549.794, 'text': "And then since I would want to access as a ID property, I'm just going to say hyphen data ID.", 'start': 24544.451, 'duration': 5.343}, {'end': 24555.896, 'text': 'So again, everything that we did before, just the difference was that we were manually setting this up in the index HTML.', 'start': 24550.114, 'duration': 5.782}, {'end': 24560.778, 'text': "Now I'm doing that on fly, I'm creating the attribute, just naming a data ID.", 'start': 24556.336, 'duration': 4.442}, {'end': 24564.699, 'text': "And then later, again, I'll use my data set in order to access that value.", 'start': 24560.798, 'duration': 3.901}, {'end': 24566.979, 'text': 'And then I do need to set up my values.', 'start': 24565.259, 'duration': 1.72}, {'end': 24573.704, 'text': "So attribute value, and that is going to be equal to my unique ID, the one that I'm just creating here.", 'start': 24567.059, 'duration': 6.645}], 'summary': 'Creating attribute data id to access unique id.', 'duration': 29.253, 'max_score': 24544.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf424544451.jpg'}, {'end': 25788.18, 'src': 'embed', 'start': 25761.966, 'weight': 0, 'content': [{'end': 25768.69, 'text': "If you would want to have a challenge, you can probably, once you're done building the app this way, you can maybe try it out the other way,", 'start': 25761.966, 'duration': 6.724}, {'end': 25771.651, 'text': "where we're using the event bubbling.", 'start': 25768.69, 'duration': 2.961}, {'end': 25776.294, 'text': 'Now in my case, I will target both of these elements when I have access to them.', 'start': 25772.111, 'duration': 4.183}, {'end': 25778.295, 'text': "And I'll use my element.", 'start': 25777.254, 'duration': 1.041}, {'end': 25784.058, 'text': "So I'll start by setting up some kind of variable, it's going to be delete BTN.", 'start': 25778.895, 'duration': 5.163}, {'end': 25788.18, 'text': "And then again, instead of document, I'm using element.", 'start': 25784.158, 'duration': 4.022}], 'summary': 'Demonstrates using event bubbling and targeting elements in programming.', 'duration': 26.214, 'max_score': 25761.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf425761966.jpg'}], 'start': 24353.42, 'title': 'Dynamic web form handling', 'summary': 'Discusses setting up a function to handle form submission, adding items to a list dynamically, creating a javascript function to clear items from a list, and setting up event listeners for dynamically added buttons.', 'chapters': [{'end': 24414.346, 'start': 24353.42, 'title': 'Function setup for form handling', 'summary': 'Discusses setting up a function to handle form submission, involving adding and removing classes, as well as addressing different scenarios for user input and edit flags.', 'duration': 60.926, 'highlights': ['The function involves copying and pasting text content and setting it to an empty string, then adding and removing classes for testing form submission, resulting in the disappearance of an alert within one second.', "The need for setting up the function is explained by the repetition of functionality, such as displaying success messages upon adding an item, displaying alerts upon attempting to delete, and handling scenarios where the user doesn't enter anything in the form.", 'Addressing the scenario where the form is submitted without any input is considered the easiest, while the more complex scenario involves checking for a true value and a false edit flag.']}, {'end': 25158.18, 'start': 24415.006, 'title': 'Adding items to list dynamically', 'summary': 'Explains the process of dynamically adding items to a list and displaying alerts in a web application, involving the creation of elements, setting attributes, appending elements, and displaying alerts and containers.', 'duration': 743.174, 'highlights': ["The process begins with creating a new element, such as an article, to be added to the list, with a class of 'grocery item' and a unique ID as a data set.", "Attributes are dynamically created and set, such as adding a class of 'grocery' and a data ID using the data set property, in order to access values.", "After setting up the element and attributes, it is added to the list using the 'appendChild' method, followed by displaying an alert indicating the successful addition to the list.", "The chapter also covers placeholders for future functions like 'add to local storage' and 'set back to default', and the approach to clearing values and initializing flags when resetting the form.", 'Finally, the process of adding items dynamically to the list is demonstrated, along with the need to clear values and reset certain indicators for a seamless user experience.']}, {'end': 25485.691, 'start': 25158.681, 'title': 'Javascript clear items function', 'summary': 'Covers the creation of a javascript function called clear items that dynamically removes items from a list based on a specific condition, iterates over the items, hides containers, displays alerts, and resets to default values.', 'duration': 327.01, 'highlights': ["The function 'clear items' is created in JavaScript to remove items dynamically from a list when the clear button is clicked.", "The function iterates over the selected items and removes them using the 'removeChild' method, checking the length of the node list to ensure items are present.", "The clear items functionality also involves hiding the container by removing the 'show container' class and displaying an alert with the message 'empty list' in a 'danger' style.", 'Additionally, the function sets back to default values and includes a one-liner for local storage removal, anticipating future usage in the context of an edit functionality.']}, {'end': 26069.656, 'start': 25485.691, 'title': 'Setting up event listeners', 'summary': 'Explains the process of setting up event listeners for dynamically added buttons, emphasizing the importance of accessing the buttons before setting up functionality, and provides a detailed explanation of setting up functionality for deleting an item using event object and current target.', 'duration': 583.965, 'highlights': ['The importance of accessing buttons before setting up functionality', 'Setting up functionality for deleting an item using event object and current target', 'Explaining the use of current target over target in accessing the button']}], 'duration': 1716.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf424353420.jpg', 'highlights': ["The function 'clear items' is created in JavaScript to remove items dynamically from a list when the clear button is clicked.", "The process begins with creating a new element, such as an article, to be added to the list, with a class of 'grocery item' and a unique ID as a data set.", 'The function involves copying and pasting text content and setting it to an empty string, then adding and removing classes for testing form submission, resulting in the disappearance of an alert within one second.', "The need for setting up the function is explained by the repetition of functionality, such as displaying success messages upon adding an item, displaying alerts upon attempting to delete, and handling scenarios where the user doesn't enter anything in the form."]}, {'end': 27477.777, 'segs': [{'end': 26217.8, 'src': 'embed', 'start': 26185.062, 'weight': 0, 'content': [{'end': 26186.383, 'text': "And I'll set it back to default.", 'start': 26185.062, 'duration': 1.321}, {'end': 26189.245, 'text': "Again, why we're doing that as far as deleting the item?", 'start': 26186.483, 'duration': 2.762}, {'end': 26196.472, 'text': "because I don't want users to start editing and then deleting items and then I'll still have those edit setups.", 'start': 26189.245, 'duration': 7.227}, {'end': 26198.973, 'text': "Okay, that's why we're just going back to default.", 'start': 26196.792, 'duration': 2.181}, {'end': 26201.994, 'text': 'So again, the function name was set back to default.', 'start': 26199.593, 'duration': 2.401}, {'end': 26203.894, 'text': "Awesome That's done.", 'start': 26202.394, 'duration': 1.5}, {'end': 26207.515, 'text': 'And then lastly, I would want to also remove it from local storage.', 'start': 26204.454, 'duration': 3.061}, {'end': 26210.136, 'text': "But this is where I'll use my IDs.", 'start': 26207.936, 'duration': 2.2}, {'end': 26212.337, 'text': "So again, I'll have my comment here.", 'start': 26210.716, 'duration': 1.621}, {'end': 26217.8, 'text': 'remove from local storage.', 'start': 26213.678, 'duration': 4.122}], 'summary': 'Reset function to default and remove item from local storage using ids.', 'duration': 32.738, 'max_score': 26185.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf426185062.jpg'}, {'end': 26264.228, 'src': 'embed', 'start': 26235.307, 'weight': 1, 'content': [{'end': 26237.348, 'text': "So I have my ID, I'll comment this out.", 'start': 26235.307, 'duration': 2.041}, {'end': 26241.73, 'text': 'But down below, where I have local storage, I will set up this function.', 'start': 26237.888, 'duration': 3.842}, {'end': 26247.157, 'text': "So function, again, the name will be removed from local storage, we'll pass in the ID.", 'start': 26242.15, 'duration': 5.007}, {'end': 26250.022, 'text': "And then I don't think I'm going to add the console log.", 'start': 26247.718, 'duration': 2.304}, {'end': 26253.078, 'text': 'because probably our console is going to get quite busy.', 'start': 26250.816, 'duration': 2.262}, {'end': 26255.32, 'text': 'So might as well comment as well.', 'start': 26253.138, 'duration': 2.182}, {'end': 26257.702, 'text': "But then there's going to be this function.", 'start': 26255.76, 'duration': 1.942}, {'end': 26264.228, 'text': 'Now, where are we going to get this ID? Well, remember, we had the data set correct.', 'start': 26258.343, 'duration': 5.885}], 'summary': 'Setting up a function to remove name from local storage using the id.', 'duration': 28.921, 'max_score': 26235.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf426235307.jpg'}, {'end': 26362.873, 'src': 'embed', 'start': 26332.527, 'weight': 3, 'content': [{'end': 26335.93, 'text': "And we'll use this ID that we're accessing with data set ID.", 'start': 26332.527, 'duration': 3.403}, {'end': 26338.051, 'text': 'Again, we have current target.', 'start': 26336.63, 'duration': 1.421}, {'end': 26339.813, 'text': 'So that is our delete button.', 'start': 26338.472, 'duration': 1.341}, {'end': 26343.376, 'text': "Correct That's why we're using current target, because we have the font awesome.", 'start': 26340.073, 'duration': 3.303}, {'end': 26345.318, 'text': 'And that might be a little bit confusing.', 'start': 26343.556, 'duration': 1.762}, {'end': 26350.182, 'text': "So since we're setting up event listener on a button, I'm grabbing the actual button.", 'start': 26345.358, 'duration': 4.824}, {'end': 26352.664, 'text': 'And then I have parent element parent element.', 'start': 26350.682, 'duration': 1.982}, {'end': 26357.168, 'text': "So that's how I access my element, I get my ID, I remove it from the list.", 'start': 26352.844, 'duration': 4.324}, {'end': 26362.873, 'text': 'From the parent, I also remove show container, if there are no more items on a list.', 'start': 26357.688, 'duration': 5.185}], 'summary': 'Using event listeners to delete items and remove containers from a list.', 'duration': 30.346, 'max_score': 26332.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf426332527.jpg'}, {'end': 26703.171, 'src': 'embed', 'start': 26674.969, 'weight': 2, 'content': [{'end': 26681.234, 'text': 'So again, if I edit notice, I have my milk, I have my edit, all those values have been set.', 'start': 26674.969, 'duration': 6.265}, {'end': 26685.037, 'text': "Now I just need to handle it when I'm submitting my form.", 'start': 26681.834, 'duration': 3.203}, {'end': 26692.062, 'text': "So I'm going to scroll up, of course, my first condition is if the value is true.", 'start': 26685.757, 'duration': 6.305}, {'end': 26695.344, 'text': 'And then also if the edit flag is false.', 'start': 26692.822, 'duration': 2.522}, {'end': 26697.546, 'text': "So that's when we're adding it to the list.", 'start': 26695.884, 'duration': 1.662}, {'end': 26703.171, 'text': 'Now, the second one is if the value is true and the edit lag is false.', 'start': 26698.286, 'duration': 4.885}], 'summary': 'Handling form submission based on conditions.', 'duration': 28.202, 'max_score': 26674.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf426674969.jpg'}], 'start': 26070.096, 'title': 'Managing local storage for grocery items', 'summary': 'Explains dynamic handling of grocery items, local storage management, and form value setting, emphasizing data consistency and user experience. it covers local storage methods, item manipulation, and retaining data post-refresh.', 'chapters': [{'end': 26184.321, 'start': 26070.096, 'title': 'Removing grocery items and handling container display', 'summary': 'Explains the process of removing grocery items from a list, dynamically hiding the container based on the list size, and displaying an alert message upon item removal.', 'duration': 114.225, 'highlights': ['The process of removing grocery items and dynamically hiding the container based on the list size is explained, providing a comprehensive understanding of the functionality.', 'Demonstrates the removal of a grocery item from the list and the dynamic hiding of the container based on the list size, showcasing the practical implementation of the described functionality.', 'The utilization of a display alert to notify the user upon item removal is detailed, enhancing the interactivity and user experience of the application.']}, {'end': 26471.3, 'start': 26185.062, 'title': 'Managing local storage and accessing item ids', 'summary': 'Covers setting up functions to remove items from local storage and accessing item ids for deletion and editing, along with setting up the edit item functionality.', 'duration': 286.238, 'highlights': ['Setting up functions to remove items from local storage and accessing item IDs for deletion and editing', 'Setting up the edit item functionality']}, {'end': 26829.571, 'start': 26471.82, 'title': 'Form value setting and editing logic', 'summary': 'Discusses the process of setting and editing form values, including accessing and assigning dom elements and handling conditions for adding, editing, and submitting values, ensuring data consistency and user experience.', 'duration': 357.751, 'highlights': ['The process of setting and editing form values involves accessing and assigning DOM elements and handling conditions for adding, editing, and submitting values, ensuring data consistency and user experience.', 'The importance of maintaining data consistency and user experience is emphasized throughout the discussion.', 'Handling conditions for adding, editing, and submitting values ensures a smooth user experience and prevents data inconsistencies.']}, {'end': 27477.777, 'start': 26830.092, 'title': 'Javascript local storage tutorial', 'summary': 'Explains how to use local storage in javascript to store and retrieve data, highlighting the set item, get item, and remove item methods, along with the need to store data as strings and use json stringify and parse functions. it also covers the process of adding, editing, and removing items from local storage and emphasizes the importance of setting back to default to avoid lingering old values and maintaining functionality. the tutorial also outlines the process of setting up local storage to retain data even after refreshing the application.', 'duration': 647.685, 'highlights': ['The chapter explains how to use local storage in JavaScript to store and retrieve data, highlighting the set item, get item, and remove item methods, along with the need to store data as strings and use JSON stringify and parse functions.', 'The tutorial also outlines the process of setting up local storage to retain data even after refreshing the application.', 'The chapter covers the process of adding, editing, and removing items from local storage and emphasizes the importance of setting back to default to avoid lingering old values and maintaining functionality.']}], 'duration': 1407.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf426070096.jpg', 'highlights': ['The chapter explains how to use local storage in JavaScript to store and retrieve data, highlighting the set item, get item, and remove item methods, along with the need to store data as strings and use JSON stringify and parse functions.', 'The process of setting and editing form values involves accessing and assigning DOM elements and handling conditions for adding, editing, and submitting values, ensuring data consistency and user experience.', 'The process of removing grocery items and dynamically hiding the container based on the list size is explained, providing a comprehensive understanding of the functionality.', 'The tutorial also outlines the process of setting up local storage to retain data even after refreshing the application.']}, {'end': 28856.255, 'segs': [{'end': 27801.892, 'src': 'embed', 'start': 27779.507, 'weight': 1, 'content': [{'end': 27787.468, 'text': "So if I'll pass here, the eggs, we'll see that the first time our value for the items will be this empty array.", 'start': 27779.507, 'duration': 7.961}, {'end': 27791.749, 'text': 'Why? Because local storage does not have the item by the name of list.', 'start': 27787.729, 'duration': 4.02}, {'end': 27799.511, 'text': "But the next time, since we're setting it up over here, local storage set item list and then stringify the items,", 'start': 27792.71, 'duration': 6.801}, {'end': 27801.892, 'text': "then we'll have our array with values.", 'start': 27799.511, 'duration': 2.381}], 'summary': 'Local storage initially returns empty array, but then stores values.', 'duration': 22.385, 'max_score': 27779.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf427779507.jpg'}, {'end': 28027.861, 'src': 'embed', 'start': 27994.344, 'weight': 10, 'content': [{'end': 27995.385, 'text': 'So call this item.', 'start': 27994.344, 'duration': 1.041}, {'end': 28012.952, 'text': "And then I'm just gonna say like this if item ID because that's one of the properties that I have within the item that is coming back from local storage does not match the ID that I'm passing in when I'm deleting the item,", 'start': 27996.025, 'duration': 16.927}, {'end': 28014.133, 'text': 'then, of course, returning item.', 'start': 28012.952, 'duration': 1.181}, {'end': 28020.355, 'text': "So what I'm doing here is I'm just filtering out the values that don't match this ID.", 'start': 28014.593, 'duration': 5.762}, {'end': 28027.861, 'text': "And that's why the one that actually matches to whatever I'm passing in here, well, that one will be removed from the local storage.", 'start': 28021.696, 'duration': 6.165}], 'summary': 'Filtering out items from local storage based on id.', 'duration': 33.517, 'max_score': 27994.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf427994344.jpg'}, {'end': 28150.594, 'src': 'embed', 'start': 28124.503, 'weight': 8, 'content': [{'end': 28129.204, 'text': 'And you know what, I think this is going to be the use case where I would want to go to bigger screen.', 'start': 28124.503, 'duration': 4.701}, {'end': 28133.285, 'text': "I'll see my items on my application.", 'start': 28130.104, 'duration': 3.181}, {'end': 28138.848, 'text': 'And as you can see, I have the eggs, milk, beer and onion, I keep on adding those items.', 'start': 28134.125, 'duration': 4.723}, {'end': 28141.769, 'text': 'Now, I have only access to the onion.', 'start': 28139.588, 'duration': 2.181}, {'end': 28144.591, 'text': "So I've clicked on deleting the item.", 'start': 28141.789, 'duration': 2.802}, {'end': 28145.811, 'text': 'Now check it out.', 'start': 28145.251, 'duration': 0.56}, {'end': 28150.594, 'text': "If you'll notice in your local storage, you don't have the onion anymore.", 'start': 28146.231, 'duration': 4.363}], 'summary': 'Demonstration of deleting an item from the application with visual feedback.', 'duration': 26.091, 'max_score': 28124.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf428124503.jpg'}, {'end': 28292.295, 'src': 'embed', 'start': 28260.758, 'weight': 7, 'content': [{'end': 28263.401, 'text': 'Correct? Because get item will be no.', 'start': 28260.758, 'duration': 2.643}, {'end': 28266.003, 'text': "So we won't use this guy anymore.", 'start': 28264.602, 'duration': 1.401}, {'end': 28269.784, 'text': "And now we'll use of course, our empty array.", 'start': 28266.583, 'duration': 3.201}, {'end': 28272.425, 'text': "And we'll pretty much do everything from scratch.", 'start': 28270.404, 'duration': 2.021}, {'end': 28276.166, 'text': "So, while we're still on the subject, of course let's deal with our edit.", 'start': 28272.985, 'duration': 3.181}, {'end': 28280.508, 'text': 'local storage setup is going to be very, very familiar.', 'start': 28276.166, 'duration': 4.342}, {'end': 28283.689, 'text': "we'll have our items get a local storage.", 'start': 28280.508, 'duration': 3.181}, {'end': 28287.551, 'text': 'So again, we either get our items or we get an empty array.', 'start': 28283.889, 'duration': 3.662}, {'end': 28292.295, 'text': "And since I'm passing in here two values, ID and value.", 'start': 28288.732, 'duration': 3.563}], 'summary': 'Using local storage, items are retrieved or an empty array is used, while dealing with edit.', 'duration': 31.537, 'max_score': 28260.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf428260758.jpg'}, {'end': 28363.961, 'src': 'embed', 'start': 28336.539, 'weight': 0, 'content': [{'end': 28341.023, 'text': 'the one that is sitting in my local storage, and just update the value.', 'start': 28336.539, 'duration': 4.484}, {'end': 28344.806, 'text': 'So I do need that ID in order to access that item.', 'start': 28341.583, 'duration': 3.223}, {'end': 28347.868, 'text': "But I'll change it into my values.", 'start': 28345.586, 'duration': 2.282}, {'end': 28351.471, 'text': "So in here, I know I'm going to be getting back my array.", 'start': 28348.469, 'duration': 3.002}, {'end': 28354.173, 'text': 'And again, I can use one of the array methods.', 'start': 28351.571, 'duration': 2.602}, {'end': 28361.9, 'text': 'So items is equal to items, we know that map will return new array, just like filter.', 'start': 28354.274, 'duration': 7.626}, {'end': 28363.961, 'text': "So I'm going to have your items map.", 'start': 28362.42, 'duration': 1.541}], 'summary': 'Using the id, the speaker updates the value in local storage and manipulates an array using the map method.', 'duration': 27.422, 'max_score': 28336.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf428336539.jpg'}, {'end': 28541.49, 'src': 'embed', 'start': 28509.054, 'weight': 5, 'content': [{'end': 28513.676, 'text': 'So where we have the event listeners, and now set up one for DOM content loaded.', 'start': 28509.054, 'duration': 4.622}, {'end': 28517.438, 'text': 'So say load load items.', 'start': 28514.256, 'duration': 3.182}, {'end': 28520.159, 'text': 'Now that one will set up on a window.', 'start': 28518.098, 'duration': 2.061}, {'end': 28528.103, 'text': 'So say your window, then add event listener will be listening for the DOM content.', 'start': 28520.659, 'duration': 7.444}, {'end': 28532.446, 'text': 'So DOM content loaded event.', 'start': 28528.744, 'duration': 3.702}, {'end': 28535.648, 'text': "And then once that happens, we'll just set up items.", 'start': 28533.006, 'duration': 2.642}, {'end': 28539.83, 'text': 'So this is going to be my callback function, setup items.', 'start': 28535.748, 'duration': 4.082}, {'end': 28541.49, 'text': "Okay, that's my function.", 'start': 28540.29, 'duration': 1.2}], 'summary': 'Setting up event listener for dom content loaded to trigger callback function for setting up items.', 'duration': 32.436, 'max_score': 28509.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf428509054.jpg'}, {'end': 28626.279, 'src': 'embed', 'start': 28597.793, 'weight': 2, 'content': [{'end': 28601.814, 'text': 'So it would make sense if we would set up a function.', 'start': 28597.793, 'duration': 4.021}, {'end': 28610.637, 'text': "So we would get this code, pass it into the function, and then call it into places, we'll call it when we're submitting form.", 'start': 28602.674, 'duration': 7.963}, {'end': 28615.258, 'text': "And the second time is as I'm iterating over my items.", 'start': 28611.417, 'duration': 3.841}, {'end': 28621.689, 'text': "then I'll call my for each, and then for each and every item, I will call that function.", 'start': 28616.098, 'duration': 5.591}, {'end': 28626.279, 'text': 'So the function name will be create a list item function.', 'start': 28622.371, 'duration': 3.908}], 'summary': "Setting up a reusable function 'create a list item' for code submission and iteration.", 'duration': 28.486, 'max_score': 28597.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf428597793.jpg'}, {'end': 28708.724, 'src': 'embed', 'start': 28677.449, 'weight': 6, 'content': [{'end': 28681.892, 'text': "where notice, since I'm adding your ID ID value, they match.", 'start': 28677.449, 'duration': 4.443}, {'end': 28687.074, 'text': 'So my argument matches to whatever I have in the attribute.', 'start': 28682.692, 'duration': 4.382}, {'end': 28688.815, 'text': 'And the same goes for the value.', 'start': 28687.555, 'duration': 1.26}, {'end': 28694.519, 'text': "So now in this case, as I'm iterating over those items, I would want to call of course, my function.", 'start': 28689.456, 'duration': 5.063}, {'end': 28701.841, 'text': "So items, so if the items length is bigger than zero, then I'll run items for each.", 'start': 28695.239, 'duration': 6.602}, {'end': 28708.724, 'text': "I'm looking for my callback function, function, maxing each and every item.", 'start': 28703.002, 'duration': 5.722}], 'summary': 'Iterating over items to match and call callback function if length > 0', 'duration': 31.275, 'max_score': 28677.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf428677449.jpg'}, {'end': 28856.255, 'src': 'embed', 'start': 28826.196, 'weight': 9, 'content': [{'end': 28834.725, 'text': "If I want to delete them, of course, I'm removing them from the UI, as well as the local storage, I can clearly see that, then I'll add one more time.", 'start': 28826.196, 'duration': 8.529}, {'end': 28842.429, 'text': 'milk, milk, onion, onion, like so.', 'start': 28837.067, 'duration': 5.362}, {'end': 28844.19, 'text': "Let's add this guy.", 'start': 28843.269, 'duration': 0.921}, {'end': 28849.852, 'text': 'And then once I have all these values, well, of course, I can delete them one by one.', 'start': 28844.89, 'duration': 4.962}, {'end': 28852.914, 'text': "And let's remove that item.", 'start': 28849.872, 'duration': 3.042}, {'end': 28856.255, 'text': 'course, that is going to be my item item number two.', 'start': 28853.874, 'duration': 2.381}], 'summary': 'The speaker discusses removing and adding items in the ui and local storage, demonstrating the process with specific items.', 'duration': 30.059, 'max_score': 28826.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf428826196.jpg'}], 'start': 27478.497, 'title': 'Managing local storage in javascript', 'summary': 'Covers using shorthand variable naming and setting up logic for checking and retrieving items from local storage, utilizing get item and set item functions with ternary operators and json parsing to handle existing or non-existent items, and managing local storage by adding, retrieving, removing, and updating items, as well as displaying them on app reload.', 'chapters': [{'end': 27514.055, 'start': 27478.497, 'title': 'Variable naming and local storage logic', 'summary': 'Discusses using shorthand variable naming and setting up logic for checking and retrieving items from local storage, emphasizing the importance of this process for future use.', 'duration': 35.558, 'highlights': ['Shorthand variable naming allows for saving on typing effort.', 'Setting up logic for checking and retrieving items from local storage is crucial for future use.']}, {'end': 27818.665, 'start': 27514.675, 'title': 'Using local storage in javascript', 'summary': 'Covers using the get item and set item functions to interact with local storage, including the use of ternary operators and json parsing to handle existing or non-existent items, ensuring the correct storage and retrieval of data.', 'duration': 303.99, 'highlights': ['Instructing the use of get item and set item functions to manipulate local storage, enabling the retrieval and storage of data, with a focus on handling existing or non-existent items and ensuring the correct data storage and retrieval process.', 'Explaining the use of ternary operators to handle the presence or absence of items in local storage, ensuring that if an item exists, it is retrieved and used, and if not, an empty array is assigned, demonstrating a clear approach to data manipulation and storage.', 'Emphasizing the importance of using JSON parsing to handle the existence or absence of items in local storage, ensuring the correct handling and storage of data, and providing a clear demonstration of the process to retrieve and store data using local storage in JavaScript.']}, {'end': 28081.991, 'start': 27819.306, 'title': 'Managing local storage in javascript', 'summary': 'Covers adding, retrieving, and removing items from local storage in javascript, utilizing functions like getlocalstorage to access data, using the filter method to remove items based on id, and updating local storage with the new data.', 'duration': 262.685, 'highlights': ['The chapter covers adding, retrieving, and removing items from local storage in JavaScript', 'Utilizing functions like getLocalStorage to access data', 'Using the filter method to remove items based on ID', 'Updating local storage with the new data']}, {'end': 28856.255, 'start': 28082.631, 'title': 'Local storage management', 'summary': 'Discusses the management of local storage, including adding, removing, and editing items, as well as displaying them on app reload, showcasing a comprehensive understanding of local storage functionality.', 'duration': 773.624, 'highlights': ['The chapter discusses the management of local storage, including adding, removing, and editing items.', 'The process of displaying items on app reload is demonstrated.', 'The concept of accessing, filtering, and setting new items in local storage is explained.', 'The explanation of the method to remove items from local storage is detailed.', 'The process of updating values in local storage is demonstrated.']}], 'duration': 1377.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf427478497.jpg', 'highlights': ['The chapter covers adding, retrieving, and removing items from local storage in JavaScript', 'The chapter discusses the management of local storage, including adding, removing, and editing items', 'Explaining the use of ternary operators to handle the presence or absence of items in local storage, ensuring that if an item exists, it is retrieved and used, and if not, an empty array is assigned, demonstrating a clear approach to data manipulation and storage', 'Emphasizing the importance of using JSON parsing to handle the existence or absence of items in local storage, ensuring the correct handling and storage of data, and providing a clear demonstration of the process to retrieve and store data using local storage in JavaScript', 'The process of displaying items on app reload is demonstrated', 'Using the filter method to remove items based on ID', 'Updating local storage with the new data', 'Utilizing functions like getLocalStorage to access data', 'The explanation of the method to remove items from local storage is detailed', 'The process of updating values in local storage is demonstrated', 'Shorthand variable naming allows for saving on typing effort', 'Setting up logic for checking and retrieving items from local storage is crucial for future use']}, {'end': 30236.39, 'segs': [{'end': 29134.811, 'src': 'embed', 'start': 29106.391, 'weight': 2, 'content': [{'end': 29109.674, 'text': "And it's gonna have this heading one with a value four.", 'start': 29106.391, 'duration': 3.283}, {'end': 29118.903, 'text': "But before that, we'll have a heading four with Susan, though, Susan, though, Let's save it.", 'start': 29109.734, 'duration': 9.169}, {'end': 29122.585, 'text': "Now the way the setup works is we're using position absolute.", 'start': 29119.444, 'duration': 3.141}, {'end': 29124.546, 'text': "So that's why we can only see the last one.", 'start': 29122.605, 'duration': 1.941}, {'end': 29126.807, 'text': "Again, don't worry, of course, we'll fix that.", 'start': 29124.926, 'duration': 1.881}, {'end': 29134.811, 'text': "And then right after the slider container, so don't place it within the container, set up a button container.", 'start': 29127.527, 'duration': 7.284}], 'summary': 'Using position absolute, we can only see the last heading one with a value four. a button container should be set up after the slider container.', 'duration': 28.42, 'max_score': 29106.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf429106391.jpg'}, {'end': 29827.227, 'src': 'embed', 'start': 29795.253, 'weight': 0, 'content': [{'end': 29797.796, 'text': 'So we did our first setup, where we place them in a line.', 'start': 29795.253, 'duration': 2.543}, {'end': 29800.6, 'text': "Now we'll do this line of CSS.", 'start': 29798.317, 'duration': 2.283}, {'end': 29805.859, 'text': "So we have some kind of function, I'm going to name my one carousel.", 'start': 29801.277, 'duration': 4.582}, {'end': 29814.662, 'text': 'And then, for the time being, we will leave out the logic where we either navigate to the end of the slideshow or beginning.', 'start': 29806.579, 'duration': 8.083}, {'end': 29816.283, 'text': "we'll add that in a second.", 'start': 29814.662, 'duration': 1.621}, {'end': 29819.264, 'text': "I'll just would want to start by grabbing all my slides.", 'start': 29816.283, 'duration': 2.981}, {'end': 29827.227, 'text': "Again, I have for each, then I'll have my function, my callback function, I'll access each and every slide as a parameter of slide.", 'start': 29819.344, 'duration': 7.883}], 'summary': 'Setting up a carousel with slides and css.', 'duration': 31.974, 'max_score': 29795.253, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf429795253.jpg'}, {'end': 30023.594, 'src': 'embed', 'start': 29997.173, 'weight': 1, 'content': [{'end': 30004.617, 'text': 'Now, if the counter is less than one, that means that our one navigate back to the end of the slideshow.', 'start': 29997.173, 'duration': 7.444}, {'end': 30009.241, 'text': 'And in order to access that, well, first of all, I would want to set up some kind of statement.', 'start': 30005.397, 'duration': 3.844}, {'end': 30019.689, 'text': 'So if the counter is less than one, then I would want to set my counter equal to slides, length, minus one.', 'start': 30009.581, 'duration': 10.108}, {'end': 30023.594, 'text': 'Okay, because again, arrays are zero index based.', 'start': 30020.43, 'duration': 3.164}], 'summary': 'If the counter is less than one, set it to slides length minus one.', 'duration': 26.421, 'max_score': 29997.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf429997173.jpg'}, {'end': 30201.406, 'src': 'embed', 'start': 30176.321, 'weight': 3, 'content': [{'end': 30182.266, 'text': 'Otherwise, so set it up in here pre button, display equal to block of course.', 'start': 30176.321, 'duration': 5.945}, {'end': 30185.008, 'text': "And let's set up another else.", 'start': 30183.267, 'duration': 1.741}, {'end': 30187.914, 'text': "And in this case, I'm going to say else.", 'start': 30186.653, 'duration': 1.261}, {'end': 30190.176, 'text': "And of course, I'll hide it.", 'start': 30189.035, 'duration': 1.141}, {'end': 30192.878, 'text': 'So pre button style display to none.', 'start': 30190.576, 'duration': 2.302}, {'end': 30195.581, 'text': 'So right from the get go, we hide our pre button.', 'start': 30193.499, 'duration': 2.082}, {'end': 30201.406, 'text': 'Awesome And once we navigate to a second slide, of course, our counter value is one.', 'start': 30195.941, 'duration': 5.465}], 'summary': 'Set initial state to hide pre button and counter value to 1 on second slide.', 'duration': 25.085, 'max_score': 30176.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf430176321.jpg'}], 'start': 28857.016, 'title': 'Setting up javascript slider and slide functionality', 'summary': 'Covers the setup of a simple javascript slider with the option to hide buttons, circle back to the beginning or end of the slideshow, and emphasizes creating slide containers and individual slides. it also explains using position absolute and javascript for dynamic slide positioning, setting up slide functionality, and creating slideshow navigation with javascript and css.', 'chapters': [{'end': 29105.37, 'start': 28857.016, 'title': 'Simple javascript slider setup', 'summary': 'Covers the setup of a simple slider with javascript, including the option to hide buttons at certain points and the ability to circle back to the beginning or end of the slideshow, with emphasis on creating slide containers and setting up individual slides.', 'duration': 248.354, 'highlights': ['The setup includes the option to hide buttons at certain points in the slideshow, enabling navigation only back and forth, with buttons hidden at the beginning and end of the slideshow.', 'The setup also includes the option to circle back to the beginning or end of the slideshow, maintaining the ability to navigate back and forth while circling back to the start or end of the slideshow.', "Creating a slide container with a class of 'slide container' and individual slides with a class of 'slide' is essential for setting up the slider or carousel, with the content within the slides being customizable."]}, {'end': 29580.41, 'start': 29106.391, 'title': 'Javascript slider setup', 'summary': 'Explains the setup of a javascript slider, using position absolute and javascript to dynamically adjust the position of slides, with the goal of creating a smooth transition between slides and adding functionality to navigate through the slider.', 'duration': 474.019, 'highlights': ['The setup involves using position absolute for the slides, which allows for easy manipulation through JavaScript to dynamically position the slides.', 'Using JavaScript to dynamically adjust the position of slides allows for the addition of as many slides as desired, providing flexibility and scalability to the slider.', 'The transition between slides is achieved using the transform property and setting it to a translate x, creating a smooth transition effect.']}, {'end': 29846.695, 'start': 29580.73, 'title': 'Javascript slide functionality', 'summary': 'Discusses setting up slide functionality in javascript, including setting left properties, using template strings for expressions, adding items in a list, and setting up slide navigation controls with a counter and translate values for slides.', 'duration': 265.965, 'highlights': ['The chapter discusses setting up slide functionality in JavaScript, including setting left properties and using template strings for expressions.', 'It explains the process of adding items in a list using JavaScript and the advantage of not needing to manually set up styles for each item.', 'The chapter details the setup of slide navigation controls by using a counter and translate values for slides, enabling navigation through the slideshow.']}, {'end': 30236.39, 'start': 29846.695, 'title': 'Creating slideshow navigation', 'summary': 'Explains the process of creating a slideshow navigation using javascript and css. it demonstrates how to move slides, handle counter values, and show/hide navigation buttons based on the current slide position.', 'duration': 389.695, 'highlights': ['The chapter explains the process of creating a slideshow navigation using JavaScript and CSS.', 'It demonstrates how to move slides, handle counter values, and show/hide navigation buttons based on the current slide position.', 'The process involves setting the counter, multiplying the counter by 100, and adding a percentage value to move the slides.']}], 'duration': 1379.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3PHXvlpOkf4/pics/3PHXvlpOkf428857016.jpg', 'highlights': ["Creating a slide container with a class of 'slide container' and individual slides with a class of 'slide' is essential for setting up the slider or carousel.", 'The setup involves using position absolute for the slides, allowing easy manipulation through JavaScript for dynamic positioning.', 'The chapter discusses setting up slide functionality in JavaScript, including setting left properties and using template strings for expressions.', 'The chapter explains the process of creating a slideshow navigation using JavaScript and CSS.']}], 'highlights': ['The loop runs six times to generate the random hex color, with each iteration adding a value from the array, resulting in a unique color. (Quantifiable: Loop runs six times)', 'The process of dynamically populating a menu involves accessing object properties, joining items into a single string, and adding as data using inner HTML (Quantifiable: Dynamically populating a menu)', "The map method iterates through an array, accessing and modifying the array's structure, showcasing practical application (Quantifiable: Map method iterates through an array)", 'The project includes a demonstration of generating random paragraphs based on user input such as 9, -1, 0, and 20', 'The app allows adding, editing, and deleting items in a grocery list, with the added items being saved in local storage for future access and display upon refresh']}