Document Object Model Series 2023 - Part 6: DOM Final Project. Advanced & Fun Examples

1. Class Introduction - Real Project: Hey, My dear students do that very final class in this entire series about the DOM, the Document Object Model, My name's guide. I'm going to be on stricter. And up until this point, we've been doing yes, a lot of examples, but mostly theory. And who loves theory, right? And that's why this class is sit around doing an entire project together. It is going to be super fun. It's going to apply a lot of your knowledge about the DOM that's going to test you about things like event bubbling and capturing. It's going to test your ability to add items to the DOM. It's going to test your ability to listen types of events, keyup events, change of veins, and even submit events on the format's going to be fascinating and well done for following along. If you have, if you are a new comer, If this is your very first class of Simeon, welcome, welcome. Give it a go. I'm going to be coding up the HTML, the CSS, the JavaScript with you. So it really doesn't matter what level of experience you have. I'm yeah, I'm your instructor, this one, yes. So without further ado, let's get into this very, very cool projects. And Conway, I really can't. I'm having so much fun. But enough said, let me go to my computer right now and late start coding together. 2. What are we going to build?: Hey, you all come to this final project that's going to be epic and I'm super, super excited. And I know it's going to look like a very simple example. But a, it really reinforces all the things we've learned so far in this course and be the tricks and skills you learned in this section, you'll be able to apply to your very own websites. It really will help you going forward. So I hope you have a lot of fun. But along the way, I really hope to teach you very useful and practical methods. So what is the final project? What is it all about? Well, as you can see, we've called it our shopaholics site, and it just contains a shopping list. I know it seems very simple, but there's a lot going on. So what are the things we're gonna do in this project? We'll firstly, when the user hovers the mouse over each item in the list, you can see there we highlighting that border, that lift border to be specific. Just so the user knows he's hovering over it. If he clicks on an item, nothing happens. But as you see to the right, this, this Delete button, again, if the user hovers over it, We're sick that styling property. And of course, if the user deletes, say this pizza, we want that removed from the dom. What about the Sugar and Spice? Is the user deletes that. We want that removed entirely. So that's the first thing I want you to kind of think about how you can go about doing it. It's not that difficult. But again, we're going to have to listen for some events, aren't we? Specifically the click event? That's one thing I want you to do. The other thing, which case you've already guessed is I want the user to be able to add items to the list. So if the user types something like beer for example, any clicks add, it gets added to the list dynamically. And here because we're using a form, we actually listen for the submit event. Of course, if the user wants to go and delete beer from the list, he can do so. So it all makes intuitive sense. What about this hide list checkbox? Will here we're going to be listening for another type of events, the changing gains. And if the user checks that, then we just hide everything. I know you may be thinking, why would you want to hide you anti shoppingList? And Fair enough, That is a very valid question. Just remember we learning skills. Yeah. I'm trying to equip you to use this in other situations that are applicable to your web app. So if the user unchecks that, obviously everything is back to normal, what is the search items takes box all about? Well, it allows the user to search for items in the shopping list. And we're not going to be listening for a click event. Yeah, because there is no tick, we're going to be listening for a key up event. Let's look at an example. Let's say the user has a few things on the ShoppingList, like, I don't know, sugar, cereal, day you got. Now, if the user types, let's say sugar, we only want to display those items that match that text, but have a look closely. Do you notice that all the uses takes in this case as lowercase, a gated stole matched the sugar below, even though the sugar below has a capital case. And likewise, if the user types all caps, it's still Mencius because we don't want this to be case sensitive. So bear that in mind. There we go. You can see that this is going to be a really fun project. I'm super, super excited. I hope I've given you enough of a kind of a high-level overview to understand what it is we need to bold, bear in mind. I'm going to be building everything from scratch. I'm going to be building an HTML from scratch, the CSS. We're going to be cutting JavaScript together. That's going to be epic are super, super answer. I'll see you in the next lecture. 3. Shopping list: So you've seen what does poaching is going to look like onto your excited to get involved. And we can keep expanding on this project. We can keep improving on it. But, you know, what's the skills you've learned up until now are really, really amazing. And I want to prove it to you in this entire final section. So hope you enjoy it, but you might be scratching and hidden. Now going, what's involved in creating this entire structure? Well, let me show you that right now. It is good. That is good. And this is going to be even better. Because now we're onto the final project. That's going to be really fun. It's going to be very interactive and it's going to be very practical for your career going forward it, because right now we're going to build a shopping site. We're going to allow a user to add items to a shopping list. Delete those items from a shopping list, hide all those items from a shopping list. We even going to get into something quite at fonts and that is search items within them, that shopping list. So I am super, super excited. A hug beyond two. Let me just briefly cover what we're going to be doing in this final project. Adios. Up until now, we've only seen snippets of what we can and can't do with the DOM. In part one of my DOM series, we spoke a lot about traversing the DOM, accessing items in the DOM, creating elements in the DOM, removing elements from the DOM, cloning items in this advanced DOM series in this particular course you doing right now, we've gone a step further, haven't we? We've really gone into the veins, how they work. We've gone into capturing versus bubbling. We've gone into hierarchies. We've come an incredibly long way. It's now time to put all our skills to the test by Bolding and entire web-page to get. Okay, that's great. What do we want it to do? Well, firstly, let's call it our shopaholics sides, because we are shopaholics and we just want to go to the supermarket and buy a lot of things. And because it's a shopaholics side, we need the ability to edit grocery item, find a grocery item, then delete grocery items from our list. Cli best to general will let me stretch that up. What what exactly are we going to cover? Well, firstly, we're going to have to navigate the DOM. And you're going to see that we're going to have to change the DOM when you use a kicks delete. We want an item removed. For example, when they add an item we wanted to edit Todd Don, for example. We're going to have to manipulate CSS. We're going to have to interact with forms and events. We're going to have to use JavaScript to add new elements to the DOM. Like I mentioned, we're going to have to remove elements from the DOM. And I really want us to also get into a mode fonts topic, and that is how we search FADH sums in the DOM. So I'm showing you, you can see we're doing a lot in this final section. Let's go set up, let's drink some coffee and let's get cracking. I'll see you now. 4. Building our HTML: Come on. You've got to be this isn't the final project. I'm so excited. So yeah, we go, I've got a blanket. Visual Studio code, takes edits on the left, the IDE, and on the right we've got our browser just so we can see doing. And before I jump into this, henry go into a lot of detail, I just want to say we can approach it in a piecemeal manner. We're going to go through it step by step, this lecture. Now I just want us to look at the HTML and the next H0, we can style it to make it look really nice if you want to skip the Bolding of the HTML and SESAC. Oh, welcome to do so. And just jump into the hearts of manipulating the DOM, but highly encourage you to follow along and without further ado, let's get started. Let's see how we are. We've got our final project, blank file. All I wanna do is I want to start with a very simple HTML template. We can have a head section for now, let's just have a title for all page. And the title can be shoppingList. And under the head, of course, we can have our buddy. This is really the meat of our HTML is going to sit. Now before we saw, it's, it's always a good idea to picture what you want in your mind because we need to structure this in a very logical way. How should we structure it will let me call upon one's at a very basic level. We can add to this later, but this is what we want to bold initially riots. And the sauteing point that I always love to do is I want to read the entire thing within its own div tag. And we can give that an ID of Rapa. That's a starting point. We want our entire kind of shopping list to be within a parent div. But always a good idea to do this. It's always a good idea to break things down into cooler to parent elements sets. The first thing I want to do, if we now look with a net, I want to do three high-level sinks. If you looking at this, you can see we can kinda break it into three sections. I want to have a header or they want to have this total, a 100 corner rapid in a form. And then lastly, I want to have that whole list correct in its own div. So this is how I want to structure it, overstate how many ways to skin a cat. But you can see here, we're going to have an overall div. And within that we can have three very high level parent elements, a header, a form, and a diff. Does it make sense? All right, so then let's do that. Let's do it. Yeah. And that div we save, we can give an idea of RAM. So there we go. That is in tide of within the div. Remember we won three things. We want to hit. Uh, what else did we want? We wanted a form. And what else did we want? We wanted another div. There we go. And that's just very high level. And yes, we're going to be giving all of these IDs and things later. For now, this is what we have, Let's thought was hidden. And remember what I'll hidden looks like. It's that green section at the very top. And again, I want to represent it in its own entire parent element. This is rapid in a dose, will give it an ID of page top. Then you can see I'll haha has a few things, doesn't it? Let's go to hating of shopaholics, thing, go to description, my shopping list. And then it's kind of got the search section which I'll rent and a full or obsolete start structuring this. We're going to have our rapid div for the whole heating and neck. We can just have an ID of page top. And within this header we've got the heading. And it's just have a hating of Hollich. And just so we can style it later, Let's give it a class of under no title. How's that? And how we're looking so far with literary. Just got a heading and I'll browse. Pretty straightforward and we put it a long way to go. So that's not hitting the thing underneath that we've got a description, remember? And I'm just going to read it in a paragraph tag. And I'm just going to say my shopping list. Hey, we go. And the last thing I wanted to now Haider, is that whole search functionality, which is quite an advanced as kind of like a bonus additionally putting onto this. And we'll get to that at the end. So we can have a search functionality. There we go. And like I mentioned, I want to wrap it in a folder and list just give the full name and ID of search item. Because that's what this form is going to be doing. Right now. We can just delete the action and is a former, I wanted this foam to have an input box of time tastes and we can have a place holder of search items. And just remember what the search item or functionalities going to do. It's going to allow the user to search keywords to see whether those keywords or in the shopping list. For example, if he contravene the way that you've edited cook to holistic atop Coke and all the items that have coconuts will show up. So it's gonna be quite cool, quite advanced. So there we go. That's our input element. And other thing I want to add here. Just the ability for the user to hide and show older listed below it. And I could put it in other places. You know what, Jimmy cooled a search and hide and show hide functionality. Let me just make this replied to him. Yeah, that's better. And like I said, we could put this somewhere else. I just want to put it yeah, because that's how I see it in my head. And so we've got our input. The next thing I want is the one I included a div tag. And we can give that an ID of cheek. And it can be a label for hide. And if the user clicks it, we want to hide. The list stays all naval. And obviously now we need the actual checkbox, don't we? So the input data type can be shaped box. And we can also give it an ID of hot. Yeah. Well done. We've just completed our header. This is going to be the entire tall section. Don't worry about the CSAs. We're going to get into. Then in the next lecture, I just want us to stretch our HTML. And then you'll see how easy and quick it is just to quickly add styles to it to make it beautiful. So there we go, that's our header. The next thing we wanna do is what would its cool up our image again? The next thing we wanna do is we want to end this form in the middle. Right? That's what we wanna do nom. So let's do that equity. How do we do that? Well, let's get rid of this action here and let's give this an ID of addItem because that's what this form is all about. It's about the user adding items to the shopping list. And we need an input box, don't we use is going to be typing in yen. And I wanted to place holder, not inside day placeholder. What do you want to buy? And then after the user has typed in what they want to buy, we have a button called a sudden it just edit button and we can have edX. Then we go to taking shaping. What's going on here. And I just 72 to the Word of closing tag. So there we go. I think that's making saints. And now we're onto the final section. Again. That's cool up that image. And you can see the final item Nick, we need is this items to buy section. And we're going to wrap that in a dose as well. You can see it's got a heading and it's got all these list items. And then it's also got those delete buttons. And what we are going to do is we can read, remember what they've been babbling and vein delegation. We went to read all those list items within a parent element. So let's wrap it in a parent UL element, and then we'll go from there. So here we go. We've got all div element. We want to record everything and let's give it an ID of grocery lists because that's what this div is all about. And then we've also got to hating done tweaking items to buy. But it's a bit smaller than 81, he does. So let's make it an H2 heating. And we can say items to buy. Sex actually have a capital T and B. And then let's give this also a class of skeletal. And now we're getting onto all those allies, those, and lists of items. And remember what I said, we want to wrap it in an overall Rapa and we're gonna do that with a UL tag. Pretty straightforward. And within that, we've got each one of our lists. So of course we've got an ally tag and each item has two things rot. And it's got the actual item itself. And then it's got that kind of delete button to the right. And again, there are many ways to skin a cat, so I'm just going to read both of these in a span element. The ones going to have a class of item because it's the item we dealing with. This just give that a word of MLK that you've got. You can see it in the browser. And then other span is going to have a class of Delete. And I'm going to have the word delete. There we go. And there we have it. So we've got our very first item and all we have to do now is we can just copy and paste these LI elements. The next item can be Sugar and Spice. How does that look? We can copy it again. And here we can have something to drink Coke. And again, that's called BIA alert egg. Let's do one more below here and we can say peta and say peripherally, margarita. If I spelled that correctly, I hope so. So that is our HTML. If you look at our browser here, it looks terrible. In fact, I'm getting nauseous even looking at it. And it's going to be what we do in the next lecture. Let's beautify this. That's making it look really funky. And going back to our code, just remember right now, all we've done is we've done our HTML and it's a very, very simple page. We've read everything within this div of an ID with Rapa. Everything is tracked in d. And then we just split it into three sections. Rotten. I can even structure this COVID. I can say section one. Say Section 2 was this kind of form where we add items. And then the third and final section is section 3. And that is displaying the list to the user and allowing the user to delete items from the list. So as a kind of making saints, it's very simple. Go through it, pause the video, and in the next lecture, Let's start styling this and you'll see how fun signing is because you go from something like this. And I'll browse to something really amazing. See you. 5. Building the CSS header: Welcome back. And you can see we are just picking up on exactly where we left off. You can see how hideous this is looking. I'm just things viewing in the back corner just because it looks so ugly. But don't stress this will, this lecture is all about, we are going to be doing CSAC together. And you can see here I've just created a blanket CSS file. That is all I've done. So all we have to do in our head section is include a reference to our CSS file, which are called styles.css. So let's get into it. Let's go to our CSS file, and let's start making this more beautiful. So the first thing I wanna do is let's start at the very top and work with our entire body. All I want to do is change the font family to, let's do something nice or Cambria. How does that feel? It's all these little things, by the way, that makes your site look a lot more support of the just makes it look like it's been lover and has been created with k colors. Well, I just wanted to hold black. Black. Black can be quite intense. So let's just have it slightly off black. There we go. And the liters can quite close together. So I just want, I'll lead to spacing property to be equal at one pixel. Area. Looks a bit better. The next thing I wanna do is you can see the H1 tag and the H2 tag are quite bold. I just want to remove that. So let's just dial a twin and H2. And let's just have a comment here so we remember why we did this removed. And what I wanna do is font weights. Let's just say it's normal, much better. And the one, and we start styling our header. Remember that big green header? Okay, so let's start working with Allah hitter. And remember what ID we gave it. We got our HTML. We can see here we've got our header. Then we wrecked everything within a div with an ID of page top. Can you see it? So let's go to our styles here and let's access our element with an ID of page top. So we know now we dealing with that entire rep in the header section. Firstly, I want to change our background color to 10, 7, and 11. Then we got, and the padding looks shocking. So let's just deal with padding. And the many ways you can do padding and give it four values and do the top, lift right bottom. But if we just give it two values, for example, team pixels and 0, the first team pixels as dealing with the top and bottom padding and a 0 pixels dealing with the left and right. That makes sense. So we should see gaps now at the top and the bottom. Save that. That's exactly what's happened. So we're getting there. The next item, what we can do is why don't we actually just start affecting the entire wrap up, the entire div to forget our index. And just want to take a step back now out and start styling this wrapper because I want the styles to apply to all items within this wrapper. So let's actually do it above this page top, because it makes more sense to me to deal from the outer, most elements are going more and more detailed, lower down the CSS page. So here we want to access our ID of rata rights. And Firstly, I don't want the stretched across the entire screen. Just give it a width or 90 percent. There we go. So you can see even if we make this a bit bigger, you can see it's not quite as stretching across the entire screen. There we go. Just easier to see what our fixer. And I want to give this a max width. And let's say the max width is a 100 pixels. How does that look? Doesn't really do much, I guess because our screens quite large as is. And then let's start giving us a bit of a margin. Again, the top and bottom margin, we want to be 20 pixels. And then we wanting to seem to the entire div wrapper directly on. This is actually what I wanted to do right from the beginning. So we can just do that as altar. And there we go. It seemed that on our page has time to kind of come alive. The next thing I wanna do is I want to now add her really cool box-shadow rock. We want this to look really awesome. Let's do a box shadow property. And I want to give it three values. Firstly, I want to give it the x offset value, which is just going to push it to the right of this box. And I want that to be six pixels. The next input to the box shadow property is the Y offsets. So I wanted to actually be the shadow to be to the right of the box. And at the bottom. So again, I want to give it a positive value of two pixels. And then I just wanted to have a blue radius. I wanted to look kind of blurry. And I want to give that a five pixel size. And then lastly, we want to give it a color, right? And this just give it a five. How's that column that looks good rides and you can see it's starting to fall, starting to have shaped. The other thing I wanna do is I want to have padding of 20 pixels. How does that look? It looks better. And then the final thing I wanna do is I want to have a border. Want to have a border that's one pixel solid? And let's just say two on 12121. And we can make it a little bit transparent, tells it. I think that's starting to look good. So all these little details that make a site look really wow. Okay, You can see how we've started to style our header, but it's not quite diagnosis. We want to make it look better. So let's access page top and let's be more specific knowledge. Hello, I am one. And let's also do exactly the same thing here, page top, but let's exit our paragraph. Item because x the word my shopping list. And let's take the line. Nice things to the Santa. Looking good, endless, just mess around with margin. Let's say half AIM. Aim. Does that look? Now I think that's looking nice. And of course the next thing and I want to style is that input box. So this x is that. And I'm going to stop doing quicker through this isn't a course on CSS. And I just hope you learn one or two things as you go along with me. To stop doing this, we can obviously adjusted. What does that look like? Maybe it's a bit much. Let's go max width of 250. How does that look? That looks better. Margin. Top and bottom. I want to apply some margin and then I want to say, I want the display to be a block. Otherwise it's threatening the hide listed beneath it next to us. That's why when I use margin of altered didn't seem to like this. That's why I wanted to do display block. And let's add some padding. Oh, that is just looking beautiful, isn't it? And of course, let's add a border of one pixel solid. Rgb, 2.7212212210. What does enterprise? Yep, that looks nice. Font size, we can say is one M, Just make it a little bit bigger. And what about the takes color? Let's see how our forty nine, forty nine, forty nine. Man, I think that's starting to look really, really sharp. And of course, the last thing I wanna do in this Haidt is to style that checkbox. So what did we give it again? Let's go to our HTML. There's a checkbox. As I hit a, again, the checkbox would gave an ID of shake. Remember we gave it an ID of change. So if we go here, we can go ID of max width. We can give it to a 180 pixels. Now let's seem true it margin, top and bottom team pixels and lift and rock. We want to center it. And then we wanna take the line to the center. There we go. So that hide list is starting to take shape. But it's still not a 100 percent, right. Why not? Yeah. You know what it is? I want to actually style that actual checkbox, that input checkbox with the idea of high that style equity. So let's go here. What we wanna do is we want to access our fake ID, but now we want to style this. Actually takes Bob's with idea of hard to do. And I think this will work with 18 percent margin of 0. And it's true that we always display inline block. I think that should work because the imagery place it next to that hide lists. Save an ego. Cool, there we go. We are getting slowly, slowly catch a monkey as they say. So here we go. We've got our nice cool than a header styled up. I'm one to just pause the video here because it is getting a bit long and I know sometimes it's nice to take a break. We've come a long way and in the next lecture we'll just finish up. We'll finish up with the bottom two sections, the form and the div with law since Dubai, and it should be relatively quick. See you in the next lecture. 6. Building the CSS list items: Okay, So this is where we left off. Remember we started spying header here and we've kind of finished the heat up, but let's continue with the loss to those sections. Hen, remember what they look like? I want to wrap one and a form on a rep the other and a div element. And we're just going to style it to make them look funky or odd. So let's continue its full. And if you go to the index file and we scroll down here, you can see we gave it an ID of Ed item. So let's grab that element, add item, and let's manipulate it. What's the goal? And it seemed to this. Okay, that's fine for now. And I slipped quite same typically in a stock filing, the specifics of this, aka the actual input and that button. So let's actually start all the inputs. So we want to access the tide of, and we want to now be very specific. We want to start styling that input element. The first thing I wanna do is I want to make that input box bigger. Can you see how it's not quite big enough? Let's make the width of 300 pixels. Is it big enough? Should be okay, we can always change it later. The next thing I wanna do is I want to make this into an input box. It's underdog element. So I wanted to take up the whole width. So we'd choose xi's display block. How's that? Yeah, this just add some margin to make it look better. Let's give it some padding. What else can we do? Let's change this border. One pixel solid, two on six to 16 to 16. Hey guys, just a nice light gray. We don't want these things in the user's face. We want it to all be very subtle. And let's increase the font size spiky. Looking better. Maybe we should just curve that border slightly. So I'm just going to add a border radius, two pixels. Has that look. Now I think it looks like a bottle. I said this is very, very subtle. The border-radius, the first two pixels is the top left of the board. I'm just rounding it ever so slightly. And then lost two pixels is just styling. And the bottom lift, I like doing only subtle things in size that just got an a you get a good feeling about it when you land on a page and you know, and love has been put into it. But we didn't have to have this indium. And what else can we do? Box-sizing, border-box, how does it look? The other thing I want to do is I'm just going to flood this left knee. We got to guess. I do want to add items to be to the right. Specifically, we wanted to add button directly to be displayed to the right to this input cuckoo. Okay, so we're getting me, we getting me. Just remember why I put the flow today. If it was because we were hunting either elements, specifically that add button to be on the right of this input box. The stony reason why we did that, and now of course we need to access that button. Let's start it. So we want to access the parent form element. Within that. If we want to actually stop button the dipole, It's dots and manipulating the buttons what? That looks Beta. I wanted a cursor, obviously to change when the user hovers over it so they know it's a button. Degas was two kilowatts. How does that show? And all we can't see it. That's okay. We'll add a background and a background. I just chose a CALEA, 32. See 77 D. How does that look? Here we go, starting to come alive. We can embedding. How's that? Look? See we getting me, Let's change this border one pixel solid series. Or if, if, say how does that total? Now getting me can increase the font size slightly. Now we can add margin. Look at it at an OBS lined up. Just remember we use the same margin is about us as the input box and that's why these two line up with each other. And finally, we can get onto our items do bisection. This final, final section. Remember, this is an apparent element, the parent div element be specific, and we want to solve this now. So let's scroll down. Yeah, and let's access it. What IT did we give it again and if we scroll down Section 3, an ID of grocery list name you can see within the grocery list with an H2 tag. And then we've got the UL elements and all of our list items, specifically aisle items to buy a wreck within ally elements. Again. So just remember that first thing I wanna do them as excess, I'll grocery list and let's give it some margin. Yeah, so really starting to look good. And then I want to be more specific. So I want to grab grocery lists. But now let's style the UL elements. Firstly, I want to remove those bullet points. Bullet points. It'll be yucky. How do we do that? Well, we just access the list-style property and we change its value to none. Day we got bullet points have gone. And then the other thing I want to do is I want to remove default padding that comes along with SQL element. Remove default padding. Sorry, maybe I'm being more specific you have because this isn't what Golson CSA. So I am trying to go very fast. Um, feel free to skip this lecture if you're getting about board. But then you got to have removed the default padding. Now what I wanna do, again doesn't want to be specific, but I want to start manipulating the ally styles list, XY South grocery list ID. But now let's access our list items. I want each list item to have padding, the IGA. And remember how when we hover over each one of these list items, we kind of had a left border and Angeles photos highlighted. That's what I wanna do know. Let's say five pixels solid. And that truck. Yeah, that looks good. Another flooding onto each other now, but don't worry, we're going to be any margin of since coming alive. And then you can see all out deletes currently is just tastes. And remember we wrap them in a span tag is just go to HTML. How did we do it? We wrapped it in a span tag, will allow the leads. We gave it a class of delete. Remember that? So right now it's just boring old taste. What we wanna do is we want to follow it up. And as I mentioned, we gave it a clause. Delete. So 50. Let's float it, right? Yeah, Oh, that's cool. So let's give it a cool background color. Has extra OK. Now it looks good. Let's give it a padding and we'll see that it looks terrible at the moment. Here we go, It's coming alive. I want to make the border C. You can see how he adds very squishy. So let's just round that up to the border-radius. And let's round all four corners by four pixels. Hey guys, it's just subtle. I want the user's cursor to obviously change when they put the mouse over the button. And let's get rid of the ID black and make it a white color. The guy. But now if they use a horse over delete, I do want to spec on CUDA to change. I wanted to just be a nice user experience. So all we have to do is excess off clause of deletes and almost close delete whenever the user hovers over it. We wanting to affect certain styles to solve, we want to affect is this background front and we're just going to go 20 2020. Degas. How cool does that look? This is awesome and you can see we all, I think we've done like we've done with the finding of the sides. You know what? I just remembered when we hover over this delete styles of but not these borders. Yeah, he's boldest. Stay gray when you hover over a list item. So let me just quickly do that. Needs access the grocery lists id. We want to fake the styling on the LI tags, but of course only when they use a hot was angry. Want to change the border color, don't we? Color da, 43, 43 hundreds HLC. We hover over all that. Just look beautiful. By the way, I just met da 43, 43 with the delete color I can hit. So both colors are exactly the same. But they will be having a ton of fun not to be learning a lot. And policies of lists is taken quite a long time, but I literally have coded this up from scratch. Now you've seen how I've done it. Everything seems to be working looking lisinopril, office seen, nothing works. If we click Delete. If we try and say I want to buy some sugar, MLK, which I don't know what that is, but if we add that, nothing happens. If we hide the list and nothing happens. And of course, if we try and search for, say, MLK, nothing happens. This is what the next stage is all about. We putting all our knowledge that we've learned in the DOM in the upcoming lectures. So have fun, enjoy it, and I'll see you. 7. Quick recap: Crude oil, gas, and are we going to get into the heart and means of manipulating the DOM? It's going to be really exciting, really amped. So you can see on the screen and looking pretty good, It's looking pretty funky, but of course there's no functionality. Before we begin. I just want to show you a few things. I just kinda wanna give you a high-level recap. So if we inspect this document here and we go to the console, what are some of the things I just want to recap you on me. Just zoom in a little bit. Yeah. So what don't want to read kept you on just a few things. Firstly, just remember how we've structured our code. And I want us to begin by looking at how he had an item dynamically to the slowest. So taking a step back, remember how we've structured our code. We've taken our UL element and we've got lists underwritten. And we've read that entire thing within a div tag. And the div tag has an ID of grocery lists or the grocery item. Let's just have a look here. Let's go to our code. Let's grocery list that's out there within that div. Remember we've structured it so that if we've got a UL elements and within that we've got all our list items. What those fans. And the name of each grocery item is in a span element with a class name of item. So just remember this as we go along. Okay, so what do I want to recap you on? Well, let's just look at a few things. Cookie high level, just to get those, just to get us thinking. Firstly, how do we access item strong dominance? You remember this? I'm sure what we can do is we can define a variable called grocery item. And then we can access our document object on net. We can access the querySelector. And it works very similarly to other correlate libraries out there like jQuery. We can be extremely specific. What do I mean? Let's say we want to access the third item on this list. Something to drink, Coke. How would we do that? Well, I'll show you what we can do is we can first be very broad by accessing the entire div with an ID of grocery list. Within that, we want to access an ally tick down to each one of those items in the list. But in this instance, we wanted to be the third item so we can access the third child. But now we also don't want the entire LI tag returned to us. We only need one, the actual taste, something to drink, EG Coke. We don't want that delete button as well. So we can even be more specific. We can say, okay, Cool, we want the thing that's returned to us. We only want it's item clause. Because if you remember if I've got occurred, you can see here that the span with something to drink ET Kirk has a class name of item sets. All we've done here. And that should be it. If we try and access our grocery item. How awesome is that we get returned to us? That exempt item, we went cuckoo. Okay. How do we get returned to us? All the list items. While you might think, okay, let's define a variable called grocery items. It's exits out document the query selector. And let's say we want all the list items. Again, we can access our entire Rapa grocery list and we can just say, listen, give us the ally. Oh, oh, of course, grocery item. I wanted an ACI grocery items. And if we were to run that and we try and console other out, something weird happens. Y's are giving us the console lot grocery item. I wanted it to be items. And if we do that, We only going to get the first ally tech. Because remember, the query select returns one item from the DOM. So how do we return all items in the DOM? Let's write this, just clear this. So he can start. Again. That's right. We can use the query selector all concrete. So let's go LET grocery items equals document query selector all. And yeah, we can try it. We can access our grocery list, all the LI tags. And this console log this out. And they we go, we get a node list returned to us. And if we open up that node list, we get every single one of our texts. But it's an unnoticeable. Remember how we can access items in the node list? Well, you can access it like a normal array. So if you want the first ally, we can just do the brackets and 0, that will give us the first LI tag. Of course, if you want the second one, you can put the number 1 and that'll give you the second one, and so on and so forth. Pretty straightforward. And how can we call it cycle through all of these items dynamically. We can use the for each method. And we've gone through all of this unknown. I'm just giving you a quick recap. But anyway, why can we use the forEach method? It will, because it's a node list. If we use other access methods like query selector for example, we don't have access to the for each. I mean, when we use certain ones that return an ArrayList to us, like query selector all for example. So how does that work? Well, we can access our grocery items. We can access the for each method. Then we can say for each item returned to us, we want to perform a specific function. And under no, let's say we want to access the item and we want to change its takes to contin property to be. Do you think that'll work? The haka articles that so that's one way we can iterate through all the items in the list and stop manipulating its content. Something else we can do when you don't want to override something is you can append it towards ever They already. So what we can do, for example, is take our grocery list items, the foreach. And instead of assigning the entire text content to something new, we can just append it and your painted by including the addition symbol. And yeah, we can just say that's a grocery item that see if that works. Hand. There we go. Now we've just added something new. We can continue to play around with this and infinite them and really is fun. I just wanted to give you a very high level kind of summary or recap of what we've done in previous lectures. The other thing just before I finish this lecture is let's go to the elements here. Let's get rid of all this. And just remember we working with all these things. We working with nodes. Remember, everything is pretty much a node in the DOM. We've got element nodes and element nose or very straightforward, it's like this div here as an element note. But we don't only have element nodes. Dewey, we've got a whole range of different types. We've got commonly nodes, for example, you can see yes, section 1, section 2, 6, and 3. Those are comments, notes. We don't only have common nodes are Dewey. And we've got a ton of things. We've got taste nodes. We open up one of these dose, we open up the URL. And now I take I mean, we went up the ladder does now. So it's not exactly the same as our HTML. But these it takes node via grocery item as it takes note, we don't only have Takes nodes, we've also got an attribute nodes. For example, this H2 tag has an attribute with a property called clause, and we've given it a value of title. So there you go. I hope this is Tokyo memory. I hope that's kinda making saints. But enough for me. I feel like it's time for us to get into the nitty-gritty aspect of making this work. So I'm super, super excited and I'll see you in the next lecture. 8. Removing DOM elements - the old way: So let's talk coding. All I've done is I've added a JavaScript file called app.js. So if we've got our index and we go to the bottom, we actually need to add the script, don't we? And we've called it app.js. So there we go. And I've just created an empty dot js file in the same directory is we'll add us the index in the styles.css. So what I've done and the first thing I want to do is I want us to take this in a piecemeal manner. I want us to just tackle each piece, the petroleum. So the first thing I wanna do is I want us to be able to delete an item from the list. If we go to our browser, can we go, you can see we've got these delete buttons. And of course right now when we click on them, nothing happens. So let's see what this first, how would we go about doing it? Firstly, I want to show you the inefficient way to do it. And then I want you to pause the video and I want you to try and utilize event bubbling and even delegation. But first, let's go with the inefficient approach, which you may see a lot in developer's code. That's why I wanted you to be aware of it. So yeah, we all back and I'll take state at how can we do this. We'll firstly, I want to label our code so there's just have stalled here and delete items, rots and I'll just copy this SAM links. There we go. And one way to do it is to add event listeners to each one of those buttons. So first step would be to grab all of those buttons, right? And we can do that by defining a variable called Lessons. Immediate zoom in, Yeah, So you can see that beta, we want to access the documents on the, we've got the query selector. All on the query selector all we want to grab the outer div hold grocery list and on name we want to grab each one of those. I eliminate that. Remember, that needs a cost of delete. So it's got a class of elites. And if we console log this out to the screen, Let's go ahead. And if we inspect this, would go to the console. We should see a node list and I'll mode list is here and I spoke four items, doesn't matter. And it's each one of those buttons. So here we go. We've got access to the buttons. Let's go back to 6 datatype. And the old-school inefficient way is to loop through each button and add event listeners to it. How would we do that? Well, even in the recap video previously showed you that we could access for each makes it. So let's do that. Let's access our buttons variable. And then we can access this forEach method. We can grab each button in the for each loop, and then we can do things to it. And in this instance we want to grab that button and we want to add any made just now, the veins we want to listen for and each button is a click event. And then of course we want to execute our handler. Remember that hand to function gates given an event object which we define in a variable old II. By the way, I'm just executing olivine hand directly within this function. Now what happens when the user clicks on that button? This we want to navigate to the parents don't tweet, and then we want to delete that period. So what we wanna do is we want to define a new variable. We want to define a variable called ally, for example, because it's kept within an ally element. And thus ally elements Does going to be the target. Brought the button we've just clicked on, and it's going to be its parent elements. Does that make sense? So remember what we've done. The users clicked on that button. We've now navigated to the ally tag that too thin. And let's say now we want to use the old-school remove child and method. We do that. Remember in this course we've seen us, well, it's kinda weird because we get to the LI we didn't have to access its parents and then remove its child in order to remove itself. I know it sounds weird. So we have to access our variable, we have to then access its parent element, and then we can remove chalk. And of course, the child we want to remove is itself. So let's see if this code works before we start improving on it. Let's go down browser and it's trying to move children's class. Smoke wicking. What have I done wrong? Let's go to the console top. Removed child is not a function. Removed child is not a function. Why? Should be a capital C? Cools, this is where the JavaScript parser is excruciating knee accurate. So the ego, if put a capital C that should work, Astronomy move sugar and spice and it's removed. How cool something to drink, pizza and MLK. Day we go if deleted everything. How awesome. But as I'm ancient, Let's go to our code. This isn't the most efficient way to do it. I want you to stop the video here. You know what? I'll actually stop the video here. In the next lecture, we'll do the new and improved way of doing the exact same thing. But we're going to be utilizing event bubbling, any event delegation that before I give away this solution, give it a think. And in the next lecture, we'll cut it out together. 9. Removing DOM elements - the new way: Firstly, how are we going to structure this? And it's utilize even bubbling. If we get our index file here and we scroll up, you'll notice that we've got this huge owl elements, don't we? So why don't we put our event listener on that and it can listen to all the clicky beans they bubble up to it. So let's do that. So let's delete all this code because it's very, very inefficient. So we're going to be adding an event listener onto that UL elements. The first step is obviously us having to grab that UL element. So let's do that by defining a variable called grocery list. You own. For lack of a better word, we can access our document here. We can access the query selector because we only need one item, don't we? And to be specific, we can look within our grocery list wrapper. And within that, we want to grab all you all take. Now what we wanna do is we want to add our event listener. So how do we do that? Well, we grab our URL elements. It has a method called addEventListener. We're going to be listening for all the click event, and then we're going to execute a handler function. And let's just call it remove. So here we can define a handler function. We're going to use JavaScript's function keyword, we've called it remove. And here we go. The hearts of opcode lies within these curly or indices. We're going to be existing in the event object. We know we have to put it in a variable. We typically call it variable E. And we're going to need to access kind of the vein tada drop because of the USA action takes on saying the word MLK. We don't want to delete that item from the list. It's only when the user clicks on the delete button. Aka remember it has a class of delete. It's only in that case where we want to actually execute this function. So firstly, let's define a target variable. And they can be the actual target, AKA that element that phi a DVT. Now, we can change if the target, if it's Krosnick is equal to remove Dean, we want something to happen. Neurons, we want to execute this function. Otherwise we want nothing to happen in a rebate if the user has clicked on that band and we went into grab its parent element being that entire LI element. So let's define another variable called ally. And we know it's going to be the targets, that's going to be its parent element. Does that kinda make sense? Then all we have to do, of course, is XY set elements and use the new and improved remove method on us. Today we go, I hope this is making a lot of scenes and this is a much better way to structure our code. So let's go to our browser and let's see if this works. Let's try and delete MLC. It's not working. What have I done wrong? Let's go to the console. So it's not even see that. It's not even in triggering that click event. Let's go here. Oh, you know what I think might be the case. Yeah, the class name is not removed resistor. If we go here to index, yeah, That's might be the problem. The class name is deleted. As we can see, it's not remove. That should be delete. Let's go back to the browser. Let's try and delete assurance bias. So this is a much better way to structure our code and we utilizing really a lot of clutter of advanced concepts with gentleness goals. So as I making sense, I hope so, but in the next age and let's continue to them, we've done deleting of items logically, the next step should be having to figure out how to add items to the list. You can give it a go yourself. If we go to the browser, remain. But what we want, we want the user to type something in the input box or when the user clicks ad. We wanted the edit dynamically to the list of the loan. How would we go about doing that? Give it some thought and the next lecture, we'll code it out to get it. Sinon. 10. Introduction to forms: So now we're getting into adding items to a list. It's really going to be exciting and hoping and I learned a ton in this lecture. So where do we start? Well, before we start, coding, hoops are almost not done. Lama coffee. It was this class. Anyway, as I was saying before we start coding, I want us to discuss forms in a little bit more detail. Remember in part one of this DOM series, we discussed accessing the form's property in our document. Let me show you what I mean. Only me remind you. So let's go to our console. Now we go and how do we access our forms mole firstly, we access our document, the root of our takeaway page and honest document does a default property provided to us by the DOM called forms. And it's that easy and what's returned to us is an HTMLCollection. We've been through this in a lot more detail in series one. But if we open up this HTMLCollection, we can see we've got two forms. And this makes sense. It's literally just representing our forms in our HTML. If we go to occur. This is our index.html file. We can see we've got two forms. The first form is within our header section, and then it has an ID of search item. We're going to get into this later. For now we want to deal with Section 2. Don't tweet SRC conform. That's where the user types in item they want to add to the list and click Add said making saints. So if we go back to our browser, How do we exist at four? Well, there are a few ways and we can kind of deal with it like an array in some instances. Specifically if we want to access items from this HTML collection, what do I mean? Well, we can access that exact form. We won by accessing the form's property. And then kind of treating it like an array by using the square brackets. And we can exit the second item in the array. And that is the form we want. That's one way we can do it. Another way we can do it is we can actually pass in as an argument. It's ID, and we know it has an ID of add item. We return that and we get the exact same thing. Okay, So this is a bit of a recap. It's just a bit of a FYI on the side. Now before we start coding is one more thing I have to have to show you. And that is what happens with forms. Two things happen. One, a submit event is fired. The second thing that happens is that the entire page doesn't refresh. Let me show you what I mean. So let's say the user deletes all items, but the last one in this pizza. If we now want to add MLC and the user clicks ad, remember what the default behavior is. One must submit event is fired and to the entire page reloads. Let's click Add. And they would go the entire page reloads. And you can see in the top-left corner of our browser, every time meticulous Add button refreshes. Watts. We don't want this Dewey, but lucky for us to is the way we can prevent the default behavior. Let me just jump over to the screen quickly and let me talk a little bit more about this. 11. Default behavior for form submission: Before we start dealing with our form, I think you really need to understand how some events trigger default behavior and what we can do as developers to control what kind of prevent the default behavior from happening. So here we go. I've got a blank Visual Studio code file open. And I want us to look at the anchor tag. Specifically what happens when we click on a link? What is the default behavior? And I'll show you already know that the default behavior is to open up a new browser window following that link, let me show you what I mean. So here we go. Let's just create an index.html file, an HTML template within here we can literally have a body element and just an anchor tag with a link. And this just link it to, I don't know, Google. It can be any size we want. The next thing I wanna do is I want to open up a live server. Let's open up our live server quickly. Wait for Russia. It's coming. Of course, have an intuitive taste. Silly me. Let's go to Google. And let's take this to the left of the screen. And there we go. There is on link. And what happens when we click on that link? I'm sure you know it. The user gets redirected to Google.com. Okay, this is a very simple example. But how would we go about preventing this default behavior? Well, let me jump over to a presentation quickly and let's talk about it. As I've just mentioned, many HTML elements exhibit a default behavior when we interact with him. What kind of elements ever default behavior? The images say many. For example, when a user clicks a textbox, the default behavior gives that takes box focus with a little blinking cursor period. We all know this when we go into input text box, don't worry. Using our mouse wheel in a scrollable area will scroll in direction that we scrolling with that little mouse wheel. Taking on a checkbox will toggle that change state on or off. Clicking a link, an anchor tag link will open up a new page and direct the user to that link. All of these are examples of bolt in reactions to events, our browser instinctively knows what to do about. The good news for us though, is that we can turn off this default behavior and when we don't want it. And we can do this because we have a lot of control over the browser, has Developers. Okay, cool, It's all good and well, but how do we turn off this default behavior? If we want to turn this default behavior or we can call the province default function. This function needs to be called when reacting to an event on the element should default reaction we want to ignore. So just remember we have to access it on the event object itself. And I'm a bearer of good news today because the preventDefault method can be used on many elements, such as links, input boxes, forms, checkboxes, cetera, et cetera. But now let's jump back to our example of the anchor tag and let's see how we can prevent its default action from happening. Is that making sense? I hope so. But how do we access the preventDefault method? Well, let's go back here to our text editor. Let's expand this cutie. How would we go about accessing at where does it come from and how does it work? Well, firstly, we want to be using JavaScript. So let's add a script tag at the bottom of our file. The first thing we wanna do is we want to access this anchor tag. And we know this by now. They are many different access methods. Let's put it in a JavaScript variable, and let's give that variable a name of say, anchor. We can access this variable by starting and I'll document object. And on day, we've got many x's methods. The one I'll use now is getElementsByTagName. The tag name we want is our anchor tag. And remember what this getElementsByTagName returns to us. It returns to us an HTMLCollection. Stopping here has not enough. We actually have to tell the browser which item in the collection we want. In this case, there is only one item in the collection. So we want to access the very first item in the collection. So there you go. We've got an anchor tag. All we wanna do now is we need to attach an event listener. Don't we? Click event listener? We can do that by accessing our variable on net. We've got a default method provided to us by the browser called add event listener. We've been through this many times and you're probably getting pretty bored of that banana. And instead of defining our own custom event handler in another function, I'm just gonna do it right within the second argument. And I'm going to use the arrow syntax. Three-way simple. It's just put a space there. So there we go. This is our handler function. And what do we wanna do? Well, firstly, we want to prevent the default behavior. This default behavior is found on the event object itself. And do you remember how to access this event object? We have to put it in a variable, and we typically put it in a variable called e. So all we have to do to prevent the default is we have to access this event object on the they is a method called prevent default. And because it's a function, will, because it's a method, we have to follow it by parentheses. Today we go and we prevented the default behavior. And just to finish off for health cool example, what I wanna do is I want to access on ANCA variable and then I want to change its text content. And we can just say default behavior as been prevented. What's going on? Yeah, you got it. We got and if we go, It's all browser. Expand US. Let's go back and refresh our page. What do you think's going to happen now, let me just zoom in. What do you think's going to have the null when the user clicks on that link. Well, let's try it. Let's click on the link. It's cool, it doesn't matter. So now you've just learned how to prevent the default behavior. A. We haven't been redirected to Google and to have changed, takes care of that anger when we click on it. So there we go. I just wanted to show you how we can start getting more control over the default behavior. Of course, right now we haven't dealt with the form, but that's what we're gonna do in the very next lecture. We're going to start dealing with that form with the user wants to add items to the shoppingList. See you now. 12. Adding items dynamically: Now we're getting into the really exciting bit of adding items to our side. How do we do it will, if we go to our app.js file, you can see here we've done delete items. So let me just copy this. Hitting riots and it's non-stop. Create a new section where now we want to add items. Where do we start? Well, if we go to our index.html file and if we scroll down in our index file, we get to the Alice section two, this is our form with the user adds an item and remember the default behavior of a full. Whenever we see a button in a full and the user clicks on that button, a submit event will get fired, but not on the button itself that will get fired on that form element. So the very first if we want to do is we want to listen to for the submit event on the form element, don't we? But then we want to prevent debt defaults. So if we go to our app.js file, the first step is to grab that form element. And in order to do so, let's put it in a variable called an array format. And we can access our document object. On that, we can access a method called get element by ID and we gave it an ID of addItem. Remember for that our index file, Given that form, an ID of addItem. See how we go with access to our full right now. The next thing we wanna do is we want to add an event listener. Don't we attach an event listener? So we access our form and variable. We then want to add an event listener, but this event is not a click event is us. It's a submitted. That's what we want to listen for. And then of course, we want to execute a handler function. We're going to be accessing this event object. Remember, we have to, in order to use that prevent default method, we're going to put it in a variable called e. Then we're going to use the new and improved arrow syntax. And we're going to define how a handler function within these curly braces. The first thing we wanna do is we want to prevent the page from refreshing. And in order to do that, we have to access our event object and we use the default method. Yeah, we got it. Let's go to our index file and let's pull up our site on Live Server. For that is zoomed in or zoom out to a 100 percent. And let's say the user deletes all items but one and then they write something in the air and click Add. You can see now the page is not refreshing. So he getting a slowly but surely, let's go back to our code. And let's go back to our JavaScript file. What's the next statement? Well, if you go to our website, yet, the user's going to be typing liters and taste into this input box on that. And what do we want them to do is we need to grab that input. It takes within that input box. And then we need to edit as a list item when they click Add. So let's grab that input tasty. And how do we grab texts? All we can use another one of the x's methods that use querySelector in this instance, it's all we need to do here is grab uses. We can exit the users table by using a query selector and we're looking for the input elements. And in the input element, there's a property called value, and it returns to us the value in the input text field. Let me show you what I mean. So let's define a variable called text, and this will be what the user has tapped into that input box. We have to grab the form and property. And as I mentioned, we can use an access method called query selector. Now, we can be very specific yet. We can't, we can't just use the input query selector and then get that value. And to prove it to you, Let's just console log the text. Let's go to our browser. And let's look at the console. And it's taught piano, MLK and click Add. And they would go with getting the MLK displayed to us with literally got that takes value from that input box. I told you it's not that difficult driver. But let's go back to our text editor. We can be more specific. For example, say you have a few different types of input fields or elements. But in this instance we only want the one with type of taste map. We can do that as well to be more specific within GUDDAT browser, again, it's just tear everything and let's just say sugar spice. And we click Add and we get shrewdness boss. That's just if you want to be more specific. But in this case we know we've only got one input, so we don't have to handle that. We can just keep it very, very simple. Let's delete this console because we know it works. What is the next date now? Single mothers, we wanting to add list item onto our browser. We wanting to literally add another list item like Sugar and Spice. We wanted to add a new one. And how do we do that? Well, first we need to look at its makeup. Index. What do you notice about each item? You can see there's an LI tag. And within each LI elements, we've got two spans. The OneSpan has a class of item and that's the item the user wants to buy. And then the other span is that delete button. And of course we have different clauses which define that style. So that's what we need to create every time the user clicks it Add button. Don't worry. Let's go back to our file here. And let me just pull up what we want. That's what we want. And I'll I, and the two spans. So let's start creating less now every time the user clicks at edX button. So let's say here, creating items dynamically. And we went through this in a lot of detail in Part 1 of this DOM series. So you should be very familiar with it. Look at that image now, what do we need to create first? We need to create an hour, I don't worry. So let's define a variable called ally. And of course, we can access our document and is a method called create elements. The element we want to create is that Ally elements. And then we need to create two more elements. Don't worry, we need one for the grocery item and we need one for the Delete button. So let's define two variables. Let's say it's grocery name because that's the name of the grocery item we're adding to our list. And we're going to go document. Of course we've got to create an element and in this case it's going to be a span element. We're gonna do exactly the same thing, but we don't need a grocery name now, do we need, That's right, a Delete button. So let's just call it delete button. And by the way, I don't know if you can see it that clearly, but the IDE has grayed out these variable names. It's actually a gray color, not white and it's gray because it's telling us we haven't used these variables yet. So it's just a bit of interesting, FYI. So we've created our elements. We now know that the spans all nested within the LI element on day. We can see that. So let's do that. Let's a painted to the LI elements and how do we obtain things to items? Again, we've done this in extensive detail previously. All we have to do is x ESL LI element and we access a property called a pained child. The child we want to paint in this case is grocery named for the one and you've casted the second one we want to paint off to that is this Delete button. Delete button. There we go. Why do you think this is going to work? It would work actually. Let's save it. Scarab Rosa. Let me type in hand via MS click Add. It's not being added to our DOM, is it? And again, we discussed this in a lot of detail in series one. What happens now is we've created all these items, but they kinda floating around in space. We need to append it to the DOM, we need to attach it to a parent somehow. So how do we do that? Well, if we go to a next fall, what did we just grab this UL element peanut to that. So if we go to our script and ab.js file again, it's not grab you. I'll element. So all we have to do here is we have to say late you, I'll be the document. Get elements by tag name again. We can access the cool stuff or turns and HTMLCollection and we want the first UL element within it. All we have to do now is touch our newly created lemons to the domino. Is this kind of making S2? I hope so. So in order to touch it, it's very simple. We grab our URL parent element and again, we access a pain child and the child we want to append is the ally. Is that making sense? So there we go. Let's save it. Let's go to our browser. Let's say, or let's say beer, just to be different from what we have. And let's add. And look at that. We've literally edit the ally, but as you can see, we've got no taste in they do eat like before we deal with that, takes aspect, just have a look at our DAW inspect out on, let's have a look at the elements. We've literally edit dynamically this LI element. Yes, the spans are empty, but you got to celebrate our successes so far and we doing it in a piecemeal step-by-step approach. If we do it again and we click Add, you can see it's edited dynamically to the dog. Very, very cool and ally element with two spans. A few more things we need to do that in order to kind of finalize. The first thing is we have to add alt text. And the second thing is we have to add these clauses. So I want you to think about how to do that. And in the next lecture, we'll finish this off together. See you now. 13. Adding classes: Okay, So yeah, we all just where we left off. And remember, we created this LI, elements dynamically. So we kind of have the skeleton in place that we need to add the meat to it, don't we? How do we do this? We'll first add the contents. The element has got outtakes data together. And let's add six. And remember if I scroll up and ocurred, we actually defined a variable called tastes that we haven't yet used. And that is the taste of the US is written in HTML in that input element field. So let's add that now. Will we do we edit too? If you look at this grocery name item decks way we want to add the input takes content into dentin. So all we need to do is we need to access that variable grocery name. We want its text content to be signed to the value of that takes agree is that simple? And they end with a delete button. To delete button variable that we created above. We also want to put content within that span element. And the content day We ones is just to lead a very simple. And if we go to our browser and just refresh this page, let's add have BIA and it's good at that. As you can see, we are not quite done all we have not solved properly. Why is that delete, not pushed to the right. What is going on? What if we open up our Divya and we gave to item we nodes in the grocery list. If we open up the URL and we actually go to this LI tag, Let's look at what's happening. We've edited the taste, which is awesome. But you can see that the classes are applied to this. And what that means, of course, is that there is no styling. How do we add that? Let's go back tot takes data. Let's start thinking about that. Let's say add clauses. How do we add tosses? Willing gain a day are a few ways. If we go to our browser here, that's got our console. Let me show you one way. So firstly, let's say that our tank document get elements by tag name. And we want the LI tag. If we return that, we get and HTMLCollection. And we can see we've looked for LI tags within it. We want the one we're just going to add, not via edit. So there we go. Now they should be five. Rods with a 50 allies. Day does not exceed the last one. The one we've just added a printed out, we can see del know clauses applied to us. One way to edit class is to just edit, cool it via the className property meters. So what do I mean by that? We just access that item. We got className and we can add our own class math. Let's just say it tastes rods. If we now exist that ally and we returned to us, we can see these edit, this class of tastes. So net is one way, but what is the major downfall was this? Will, the major downfall is that it overrides all other clauses. We can only do this. One clause. For example. The third i'll I take that is the pizza and made us now change its false name property to taste. If we do that, and we exit the LI overwritten other clauses if it had other tosses. By the way, for example, if we exit this band loss of item and override it by the className property, it will actually remove class of item. Is that kinda making saints? I know it might seem a bit confusing, just bear in mind all I'm trying to get across is that using the class name property overrides losses. You can't add more than one. See you go, you can see the class name is a bit clumsy. They always to whipped around it. So say now we wanted to add on this, on the ally, take another class. So what we could do is we could access that ally. The class name, the Dane. We could have concatenates the new troughs onto it, say T2. So now if we do that and we access ally, you'll see another problem. G, What's going on? Yeah, I am. Today you gotta days. The other problem that t-statistic to naught. What do you have to remember to do when you edit those? You have to put a CIA. They can. Then when we access it, that should work. It's got the taste as a separate class name, but you can see this is a very cumbersome way. There's a much better way. What is it? Do you remember? Let's go back to our text data. So what is the new and improved way to add losses dynamically? It is using the class list API that was introduced by HTML5 specification. We've been through this in previous lectures. It's got many cool methods available to us, toggle removed or examples. But the one we want to use is add and edit, super easy to use. All we have to do is I'll element. We want to then access the list API that Damon has a method called add. And we want to add a clause, don't tweet. And the class we want to add cold manner, and we want to do exactly the same thing with Alt Delete button. We want to access or delete button, the class list API. And we want to add a clause, cold delete. If we the US and go to our browser, we can delete that. Now. Let's now add VIA, Let's click Add. And how is that? We'll just see a little bit. So you can kind of see it's been added dynamic. We cannot delete that again. We can say and listen, we don't need it. We need what's gonna end that can add theater as well. Awesome, Let's be edited. Dynamic key to the DOM. Take a breather. Celebrate your successes because you coming long, long way. And you can start seeing how we can apply the knowledge we've learned in this entire course to create dynamic webpages, Greenwald. And now I want us to continue to vaping the sides. What can we do next? What have we deal with the hide lists, checkbox next to wave, we tick that Allah entire shopping list is hidden and think about how we can do that. And then the next agent who could alter it. Complex, I'm Sue bananas, I'm super-excited. C naught. 14. Hiding and unhiding our list items: Okay, so here we are. And the next step is to get this hide checkbox wiki. As you can see now if we go and tick on this hide lists, nothing happens. How would we go about doing this? Before we start coding? I want you to understand something when it comes to tick boxes and neck is a unique event is fired every time we click a checkbox. It's not a click event. It's a change in beam to satisfy it. So if we go to our code, Yeah, we look at our HTML and we look at this div with an ID of change. And we see that input checkbox. We can see that I'll check boxes to find within this input element that type of checkbox. And every time that checkbox is totally a change event is fired that bubbles up to this div with an ID of change. But what exactly is this changing veins will iniquity very quickly give you a rundown. You might be wondering we, the change event comes from. And let me just say that it's inherited from the HTML element interface. And then you may be thinking, well, if it comes from the HTML elements interface, this means that all elements submit disadvantage and that it's not the case. The change of faintest only available on some elements. Not all. For example, the change in vain does fired for input a select element and takes era in moments when alteration to the element's value is committed by the user. And this means that for our check box, the one we just saw, a change event will be fired every time the chief site of this and changes i0 every time the user clicks that checkbox. And just a bit of a file, you might be thinking this is very similar to the oninput event. But the difference, yes, subtle D on input event occurs immediately off to the value of an element has changed. While this change in vain to Sony submitted windy and veins, kind of as lost focus will offer, the content has been changed. So Zach, I'm making sense. I hope so, but nominates the soft cutting it up, you'll see how simple it is. So that's good. Our JavaScript file stole to the top was just done at atoms. Let's copy this. And now we want to hide items. See how we go. We've got our heart elements, hating. How are we gonna go about dealing with us? What are we gonna do? Well, in many, many ways to skin a cat. We could use vein delegation. We could listen to the change of Anton overall div. But in this instance, I don't wanna do that. And this is why you can't just follow one rule when it comes to coding. The reason I don't want to use a vein delegation here is that you will then have to access the event target to determine whether the checkboxes checked or not. And I just think it's an easier way if we just directly work on that input element itself. There is no reason for us to use a vein delegation here. It doesn't benefit us in any way. So the first thing I wanna do is I want to grab that input element, AKA I want us to grab that checkbox. So let's define a JavaScript variable and let's just call it checkbox. And that's going to be document. Let's use querySelector 1 ons query selector. And the query select we want to get is we want to get that input with the ID all. Think we sit idea of HIV. If we go to our index file, we scroll up here. That input element has an ID of cool, so we've just got that. Good. The next step is honest chain box. Let's add an event listener. But Navi veins, we want to listen for a particular dataset. It is the change. And then of course we want to execute a callback function are handler. And we're gonna do that right within this ad listener method. And what are we going to do novel, one of the things we have to do is we have to determine which element, overall element we want to hide. So again, let's go to our HTML. Scroll down here. We can see in section 3 we've read Allah entire grocery list within an overall parent element with an ID of grocery list. And this is exactly why I always loved structuring my code was an overall rep. Because you never know what kind of coding you wanna do in the future. And he adds very easy for us to grab it and just hide it. So let's just hide that in times of so we go here. The next thing I wanna do is define grocery list. And then can be again the document object. We have to start date and we can get element by ID and we know the ID is grocery lists. Next odds and we want to collect what is the next state will if the check boxes, we want everything hidden is to cheat box is unchecked. We wanted to, we think Shun. And whenever you come to this fork in the road, we use an if statement, which comes from JavaScript. So if and what are we going to taste? Yeah, Well luckily for us, when an item is changed, it has a property called chain. And then property will be true if it's changed and false if it's not changed. So what do we want to say? Yes, we want to say if the checkbox is changed, we know that it'll be vetted at all close to true. Then what do we want to happen? Will we want to grab our grocery list, don't we? We want to access a solid property That's display property on that and we want to save that to null set symbol else. And we know the else statement means that it's jake. Now, in that instance, we want to try to grab our grocery list. Once again, we access at style property. That's the slave property we want to change and neck. We wanted to become a block set kinda making saints hopes on a hub. At this stage, you can start understanding that it's very intuitive on to understand how the veins work. Yes, in this instance, we needed to know that we had to listen to the change event. That these are the kind of things that are literally take you 30 seconds to quickly Google. And you'll get the, you'll understand the flow of code. You'll understand how to code these things yourselves. So anyway, let's go to our browser. The floss. Blowing a trumpet is to see, to see how we go and let's hide our list. Let's click it. I'll beautiful as it is hidden. And if we uncheck it, it's displayed as a block again, would be amps, getting fun. I would be learning autonomy and debug code, just make seeds. If not, watch the video again, if you've got questions and lost him in the Q&A, I'm here to help you and I'll see you in the next stage. 15. Recap of what event listeners we've used: I can't believe how far away are getting a CRC. Well done. This is so cool. I've been having a lot of fun and hope you learned a lot along the way. Before we get onto now quite an advanced thing and that is us going through the search filter. I just want to recap what we've done. Remember that this course is predominantly about events and understanding it in a very advanced way and how we use the evenings in this very simple example where we've used it in different ways. For example, let's look at this Delete button. Remember when we click Delete removes it from the DOM. But how do we do it? That's right. We listened to for the Contiki veto on that particular element. And then we used easing delegation, didn't we? Because we listened for that click event, not on each single Latin. We listened to it on the UL tag. And then of course, when that event bubbled up to the UL tag, we could get the target, aka wood can figure out which button was clicked within found in the parent element being the LI tag. And then of course we just remove that from the DOM. Does that kinda make SSD? And then what happened with the edX fall? What did we do there? Well, in that instance, we listened for the, not the click event because we know in either a button or an input, this kinda kicked by user in a form, a submit event is fired. So they fall. We listened for the submit event on the form itself. And it's been really epic because once that's submitted, angels fired within created a new element on the fly. We edit its losses dynamically using the class list API, and then we edit that to our list. So that's why a fleet or OT chicken. And we click Add. It gets edited to the DOM and dynamically. And of course we had to prevent the default behavior of a form submission again, didn't we? We had to use proving to default. And then we've just covered this list checkbox. And again, we did not listen to a click event. We done listened for a submit event. We listened for the change event because a tick box has a change of index file every time they change, state goes on and on. And yeah, there wasn't really a need for even delegation. We just listened for that veins on the actual checkbox itself. And of course, when a check box is checked, we grabbed it does. And we staked its display property to nano system. Very fun. And you can see we've been listening to different events the entire way through. And this is why I chose this example, because it goes through a lot of different types. And you can see kind of how logical each one is. It makes a lot of scenes when you intuitively understand what's going on. Now let's talk about this. Search items. When they use a starts typing in a search item, we want to and need to slay those items in this list below. Again, we're not going to be listening for a click event because the user doesn't have click anything yet. What are we going to be listening for? When in this instance we're going to be listening for the key event. For example, if the user presses him on the keyboard, soon as they lift up their finger, we want our function to search through all items and I'll grocery lists that have this character, Amy. If the username talks I, L, K, for example, we want to then grab that entire text block, the whole word mole. And we want to search through that, through out our lists. So this is just going to be another cooler V2 listen, fall. And as you'll see, it's not that difficult. You just approach it step-by-step. I heard about sign to make sense. If it doesn't don't worry, we're going to go through it together. And as you'll see, we're going to be taking it step by step. The one thing I do want to maintain those. We're going to be dealing with the rays. We're going to be dealing with methods on those erase Black index off. And we're also going to be looping through arrays and using the foreach method. If you're a bit confused about how JavaScript works, please check out my complete JavaScript grandmaster course or anything, that's cool. It's a fun course as well. And I go through exactly what JavaScript means in that course. So if you've been confused, chickened out a few, understand these things. So at a high level anyway, don't worry, I'm sure you'll be able to follow along. But then must blubber, blubber. Let's get into it and I'll see you in the next lecture. Hello. 16. How to access the input field and its value: Okay. I've just got a haircut. I feel fresh, I feel good. And let's get into the search items. It's very, very cool. And again, that how do we do it and where do we start? Well, firstly, you can see we've got this input box and we know from our code that we've read this in a form. So the very first thing we need to do is we need to grab this form. If we get our code and we in our index file at the moment, we can see that we've read this entire input field into a fall. We've given that form, an ID of search item will soar far so good. But how do we grab this form? There are few ways that's got our browser. Let's just go to the console. Here we go. It's clear it, how do we grab this whole zoom in a bit so you can see, like I mentioned, there are few ways Let's start playing around with it. Let's just say lead form equals document.getElementByID. And what did we call it search item. Let's see if that works and let's console log this form out. So yes, we do get the form that we open it up. We need the input directly. So maybe what we need to do the venous access the form. And then of course we can do a query selector. And the query selector is, we can get the input. Would that work? And there we go. So that's one way we can get the form. I can mention the many other ways if we go to our code or actually we don't even have to go to our code. We can just get this element inspector and look at those form. We haven't given us an ID. So what we could do in our code as we could go in here, we can give this an ID of search item. Save that we can go back to our browser, clear the console. And let's define now form equals document, get element by ID. And the ID we gave it was search item. So they could be another way. We loved that out. And we get the input bus. They are many ways to skin a cat, right? Let's refresh this. Let's clear the console. Let's go to our code and let's get rid of this ID. I just want to show you another way. And we're going to be using the sway an opcode. What we're gonna do is we're going to define a variable called form. And remember there was that form's property in our document. And we can use that to access forms. So if we access our document and we access this property called forms, what does that give us? Let gives us all the forms in our entire page, right? And we've only got two. We've got the search atoms form and we've also got this form regular way the user can decide what they want to add to the list. So we want to deal with this first formed ugly. So one way to exit form would be to access our forms, HTMLCollection. And then again, there are a few ways to do it. We can either access the first item in the array, all the form with an ID of search item. It's another way to do it. And then we can of course access our query selector. And we want to get the input box. And we hover over that and we get to what we want by point through all of this is just to give you an intuitive feel as to how many different ways there are to do something as a developer. So it just depends on your style and what you feel most comfortable with. Okay, was that all out the way? Let's begin. The first step is we have to grab that input box don't week because we need to grab that takes the user's typing in there. So let's start coding now. Let's go to our app file. The last thing we did was hide items and let's just copy that. And now we want to search for items. And as I mentioned, the first thing I want us to do is I want us to grab that search input box. So let's define a constant now because this is never going to change, we're always going to only references one search input box. Let's call it search. And we know, by the way, just before I continue the reason I put capitals, they just convention when you're defining a constant, variable that whenever change, in other words, to put it in caps. So when we see it in our code later on, we know it's a constant. So let's grab this box. The first thing we can do is we can access our document and then access that form's property. And as we just saw in the console, we know that we called it search items. That was the ID of our full HTML. And we look at that form. We know it has an ID of search item. That's exactly why I'm doing it. Yeah, it's not item to item. So luckily I checked then our neck we want to, of course x is our query select API. And we want the input. Okay, All as well. In good, We have our input. What is the next step? Well, every time the user presses down the key and lifts up that key, we want to listen for that key event. Let's try it. It's not a click event. Yeah, the user's not submitting anything that uses just literally typing text. So what we wanna do now is we want to add event listener. So we grab our constant and we access the add event listener method. And here we want to listen for the key and the list. Just define our hand directly in here and we want to access this event object. As you'll see, this just use error syntax and our meat of the code goes within these curly braces. Nothing new. You know who this already. And just to make sure the keyup event is working, Let's just console log. It works to the screen. So let's go to our console, or sorry, let's go to our browser. Let's go to the console. And let's go into here. And now when I press a key, call it Space bar, we get it worse. Yeah. So we know we've registered a valid event within our input box, and I'll search input box. And every time the user clicks Aquino, we own literally true during that event and that handler is being executed. Ufo, I love this stuff, so cool. Okay, so let's go back to our code and let's get rid of this console. What is the next step now? Will the next step is we want to grab the actual input takes itself. Don't we? Just say, yeah, let's grab the user's text. And how do we do that? Well, it's very easy and to prove it to you, let's define a variable called text. And we can access our event object, that keyup event object. We can then access the target being natural key retinas, and we want to get its value. And if we just console log text, we should see it. Tom browser. Let's go down console. Console and miss just taught the letter a. So what I'm gonna do, We got kids console log to the screen, B, C, D. That's cool, right? And you can start beginning to see how we can access the stakes and novelty. Now we need to start comparing this to what's in our list of items to buy. But this is something here. I want to show you. If we type a capital D and an OG. It is case-sensitive, isn't it? We are actually getting a capital. So if you look in our attempts to buy lists on the page right now and we look at milk, we see it as a capital M. So if the user types a mile, okay. Let me just do this again. For the space. If the use of time smoke without a capital M, not going to be exactly equal to the capital envelopes at all. If the user types Koch, it's not going to exactly match the coke below that all lowercase. How do we deal with this problem? Well, actually it's simpler than you may think. Well, we have to do is make sure whatever it takes the user types, we want to convert it to lowercase. We want the search to be case insensitive. It doesn't matter where the user types of capital or lowercase. It should still look at the actual just word itself. So how do we do that? Well, it's very simple. Let's get rid of this console. I'll comment. Let's just say let's grab the user's takes and convert it to lower case by using JavaScripts to lowercase method. And it is very simple to use. We grab that takes the user's typed and natively to us straight out of the box is the two lowercase method provided to us by JavaScript. And if we console log lists one more time, sorry, I know we're going slow, but it's so important for you to understand this. Let's go ahead, Kayla console. And it's time MLK capitals. But you can see that we've converted all the characters to lowercase. This is awesome. I'll be having fun learning a ton. I want to stop here and I want us to talk about this toLowerCase method in a bit more detail. I know most lecturers will just continue right now, but I want you to understand exactly how it works and how our code works because it'll just help you become an awesome program. And so I just want us to pause right now and a oneness to discuss in a little bit more detail what this to lowercase method does and how it works. See you now. 17. Introduction to lowerCase: Crew, I guess what I just did this morning from our very first time, I did a yoga session and I'm shattered within this thing called the thing was called the Bird of Paradise. Fires blew my mind. Anyway, I'm in a lot of pain right now. But that should not stop us learning about JavaScript. And very specifically, I want us to learn about this method called to lower case. It sounds simple, but I just want you to understand exactly how it works because it's a very, very useful method provided to us straight out of the box by JavaScript. Now although it doesn't take any arguments, it is a super practical method. Why? Well, in many cases, you want your text or you want your strings to be case insensitive. Aka, you don't want capitals to a fake, whatever it is you're doing. For example, if you've got a list and a user types in a certain word, sometimes you want to see or you want to compare whether that word is in the list and you don't want capitals to ruin your formulas. In that case, why not just convert everything to lowercase? And in order to do that is we use the two lowercase emitted. So without further ado, let's jump into the presentation cookie and it still talking about the two lowercase method, enjoying. So what exactly is this toLowerCase method? Very simplistically all it does and it's pretty intuitive that converts your taste all into lowercase. In other words, the toLowerCase method returns the calling string, the string you've called it on. It converts that strings value all into lowercase. And I could just stop. Yeah, but I want you to know just a little bit more about this toLowerCase method. Firstly, it is a JavaScript function is provided to us by the JavaScript language. Seeking does not take any arguments, but don't let that fool you. It's still a very powerful method. And what I really want you to understand, yeah. And I want to pause on this point. The two lowercase method does not alter the original string. Instead, it generates the new modified string with all lowercase letters. Let me hop over to the console and me show you what I mean by this. Okay, So we know that the lowercase method does not affect the original string. I just want to prove it to you now. How am I going to do there? Well, let's create a string and let's just call it symptoms original. And is just say, we make that equal to crazy frogs or just, well, you know, crazy. How's it? And then let's create a new sentence. So the score that sentence lower. And yeah, I want us to access our original sentence. And this is what I want us to do next. I want us to access the two lower case method. And what's really awesome is that because we have a string and this sentence original is taut string, we automatically have access to JavaScripts to lowercase method. How do we access it when we exit with the dot notation? And of course, we can just start typing to lowercase and our IDE already picks up this method. So I can just click Tab open and closed parentheses to execute that method. And we are done and dusted. Now I can open up a browser and we can console log things to the screen. But I want to use something called cloaca. If we go to my extinctions tibia, and I just start typing quicker. We can see I've installed Aka in my IDE. It's really, really useful, so highly recommended. And all we need to do to run cooker is we literally call up the search box here. I push Control Shift P on my keyboard, and I want to start cloaca on the current file. It's just an extra plug-in and it allows us to execute JavaScript in real time in this file. It does. So here we go and all I wanna do is I want to log out the sentence original. And you can see the blue takes data. That's what's being consoled, legs, what's being returned to us by JavaScript and the Walker working, it just allows us to see how a fix in real-time for you very useful. Now, what do you think's going to happen when we return sentence lower? Well, I'm sure you probably already guessed us. Well, it's going to happen is we get exactly the same thing that all in lowercase. But what I've managed to prove to you is that our sentence original, that original sentence that we wrote together is unchanged. This toLowerCase method does not alter that original string. Okay, kinda making saints are observed. Let's continue. Okay, cool. So we've seen that it doesn't alter the original string. In fact, it generates a new one. But at this point in time, you still may be scratching your head. You may be going cool and noise provided by JavaScript. But we exactly does it come from. And onset to this is drumroll, please. It comes from the string object in JavaScript. And just remember that the string object is a global object for all strings. Again, let me hop over to the console in images show you where we can find it. Let's pick up exactly where we left off. Remember we wrote the sentence, we converted it to lowercase. Now I just want to prove to you that it has to be on a string. So one way to do it is we use the type of operator. So that's console log. And let's go type of and we want to look at what our original type is. And we can see what's returned to us by JavaScript is a string type. So we know our symptoms. Original variable is a string, and that is why we could execute this toLowerCase method. But you probably wondering, way is this exact method from an howdy see it? Well, it is very, very simple. Let's just go and open up a browser. So I'm just going to right-click on my Chrome Mu Cognito. And let's go to the console cookie. Let's go open up the console. Me zoom in so you can see what's going on. And it's very simple all to do is I want to console and do, by the way, is different to console log it gives us whatever we want to do it. But in JSON like format, in a tree-like format. And of course what I wanna do is I want to get JavaScript string object, because remember we know our original sentence is a string. So we know it's of type string. And if we open up string, and again, He's not much on here. We've got links, we've got name. But what we want to look at is this prototype because it inherits a lot of methods and properties. And because it's a string, it's prototype as a string here, we get lots of methods and properties from the string type. And if we scroll down, we should find two lowercase. And there it is. We've actually found it, you know, settling where it comes from. I hope it's making sense. We're not quite done. So let's jump back into the lecture. We've seen that it comes from the string object and a high case, it's quite intuitive that only works with strings. If you try parse in other data types, such as null undefined, we even a number. The JavaScript parser will throw you an error. In fact, you'll get a type error. So just make sure you take the type before parsing it into this function. Otherwise your app will crash. What am I talking about? Well, let me jump over to the console once again and leads thought coding together just to see this in action. One last thing before we finish this off, remember we saying that it can only be used on a string type? Sorry, Let's scroll up. We've actually just finished off. We'll be picking up exactly where we left off the console. So what does this mean? Well, this means if we have a number, let's just say 85 and we try and access to lowercase. What do you think's going to happen? Well, we get a syntax error, invalid or unexpected token. We can't call it toLowerCase method on a number. Makes sense. What about kinda of an array? So say we've got a moraine just with one item and are called Bu. And we try access to lowercase is economic. Know we get a type error. We cannot call this function on that. What about undefined? Well, if we try and access again to lowercase on undefined, again, it's not going to work. And what about now if we try null? I think that'll work. So this is the point I'm trying to make. We can only access to toLowerCase method on strings. I hope you're getting fun and argued any a lot. So this is just a little bit more detail on toLowerCase method that you might have not known previously. Keep going, stay motivated. And I'll see you in the next lecture. 18. Accessing and looping over our tags: All right, let's jump back into our project. I hope you're learning a lot. We've already seen that toLowerCase method. It's awesome. Rots. And now I want us to continue with our search. Box is kind of comparing the user takes that their right to allow items to buy. And we filtering for only those things that the user typed in this checkbox will this input box, Sorry, so we are way at the moment. Remember we've got this input box here with search items. We've managed to find it by using the identifier's, the DOM access methods. And what we've also done as we know on this input box is a useful property called value, which allows us to extract what the user has typed in to that text input box. Named because it's a string, because it's a takes. We know we can use JavaScript to lowercase method to convert whatever the user typed all to lowercase. That's exactly where we up to now. So I guess the next step is, let's jump into the code and let's keep going. So shall we go? We've literally grabbed that uses value. Remember from the vein target, which is that input box it as a useful property called value. We extract the user's value, which is a string, it's a taste. And then because of that, we access JavaScripts to lowercase methods are right now we know we're getting whatever the user has typed in lowercase. Cool, Let's delete the console. What is the next step? We'll now what I want us to do is I want us to grab all the LI tags. Because what we're going to have to do is we're going to have to compare whatever the user typed to each item in the list. It's grab each LI tag. So the first step is I wanted to find our grocery list. And that's, of course we've done this plenty of times before. We can just use querySelector here. Many ways to skin the cat when it comes to programming. And what do I want to grab? Will I want to grab our grocery list ID, and I want to grab all the UL elements. So for Godot index page here, just to show you what we're doing. We scrolling down to section three rotten. We can see we rent everything within this div with an ID of grocery list. I want to grab this UL tag because this UL element contains all allies beneath it. It's all we've done here. So we've got this grocery list. And now I want to grab each list, element and neck we can say is lit groceries because we know it's going to be plural is more than one LI tag. And we know that that's going to be the grocery list. And then we can access the get elements by tag name method. Again, this is provided to us by the DOM API. It's not from JavaScript. There we go. Now we've got all our LI tags. So far, so good. But you'd agree with me right now, we've got all the LI tags. We need a way to loop through all of those and compete. They taste to what the user's typed. And if you remember from part 1 of the series that getElementsByTagName returns to us an HTMLCollection. And this HTMLCollection, although it looks like an array and seals like an array, it's not quite an array. And because it's not quite an array, we don't have many Array Methods. And one of the methods I want to use in this specific exercise is the full each method. In order to use the forEach method, we need a way to convert the HTMLCollection into an array. Zach kinda making seams. Because if we can do that, we can use this forEach method. How do we do that? Well, one way is to access what's known as the array from method. So if we define this, just say here, to convert. Well, let's just say, let's convert the groceries to an array so we can access the full each method. One way to do it is to define a new variable. Now in JavaScript is define it as grocery, groceries array. And all we need to do this axis JavaScript's array. And the array, we have many properties and methods. One of them was called from. And I want to create an array from the groceries object or the groceries variable that we've just created. This is a lot to take in and before I move on, I want to stop again. I want to explain to you what this array from method is all about. We've put in one argument here, but it does take more. So let's pause. Let's take a break. Let's jump into another lecture. And I just want us to quickly look at this array from method in more detail. Hope you're having fun, hopefully staying empty. Scene up. 19. Introduction to Array.from(): I hope you're having a lot of fun in this course. As much as I am. I love putting these things together and I left teaching what I've kind of learned over many, many years. Anyway, the next thing I wanted us to discuss very briefly is another very useful bed, a little bit advanced function in JavaScript called array from. And what does this method do? What the very, very, very basic level, all it does is it creates an array, but not from an array, because they would be pointless. It creates an array from two types of different things. Creates an array from one and array-like object. And all I mean by data set, it's an object that has a length property. And two, you can create an array from an iterable object, things like mental state. Anyway, this is more important right now. The important thing to understand is that the array from method takes something and it converts into an array. And why do we want to do that? Well, if we can create it into something that's like an array, we can have certain methods and properties available to us that we can use on that newly created object, a whole state energy created array. So say kinda making sense. Don't worry if it's not the first thing I want you to understand what the array from method is, that it is on the array itself. What I mean by this, let me jump over to the console and quickly show you. I've got my console open. Yeah, and the only thing I want to show you is way to find this from MTD. And as I mentioned, it's on the array object within JavaScript itself. How can I prove that two will firstly, let's just console out the array. And if we do that, yes, the array provided to us by JavaScript. We open that up. We scroll down and there it is. The, is the from makes it pretty simple, right? So there we go. We know that the array from method as found on JavaScript's array object kinda makes sense, right? But we are not finished yet. Let me jump into the lecture and let's talk about this method in a little bit more detail. 20. How does Array.from() work?: So what exactly is the sub-array from method all about? We'll very intuitively injury basically, all it does is it creates an array from an array-like object, own iterable object. But I'm looking to get into that now. Similarly, just like the toLowerCase method, the array from method is a pure JavaScript function. In fact, it was introduced as part of ES6. Es6, by the way, was just a major overhaul and upgrade to t0 is five and you probably not scratching your head, but you may have already forgotten where does it come from. And we just saw it comes from the array object itself. But these are all things that you already know. So how does it work? Well, it's very easy to access this method. We start off by accessing JavaScript's array object within xi's, the from method. And the front method takes an argument and its argument is an array-like object. But before we talk more about what it does, they top over to the coding editor and leads towards seeing how it works in action. Before we start getting into more detail on the array from method, I just want you to understand how it works. So remember what I said. It has to be an array-like object on iterable object in order for us to use this array from method. So how does it work? Well, let's define an array-like object. And let's just be very, very simple here. Let's just say what's the case. So we know it's a string in this case. How does the array from look like? Well, firstly, I just want to say up, up, co-occur. Open. Kauket just allows us to run JavaScript in real-time within our text editor. So we don't have to keep jumping to the browser just a lot quicker to kind of rise up your code. It's really handy. Anyway. How does it work? Well, let's console log something and let's access JavaScript array object on name. We know there's a method called from. And we wanting to pass in our array like and as you can see, it takes our array-like object are worth and it converts it into an array, which is really, really awesome. And you can see here, our array just consists of each liter in x-ray. And it's, well, it's done. The top back to the lecture. Cool is they're making scenes. We looked at a very simple example, but just bear in mind that what does this array-like object mean? It just means that the object needs to have a length property and indexed elements. What do I mean by this? Well, let's hop over to the console again in this just look at exactly what I'm talking about. Chloride. So we've looked at this example here, but how and why does it work? Remember, the array from method will not work on everything as the description kinda season, as we've spoken about, that only works on array like objects. And what that means is that the object needs to have a length property and D4 index elements. What do I mean? Well, it's got to a console. So let me right-click on Google Chrome here, new incognito mode. And we go to a console and kind of making scenes. Can you see the x? And remember what we say to, let's just define dog array-like object as wolf. And we know that the array from method works on us. We just saw an example of that. But why? Well, to show you, let's console do out this array object and I want to look at its proton. And if we load this out, we know it is of type string. And if we open up the string method, What's awesome is that we've got this link property. That's what I mean by an array-like object ID has to have this linked properly in order for the array from method to work. So there you go. Hope is making scenes. Let's jump back into the lecture or odd. So I hope it's starting to kind of make more sense to you. And remember what I said earlier that it does take more than one argument. Actually, it can take up to three arguments, can take a map, and it can take what you want this to refer to. Bear in mind, these arguments are optional. We don't have to put them into this function at all. And a lot of people actually combine the, this optional argument into that map function itself. So oftentimes you'll just see two arguments in the array from method. Anyway, I don't want to go into too much detail about this. I can quickly show you what the map is all about. So in the top over to the text editor again. And let's have a look at how that would work. Last but not least, let's see how the second argument to the array from function works. What is it all about? Well, let's delete everything we had on our screen previously. And this define an array is just say that our array has a dog and you guessed it. A cat. Freeway, simple. Now what I wanna do is I want to define a handler function. I want to take everything inside this array and I want to log something out to the screen. So that's used JavaScript function keyword. Let's call it handler. We can call it whatever we want. The hand is going to take an animal in each case. And all I wanna do is I just want to return statement and I'm going to be using template literals here. And what I'm going to say is I'm going to say a animal willing to walk, walking so that he go. That's nothing too profound. It is a very, very simple function. Now what do I want to do? Well, let's console log. Let's access the array from method. We know we want to access this array type. A hand, as you can see here. If we just keep it with one argument, literally does not make sense for us to do so because it is an array already. So there's no point of creating an array from an array. But it's the second argument that map that I want us to understand. And the second argument is what we've defined as the hand the function. And then we go to what's returned to us. On the screen is a dog walking and account when walking. This is a new array. Now, it's created a brand new array and it's taken, each item in the original array, costs it through our map function, and it's returned to us a new array. Because they kinda makes sense. And that's what it's all about. Hope you're having fun. And I think by now you kind of have a good intuitive feel for how this works. So well done. I'm very, very impressed. There we go. I hope it's starting to make a bit more scenes. And don't worry, as you come across these in your coding career, you'll start using it more and more and it will become a lot more intuitive. I just wanted you to know about the array from method because it is an a can be extremely handy, which brings me on to the next topic. And that is why you need to know about the array from method. Why did I even discuss it in this course? We'll, sometimes we want to work with methods that are only available from the array object. For example, the for each method is only available on the array object. And in order to access that method, we sometimes have to convert what we working within our code into an array. Does that kinda make sense? And over and above this, the array from method is extremely useful. It allows you to do lots of other things like cloning arrays, removing duplicates, even filling an array, et cetera, et cetera. There are a lot of things you can do. And most definitely you are going to be using less when working with DOM collections. And it brings me back to that first, sometimes we want to use methods that are only available on the array object. So when you're working with the DOM collection, for example, and HTMLCollection, sometimes we need to convert that into an array object in order to access methods we want. So I guess what I'm trying to say is that it comes in handy when you encounter and work with array-like objects. It is providing a little bit more clarity on what this method does. But don't worry, we're only just getting into it. So don't panic if you don't fully understand. Uh, th, it'll come through time. Hope you enjoyed this cool so far Huike, staying motivated and I'll see you in the next lecture. 21. Using forEach to loop through our array: Okay, So this is exactly where we left off. We've created our groceries array by using JavaScripts array from method. What do we wanna do next? Well, we want to loop through this array, but remember if we go to our index file here, we literally have each LI elements as one item in an array and then you go into debt item and of course it has to span. So this just look at the first item in our array. It's going to be this LI elements. And what do we want? Well, we want the first element child, right? We only want to work with this item, this MOOC word here. Scenes and women, Part 1 of this course, we discussed various traversing methods. We discussed first child, first element child, remember all these things? Yeah, We wanna make sure it's an element. We don't want to be returned to take snowed, for example. So we want to loop through each item in the array. But remember in each case we went to grab whatever item it is. We want to grab the first element child. And we want that takes content because we want to grab only those spans that have the actual text we wanting to compare. And again, we're going to have to convert all these tastes items into lowercase because we went to compete apples with apples. Let's go back to our app. And let's start coding this. Where do we start? Well, let's just have a comment Yes, and loop through each grocery item. That's what we wanna do. So how do we do this? How do we loop through each grocery item will firstly, we need to grab our array. And now is where the magic happens. We can access this for each method. And the reason we can access it is because we use this array from method. We've converted our groceries into an array, say making saints. And if you don't quite know how the forEach method works, please check out my JavaScript's complete grandmaster course. Thank You. May know how it works. It's not quite intuitive. All it does is it loops through each item in the array. And it gives us that item as a variable. And we can call it whatever we want. Let's just cool our item grocery. If we go to the index file, remain bad when we using the full each method, it's going to throw us back each LI tag. We've just called that grocery. It's all we've done it. And I'm just going to use the new arrow syntax. And this is really the heart of our code is going to belong. First thing I wanna do, remember we've got that Ally. I wanted to grab the first element child. So let's define a new variable. Let's call it a cursory name because this is what we want to loop through. And we know that's going to be the grocery that LI element. But now we want the first element child, don't we? And then in that child, we want to access its text content property. How awesome is this? Cool? I hope it's making sense. That's actually stop. Yeah, that's console log this to the screen just so we can make sure we do enroll properly. And it's hop over to our browser. Let's go to the console. Let's make that a bit bigger. Sclera it. Let's go into our search item and type a capital a. Wow, There we go. It's literally searched through all our items, milk, sugar and spice, something to drink, and pizza. I can tear it again. You can talk now, small a, and it's done exactly the same thing. How awesome is this? Man? I'm having a lot of fun. Let's go back to our code here. So we know we've successfully loop through all of our items and we're getting its text content. The next step is remember, we don't want capitals. If we got our browser here, we've got capital store. So if the user types mold, but with small aims, It's not going to match this MOOC with a capital. So how do we deal with that? Well, you already know this. We know that each grocery name is of type string. And because of that, we can access JavaScripts to lowercase method. So what we wanna do now is we want to convert all of our text into the lower case. Then we do that by accessing our grocery name, will actually let's create a new variable. Let's call it the grocery name. And that is our grocery name. And we can exit JavaScripts to lower case we did as I make scenes. So we're getting name. What's the next step? Well, the next step is we want to compare whether the user's takes me just go back yet to see, you know what I mean? We went to compete. Let's just delete the console and let me type in. What we want you to do is we want to compare if the user types MOOC. We want to search through all those tapes items below. We want to see if that MLK is any way below. And if it is, we want that one to show. And if it's not, we want everything else to disappear. That's what we want to do. So we need a way to compare. Hey, we looked at MLK string is anyway in those names below. And how do we do that? Well, I want to use another method in JavaScript called index off. Let me do a comment here now I can say now we can use index off to see if our text can be found within our grocery name. If nothing is found, a value of negative one is returned. And we can hide. The item. Is kinda making scenes. I know it might seem overwhelming. We've really gone through a lot in this exercise. I mean, we've spoken about the array from method, the two lowercase method, and now there's another one called index of. But trust me, it is going to help you so much in your wavelength Korea. So let's jump over to a new lecture before I move on. And I want you to understand the index of method and how it works. See you enough. 22. Introduction to indexOf(): Another very incredible function in JavaScript is known as the index of function. And what does it do? Well, at the very basic level that tells you if a given item can be found in an array or a string. The index of mxnet was added to the 260 seconds standard in the fifth edition. What that means is that it was just added on December third of 2009. So what I'm trying to say is you don't have to worry about browsers and not incorporating this method. Every browser today will allow you to use the index of method. Okay, great client, old browsers can accept a dog. What does it look like when we start using it? Well, firstly, you call the index of method by typing its words, It's keywords index off. A dean takes two arguments. The first argument is the search item and aka the item you want to search for. And the second argument is optional. It's the starting point of your search button More eight, we going to be seeing examples of this shortly. So the ego, that's kinda what it looks like, a high level. And as I mentioned, we're going to be looking at examples. But before we do, that is something very important you need to understand. And that is the indexOf method only exists for two daughter types in JavaScript. The first daughter top that it exists on erase. What is an array? In JavaScript and array as just a single variable that is used to store different elements. And bear in mind, the JavaScript array is a global object, meaning you can kind of access it from any way you like. But enough talk actually want to jump over to our text editor and I want to start coding a raise with you. And I want to start looking at this index of method, specifically on arrays. Let's jump over to the console and it's still playing around. 23. Using indexOf() with Arrays: Okay, so here we are. And I want us to start coding together, but I want us to go step-by-step, slowly, slowly catch a monkey. The first thing we mentioned is that this index of exists on to daughter types in JavaScript. And the first-order top we're looking at is the array. So let me prove it to you before we go further in our coding, I went to console log. All It's just console do out the array object. If we open this and we look at its prototype, there is a index of method. There we go. Can you see us? So now I've just proven to you that it does exist on the array, that global array object in JavaScript. That's where it comes from. All right, now let's go to our coding editor. I've just got a blank app.js file open here. And I'm running caucus. Caucus, very useful, by the way. Very useful. I keep saying it, but it is very good. Okay, The first thing I want to kind of get across to you is one as an array. Well, firstly, let's create an array. And we use that by the square brackets here. And I just want to say, I am the first element. I am the second element. And you guessed it, I am the third element, C. Here we go, We've created an array. We use those square brackets. And how do we access arrays? We'll first thing I want to mention is that JavaScript arrays or Sarah. What do I mean by that? I just mean that the first element of an array is always indexed at Sarah. And the last element can always be found at the index that's equal to the value of the array's length property minus 1. Let me show you what I mean. So let's console log our array. And remember how I said that it's 0 indexed x is the first item in the array. We type 0. I'm the first element. And of course we can do that for the next items, right? We can go 012 on the first and the second and the third element. That makes sense. And the other thing I want to mention is that every array has a length property. So if we console log out our array and we access this property called links, we know that our array has three items. So a very handy tip when it comes to coding. And I'm even going to come in here, we can always x's the last item in an array like this. And this is very, very useful. So please remember this. Before I'll type out the solution, just think about what it is we've just done. We know the array's length is three. And if you look at the console log just above, we know we've accessed the last item I using array and the index two. Because remember, JavaScript arrays are always index at 0. So we know the last item in the array is that array length, which is 3 minus 1, which gets us to two. So all I'm trying to say is to access the last item in the array, all we have to do is access our array. And now if you don't know what the link is, it's very handy to access the link property, which in this case is undefined because there is no fourth item in the array. So you always minus1. Does it make sense? I hope so. And herbicides get a more intuitive feel about how arrays work. The other thing I want to mention, let's just delete this man, hate deleting stuff sometimes. Have we spent so long to try and give me points across and I just deleted it's a bit sad, man up the chloride. But anyway, let's create a new array, 1, 2, and 3. The other thing I want to just mention with arrays that are quite peculiar is that you cannot use the dot notation to access items. This is an important point. So for example, if we console log our array and we try and get the first item, it's not going to let us do it. We actually get a syntax error. So just bear that in mind. And it's not, you know, there's nothing special about this. In fact, JavaScript properties that begin with a digit can never be referenced with documentation was always exist in using bracket notation. The nuance of JavaScript, Don't worry, okay, but you are probably wondering client, I don't want to learn about arrays. We are on the topic of index of n. You are 100 percent correct. I just wanted to kind of get you familiar with arrays before we jump into it. Okay? The point I wanna make with index falls is that it returns the first index at which a given element can be found in the array. If it doesn't exist in the array, negative one is returned. What do I mean? Well, let us define an array called animals. And it's got a warthogs that's got a giraffe. And it says got a buffalo. And it says it's got a line. How does it work? Well, let's look. Let's console log so we can actually see the result of what we producing. The first thing in order to access our index of is to access an array. And the array we go into access is our animals array. We want to now access the index of method which is inbuilt into all arrays. And let's search for talk. What would you expect to see? Where is warthogs located? That's right, It's located at index 0. Remember JavaScript arrays are always indexed at base Sarah. So if we try and find warthogs, we can see returned to us is 0. That makes the most sense. And I'm just going to duplicate this code. Let's now search for Buffalo. What do you think the index numbers that will be? Let's rise. I would expect number two. Let's see if this right. Now what I wanna do is, let's search for dog. What do you think's going to happen with dogs? Well, as I mentioned, if it's not found, negative one is returned to us. Does it make sense? So just remember, negative one means it's not found. And the last thing I want to mention just before we move on is that the index of method compares elements in your array using strict equality. In other words, using the same method used by the triple equal sign. Just remember that. Cool. Okay, Clyde had this is all well and good, but we are only using one argument in this index of array. I want to use both and I understand it in more detail. Well, it is good to hear my fellow student. Let's delete all these consoles. Let's now look for this war-torn animal but leads to tell our index of method we only want to start in the second item in our array, a from index one onwards. What do you think will happen then? So let's go to our second argument in this method. And let's say we wanted to start from the second item in the array. Well, of course it doesn't exist because we know we're looking from giraffe onwards and there is no water. They look at another example that's now look at Mozilla. And its tell our index of method to search from say, the third item in the array number two. And in this case, it does return our index number. So it's very, very cool and we know it does exist. This is kind of how a second argument works. Zack, I making sense. I hope so we've worked a lot with arrays, but now I'm going to jump back to the leak channel. One is to look at the second-order type where we can start using this index Auth method. 24. Using indexOf() with Strings: I'm having tons of fun. Hope you learned a lot. Let's just go back to where we started. Remember we said it only exists on two-dollar types. This index of method, the first-order top we've looked at as arrays. What do you think the second-order type is? Well, it is unrolled, please. So this one slide you looking at here is a very important one, gives you a very high-level overview of this index of method. We've looked at a ton of examples with arrays. I want to finish off this lecture now by looking at examples with us working with strings. It start seeing how that works. It's going to be a lot of fun. Trust me. Hey, wow, this is really cool. We've just done arrays, but now I want us to get onto strings. How does that work? And it's really exciting, you'll see now. So let's jump into it. Cool. Okay, where do we start? The first thing I wanna show you here is if we go to our console, remove the console, the array. Let's just actually clear the console and let's do the same with the strength. Pretty straightforward. We have been a string. We look at its prototype. We scroll down and they, my dear students is index of this is the second daughter talking JavaScript tech gives us access to this awesome useful method. Say you go, I just wanted to prove to you that it is found on this daughter type as well. If we go back to our coding editor, let's start looking at this in action. So let's delete our Air Asia. We've looked at arrays. It's now creates, I don't know, a sentence. And it's just say, hello, world. The universe. Often know what's wrong with my topic today. Welcomes you. These are sentence we know this is of type string. How do we know that? All of its console log type of sentence. And it's pretty obvious, but we know it's a string. Because we know it's a string. We know we have access to the index of method. So let's define a variable called AIM, that's excess sentence. And let's search for something. Let's search for the word. Welcome. Let's see as deaths in here. Why do you think that would be console log out to the screen and we get a number 26. Why 26? Let's start counting together. We know this is index 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25. And of course 26 is where welcomes begins. Very, very useful method is define a constant call sentence again. And let's just say, Hey, are you learning a lot in this course? I hope, sir. Keep learning. So let's start using this index off. Let's start getting more intuitive field. Let's define a new JavaScript variable called search word. This is what we want to search for. And let's say we want to search for the word learning. We can see firstly, straight off the bat, we have two words, don't we? Learning and learning. So just bear that in mind. So this define a new variable called first time. And let's access our sentence constant. That's access this index of method. And let's search, will search word. Let's console log this first timeout. It's aids. And we know it's eight because it's the eighth character from the very beginning is this first learning word. But now, how do we access the second learning word? How would we do that? Well, let me give you a clue. Let's utilize the second argument in the index OLS method. So all we have to do is define a new variable called second time. Let's access our sentence. Just realized a spotless incorrectly sentence. So they would go, Let's excess in Nick's off. What we wanna do now is we want to search for our search word, don't we? This time, we want to utilize the starting point. And where do we want to start with this thought after it's founded? First item, which is the first time plus one. So now we know it's going to search through our array, but only starting after we've passed the first learning word. Cu, hope it's making sense. If we console log this out, we get to 44, which is exactly what we'd expect. Using index or this way can be very useful in your code and you can do a lot of things with it. I don't know. Let's give you an example. Let's define a variable called Solution 1. Let's use template literals and let's say the index of the first. And we'll use the variable search word, word from the beginning. Is and it will go first time. And if we return this to the screen, we literally get console log to us. The index of the first learning word from the beginning is eight. How awesome is this? We combining a lot of things that we combining template literals, combining the dollar sign curly braces to incorporate expressions and variables with in our template literal. It's very, very cool and it's going to help you a lot along the way. Of course, we can do the same full solution to solution to what did we just copy this instead of doing it all again. We know that this is the second search we had from the beginning is not first time. Second time. And if we return that, we get exactly the same thing. But now we are referencing the second learning word. Cool. Sorry, I know sometimes I get carried away and I'm maybe going a bit more advanced than you need to know right now. But trust me, this will help you in your coding Korea. And I want you to become a master at all the stuff. Hope it's starting to make sense. The other thing I want to show you is let's delete everything. I want to show you that index of is case-sensitive. So what I mean, we'll, if we have a word and the word is rate dog. If we now console log and we access our word string, we access the index of method and we search for dog. We know that it exists. Again, this would make sense, but what about if we did the same? But yeah, we went through look for the word red. As you can see, it's case-sensitive. We've returned negative one, AKA it does not exist. If we change the small r to big R, it does exist. In fact, the very first item in our array. I hope you all are learning at time. Last thing I want to get across is that 0 does not evaluate to true and negative one doesn't evaluate to false. Remember if we've got a small r, It's a negative ones. It doesn't coerce to false. It's kind of a weird nuance when it comes to this method. So how do I prove this to you? Will let me prove it to you by using JavaScripts, IF statement. And what I want to compete as wanna say, if it's a word, rot, contains, say rate. If that evaluates to false, then let's execute this code that say console log. This is the correct onset. Onset. Else console log, this is the wrong onset. And now you'll see a problem. You'll see that because of cloaca, what is returned to us is the wrong answer. We know that the small r should not exist in our string because it only has the capital R rating. So why are we hitting the second console log in our if statement? The reason is, is that the negative one does not evaluate to false. A full wheel hitting this onset and it's the wrong answer. Therefore, the point I'm trying to make as at when checking if a specific string exists within another string. The correct way is to use negative one. For example, if we replace false with negative one, why is this not working? Minus1 d we go, we get the correct answer this time. Very, very important points I've just shared with you. Please keep that in mind. So z you have it. Loop, just use index all for the rays. We just used it with strings. We've discussed various ways you can use a GUI, know that as K scenes that have, we know that you can't coerce at negative 12 false. And these are pretty advanced topics. So don't take it for granted, celebrate the small wins. But anyway, let's move on and I'll see you in the next lecture. 25. Finishing off our search text functionality: Wow, we have come an incredibly far away while Diana's seriously hand, I know sometimes it can be very daunting to go through all these things because you learning new things all the time. But stick with me. You almost, almost done. You've learned a ton of useful information. So we're always, let me scroll up here. Remember what we've done? We've listened for the TIP veins in net input text box. Because it's an input box, we get a value property to grab that value that uses typed within converted to lowercase. First step. Secondly, we're grabbing our groceries list. In fact, it's always ally elements. Remember, within one and loop through them. In order to do that, we had to convert netlist into an array. We use JavaScript's array from method, because it's an array. Now we can access this for each method. You're looping through each LI element. We then want to look for the first item in that element remained. But if we get our index file, this LI element is not enough. We want that first child elements within the ally because that will give us the actual grocery item, say mixins. We then convert each one of those items to lowercase. And now finally, we want to compare whether the input takes that the user's typed matches each grocery item. And in order to do that, we're going to use the index of method. We know how it works. And we're going to be using JavaScripts, IF statement, and what do we wanna taste? Well, we want to test whether this grocery name all in lowercase, whether the takes, the user has typed, can be found within it. And that takes the user typed, we put into a variable called text. We scroll up. Remember, to find a JavaScript variable called text, and that is what the user's typed. So all we wanting to compare these, we wanting to find whether that string exists within each grocery name. And remember we can't use the word false, we have to use negative one. So in that case, if it does not exist, if the user types Coke, for example, and we're looking at MLK, we know MLK does not contain the taste Kirk and it's going to return negative one if that is the case. What do we want him to do? Will we wanting to grab that entire ally element onto me, which we put into a variable called grocery. Remember in R for each function, we looping through those allies and we put each one in a variable called grocery. And all we have to do is access at style property. And we want to affect its display property. And we're going to change that to none. Set making scenes. Else. If we know it exists, we know we want to access our grocery style display property. And we want that to be shown as a block element. And this Medea students should work. So if we go to our browser and let's type in MLK, all lowercase. And look at that. Senior seawater. This is awesome. Let's try another one. Let's try cook. Something to drink. It doesn't make sense. Let's go to our code quickly. Index file. It should be something to drink. Save that, go here. And we are literally done. How awesome is this? Seriously? You got to celebrate these things. You've done an incredible amount. Look at this whole example. Look at all the reasons we've listened to reacting to the events featuring items from the DOM. We've used JavaScript methods in both methods, native objects. We've used all these things to interact with the DOM. And this is a very simple example. We haven't even got a web server in the background. We've all done this on front end. We've delayed or we've stopped, we prevented default behaviors from happening. There's no refreezes going on yet. All happening live. We can delete items. We can add items to the list such as a dog. And then we can search for items that search for a dog. And we made sure that case insensitive. If we delete data, everything else comes up. We can also have pied I'll list on an oath how Olson we've come such a long way. I hope you have had a ton of fun in this course. And just remember, we don't have to stop yet. We can make little improvements to this, which maybe I'll include a few bonus stages, just making it a bit bigger. For example, when a user clicks Ed for a dog, we don't want to take still displayed in this input box. Do we can even add maybe tabs below way the user can have a bit of information. So had they have few improvements we can do to this. But right now you've come an incredibly long way, a 12 to just jump up and down with excitement. Walden, and I'll see you in a few bonus lectures. Hello. 26. Clear the input text box: We're on to the next thing I want us to do is I want you to just find out whether you can by yourself. Clear that takes that the user's typed into that input box when they click the button edit. So for example, if the user types dog and click Add, we don't want that dog stall display doing how we go about removing it. Pause the video here and in five seconds, I'll show you the solution. It is very, very easy to give it a go. I hope, sir. So what are we wanting to do is when the user has clicked a button, when that event has been fired within one, a clear that text input. So we have to do is get our code. Here's our HTML, that's good, our JavaScript file. And we've gone to the section here called Add Items. And remember, when that submit event is fired at the very end. After we've grabbed the users taste. All we wanna do now is clear input bus. And in order to that, all we have to do is access our entire form. Within that form, we want to access that input box, don't we? So that's use of query selector. We want to search for the input box itself. Then we want to access its value. And it's just sit that value to null. You go to agree with me, come on. That is very simple. If we go back to our browser and we talked dog, we click Add the rigor. It's literally cleared it from that input box. Very simple. So you can really see how we are improving on our existing card-based. And this is how a lot of web apps work. You know, a lot of people go on to a site and it's so complicated. They think that that's how it was at the very beginning. It isn't mostly it's done in a step-by-step piecemeal manner. Kinda what we're doing here. Just tackle each piece as it comes out where the next thing I want to look at is I want to add tabs at the bottom. Just because I think it's fun and I think it might be an oscillating curve and a nice little feather to have in your head. See you in the next lecture. 27. Improving our form - what I want you to build: Man, we have come an incredibly long way. Firstly, I just want to say Walden, I'm really, really impressed and, and so the age of stuck with me. What all we going to be doing now? Will I want us to add these tabs at the bottom of our shot, the Hollich list. And this is going to be super practical for you in your own web apps that's going to allow you to dynamic each show and hide panels on the fly by using pure DOM and JavaScript to manipulation that is really, really useful. So what did these tabs do? Well, firstly, when the user hovers over them, I want to style to change. You should know how to do that. Now, when we click on one tab, we get this question, what do you call a fake noodle? Firstly, you can notice that the answer's not immediately shown. We've wrapped it in a button. And of course, we are going to be listening for a click event on this button. And when the button is clicked, we want the answer to display. So the user clicks a button and we get the onset and imposter. I know, I know that a such a dad joke, but luckily for me I'm not a comedian. So they regarded as the first tab. Of course, if you click, oh, actually before I click on the next step, do you notice that the food joke tab is now a darker gray? So somehow we need to apply style to whatever hating a selected. Now if we click on the other panel, the you got that hating tab is now darker gray and another panel below it is displayed. So honored seems like a very simple example, and it is a simple example, but the skills you learn from this are going to be very, very useful to you. So think about how you can kind of put all these things together and I'll see you in the very next lecture. 28. Building the tabs: Okay, So let's start adding these tabs. How do we do it? Storing points, of course, is to write up the HTML together. So let's go here. Let's get to the end of this dirt over here. And I want to create a new div. Remember we need to look amigo section for adding tabs. Here we go. Just so we know what's going on in instruction opcode quite nicely. Here we go. I want to create a new record and this just call this the tab ribbon. Pretty simple. And you know, it's useful. Let's have our browser on the right so we can kind of see what's going on is we code and how do I want those tapes to work with? Let's just have a heading first in the heading list. Just define our hitting within this view, all elements and let's give it a class of hitting. And of course we having LI tags beneath it. I tags beneath it. Let's give this a joke. Could be anything you want and let's do another one. And it's yeah. Did you know Diego they are out two headings. Let me just do it and the knowledge Bennett T account want to add this daughter attributed to null. I don't worry what this is. I'm going to be explaining it. In fact, I'm going to have just decided I'm gonna do a whole lecture on it. So don't panic yet and I'm just going to call this daughter. Click. Okay, this clipped, we can define any way we want. I just wanted to be clicked because obviously it's going to trigger when the user clicks it. And I wanted to value to be joke, but I want to total IDs, which you'll see later, which is why I'm doing this. So that's why I'm going to make it the hashtag joke. And let's give it a class so we can style it in our CSS. We can say, you know, by default we want something to be active. Smith, she says, is going to be to have fun. And then on the second ally, I want to toggle another entire panel. So I want to again add something to its daughter attribute. I'm going to call it clicked again. And in this case, let's give it an ID of facts or a value of ID effects. You'll see how we use this. Don't panic it, please. I'll come back to it. So there we go. These are UL element. The next thing I wanna do is I want to create two panels. And these panels are going to be total product. When you click the one hitting on the one panel to show when you took that are hitting the other panels going to show. And let's replicate panel within a div tag. And the first one I want to deal with is this joke, does food jerk? So let's give it an ID of joke and a class of panel. Does that make sense? And what is the joke? What do you call a fake noodle? We save this. You can see these are paragraph and don't worry about styling it. We're gonna get into that and answer. We can put into a paragraph beneath here is in pasta. And it's brilliant route. That is such a dad joke. So there we go. That is our first of I wonder then do a second div for our second panel. That second panel is going to have ID of facts. And it's also going to have a class of panel. And let's just give it a paragraph saying, this is what I learned about food this week. And beneath that, we can just have another paragraph with Lorem Ipsum text, doesn't matter what it is yet, we save this. You can see our scientists looking terrible, Cool. So in order to improve, kind of look and feel of this, Let's get into our CSS. And it stopped spacing it up a little bit. So let's go into our styles here. Let's go to the bottom. Who's done a lot heavenly. And let's deal now without tabs, we should we start well, if we go to our index file and me scroll up, we've ranked all our tabs in this div with an ID of tab rep. So let's go to our style sheet. And what I wanna do is I want to access our tip wrapper UL element. But now I want us to define what happens when we hover over each one of those items. Well, firstly, I want our background to be the same as those other colors we've gotten. You can see my idea really helps me. We've got da 43, 43. And the endless change the text color to white. If we hover over each one of those items, it changes the background and its font color to white. A pretty cool. And don't worry, we're going to be making this look better. Let's access our tab again, not tear brca. And let's affect each LI tag. Thirsty. I want each to be an inline block. And sorry if I'm going quick, but I want us to be very quick. And because this isn't a course on CSS. Next, let's add some padding of hate him. In men, it's amazing how quickly these things can just look a lot better in a short space of time. Very, very cool. Let's change the background color. Let's give it a slight border radius. Three pixels. How does that look? It looks pretty cool. Let's make sure we've got a cursor points again. And then let's just give it a bit of margin rights. Let's say in pixels. There you go. You got to admit that's looking pretty neat. Let's now work on our panels. So again, I just want us to be specific because of CSS cascading rules. I want us to grab this tab repre, then I want us to grab our divs with class of panel and this star starling notes. Firstly, let's not display anything. They regard Sheila on. Let's just give it some margin. We know what we're not going to see what we're doing. Yes, let's just, let's do this at the end. So let's just see what we're doing. They regard so 0 to m. Let's give it a border. One pixel, solid, triple D. How does it look? Here we go. It's kind of getting me pause. It needs padding. That looks terrible. There we go. And let's give it a curve, borders, border-radius, three pixels. Here we go. It's all these little touches that makes us look so much better, right? That little slight curve in the border just makes it look that much better. Okay, now, let's hide everything. There we go, it's gone. Who, again, from a styling perspective with pretty much done. But these two things I want to do, one, a oneness to when we click either food joke or did you know on wants us to style it a bit differently so you know, it's deleted. So let's call that an act of style. The second thing I want to do is when the panels open, we need to kind of dynamically add a class to it to show it or hide it. So let's add a bit more CSS to this file right now. As I mentioned, I want to add a bit more. Let's access our tab wrapper. I wonder then exits the panel with the class panel. And like I mentioned, we are going to be toggling this active class, right? And the, all that's gonna do when it's active is it's going to display it. We're going to display it as a block. The last thing I wanna do is I want to access our table. And as I mentioned, I want to add a Selected Class 2, which if a tab is selected and it's changed its background back ground color to another 139. 139, 139. Think this should work. So there we go. We've done our CSS. I think if we see errors, will find them along the way and we'll fix them. If we get our index file, remember, let me just expand this. Remember what we've done. We added a wrapper for all our panels within the retina. We've got a heading section which we've written this UL tag. We've given it a class of hitting, and we have two tabs. And we edit this daughter clicked attribute. What is this? I'm going to get into it shortly. Within defined our two panels with hidden him for now. That's we wanting to add clauses. We wanting to add them dynamically so that one is shown and when a user clicks on one of those panels that shows it, when it clicks on the other panel at hides the previous one and shows the new one. Think about how we can do it. But before we get into that, let me just have a quick lecture on this daughter ticked attribute. How does it work and why do we have it? See you now. 29. What is the data attribute used for?: All right, what is this daughter attribute all about? Well, firstly, HTML5 introduced the daughter attribute, and it allows us to store some extra information in our HTML element with no particular meaning. Meeting with, we can kind of store information in me and we can do with that information as we like this no hard and fast rule that we should only use it in one circumstance. So whenever you want to add data to HTML, this is a great way to do it. And don't worry, the syntax is super easy. All we need to do is include an attribute with a name that starts with daughter. Remember in our example, recall the data dash clicked, that was our attribute name. And very importantly, remember, in order to access it within need to use JavaScript to read the value of this attribute. Javascript and using the attribute go very much hand in hand. Images get rid of this slide, flyaway Verde. And let me just say that reading the values with JavaScript when we want to access that data attribute is also very easy. All we need to do is use the dot notation was the key word, daughter Seat, object. That's it. So all we do is we grab our elements. Use the dot notation. We use the keyword daughters. It. Then use the dot notation again. And then in order to access that value, we insert our daughter name. Remember in our example that we've just seen, we put the name clipped. Does that kinda make sense? So I just wanted to take this very brief moment to discuss this daughter sit attribute in a little bit more detail because you might have not seen it before. But as you'll see in the next lecture, it has a very, very handy attribute to access Cold Harbor as making sense. If not, don't worry, we're going to be cutting it up in the next few minutes. See you in the next lecture. 30. Adding the selected class: So here we are. We busy starting to add these tabs at the very bottom. As you can see, user clicks, nothing happens. So let's jump over to our text editor and let's start typing up this JavaScript. I don't want you to think about how you can go about doing it. First, we need to listen for an event listener. Don't we need to determine which tab the user clicked on. And we can even use or utilize even babbling here. We know that it's all going to bubble up today. You remember we read these two hitter. I'll, I tags in a parent UL element. So utilize event bubbling. And of course when it's clicked, we need a way to kind of the browser, the DOM to show that appropriate penalty. So we need to add clauses dynamically. And how do we do that? There are a few ways, but I want you to use the class list API. And remember there's a method called toggle on that, which I want you to use as well. So pause the video here and in the next five seconds, I'll start cutting up the solution with you. Good luck. Okay, I heard you gave it a go. That's good. I'll text data as our index file. Let's get out dot js file. And let's start coding. So let's go here and maybe to the bottom, could put it anyway in our file. Let's just copy this header. So it's good to structure your code like this. Otherwise you're gonna forget. And it's a very simple site, so we don't need multiple JavaScript files. Normally you'd have a whole lot of different ones. Okay, so where do we begin? Well, firstly, I want to deal with our headings and lists. Just say, let's grab our hitting our parent UL tag. Remember that we've got our index file. We can see here that we've read our headings in this element. Let's go back to our JavaScript here and let's first grab our headings. We know how to do this by now you all pros at this. Let's use querySelector. And we want to grab item with class of hitting me, go here with given AQL, that class of hitting. So there we go. Not difficult, right? The next thing I wanna do is I want to define our panels as well. Describe our headings and the media. Let's grab our panels and is defined a new JavaScript variable called panels. And yeah, we know how to do that as well. Query selector, all because remember here there's more than one panel. And we gave it a each class of panel to get our index file. We gave each div, each panel its own class called panel. And again, it's not difficult. We just going step-by-step. Okay, the next thing I wanna do is I want to toggle between which tab the users clicked on because I want to style it differently. So this just say define a selected item variable. Toggle between classes. And I'm going a bit quicker now because we've done these kind of things before in previous challenges and exercises. So you should have a very good idea on how this works. But let's define a variable called selected panel. And it start off by defining that as null. Now, as I mentioned in the introduction to this, I want to take advantage of event bubbling. Let's attach event listener on the UL parent element. How do we do that? Well, we know we've defined it in a JavaScript variable called hitting, um, that there's a method called addEventListener. You probably going to slide this is so easy that you with me, bear with me. It's going to get a bit more complicated. We listening for the click event onto me. And of course we want to execute our handler function is just use the arrow syntax. Very, very simple. First thing I wanna do now is I want us to find, which I'll, I triggered the CBT. Remember our index file, we deem with these two allied tanks. And when the user takes one, we want to find out which one was clicked and we want to add a cluster dynamically. Here we go. Let's find out which ally triggered the event and how do we do that? Do you remember? Well, very simple. We define a variable called target. We access our event, will execute this, just keep up with norm and we don't define it as event, we just defined it as E. And each event that's emitted has a target property and that tells us which item actually triggered that event. And they now, let's use our daughter sets out daughter value. This is going to determine which panel we displayed to the user. Remember, we've called Alice, clicked. You can call it whatever you like. And remember, we had that brief lecture explaining what this data attribute is all about. So yeah, let's get it. I'll daughter is going to be the event target. And it has a daughter set property. Remember we have to use this keyword and we called ours clicked. We gotta, it is really this easy. Cool. Okay, now I want us to add a clause dynamically to each of those LI tags. So to do that, I want to use JavaScript's IF statement. I want us to say, well, if the target, right, It's one of those LI tags. Firstly, it's tag name has to be equal to an ally. If the user clicks in-between the buttons or to the right of the button and empty space, I want nothing to happen. So it's only if the user clicks on one of those LI tags. If that's the case, let's remove the currently selected element. And how do we do this? Well, if the liquid panel, which we'd find the above as null, if that selected panel is not equal to null, then we know it's active. We know that one of those tags are active. And in that case, what we wanna do is we want to access our panel. We went to affect its claws rod. And we want to do that by accessing this class list API. And we've been through this before, but it has a property called Toggle, which is very, very useful. And we want to toggle a clause that we've just randomly selected. Okay, so now we've removed the currently selected element. The next step is to end on the current element that selected. We want to add the selected class. So we went to grab our pencil. And we want to define that as the newly clicked ally tech. And then the last thing we wanna do is we want to access this liquid panel. We want to access the class list API x is a property called total. And of course we want to add this selected to it. Does that make sense? Let's go to our browser. Let's click on one and move our mouse. And you can see our CSS styling has applied. We've literally edit this dynamically and click on the other one changes. And to prove it to you, what I can do is we open up the console here, and let's now click on this degenerate button. We can see and edit that class called selected dynamically. If we click on the food joke now, It's edit the selected close to that and it's removed it from the other one. How awesome is this? Well done? And I hope you are following along. I hope you're finding was more intuitive. Sorry, I know I'm rushing. But we've done this before. If you've got any questions, I'm very, very happy to help. So please post them on Q&A. But I hope it's making sense. We have come an incredibly long way. But you know what this lecture is getting long, I want you to just pause, go through what we've just learned together. And then in the next lecture, why did we finish it off? It is going to be epic. I see you now. 31. Showing and hiding our panels when heading tab is clicked: Okay, let's continue with our code. I'm having tons of fun. I hope you ought to. The next step we want to do now is we want to find the penalty we want to show, right? Because we're ticking on the hitting tabs, but nothing is showing beneath it. How do we do that? Well, we still want to be within the if block, don't we? Because we only want this to happen, There's panels to show if we've actually clicked on an ally element. But now it's time to find the panel we want to show. And this Medea students is exactly why we needed that daughter attributes. This is how we going to use it, does define a JavaScript variable called target panel. Because this is the target penalty. If we want to show to the user, we want to access our document object on net. We want to access a query selector. And the query selected the item we want to search for is the daughter attribute. And remember what the data attribute is. It's the item we've clicked on. Remember, we've defined it as the target. We've got our index file. It's going to either be the first ally table, second LI tag. We've defined a data attribute called clicked, and it's either going to have a value of ID of gioco, ideal facts. And we've given the first panel and ID of joke in the second panel, id of facts. So hope that's making sense why we needed it. We literally are finding their panel now that has the ID of their data attribute. Who don't worry if you don't quite understand, we're gonna get into it now. The next thing I wanna do is we want to loop through those panels, right? And we want to make sure that the target panel is the penalty clear on. And then we want to edit close to it. And the class we want to add is called active y. Well, if we go to our CSS and we scroll down here, the class of active gives it a display property of block. That's what we wanna do. And if we scroll up in our JavaScript file, remember at the very top we defined our panels in a variable called panels. We just queried all of those divs with a class of panel. Don't get lost in all the detail. All we're doing right now, we need to determine whether the panel currently selected is the one displayed and allow it. You probably thinking you probably thinking client, if we need to start looping through panels, we need to convert our list to an array. So we've got access to the for each method. If you even started thinking along those lines, seriously, Well done. Starting to prove to me that you really are becoming a really, really good coder. Bats in this instance, it's a bit unique. If let's scroll up here in our JavaScript file and we look at this panel's variable. We used an access method called query selector all. And the keyword here is all. When we use this, we not returned an HTMLCollection. We are returned a novelist. And no list is quite unique because although it's not an array out of the box, it gives us access to the for each function, which is really, really awesome. It just means we can bypass converting our list to an array. I would make sense, but let's jump back into our code. Okay, So what do we do? Well, let me just say here to see you remember, we can use the for each function because query selector all returns a node list. Okay, Hope that makes sense. All we need to do then this X is our panels node list. Remember, on me, we do have access to this for each method straight out of the box. And let's loop through each panel. And it can't end its use the new error syntax to define our code. All we are wanting to do is we want to check without penalty is the same as the target panel. And remainder the target panel is the item we want to show to the user. If that is the case, what we wanna do is we want to access our panel with A1 to access the class list API. And we want to edit loss. And the cost we want to add as active. Right? Can you believe it's as simple? Else? What do we want to happen? That's rocky, probably guessed it. We still want to access the class list API, but this time we want to remove the class of active. Hope this works because otherwise I'm going to look like such a mapping. So here we go, here I'll tabs. Let's click on food joke. Wow, there we go. Let's click on Dino. And well, yeah, so, so cool. Please celebrate your successes. Jump up and down, pump some music. We've done a lot of, lot of work and this is getting quite advanced as well. How awesome is this? Bats? You know what? I wanted to do one more thing. I don't want the answer to be shown like this. What do you call a fake noodle? And in pasta, it's just showing what a 12 is. Why don't you convert that, try and convert that or answer to the baton. And when the user clicks the button, only named as the onset display. Think about how you can do this and why don't we just quickly have one more lecture. And I'll show you how our word typed it up and it is very, very quick. You'll see, that's quick and assignment. See you in the next lecture. 32. Add a dynamic button: As I mentioned, I want us to now not show this on directly. I want us to add a button when the user clicks a button in a Hahn says displayed in the SCADA HTML here, and let's scroll down to call it fake noodle is delete this paragraph. I want to add now a baton and this gives us button and ID of foreigners show on TV sets what it does. And we can just have the word answer here. And let's have our answer beneath us. This is put it in a paragraph tag and give it an ID of onset. How's that runoff can be empty if we go to our browser and we click on food joke, there we go. There's our button. It's very simple, but obviously now when we tickets, nothing happens. So how would we go about doing this? Well, this is a JavaScript comes into the picture. Let's go back to our coding editor. Let's go to our JavaScript file and leads now. Where am I? Just scroll up here. Yeah, we don't have to be with inet click event anymore. So discard all this code and it's now deal with button to display the onset. It's going to be very simple. First thing I wanna do is, let's grab our button. Let's call it Onset button. We know how to do this. Document. Get element by ID. And the ID we gave it was show onset. So there we go. We've got our button. All we need to do now is we need to add an event listener directly, so we know how to do that as well. We access ATD called addEventListener. With on that, we want to listen to the click events. And when the click event is fired, let's fire a handler that we call onset is define it by using JavaScript's function keyword, which we call now onset. It's going to give us the event. We actually don't need it in this instance. So let me actually delete this. What do we wanna do in this handler? Think about it. Well, firstly, we want to add a class to this paragraph. Okay, I want to edit dynamically, and I'll also want to change its text content. I want to give the answer, and then I want to hide the button. So let's go back to our JavaScript file and let's do that. So firstly, let's access our document, get element by ID. That's good. That paragraph which we gave an idea of onset. And let's add a clause plus lists. Within that API we have an add property or method and we want to give it a class of sugar. And don't worry, we're going to style it now. Let's do the same thing, but now what I wanna do is I want to change this takes content. So get element by ID. We want to get the paragraph. We want to change its takes content. And we want that to be the onset, which is an IM, pasta in past-time. Here we go. Then lastly, let's grab our answer button. Let's exit style property, its display property, and set it to none. So if we go to our browser now, we click on food joke. We've got a button, we click on it and we get the onset, woohoo. That's, let's dial it up just to make it look a bit more pretty. We know we've added this class list. We'll just clause called shorter. So all we have to do is we can go into our styles.css. Yeah. And we can exit the show. It's this easy. We can change its background color. Let's do a nice yellowy color. Hopefully that'll look nice. We can define its width, a 100 pixels. We can give it some padding. And let's give it a border just to finish it off. Solid yellow. I want it a bit darker, the border. This, let's go to our browser. And there we go. It looks pretty right. So if we refresh food joke, what do cool effect noodle. If the user clicks on answer, we get thrown back to us, an impostor. I cannot believe how far we've come with a tree. Just keep improving our page step-by-step, seriously, and really as fun, I hope you are having fun because you really have learned a lot of useful information that you can use to apply to your web apps. I'm super-excited, Walden, thank you for sticking with me. I hope you've enjoyed this course a ton. If you've got any questions, post them on Q&A, I'm here to help you and keep going, stay motivated. And I'll see you in the next lecture. 33. Class and Series Outro - WELL DONE: Who could this really be? It? All good things come to an end, right? Sera. Sera, you've done so well, lead and late. What's the female version of the legs? The right. Ladies and gentlemen, thank you so much, my dear students. We're sticking with me to this entire series. If this is the first-class you've heard of mine. Thank you. Thank you for sports. I would get a lot of fun because in this loss, we built an entire logic together. Really was fine. And it applies many, if not all, of the techniques I've taught you in previous classes on this DOM series. Well, really has been cool, isn't it? And don't take for granted. You now know what the dome is. We know what the bomb is, not there kinda upon talking about the BOM, the bomb, you know how the DOM is different to JavaScript and Python. You now know how to access the DOM. Remember those x's methods? You know how to traverse at a move around in the DOM. Remember using the parent, child, sibling relationships of nodes, you know how events work, where they come from. You know how to attach event listeners to the page. You know how to write JavaScript in order to react to those certainly veins. And of course, in this class you now know how to build a project. So I really hope you've learned a ton in this course, but took me a long time to learn what I felt in this circuit. Really are Hubbard propose you a hub? It really does make your learning process in the web development industry a lot, lot quicker. Thank you so much for all your support. Thank you so much. Please do leave a review if you've enjoyed the course, if you haven't, let me know as well and I will try and improve. I'm not perfect far from it. And before we finish, just remember to try your hand at the assignment. This way some assignment writes, this was an assignment. Have a lot of fun and I hope to see you one day in a future class of mine. Thank you. Thank you. Thank you. And audios.