Hi everybody, welcome back. It's time for us to take some of the things we've been learning and put them into practice. One of the most important things about learning a programming language is making sure that you're getting your hands-on experience. Watching these videos just isn't enough. It's great if you just wanna learn about JavaScript or learn about these different elements at a very high level. But if you actually want to feel competent and confident in your coding, you need to make sure that you're practicing. So let's go ahead and dive into the code. I want you to modify the code. And whenever possible, it's great if you can break the code. Because it's always better to make your errors now. We have the whole community around you. You can ask questions. So we're going to look at two different examples today. One, in which we're gonna modify the DOM. And the second, we're actually going to change the style of the page that we're looking out right now. So let's go ahead and get started. In this example, I'm going to do something a little bit different then we've done before. When I first introduced the idea of events, I said that events are matched with functions. Well, you can also match events just with JavaScript code, not a function itself. So here I've created two buttons, and I named them First and Second. You are going to use those buttons to change the content of this third paragraph right down here. So, when I click on this First button I have onClick, grab that element, change the innerHTML, and I want you to change it to Clicked First Button. The other one is very similar. The only difference is that I want to change the content of that paragraph. So when I click on these buttons this, right here, is the element I want you to look at. So let's go ahead and click on the First button. You can see that I clicked, it said, hey I know that I just clicked the First button. When I click on the second one, you know that I've clicked on the Second button. So, this seems like a really small program to write, but there's a lot going on in here, and a lot of places where people tend to make mistakes. So let's just look at them quickly. The first thing I want you to look at is this idea of using document.getElementById. Whether or not you have these as upper or lower case letters, makes a big difference. If you accidentally change it from ById to ID as uppercase, this is going to cause problems in your code. The other thing I see a lot of people do, is they think that innerHTML is a method, just like all the other ones are. It's not. When you're using innerHTML, you need to make sure you use those equal, that assignment statement, okay? The other thing that I feel sometimes people really get kind of hung up on is the code that I give them. You can put anything you want in here. So let's go ahead and change some things. First thing I want you to look at is this line right here. If I were to change this, I want you to intuitively know before I do it what part of this page is going to change. Is it the event that's going to change? Is it the button that's going to change? Is it the whole page? So luckily, with CodePin you'll be able to see it immediately. All right, wow, now I really [INAUDIBLE]. So, that's how I can change the button itself. If I want to change what's going to happen, that where I put in here, Clicked Another Button. So, let's go ahead, I'm gonna save. I'm going to go ahead and click on First, Second. So play with this. Go ahead and try putting it in yourself. And realize, again, that you can put your JavaScript anywhere you want, it doesn't always have to be in an external file. Let's look at the next example. Okay, get ready. This example is going to be a big one, because we do have a lot of things going on. We have our HTML. We have our CSS. And we have our JavaScript. Let's start with the CSS, because it's the simplest and it's not going to change as this program runs. I've declared two classes. One called .closed, and one called .open, and what they do is, well, it's pretty straightforward. The .closed one says, I want to change the display to none. So, what's going to happen is, right down here, this one right here, it's going to disappear. However, if I were to set the class to .open, well, then now it's going to reappear again. So that's all we really need to realize, is that .closed will make it go away, .open is going to make it come back. Over here, in my HTML, I have a paragraph called demo. And that's right down here, it's all this entire thing we can see right here. This is the one we wanna change in our code. And finally in the HTML, we have two events. We have onClick, openMe, and onClick, closeMe. So let's see how we can write the JavaScript that will make that div appear and disappear. Let's start with closeMe. I've actually put two different options here. So the code looks a little bit longer than you might expect. What I need to do, is I simply need to grab the demo element by doing document.getElementById. But now instead of trying to change the inner HTML, I'm going to change the style. So I go in and I say x, which is my element, .style.display="none". So I'm not using my CSS, I'm actually hardcoding it in here that I want it to go from none. And in open, similarly, it says, hey grab that element, and I want it to go from whatever it used to be, and now it should be block. So let's look and see if this works. Close, Open. Close, Open. Great, it works, but we've hardcoded those elements in. We've hardcoded block. What if we also wanted to change the color, or the width, or many other elements? This is where the idea of our classes can come in. Let's change it over here really quickly. I'm gonna comment out this line of code. And same right here. All I've done here, is we're gonna have the same element, but the difference is now, we can actually go in and we could say, you know what? For that element I want you to change the class name. I don't know what it used to be, but now I want it to be closed. And down here, I want it to be open. So, I can talk a lot. But it's important that even I stop and check that code and make sure I didn't break it. So, Close, Open, Close, Open. Now I don't really have time to do this right now, but I think what would be a great exercise for you, is to look at this code using Inspect Element. When you do that, and you click on those Open and Close buttons, you can really see that we're going in there and we're changing the DOM. All those things, all those different styles, you can see them in effect. So, make sure you're playing with this as you're coding along with me. So, I could review with you what we just did, but I'm not going to. The most important thing for you to do right now, is stop watching the videos and bring up some sort of editor code bin, and go in there and start coding. If you don't do it now, you might start falling behind as we get into these more complex ideas. So, good luck.
