title
Build A Filterable List With Vanilla JavaScript

description
In this mini-project and JavaScript tutorial we we will build a filterable list. We will also be using Materialize for CSS and layout. We are not using any other plugins or anything like that, it is all vanilla JavaScript CODE: Code for this project http://www.traversymedia.com/downloads/filterablelist.zip SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa BECOME A PATRON: Support me directly for even $1 per month http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia

detail
{'title': 'Build A Filterable List With Vanilla JavaScript', 'heatmap': [{'end': 140.635, 'start': 130.43, 'weight': 0.827}, {'end': 854.895, 'start': 797.98, 'weight': 0.701}, {'end': 946.753, 'start': 887.913, 'weight': 0.776}], 'summary': 'Learn how to build a filterable list using plain javascript and materialize css to enable real-time filtering of names based on user input. the tutorial is sponsored by devmountain, a 12-week boot camp focused on securing full-time jobs in the industry.', 'chapters': [{'end': 80.167, 'segs': [{'end': 35.658, 'src': 'embed', 'start': 7.523, 'weight': 0, 'content': [{'end': 10.644, 'text': 'hey guys, in this video i have a really simple mini project for you.', 'start': 7.523, 'duration': 3.121}, {'end': 14.986, 'text': "we're going to be building a filterable list using just plain javascript.", 'start': 10.644, 'duration': 4.342}, {'end': 19.368, 'text': "we're also going to use materialize css as the front-end ui.", 'start': 14.986, 'duration': 4.382}, {'end': 24.63, 'text': "so if we look over here, we have this my contacts, and it's not really a contact list, it's just a list of names,", 'start': 19.368, 'duration': 5.262}, {'end': 30.113, 'text': "but it's it's basically the premise for a contact application, And we have this input up here.", 'start': 24.63, 'duration': 5.483}, {'end': 35.658, 'text': "And if I start to type here, if I put a B in here, you'll see it'll filter out everything that doesn't have a B in it.", 'start': 30.353, 'duration': 5.305}], 'summary': 'Create a filterable list using plain javascript and materialize css, allowing dynamic filtering of names based on user input.', 'duration': 28.135, 'max_score': 7.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc7523.jpg'}, {'end': 93.102, 'src': 'embed', 'start': 61.604, 'weight': 1, 'content': [{'end': 62.084, 'text': "So that's it.", 'start': 61.604, 'duration': 0.48}, {'end': 63.265, 'text': "Let's go ahead and get started.", 'start': 62.104, 'duration': 1.161}, {'end': 66.3, 'text': 'This video is sponsored by DevMountain.', 'start': 64.039, 'duration': 2.261}, {'end': 70.582, 'text': "If you're interested in learning web development, iOS or UX design,", 'start': 66.42, 'duration': 4.162}, {'end': 76.185, 'text': 'DevMountain is a 12-week design and development boot camp intended to get you a full-time job in the industry.', 'start': 70.582, 'duration': 5.603}, {'end': 80.167, 'text': 'To learn more, visit devmountain.com or click the link in the description below.', 'start': 76.545, 'duration': 3.622}, {'end': 87.019, 'text': "All right, so I have a blank index HTML file here, and I'm using Atom for my text editor.", 'start': 80.916, 'duration': 6.103}, {'end': 89.76, 'text': "I'm using Atom Live Server to display it over here.", 'start': 87.059, 'duration': 2.701}, {'end': 93.102, 'text': 'And I have it in a folder called Filterable List.', 'start': 90.46, 'duration': 2.642}], 'summary': 'Devmountain offers 12-week boot camp for web development, ios, and ux design aiming to secure full-time jobs in the industry.', 'duration': 31.498, 'max_score': 61.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc61604.jpg'}], 'start': 7.523, 'title': 'Building filterable list', 'summary': 'Demonstrates how to build a filterable list using plain javascript and materialize css, enabling real-time filtering of names based on user input. sponsored by devmountain, a 12-week boot camp focused on securing full-time jobs in the industry.', 'chapters': [{'end': 80.167, 'start': 7.523, 'title': 'Filterable list mini project', 'summary': 'Demonstrates building a filterable list using plain javascript and materialize css, allowing for real-time filtering of names based on user input, making it a simple and reactive project. the video is sponsored by devmountain, a 12-week design and development boot camp aimed at securing full-time jobs in the industry.', 'duration': 72.644, 'highlights': ['The project involves building a filterable list using plain JavaScript and Materialize CSS, enabling real-time filtering of names based on user input, providing a simple and reactive project.', 'The video is sponsored by DevMountain, a 12-week design and development boot camp intended to help individuals secure full-time jobs in the industry.']}], 'duration': 72.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc7523.jpg', 'highlights': ['The project involves building a filterable list using plain JavaScript and Materialize CSS, enabling real-time filtering of names based on user input, providing a simple and reactive project.', 'The video is sponsored by DevMountain, a 12-week design and development boot camp intended to help individuals secure full-time jobs in the industry.']}, {'end': 410.753, 'segs': [{'end': 120.096, 'src': 'embed', 'start': 80.916, 'weight': 0, 'content': [{'end': 87.019, 'text': "All right, so I have a blank index HTML file here, and I'm using Atom for my text editor.", 'start': 80.916, 'duration': 6.103}, {'end': 89.76, 'text': "I'm using Atom Live Server to display it over here.", 'start': 87.059, 'duration': 2.701}, {'end': 93.102, 'text': 'And I have it in a folder called Filterable List.', 'start': 90.46, 'duration': 2.642}, {'end': 95.783, 'text': "And this is the only file we're going to need for this project.", 'start': 93.562, 'duration': 2.221}, {'end': 96.843, 'text': "It's going to be very simple.", 'start': 95.843, 'duration': 1}, {'end': 98.744, 'text': "So let's put an exclamation tab.", 'start': 96.983, 'duration': 1.761}, {'end': 104.287, 'text': "And if you have Emmet installed, what that'll do is it'll just generate a basic HTML structure.", 'start': 98.784, 'duration': 5.503}, {'end': 106.748, 'text': "It'll give you head tags, body tags, your viewport.", 'start': 104.307, 'duration': 2.441}, {'end': 109.81, 'text': 'I would highly recommend installing Emmet as a plugin.', 'start': 107.448, 'duration': 2.362}, {'end': 112.091, 'text': "If you don't have it, then just go ahead and type this out.", 'start': 109.95, 'duration': 2.141}, {'end': 114.393, 'text': 'At least just the head and body tags.', 'start': 112.792, 'duration': 1.601}, {'end': 120.096, 'text': "And for the title, let's go ahead and we'll just put in My Contacts.", 'start': 115.113, 'duration': 4.983}], 'summary': 'Setting up a simple html file using atom and emmet for a project called filterable list with the title as my contacts.', 'duration': 39.18, 'max_score': 80.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc80916.jpg'}, {'end': 159.823, 'src': 'heatmap', 'start': 130.43, 'weight': 0.827, 'content': [{'end': 131.651, 'text': 'Okay, which is right here.', 'start': 130.43, 'duration': 1.221}, {'end': 134.132, 'text': "We'll get it from cdnjs.com.", 'start': 131.711, 'duration': 2.421}, {'end': 138.273, 'text': "We're not using any of the JavaScript widgets, so we just need the CSS.", 'start': 135.092, 'duration': 3.181}, {'end': 140.635, 'text': "So we're going to put it inside of a link tag here.", 'start': 138.474, 'duration': 2.161}, {'end': 142.055, 'text': "Let's go ahead and paste that in.", 'start': 140.655, 'duration': 1.4}, {'end': 144.596, 'text': 'All right, and we can close that up.', 'start': 142.075, 'duration': 2.521}, {'end': 152.98, 'text': "And then inside the body let's put a container div, because that's going to kind of you know auto out the margin, push it to the middle,", 'start': 145.157, 'duration': 7.823}, {'end': 154.22, 'text': 'just like any other framework.', 'start': 152.98, 'duration': 1.24}, {'end': 159.823, 'text': "And we're going to put an H1 in here, and let's give it a class of align-center.", 'start': 154.961, 'duration': 4.862}], 'summary': 'Adding css from cdnjs.com for a container div and an h1 with class align-center.', 'duration': 29.393, 'max_score': 130.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc130430.jpg'}, {'end': 168.655, 'src': 'embed', 'start': 145.157, 'weight': 3, 'content': [{'end': 152.98, 'text': "And then inside the body let's put a container div, because that's going to kind of you know auto out the margin, push it to the middle,", 'start': 145.157, 'duration': 7.823}, {'end': 154.22, 'text': 'just like any other framework.', 'start': 152.98, 'duration': 1.24}, {'end': 159.823, 'text': "And we're going to put an H1 in here, and let's give it a class of align-center.", 'start': 154.961, 'duration': 4.862}, {'end': 163.592, 'text': 'which is a materialized class to push it to the center.', 'start': 160.99, 'duration': 2.602}, {'end': 165.413, 'text': "And we're just going to say my contacts.", 'start': 163.612, 'duration': 1.801}, {'end': 168.655, 'text': 'Okay And that should auto reload.', 'start': 166.634, 'duration': 2.021}], 'summary': "Using a container div and h1 with class align-center to center 'my contacts'.", 'duration': 23.498, 'max_score': 145.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc145157.jpg'}, {'end': 214.446, 'src': 'embed', 'start': 191.471, 'weight': 4, 'content': [{'end': 199.237, 'text': 'A collection in Materialize is pretty much like a list group in Bootstrap, which is just a fancy way of styling a UL.', 'start': 191.471, 'duration': 7.766}, {'end': 209.746, 'text': "So let's go ahead and put a UL, and we're going to give this a class of collection, and we're also going to give it a class of width-header.", 'start': 200.078, 'duration': 9.668}, {'end': 212.105, 'text': 'just like that.', 'start': 211.465, 'duration': 0.64}, {'end': 214.446, 'text': "And I'm also going to give it an ID.", 'start': 212.725, 'duration': 1.721}], 'summary': 'Using materialize to style a ul with collection and width-header classes.', 'duration': 22.975, 'max_score': 191.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc191471.jpg'}, {'end': 417.408, 'src': 'embed', 'start': 393.11, 'weight': 5, 'content': [{'end': 399.011, 'text': "i mean you could use jquery and you could have less code, but you're depending on a library and that's just it.", 'start': 393.11, 'duration': 5.901}, {'end': 402.972, 'text': "it's not really cool these days to use jquery if you don't have to.", 'start': 399.011, 'duration': 3.961}, {'end': 407.912, 'text': 'okay, and sometimes i mean if i use jquery, a lot of people give me, and rightfully so.', 'start': 402.972, 'duration': 4.94}, {'end': 410.753, 'text': "i mean it's good to just do it, you know, with plain javascript.", 'start': 407.912, 'duration': 2.841}, {'end': 417.408, 'text': "So let's go ahead and let's create a variable to grab this input.", 'start': 411.986, 'duration': 5.422}], 'summary': "Using jquery may lead to less code, but it's cooler to use plain javascript these days.", 'duration': 24.298, 'max_score': 393.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc393110.jpg'}], 'start': 80.916, 'title': 'Creating filterable list in html and materialize css tutorial', 'summary': 'Discusses setting up a basic html file with atom text editor, live server, and emmet plugin. it also covers the implementation of materialize css to create a centered header, a styled list with names, and a filterable input without using jquery.', 'chapters': [{'end': 120.096, 'start': 80.916, 'title': 'Creating filterable list in html', 'summary': "Discusses setting up a basic html file using atom text editor, including using atom live server and emmet plugin for generating html structure, with the title 'my contacts'.", 'duration': 39.18, 'highlights': ['Setting up a basic HTML file using Atom text editor and Atom Live Server.', 'Using Emmet plugin to generate a basic HTML structure, including head and body tags.', 'Recommendation to install Emmet as a plugin for text editor.']}, {'end': 410.753, 'start': 121.477, 'title': 'Materialize css tutorial', 'summary': 'Covers the implementation of materialize css, creating a centered header, a styled list with names, and a filterable input without using jquery.', 'duration': 289.276, 'highlights': ['Implementing Materialize CSS for styling and layout, using a container div for margin and centering. Materialize CSS usage, centering content, use of container div.', 'Creating a styled list with names using Materialize collections, and adding a filterable input without using jQuery. Styling a list with names, implementing filterable input without jQuery.', 'Explanation on not using jQuery and opting for plain JavaScript for the tutorial. Justification for not using jQuery, preference for plain JavaScript.']}], 'duration': 329.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc80916.jpg', 'highlights': ['Setting up a basic HTML file using Atom text editor and Atom Live Server.', 'Using Emmet plugin to generate a basic HTML structure, including head and body tags.', 'Recommendation to install Emmet as a plugin for text editor.', 'Implementing Materialize CSS for styling and layout, using a container div for margin and centering.', 'Creating a styled list with names using Materialize collections, and adding a filterable input without using jQuery.', 'Explanation on not using jQuery and opting for plain JavaScript for the tutorial.']}, {'end': 1065.149, 'segs': [{'end': 444.845, 'src': 'embed', 'start': 411.986, 'weight': 2, 'content': [{'end': 417.408, 'text': "So let's go ahead and let's create a variable to grab this input.", 'start': 411.986, 'duration': 5.422}, {'end': 428.852, 'text': "So we'll say let, we'll call it filter input, and we'll set it to document.getElementById.", 'start': 418.088, 'duration': 10.764}, {'end': 431.853, 'text': "And I'm sure most of you guys know what that does.", 'start': 429.652, 'duration': 2.201}, {'end': 435.954, 'text': "It'll grab any element, any tag by its ID.", 'start': 431.913, 'duration': 4.041}, {'end': 441.436, 'text': 'And remember we gave that input, where is it? We gave the input an ID of filter input.', 'start': 436.394, 'duration': 5.042}, {'end': 444.845, 'text': "Just like we're naming the variable.", 'start': 443.144, 'duration': 1.701}], 'summary': "Creating a variable 'filter input' to grab input by id.", 'duration': 32.859, 'max_score': 411.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc411986.jpg'}, {'end': 510.341, 'src': 'embed', 'start': 478.07, 'weight': 1, 'content': [{'end': 480.713, 'text': 'On key up and then call a function.', 'start': 478.07, 'duration': 2.643}, {'end': 484.657, 'text': 'Every time I do that, you guys give me shit.', 'start': 481.414, 'duration': 3.243}, {'end': 487.5, 'text': "It's kind of the old way of doing things.", 'start': 484.938, 'duration': 2.562}, {'end': 489.282, 'text': "It's good to have an event listener.", 'start': 487.7, 'duration': 1.582}, {'end': 490.323, 'text': "Let's go ahead and do that.", 'start': 489.462, 'duration': 0.861}, {'end': 491.865, 'text': "We're going to take the filter input.", 'start': 490.363, 'duration': 1.502}, {'end': 499.249, 'text': "And we're going to say add event listener.", 'start': 493.863, 'duration': 5.386}, {'end': 503.173, 'text': 'And then the type of event is going to be a key up.', 'start': 499.269, 'duration': 3.904}, {'end': 510.341, 'text': "And then when that happens, we're going to call a function that we're going to call filter names.", 'start': 505.215, 'duration': 5.126}], 'summary': 'Using event listener for filter input on key up.', 'duration': 32.271, 'max_score': 478.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc478070.jpg'}, {'end': 610.285, 'src': 'embed', 'start': 587.564, 'weight': 0, 'content': [{'end': 595.407, 'text': "so we want to do dot value and then I'm also going to just convert it to uppercase to make sure that the you know, when we type in a name,", 'start': 587.564, 'duration': 7.843}, {'end': 601.438, 'text': 'the first letter is uppercase and we can do that with just saying to uppercase like that.', 'start': 595.407, 'duration': 6.031}, {'end': 602.259, 'text': 'All right.', 'start': 601.458, 'duration': 0.801}, {'end': 605.001, 'text': "Then let's console log it and see what we get.", 'start': 602.359, 'duration': 2.642}, {'end': 610.285, 'text': 'So filter filter value.', 'start': 606.542, 'duration': 3.743}], 'summary': 'Converting input to uppercase for consistent formatting.', 'duration': 22.721, 'max_score': 587.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc587564.jpg'}, {'end': 666.721, 'src': 'embed', 'start': 632.577, 'weight': 5, 'content': [{'end': 635.179, 'text': 'And now what we want to do is we want to get the UL.', 'start': 632.577, 'duration': 2.602}, {'end': 638.101, 'text': 'Okay, so the UL, we gave an ID of names.', 'start': 635.359, 'duration': 2.742}, {'end': 640.102, 'text': "So that's what we want to grab onto.", 'start': 638.561, 'duration': 1.541}, {'end': 642.703, 'text': 'We want to create a variable representing that.', 'start': 640.122, 'duration': 2.581}, {'end': 646.425, 'text': "Let's say get names UL.", 'start': 643.764, 'duration': 2.661}, {'end': 653.249, 'text': "We'll say let, and let's just call this, I guess we'll just call it names.", 'start': 647.026, 'duration': 6.223}, {'end': 657.532, 'text': "And then we'll set it to document.getElement.", 'start': 654.45, 'duration': 3.082}, {'end': 664.34, 'text': 'Element by ID has an ID of names.', 'start': 659.659, 'duration': 4.681}, {'end': 666.721, 'text': "All right, so that'll get the UL.", 'start': 665.32, 'duration': 1.401}], 'summary': "Create a variable 'names' to represent the ul with the id 'names'.", 'duration': 34.144, 'max_score': 632.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc632577.jpg'}, {'end': 754.817, 'src': 'embed', 'start': 723.698, 'weight': 4, 'content': [{'end': 728.805, 'text': 'Okay, now querySelectAll or querySelectorAll.', 'start': 723.698, 'duration': 5.107}, {'end': 741.147, 'text': 'a really handy function and it kind of in a way can kind of replace jQuery.', 'start': 735.863, 'duration': 5.284}, {'end': 744.73, 'text': 'we can select anything based on its class name or whatever.', 'start': 741.147, 'duration': 3.583}, {'end': 747.471, 'text': 'you know before that that function came along.', 'start': 744.73, 'duration': 2.741}, {'end': 751.955, 'text': 'we had to use get element by D, meaning we had to just get things by their ID.', 'start': 747.471, 'duration': 4.484}, {'end': 754.817, 'text': 'but now we can grab them by classes or anything else.', 'start': 751.955, 'duration': 2.862}], 'summary': 'Queryselectorall is a handy function replacing jquery, allowing selection by class names and other attributes.', 'duration': 31.119, 'max_score': 723.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc723698.jpg'}, {'end': 854.895, 'src': 'heatmap', 'start': 797.98, 'weight': 0.701, 'content': [{'end': 801.923, 'text': 'okay. and then inside this loop we want to get the um.', 'start': 797.98, 'duration': 3.943}, {'end': 806.352, 'text': 'We want to get the names, and remember, those are wrapped in A tags.', 'start': 802.81, 'duration': 3.542}, {'end': 811.216, 'text': 'so we can use a function called getElementsByTagName and then throw an A in there.', 'start': 806.352, 'duration': 4.864}, {'end': 812.537, 'text': 'So we want to get all the links.', 'start': 811.276, 'duration': 1.261}, {'end': 814.238, 'text': "So let's do that.", 'start': 813.377, 'duration': 0.861}, {'end': 818.241, 'text': "We'll create a variable called A.", 'start': 814.278, 'duration': 3.963}, {'end': 828.668, 'text': "Now, since we're in a loop, we want the current iteration of the LI, so we're going to use an I right there, and then we'll say .getElementsByTagName.", 'start': 818.241, 'duration': 10.427}, {'end': 831.009, 'text': "And then we'll throw in here A.", 'start': 829.768, 'duration': 1.241}, {'end': 835.852, 'text': "So we're going to get all the links.", 'start': 832.751, 'duration': 3.101}, {'end': 838.252, 'text': 'Actually, you know what? We only want to get the current link.', 'start': 835.952, 'duration': 2.3}, {'end': 840.733, 'text': 'So we want to put zero right there.', 'start': 838.992, 'duration': 1.741}, {'end': 846.034, 'text': 'And then we want to check to see if it matches.', 'start': 843.093, 'duration': 2.941}, {'end': 854.895, 'text': "We want to check to see if what we type in here has an index inside of the current name that's in the loop.", 'start': 846.054, 'duration': 8.841}], 'summary': 'Code iterates through a loop to extract and match links', 'duration': 56.915, 'max_score': 797.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc797980.jpg'}, {'end': 946.753, 'src': 'heatmap', 'start': 887.913, 'weight': 0.776, 'content': [{'end': 896.075, 'text': "So enter HTML and remember how we switched it to uppercase when we, you know, when we type it in here, it's being output as uppercase.", 'start': 887.913, 'duration': 8.162}, {'end': 901.197, 'text': "So we're going to say dot to uppercase just so we're consistent on that.", 'start': 896.115, 'duration': 5.082}, {'end': 908.699, 'text': 'And then we can use dot index of index of and then we can put in here the filter value.', 'start': 901.757, 'duration': 6.942}, {'end': 911.679, 'text': 'Okay, whatever is being passed in the form.', 'start': 909.798, 'duration': 1.881}, {'end': 913.3, 'text': 'And we just want to match that.', 'start': 911.999, 'duration': 1.301}, {'end': 915.741, 'text': "We want to say if it's greater than negative one.", 'start': 913.36, 'duration': 2.381}, {'end': 917.102, 'text': "That means that there's a match.", 'start': 915.841, 'duration': 1.261}, {'end': 920.044, 'text': 'That one of the letters matches one of the letters in the names.', 'start': 917.182, 'duration': 2.862}, {'end': 924.887, 'text': "Now what do we want to do if there's a match? We basically don't want to do anything.", 'start': 920.804, 'duration': 4.083}, {'end': 929.169, 'text': 'We want to set the CSS style property to nothing.', 'start': 925.767, 'duration': 3.402}, {'end': 932.091, 'text': "If there isn't a match, we want it to disappear.", 'start': 929.809, 'duration': 2.282}, {'end': 934.912, 'text': "So we're going to set the style property to none.", 'start': 932.471, 'duration': 2.441}, {'end': 937.213, 'text': 'And the way that we can do that is we can say li..', 'start': 935.432, 'duration': 1.781}, {'end': 946.753, 'text': "i, meaning the current iteration, the current one we're on, and we're going to set style.display to nothing.", 'start': 939.322, 'duration': 7.431}], 'summary': 'Using javascript to manipulate html elements and apply conditional styling based on input values.', 'duration': 58.84, 'max_score': 887.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc887913.jpg'}], 'start': 411.986, 'title': 'Javascript event handling and filtering', 'summary': 'Covers event handling for input and key up events in javascript, as well as filtering and displaying items based on user input. it includes examples of using variables, event listeners, and dom manipulation with document.getelementbyid, queryselectorall, and getelementsbytagname.', 'chapters': [{'end': 632.477, 'start': 411.986, 'title': 'Javascript event handling', 'summary': 'Discusses creating a variable to grab input, adding event listeners for key up events, and retrieving and converting input values to uppercase for consistency, with a demonstration of the process in the chrome console.', 'duration': 220.491, 'highlights': ['The chapter discusses creating a variable to grab input and setting it to document.getElementById, allowing the retrieval of any element by its ID, such as the input element with the ID of filter input.', "Adding an event listener for the key up event is emphasized as a more modern approach than directly using 'on key up', and the function filter names is called when the key up event occurs.", "The process of retrieving and converting input values to uppercase for consistency is demonstrated by creating a variable named filter value and setting it to document.getElementById('filter input').value, followed by converting it to uppercase using toUpperCase()."]}, {'end': 1065.149, 'start': 632.577, 'title': 'Javascript: filtering and displaying items', 'summary': 'Explains how to use javascript to filter and display items based on user input, using document.getelementbyid, queryselectorall, and getelementsbytagname to manipulate the dom and create a simple filtering functionality.', 'duration': 432.572, 'highlights': ["Explaining the process of getting the UL and creating a variable to represent it The speaker explains the process of obtaining the UL element with an ID of 'names' and creating a variable 'names' using document.getElementByID, setting it to document.getElementByID('names').", "Demonstrating the use of querySelectorAll and iterating through the collection items The speaker demonstrates the use of querySelectorAll to obtain all the collection items with the class 'collection item' and iterates through the collection items using a for loop.", 'Implementing filtering based on user input and adjusting the display style The speaker explains the implementation of filtering based on user input by checking for matches and adjusting the display style using the style.display property, demonstrating the functionality by filtering names based on input.']}], 'duration': 653.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/G1eW3Oi6uoc/pics/G1eW3Oi6uoc411986.jpg', 'highlights': ['The process of retrieving and converting input values to uppercase for consistency is demonstrated.', 'Adding an event listener for the key up event is emphasized as a more modern approach.', 'Implementing filtering based on user input and adjusting the display style is explained.', 'The chapter discusses creating a variable to grab input and setting it to document.getElementById.', 'Demonstrating the use of querySelectorAll and iterating through the collection items.', 'Explaining the process of getting the UL and creating a variable to represent it.']}], 'highlights': ['The project involves building a filterable list using plain JavaScript and Materialize CSS, enabling real-time filtering of names based on user input, providing a simple and reactive project.', 'The video is sponsored by DevMountain, a 12-week design and development boot camp intended to help individuals secure full-time jobs in the industry.', 'Creating a styled list with names using Materialize collections, and adding a filterable input without using jQuery.', 'Adding an event listener for the key up event is emphasized as a more modern approach.', 'Implementing filtering based on user input and adjusting the display style is explained.']}