title
JavaScript DOM Crash Course - Part 4 [Final Project]

description
In this video we will take what we learned in the last 3 videos and create a simple Item lister project where we can add list items with a form, delete them and filter through them all with vanilla JavaScript and DOM properties and methods. CODE: Codepen for this project https://codepen.io/bradtraversy/pen/Bwapow BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia COURSES & MORE INFO: http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia NEW DISCORD CHAT SERVER: https://discord.gg/traversymedia

detail
{'title': 'JavaScript DOM Crash Course - Part 4 [Final Project]', 'heatmap': [{'end': 685.663, 'start': 644.922, 'weight': 0.88}, {'end': 936.704, 'start': 903.467, 'weight': 0.976}], 'summary': 'Tutorial series covers a javascript dom crash course project, including building a small project with search and filter forms, delete buttons, and using bootstrap. it also explains form interactions, dom manipulation, and item filtering in javascript through practical examples and code demonstrations.', 'chapters': [{'end': 71.539, 'segs': [{'end': 71.539, 'src': 'embed', 'start': 7.932, 'weight': 0, 'content': [{'end': 13.533, 'text': 'Alright guys, so this is the final video of the JavaScript Dom crash course series.', 'start': 7.932, 'duration': 5.601}, {'end': 20.975, 'text': "In this video what we're going to do is take what we've learned in the last three videos and build an actual project, just a small project with it.", 'start': 14.073, 'duration': 6.902}, {'end': 26.876, 'text': "So it's pretty much the same interface that we've been working with, I just added a couple things.", 'start': 21.595, 'duration': 5.281}, {'end': 30.037, 'text': 'I added this search form or this filter form up here.', 'start': 27.356, 'duration': 2.681}, {'end': 33.578, 'text': 'I also added these delete buttons on each item.', 'start': 30.417, 'duration': 3.161}, {'end': 38.662, 'text': 'okay, so if we look at the html, you can see that in the header we now have the filter.', 'start': 34.298, 'duration': 4.364}, {'end': 40.944, 'text': 'i split it up into two, six column divs.', 'start': 38.662, 'duration': 2.282}, {'end': 47.01, 'text': "okay, we're using bootstrap and then down here i added a button to each list item.", 'start': 40.944, 'duration': 6.066}, {'end': 49.873, 'text': 'okay, i also added an id of add form to the form.', 'start': 47.01, 'duration': 2.863}, {'end': 57.522, 'text': 'now, if you want to follow along with me, just click on the link in the description for the code pen and just grab all of the html,', 'start': 50.493, 'duration': 7.029}, {'end': 61.908, 'text': 'put that into an html file and then link a javascript file to it.', 'start': 57.522, 'duration': 4.386}, {'end': 65.753, 'text': 'okay, so i have a file called main.js, which is completely blank.', 'start': 61.908, 'duration': 3.845}, {'end': 67.655, 'text': 'okay, so this is going to be our starting point.', 'start': 65.753, 'duration': 1.902}, {'end': 71.539, 'text': "So let's look at this and think about what we want to do.", 'start': 68.636, 'duration': 2.903}], 'summary': 'Final video of javascript dom crash course series, building a small project with added search and delete functionalities using bootstrap.', 'duration': 63.607, 'max_score': 7.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw7932.jpg'}], 'start': 7.932, 'title': 'Javascript dom crash course project', 'summary': 'Covers building a small project using javascript dom, including adding a search form, filter form, and delete buttons to the interface, using bootstrap, and providing instructions to follow along by accessing the code pen link provided.', 'chapters': [{'end': 71.539, 'start': 7.932, 'title': 'Javascript dom crash course project', 'summary': 'Covers building a small project using javascript dom, including adding a search form, filter form, and delete buttons to the interface, using bootstrap, and providing instructions to follow along by accessing the code pen link provided.', 'duration': 63.607, 'highlights': ['The chapter discusses building a small project using JavaScript Dom, including adding a search form, filter form, and delete buttons to the interface.', 'The interface was enhanced by using bootstrap, with the addition of a filter in the header and a button to each list item.', 'Instructions were given for following along by accessing the provided code pen link and incorporating the html into an html file and linking a javascript file to it.']}], 'duration': 63.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw7932.jpg', 'highlights': ['The chapter discusses building a small project using JavaScript Dom, including search form, filter form, and delete buttons.', 'The interface was enhanced by using bootstrap, with the addition of a filter in the header and a button to each list item.', 'Instructions were given for following along by accessing the provided code pen link and incorporating the html into an html file and linking a javascript file to it.']}, {'end': 273.176, 'segs': [{'end': 123.966, 'src': 'embed', 'start': 71.599, 'weight': 0, 'content': [{'end': 74.721, 'text': 'So we want to be able to add an item, type something in and add it.', 'start': 71.599, 'duration': 3.122}, {'end': 80.206, 'text': 'So this is going to take an event, right? We probably want a submit event on this form.', 'start': 75.522, 'duration': 4.684}, {'end': 81.807, 'text': "So let's go ahead and do that.", 'start': 80.707, 'duration': 1.1}, {'end': 84.31, 'text': 'We know that the form has an ID of add form.', 'start': 81.847, 'duration': 2.463}, {'end': 88.713, 'text': "So let's create a variable here and we'll call it add form.", 'start': 84.71, 'duration': 4.003}, {'end': 102.102, 'text': "actually we'll just call it form and we'll set it to document dot, get element by D, and we know that it has an ID of add form.", 'start': 90.214, 'duration': 11.888}, {'end': 102.462, 'text': 'all right.', 'start': 102.102, 'duration': 0.36}, {'end': 109.026, 'text': "so now that we have that, let's also put the item list, the ul, here, into a variable.", 'start': 102.462, 'duration': 6.564}, {'end': 111.148, 'text': 'so we know that that has an ID of items.', 'start': 109.026, 'duration': 2.122}, {'end': 113.569, 'text': 'right, ul ID items.', 'start': 111.148, 'duration': 2.421}, {'end': 114.63, 'text': "so we'll say var.", 'start': 113.569, 'duration': 1.061}, {'end': 118.221, 'text': "Yeah, we'll call it item list.", 'start': 116.8, 'duration': 1.421}, {'end': 123.966, 'text': "And we'll set it to document dot get element by D.", 'start': 119.022, 'duration': 4.944}], 'summary': 'Creating variables for add form and item list using javascript.', 'duration': 52.367, 'max_score': 71.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw71599.jpg'}, {'end': 213.243, 'src': 'embed', 'start': 147.513, 'weight': 1, 'content': [{'end': 154.697, 'text': "Okay, so once that gets fired off, we're going to call a function called add item.", 'start': 147.513, 'duration': 7.184}, {'end': 157.338, 'text': "All right, so let's go ahead and create that.", 'start': 154.717, 'duration': 2.621}, {'end': 166.204, 'text': "So we'll say function add item.", 'start': 160.861, 'duration': 5.343}, {'end': 173.595, 'text': "All right, we're going to pass in our event parameter here, our event object.", 'start': 169.133, 'duration': 4.462}, {'end': 181.198, 'text': 'And remember, when we submit a form, we have to stop the initial behavior.', 'start': 174.035, 'duration': 7.163}, {'end': 182.058, 'text': 'We have to prevent it.', 'start': 181.238, 'duration': 0.82}, {'end': 185.74, 'text': 'So we have to say prevent default.', 'start': 182.138, 'duration': 3.602}, {'end': 192.959, 'text': 'in order for that to not happen, in order for the normal submission of the form to not happen.', 'start': 187.637, 'duration': 5.322}, {'end': 199.242, 'text': "All right, so let's just test this out by just saying console.log and we'll just say 1.", 'start': 192.979, 'duration': 6.263}, {'end': 205.325, 'text': 'All right, so we go over here and we open up our console and submit and we get 1.', 'start': 199.242, 'duration': 6.083}, {'end': 209.407, 'text': 'Good So what do we want to do now? We want to basically..', 'start': 205.325, 'duration': 4.082}, {'end': 213.243, 'text': 'get the value of this input.', 'start': 211.321, 'duration': 1.922}], 'summary': 'Creating a function to add item, preventing form submission, and testing with console log.', 'duration': 65.73, 'max_score': 147.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw147513.jpg'}, {'end': 279.632, 'src': 'embed', 'start': 248.37, 'weight': 7, 'content': [{'end': 249.95, 'text': "I didn't want to have to do that.", 'start': 248.37, 'duration': 1.58}, {'end': 254.432, 'text': "But okay, we'll just add an ID of item.", 'start': 250.03, 'duration': 4.402}, {'end': 259.874, 'text': 'Alright, so that way, we can grab it by the item.', 'start': 254.452, 'duration': 5.422}, {'end': 266.484, 'text': 'Now I could have just used like a query selector and said input type text or something like that.', 'start': 261.774, 'duration': 4.71}, {'end': 270.972, 'text': "But what if we add another text box above it? It's going to grab the wrong thing.", 'start': 266.564, 'duration': 4.408}, {'end': 273.176, 'text': 'So I want to be very specific here.', 'start': 271.112, 'duration': 2.064}, {'end': 279.632, 'text': 'Now, once we have this, what we want to do is we want to create a new li.', 'start': 274.611, 'duration': 5.021}], 'summary': 'Adding an id of item to grab it specifically and creating a new li.', 'duration': 31.262, 'max_score': 248.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw248370.jpg'}], 'start': 71.599, 'title': 'Form interactions in javascript', 'summary': 'Covers adding items to a list, using event listeners to enable item addition, and retrieving input values and handling form submission through javascript, providing practical examples and explanations.', 'chapters': [{'end': 123.966, 'start': 71.599, 'title': 'Adding item to list', 'summary': 'Focuses on adding an item to a list by obtaining form and ul elements by their ids and setting them to variables for further manipulation.', 'duration': 52.367, 'highlights': ['Obtaining form and ul elements by their IDs and setting them to variables for further manipulation.', 'Setting a submit event on the form for adding an item.', 'Using document.getElementById to get the form and ul elements by their IDs.']}, {'end': 185.74, 'start': 123.966, 'title': 'Using event listeners in javascript', 'summary': 'Explains how to use event listeners in javascript to listen for submit events and call a function to prevent the default behavior, enabling the addition of items.', 'duration': 61.774, 'highlights': ['The chapter explains how to use event listeners in JavaScript to listen for submit events and call a function to prevent the default behavior, enabling the addition of items.', 'The function add item is called when the form submit event is fired, and it includes preventing the initial behavior by using prevent default.']}, {'end': 273.176, 'start': 187.637, 'title': 'Form submission and input value retrieval', 'summary': 'Illustrates testing form submission and retrieving input values using javascript, including adding an id to the input element and explaining the use of specific selectors.', 'duration': 85.539, 'highlights': ['The chapter illustrates testing form submission by using console.log to verify the submission of the form, which returns the value 1.', 'It explains the process of retrieving the input value by adding an ID to the input element and using specific selectors, such as document.getElementById, to ensure the correct input is retrieved even with the potential addition of other input elements.']}], 'duration': 201.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw71599.jpg', 'highlights': ['Covers adding items to a list, using event listeners to enable item addition, and retrieving input values and handling form submission through javascript, providing practical examples and explanations.', 'The chapter explains how to use event listeners in JavaScript to listen for submit events and call a function to prevent the default behavior, enabling the addition of items.', 'Obtaining form and ul elements by their IDs and setting them to variables for further manipulation.', 'Setting a submit event on the form for adding an item.', 'Using document.getElementById to get the form and ul elements by their IDs.', 'The function add item is called when the form submit event is fired, and it includes preventing the initial behavior by using prevent default.', 'The chapter illustrates testing form submission by using console.log to verify the submission of the form, which returns the value 1.', 'It explains the process of retrieving the input value by adding an ID to the input element and using specific selectors, such as document.getElementById, to ensure the correct input is retrieved even with the potential addition of other input elements.']}, {'end': 857.876, 'segs': [{'end': 341.508, 'src': 'embed', 'start': 308.032, 'weight': 0, 'content': [{'end': 314.96, 'text': "Let's also add a class name to it, because if we look at the list item here, let's look at one of these.", 'start': 308.032, 'duration': 6.928}, {'end': 317.423, 'text': 'It has a class of list group item.', 'start': 315.561, 'duration': 1.862}, {'end': 318.585, 'text': "So that's what we want to add.", 'start': 317.463, 'duration': 1.122}, {'end': 323.571, 'text': "So we'll say ally dot class name equals.", 'start': 318.645, 'duration': 4.926}, {'end': 328.955, 'text': 'list group item.', 'start': 326.312, 'duration': 2.643}, {'end': 330.597, 'text': 'All right.', 'start': 330.337, 'duration': 0.26}, {'end': 334.422, 'text': 'And we can go ahead and check it out by just saying console log ally.', 'start': 330.697, 'duration': 3.725}, {'end': 338.206, 'text': "And let's just submit.", 'start': 337.225, 'duration': 0.981}, {'end': 341.508, 'text': 'And we get a li with a class of list group item.', 'start': 338.846, 'duration': 2.662}], 'summary': "Adding a class name 'list group item' to an li element using javascript.", 'duration': 33.476, 'max_score': 308.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw308032.jpg'}, {'end': 481.979, 'src': 'embed', 'start': 449.383, 'weight': 1, 'content': [{'end': 453.506, 'text': "So what we're gonna do is go right in here and we want to create.", 'start': 449.383, 'duration': 4.123}, {'end': 462.01, 'text': 'we want to create the delete button element.', 'start': 455.887, 'duration': 6.123}, {'end': 465.511, 'text': "Alright, so again, let's just say var button.", 'start': 462.19, 'duration': 3.321}, {'end': 467.953, 'text': "Yeah, I guess we'll call it button.", 'start': 465.531, 'duration': 2.422}, {'end': 474.556, 'text': "And we'll say equals document dot create element.", 'start': 468.593, 'duration': 5.963}, {'end': 476.857, 'text': "Okay, we're creating a button.", 'start': 474.576, 'duration': 2.281}, {'end': 481.979, 'text': "Actually, let's call this delete.", 'start': 480.858, 'duration': 1.121}], 'summary': "Creating a 'delete' button element using javascript.", 'duration': 32.596, 'max_score': 449.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw449383.jpg'}, {'end': 685.663, 'src': 'heatmap', 'start': 644.922, 'weight': 0.88, 'content': [{'end': 654.147, 'text': "so we'll say item list dot.", 'start': 644.922, 'duration': 9.225}, {'end': 656.269, 'text': 'um, add event listener.', 'start': 654.147, 'duration': 2.122}, {'end': 663.813, 'text': "okay, we want to listen for a click and then we're going to call remove item.", 'start': 656.269, 'duration': 7.544}, {'end': 667.755, 'text': "okay, function called remove item, so let's go create that.", 'start': 663.813, 'duration': 3.942}, {'end': 674.216, 'text': 'So function remove item.', 'start': 670.914, 'duration': 3.302}, {'end': 682.241, 'text': "So let's see, we're going to pass in our E object here, event object.", 'start': 677.618, 'duration': 4.623}, {'end': 685.663, 'text': 'Now I just want to show you something.', 'start': 682.782, 'duration': 2.881}], 'summary': 'Creating an event listener for click to call remove item function.', 'duration': 40.741, 'max_score': 644.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw644922.jpg'}, {'end': 709.258, 'src': 'embed', 'start': 685.703, 'weight': 2, 'content': [{'end': 696.69, 'text': "So if we say console dot log one and we go and we click on any of these elements here, we're going to get that that event, that function fires off.", 'start': 685.703, 'duration': 10.987}, {'end': 698.592, 'text': "Right And we're console logging one.", 'start': 696.75, 'duration': 1.842}, {'end': 703.535, 'text': 'Well, what we want to happen is we only want this to happen if we click the button here.', 'start': 699.352, 'duration': 4.183}, {'end': 706.957, 'text': 'OK, not the actual element.', 'start': 704.515, 'duration': 2.442}, {'end': 709.258, 'text': 'I mean, if you wanted that functionality, you could.', 'start': 707.037, 'duration': 2.221}], 'summary': "Console logs 'one' when clicking any element, but should only occur when clicking a specific button.", 'duration': 23.555, 'max_score': 685.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw685703.jpg'}, {'end': 769.147, 'src': 'embed', 'start': 740.642, 'weight': 3, 'content': [{'end': 742.463, 'text': 'If it does, then we want to move on.', 'start': 740.642, 'duration': 1.821}, {'end': 743.884, 'text': "So we'll say console log.", 'start': 742.523, 'duration': 1.361}, {'end': 752.296, 'text': "One And now if I go and I click anywhere here, you'll see we're not logging one.", 'start': 747.654, 'duration': 4.642}, {'end': 756.179, 'text': 'If I click on the button, it does it go it logs one.', 'start': 752.677, 'duration': 3.502}, {'end': 761.282, 'text': "So since this this has a class of delete, then it's going to keep going.", 'start': 756.839, 'duration': 4.443}, {'end': 762.843, 'text': "So that's what we want.", 'start': 762.002, 'duration': 0.841}, {'end': 765.584, 'text': 'And then we just want to do a simple confirmation.', 'start': 763.403, 'duration': 2.181}, {'end': 769.147, 'text': 'So we can say if confirm.', 'start': 766.485, 'duration': 2.662}], 'summary': "Javascript function logs 'one' when button with class 'delete' is clicked", 'duration': 28.505, 'max_score': 740.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw740642.jpg'}], 'start': 274.611, 'title': 'Javascript dom manipulation', 'summary': 'Details the process of appending text and creating a delete button in javascript, including adding event listeners and confirming item deletion, with practical coding examples.', 'chapters': [{'end': 341.508, 'start': 274.611, 'title': 'Creating new list item with class name', 'summary': "Discusses creating a new list item using the 'create element' method and adding a class name 'list group item' to it, as demonstrated by creating an ally element and checking it with console log.", 'duration': 66.897, 'highlights': ["The chapter discusses creating a new list item using the 'create element' method and adding a class name 'list group item' to it.", 'The demonstration includes creating an ally element and checking it with console log.']}, {'end': 857.876, 'start': 342.149, 'title': 'Javascript dom manipulation', 'summary': 'Details the process of appending text and creating a delete button in javascript, including adding event listeners and confirming item deletion, with a focus on practical coding examples.', 'duration': 515.727, 'highlights': ['The chapter explains the process of creating a delete button in JavaScript, including adding classes and appending text nodes, demonstrating practical coding examples and emphasizing the importance of exact class names.', "It details the method for adding event listeners to elements in JavaScript, using 'addEventListener' to listen for a click event and showcasing the use of 'target.classList.contains' to check for a specific class before executing an action.", "The chapter demonstrates the functionality of confirming item deletion in JavaScript, utilizing the 'confirm' function to prompt the user for confirmation before removing the selected item from the list."]}], 'duration': 583.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw274611.jpg', 'highlights': ["The chapter demonstrates creating a new list item using the 'createElement' method and adding a class name 'list group item' to it.", 'The chapter explains the process of creating a delete button in JavaScript, including adding classes and appending text nodes, and emphasizes the importance of exact class names.', "It details the method for adding event listeners to elements in JavaScript, using 'addEventListener' to listen for a click event and showcasing the use of 'target.classList.contains' to check for a specific class before executing an action.", "The chapter demonstrates the functionality of confirming item deletion in JavaScript, utilizing the 'confirm' function to prompt the user for confirmation before removing the selected item from the list.", 'The demonstration includes creating an ally element and checking it with console log.']}, {'end': 1327.165, 'segs': [{'end': 936.704, 'src': 'heatmap', 'start': 898.573, 'weight': 0, 'content': [{'end': 899.394, 'text': "So let's say..", 'start': 898.573, 'duration': 0.821}, {'end': 906.729, 'text': "I'll say filter dot add event listener.", 'start': 903.467, 'duration': 3.262}, {'end': 911.571, 'text': "Okay, we're going to listen for a key up event.", 'start': 906.749, 'duration': 4.822}, {'end': 915.493, 'text': "And then we're going to call filter items.", 'start': 912.672, 'duration': 2.821}, {'end': 918.195, 'text': "Okay, let's go down here.", 'start': 915.513, 'duration': 2.682}, {'end': 926.619, 'text': 'Say function, filter items.', 'start': 918.215, 'duration': 8.404}, {'end': 932.261, 'text': "And let's see what we're going to do.", 'start': 930.96, 'duration': 1.301}, {'end': 936.704, 'text': "So first we want to get the filter text that's being typed in right?", 'start': 932.361, 'duration': 4.343}], 'summary': 'Adding event listener for key up event to call filter items.', 'duration': 38.131, 'max_score': 898.573, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw898573.jpg'}, {'end': 1179.999, 'src': 'embed', 'start': 1148.463, 'weight': 3, 'content': [{'end': 1152.245, 'text': 'We basically want to compare the item name to the search box text.', 'start': 1148.463, 'duration': 3.782}, {'end': 1158.052, 'text': "So we're going to say if Item name.", 'start': 1152.985, 'duration': 5.067}, {'end': 1161.786, 'text': 'dot to lowercase.', 'start': 1160.365, 'duration': 1.421}, {'end': 1170.933, 'text': 'because, remember, since we converted the the filter to lowercase, we want to convert these to lowercase as well, so we can match them.', 'start': 1161.786, 'duration': 9.147}, {'end': 1179.999, 'text': 'so item name, dot to lowercase and then we want to use dot, index of and then pass in text.', 'start': 1170.933, 'duration': 9.066}], 'summary': 'Comparing item names to search box text using lowercase conversion and index matching.', 'duration': 31.536, 'max_score': 1148.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw1148463.jpg'}, {'end': 1235.048, 'src': 'embed', 'start': 1204.013, 'weight': 4, 'content': [{'end': 1212.258, 'text': 'So we want to set the item.style.display equal to block because we want it to show.', 'start': 1204.013, 'duration': 8.245}, {'end': 1216.305, 'text': "All right, else, then we don't want it to show.", 'start': 1213.419, 'duration': 2.886}, {'end': 1223.3, 'text': "So we'll say item dot style dot display is going to be equal to none, we want to hide it.", 'start': 1216.405, 'duration': 6.895}, {'end': 1225.804, 'text': 'all right.', 'start': 1225.424, 'duration': 0.38}, {'end': 1235.048, 'text': "so let's save it and let's put in a d, you'll see everything goes away because it's not matching anything, so it's being set to none.", 'start': 1225.804, 'duration': 9.244}], 'summary': "Setting item.style.display to 'block' to show, 'none' to hide.", 'duration': 31.035, 'max_score': 1204.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw1204013.jpg'}, {'end': 1302.542, 'src': 'embed', 'start': 1260.038, 'weight': 1, 'content': [{'end': 1261.999, 'text': 'So we can now filter through these items.', 'start': 1260.038, 'duration': 1.961}, {'end': 1263.96, 'text': 'Item one, two.', 'start': 1262.579, 'duration': 1.381}, {'end': 1265.461, 'text': 'All right.', 'start': 1263.98, 'duration': 1.481}, {'end': 1268.442, 'text': "If I go ahead and I add something in here, we'll say hello.", 'start': 1265.541, 'duration': 2.901}, {'end': 1273.925, 'text': 'And if I go up here and you can see, I can filter that out.', 'start': 1270.943, 'duration': 2.982}, {'end': 1280.703, 'text': "All right, so we've built a very simple interface using just vanilla JavaScript.", 'start': 1274.858, 'duration': 5.845}, {'end': 1290.071, 'text': 'Now, if you wanted to take this a step further, which we may do in another video, you could add local storage so that your items actually get saved.', 'start': 1281.684, 'duration': 8.387}, {'end': 1294.355, 'text': 'So if you submit something, it gets saved in the browser in local storage.', 'start': 1290.151, 'duration': 4.204}, {'end': 1298.979, 'text': "That way, if you reload the page or if you leave and come back, it's still there,", 'start': 1294.735, 'duration': 4.244}, {'end': 1302.542, 'text': 'and then you can delete them and have those update local storage as well.', 'start': 1298.979, 'duration': 3.563}], 'summary': 'A simple interface using vanilla javascript was built, with potential for local storage to save and delete items.', 'duration': 42.504, 'max_score': 1260.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw1260038.jpg'}], 'start': 858.617, 'title': 'Implementing item filtering in javascript', 'summary': "Discusses adding and deleting items in a javascript application and implementing filter functionality using 'filter' input, event listeners, and vanilla javascript, with the possibility of adding local storage functionality for saving and updating items.", 'chapters': [{'end': 936.704, 'start': 858.617, 'title': 'Javascript: add, delete, and filter items', 'summary': "Discusses adding and deleting items in a javascript application, and then focuses on implementing a filter functionality for the items, using the 'filter' input and event listeners to dynamically update the displayed items based on the filter text.", 'duration': 78.087, 'highlights': ["The chapter discusses implementing a filter functionality for the items, using the 'filter' input and event listeners to dynamically update the displayed items based on the filter text.", 'It covers adding and deleting items in a JavaScript application, showcasing the process of adding items and then proceeding to deleting them from the application.', 'The transcript primarily focuses on adding and deleting items in a JavaScript application, followed by the implementation of a filter functionality using event listeners and filter input.']}, {'end': 1327.165, 'start': 937.905, 'title': 'Vanilla javascript item filter', 'summary': 'Demonstrates the creation of a simple interface using vanilla javascript for filtering items based on user input, converting to lowercase, and handling display based on matching search criteria. it also mentions the possibility of adding local storage functionality for saving and updating items.', 'duration': 389.26, 'highlights': ['The chapter demonstrates the creation of a simple interface using vanilla JavaScript for filtering items based on user input. Creation of interface using vanilla JavaScript, filtering items based on user input.', 'The implementation includes converting the user input to lowercase to ensure matching with the items is case-insensitive. Conversion of user input to lowercase, case-insensitive matching with items.', 'The code handles the display of items based on matching search criteria, setting the display style to block or none accordingly. Handling display based on matching search criteria, setting display style accordingly.', 'The chapter mentions the possibility of extending the functionality by adding local storage for saving and updating items. Possibility of adding local storage for saving and updating items.']}], 'duration': 468.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/i37KVt_IcXw/pics/i37KVt_IcXw858617.jpg', 'highlights': ["The chapter discusses implementing a filter functionality for the items, using the 'filter' input and event listeners to dynamically update the displayed items based on the filter text.", 'The transcript primarily focuses on adding and deleting items in a JavaScript application, followed by the implementation of a filter functionality using event listeners and filter input.', 'The chapter demonstrates the creation of a simple interface using vanilla JavaScript for filtering items based on user input.', 'The implementation includes converting the user input to lowercase to ensure matching with the items is case-insensitive.', 'The code handles the display of items based on matching search criteria, setting the display style to block or none accordingly.', 'The chapter mentions the possibility of extending the functionality by adding local storage for saving and updating items.', 'It covers adding and deleting items in a JavaScript application, showcasing the process of adding items and then proceeding to deleting them from the application.']}], 'highlights': ['The chapter discusses building a small project using JavaScript Dom, including search form, filter form, and delete buttons.', 'The interface was enhanced by using bootstrap, with the addition of a filter in the header and a button to each list item.', 'Instructions were given for following along by accessing the provided code pen link and incorporating the html into an html file and linking a javascript file to it.', 'Covers adding items to a list, using event listeners to enable item addition, and retrieving input values and handling form submission through javascript, providing practical examples and explanations.', 'The chapter explains how to use event listeners in JavaScript to listen for submit events and call a function to prevent the default behavior, enabling the addition of items.', 'Obtaining form and ul elements by their IDs and setting them to variables for further manipulation.', 'Setting a submit event on the form for adding an item.', 'Using document.getElementById to get the form and ul elements by their IDs.', 'The function add item is called when the form submit event is fired, and it includes preventing the initial behavior by using prevent default.', 'The chapter illustrates testing form submission by using console.log to verify the submission of the form, which returns the value 1.', 'It explains the process of retrieving the input value by adding an ID to the input element and using specific selectors, such as document.getElementById, to ensure the correct input is retrieved even with the potential addition of other input elements.', "The chapter demonstrates creating a new list item using the 'createElement' method and adding a class name 'list group item' to it.", 'The chapter explains the process of creating a delete button in JavaScript, including adding classes and appending text nodes, and emphasizes the importance of exact class names.', "It details the method for adding event listeners to elements in JavaScript, using 'addEventListener' to listen for a click event and showcasing the use of 'target.classList.contains' to check for a specific class before executing an action.", "The chapter demonstrates the functionality of confirming item deletion in JavaScript, utilizing the 'confirm' function to prompt the user for confirmation before removing the selected item from the list.", 'The demonstration includes creating an ally element and checking it with console log.', "The chapter discusses implementing a filter functionality for the items, using the 'filter' input and event listeners to dynamically update the displayed items based on the filter text.", 'The transcript primarily focuses on adding and deleting items in a JavaScript application, followed by the implementation of a filter functionality using event listeners and filter input.', 'The chapter demonstrates the creation of a simple interface using vanilla JavaScript for filtering items based on user input.', 'The implementation includes converting the user input to lowercase to ensure matching with the items is case-insensitive.', 'The code handles the display of items based on matching search criteria, setting the display style to block or none accordingly.', 'The chapter mentions the possibility of extending the functionality by adding local storage for saving and updating items.', 'It covers adding and deleting items in a JavaScript application, showcasing the process of adding items and then proceeding to deleting them from the application.']}