Learn JavaScript DOM Manipulation in 1 Hour - Creating Buttons and More! | Taylor English | Skillshare
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn JavaScript DOM Manipulation in 1 Hour - Creating Buttons and More!

teacher avatar Taylor English, Learning doesn't need to be hard :)

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      2:55

    • 2.

      Setting up your Environment

      5:28

    • 3.

      Selecting Elements

      14:13

    • 4.

      Creating Elements

      10:33

    • 5.

      Manipulating Elements (especially with CSS)

      15:30

    • 6.

      Making interactive buttons

      13:03

    • 7.

      Project/Conclusion

      2:59

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

162

Students

1

Project

About This Class

Welcome to my DOM Manipulation Course for beginners! DOM means Document Object Model and is essentially the HTML for a website. In this course, we'll talk about how to programmatically manipulate HTML and CSS using Vanilla (plain) JavaScript. 

My name is Taylor English and I'm a university student studying Computer Science. I've been doing web development for 2 years and I love frontend development.

I will cover the following topics in this course:

  • Setting up your environment
  • Selecting Elements
  • Creating Elements
  • Manipulating elements (especially with CSS)
  • Creating Interactive Buttons
  • Project

To take this course, you should have a basic understanding of HTML, CSS, and JavaScript.

You will also need a code editor like Visual Studio Code.

Find free videos like this at my channel: cplushacker

Click here to watch my Skillshare class on Angular for Beginners!

Meet Your Teacher

Teacher Profile Image

Taylor English

Learning doesn't need to be hard :)

Teacher
Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello and welcome to this course on DOM manipulation. My name is Taylor English. I will be your instructor for the course, and I'm very excited for this. I've made this course so that you can easily understand the DOM manipulation so that you can have fun changing CSS, making buttons, do things, creating elements programmatically. That's what this course is for. And I've made it easy to understand for beginners. And experienced people will like, I'm sure that you'll enjoy it. Now I want to go over what we're going to talk about. But before I do that, I want to tell you guys about where to find more videos like this. In other classes, you can watch free videos on computer, tips and tricks and solving issues, as well as some programming at my YouTube channel, which is youtube.com slash C plus hacker, all spelled out. There's lots of great tutorials there. I've got a Skillshare class that you can watch called angular 11 for beginners, which is actually also applicable to Angular 12, I believe. But it's about learning components, routing services, all of these great things. I think that you might really enjoy it if you enjoy this course. And you can find that at this link, I will try to put this in the description of this class, this video. That's just a little bit about me. I am a university student studying computer science. There's perhaps some credibility for you, but honestly, I just really love teaching this and that's why I want to share it. So this class, what we're going to be going over is five basic things. First, I'm going to show you how to set up your files. This is not really part of DOM manipulation, but it does include some important aspects of it, like linking your files correctly for your JavaScript and CSS. Then we'll go, we'll jump into selecting elements, grabbing the HTML, and so that we can do things with it, saving it into variables. Then I'll talk about creating elements programmatically so you can create them and append them to certain parts of the page via JavaScript. Then we'll go into manipulating elements with CSS and things like that. So you can change the color of your page. You can do all sorts of things via the JavaScript. And finally, we will talk about buttons and how you can click a button and run functions if statements loops. We're going to go into some detail on that stuff. So I hope you guys enjoy this. It's gonna be really fun. And I'll see you in the next video. 2. Setting up your Environment: All right, it's time to get started with our first lesson. So before we actually dive into DOM manipulation, we're just going to start by setting up our files, simple HTML, JavaScript, and CSS files. So let's go ahead and do that. You'll want to create a folder where you can work on this project. I've called mine DOM manipulation. You can call yours whatever you'd like. I'm going to be working in VS Code, which I highly recommend. Let's create a file and we'll call this index.html. Now, let's start. Let's save that. Create our HTML tags. Inside that we want our head tag, and within that we want our title tag. I'm just going to say Dom relation. Now below the head tag you'll want to put a body tag. That's not what I meant. Okay. Within the body tag, we can just say, let's put a paragraph tag and say hello world. Now let's create a JavaScript and CSS file that we will start using in the next couple of videos. We're going to call this one app.js. To make sure this one's working. I'm going to do console.log. Hello World. Again. Now to link that up below the body tag, we're going to put a script source tag, and we're going to put app.js. Now this is important because we want the JavaScript to run after the rest of the HTML has already been laid out. It goes after the body tag. The syntax for this is script and then source equals, and then the name of your JavaScript file. Again, you can call yours whatever you'd like. Now let's make our CSS. I'm going to call this style.css to make sure this is working. Do body and we'll do a background color of green. Now we link the style sheet, the style.css up here in the head tag. Let's create a link tag. And you can go down to CSS here if you've got the Emmett abbreviation on. But all that's going to do is tell you that it's tell the code that it's a style sheet and give the link to the style.css. So this is our basic syntax. This is all we really need to get started. Very simple website. Let's go ahead and it. Now in this class I'm going to be using a VS Code extension to test this. And I'll show you what that is and how to get it. Let's see. This extension is called Live Server. If you go to your Extensions tab here in VS code, you can just search. Live server should be one of the first things that pops up. You'll just want to install that. Now what this is going to do is when we come into our HTML file, we can right-click and say Open with live server. We can also stop the server here. And there should also be a button down here that says Go Live. This button doesn't always show up. So I typically just rely on this right-click menu. If we open with a live server here, then this is what we get. We get our green Hello World so we know the style sheet is properly connected and configured. The HTML is good. It says Hello World. If we press Control Shift I on Windows, then this will open up our console and it says Hello World. Again. We know that everything is working properly or JavaScript is properly connected. Everything's working in that front and you don't need to worry about this error message. It's not super relevant to what we're trying to work on right now. But this is the basic setup. Just a quick recap. You want three files, index.html, app.js and style.css. And remember, app.js is linked in a script tag below the body tag, but still within HTML. And the stylesheet is within a link tag up in the head. Okay? Alright, I'll see you in the next one. 3. Selecting Elements: Alright, now we're going to talk about selecting elements. Within DOM manipulation. It's very important that the code knows how to get the various HTML elements and do things with them. We're going to start by going to our app.js file. We can remove this log statement here. Now, currently on our website, we have our Hello World. Right here. Let's say that we want to select helloworld so that we can manipulate it or do something with it. Now, right now, hello world is just a paragraph tag. It doesn't have any classes or IDs. I'm going to show you how to select it just like this, but also how to select it with a class or an ID. Now, to select it like this, actually, I'm going to start with using an ID or a class. Let's start with an ID within our paragraph tag type ID, and we'll just give it the name hello. Now let's go to app.js. And we want to do is we want to store the paragraph tag within a variable so that we can do things with it. We're going to say, let say paragraph equal. Now we're going to type document. Document is how you access the document object model. That's what we're using. Almost all of these commands, if not all of them, start with document. We say document dot, get element by ID, and make sure that the D in ID is lowercase. Now VS Code is really great and should be suggesting these things for you. If it's not, then checkout the extensions store to find a free JavaScript extension for syntax highlighting. We said get element by ID. The ID of this is hello. We put parentheses and in single quotes will say hello. Now what we can do is we can do a console.log on the paragraph element. And it will show us what we've actually selected so we can see what we're doing. If we save it. I forgot to mention in the last video, every time we save changes in these files, the server, the live server will automatically refresh the page so you don't have to. If we come in here, it still says Hello world. So press Control Shift. I I believe that's Command Shift I on Mac. If not, just look up what that command is, you'll see that it logged this element. So if we look back at the code, we said paragraph equals document.getElementByID. So what we've done is we've effectively grabbed the element out of the HTML and we set it equal to this variable. Now let's explore this a little bit and let me show you some of the properties that this has. If we go to paragraph here and we press dot, it's going to suggest all sorts of things. There's all sorts of attributes that we can access from this. Let's say, for example, we want to access the text inside. We can say textContent. And now we're logging the text content, which is HelloWorld. Now there's a number of things you can access from here and we'll get more into that later when we manipulate styles and make buttons interactive in that type of thing. But for now that's how we select an element. So let's say that it's got a class. We'll do the same thing with hello, but this will be a class. Instead of saying get element by ID, we want to use get elements by class name. Now the class we put in here is hello. Let's see what happens when we logged this. You can see it brought up something called HTML collection. And if we open that up, it's an array. The first element in index 0 is a paragraph tag with a class of hello. What if we just wanted the element? How do we select that? Well, the thing about classes is multiple objects can have a class. And so if you select the elements by class name, it will get an array of every element that has that class name, even if there's only one. Now, IDs are different because you only Should put an ID on one element. So when you say get element by ID, it's going to give it to you directly because there should only be one element with that ID. If we want to access the specific element, we know that within the code it's the first, it's the first place where we see this class of hello. Then right after this, we can put brackets to access the 0th index. And that's going to access that first element, which will be the tag that we want. If we save this and come back here, you can see that we've selected that whole element. Now we can do the same thing if without using class or ID. Let's say for example, we've just want to select all the paragraph tags. I can do is come up here and say document dot get element by tag name. Remember the tags are these things right here within the carrots or whatever you call those things. We can get all the paragraph tags by saying getElementsByTagName p for paragraph, make sure that's in quotes. What does that show us? Again, that shows us an HTML collection because we can have multiple elements, multiple paragraph tags. Let's see what it's showing us here. In the 0 width index, we have our paragraph tag. In the first index. It's got something also. I'll have to check and see why that is. Okay. So I just took a break for a second and I figured out what the problem was. The problem was that in our HTML, I had to opening tags for the paragraph tag instead of having the slash here to close it. Oops, it thought that there were two separate P tags. I fixed that. And if we come over to app.js, we can see it says getElementsByTagName, we're getting the p. Then if we come over here and we'd look in Chrome here, you can see it's an array with just one element. Now, again, we do the same thing. We can do the same thing as we did with classes where we can select the zeroeth index and see the exact tag. We've learned how to select elements by tag, name, by ID, and by class. What's next? Well, let's say that you want to select an element based on several attributes and not just its tag, its class, or its ID. That's where the query selector comes in. Let's say that we've got this Hello World paragraph tag here. Let's give it a class of hello. Then we'll have another paragraph tag that also has a class of hello, but it also has an ID of, let's say pancakes. We can say something here. Pancakes are amazing. If we output, Let's see if we get elements by tag name and we output that. Let's see what, what comes up. Okay, so we've got this, this array. Again, there's two elements. Now, even if we say get elements by className, we say hello. It's going to return two objects. So we can specify a little further what we are wanting. If I want it to have a class of hello and an ID of pancakes, that's where I can use the query selector. What we would want to do is come over to app.js. Let's say document dot query selector. Query selector. Basically you can give it several different attributes of an object and it will find them rather than specifying id or class or tag name. Let's say we want a paragraph tag and we know that it has a class of hello. We put a dot hello. The reason we put a dot is because that's the syntax that we would use in our style sheet. For example, if we wanted to access the hello class, we'd say dot pillow, and then we'd give it styles. That's the same thing we're doing here. Now, IDs are selected using pound sign. I'm going to show you that in a minute. Let's output this and see what comes up. When we selected the hello class, it chose the first object that I could find. And that's kind of how the query selector works, is it binds the first object that matches your parameters. But that's not what we wanted. We wanted pancakes are amazing. We can specify further and say pound sign pancakes. If you remember, we had the idea of pancakes here. Now if we output that, it got the element we wanted. However, because pancakes has an ID that makes it unique and we don't actually need all of this. We can get rid of most of these things and just say an ID of pancakes that has the same effect. That's specific enough for it to know what we want. And so you can see that we have similar syntax for doing the same thing. There's different ways of doing it. If I say paragraph two. So this is fairly similar syntax right here we have a query selector that gets the first thing with an idea of pancakes. Here, we just get whatever has an idea of pancakes. So you can see there's different ways of doing the same things. Now let's say when we were looking at the p dot hello, it popped up with just the first thing I found, which is what querySelector does. So what if I want everything that matches that now? Well then what I can do is I can use something called querySelector. All we'll put in the same thing. We'll say p dot hello. That gave us this node list array of both of the attributes. Why have query selectors at all if we have the other ones? Well, querySelector is you have to do a lot of these kind of selecting different elements. Query selector can be nice because you don't have to remember. Get element by ID, element by classroom. You don't have to type all that out. You just say query selector and then specify, oh, this one is a class, this one's an ID. This one is just a tag. So if we wanted just the tag, we could get rid of the dot hello and just say query selector all p. And that's gonna find everything that's a p element. These are the various ways of selecting elements and that's going to come in real handy when we start manipulating CSS and using buttons and things like that. I'll see you in the next one. 4. Creating Elements: Now we're going to learn about creating elements. Basically, we're going to programmatically create various tags, add classes and IDs to them, styles, all those sorts of things. And we're going to insert them into the page. Let's get started in our app.js file. I'm going to remove all of this. Let's say that we want to create a button below this. I'm also going to get rid of the pancakes are amazing. Let's say we want to make a button below this that will, later on we'll make it change the background color of the page. But for now, we're just going to create it and put it in the page. What we want to do is create an element. We'll call this button, will be very creative and set it equal to document dot create element. Similarly to the selectors we've been using, you'll do single quotes and then the name of the tag, which is button. If it was a paragraph tag, you'd say p. If it was div tag, you just say div. So pretty straightforward. We've created a button. Now this hasn't done anything to the page because all we've done is set it equal to a variable. Let's console.log this and see what we have. We have a just an empty button tag. Let's add some text to it. To do this, we need to create what's called a text node. Let's say, let's text node equal document dot create text node. Now let's say we want to have it say change background, color. We're just change color to be simple. Now if we go back and look, we've created the textbook, but we haven't put it in the button. So what we need to do is say button dot append. Actually we're going to append child will say text node. What that means is now the button or the text is a child or basically it's inside of the button tag. If we say Save, then it shows us that we have this button here. And it has all of these attributes. We've got our button. We want to put it on the page. Let's say we want to insert it right after this HelloWorld tag. Let's change this to an ID to make it easy to select. What we need to do is select the HelloWorld tag and then put the put our button right after, append to it. What we're going to do is say Hello, World equal document dot querySelector. And we're going to say pound hello. After that, we want to say helloworld dot append the button. Now you can see we've put the button right after it. It doesn't do anything, it's just text and we can click it. But that's kind of cool, right? Let's see. We've got it right after the text. To make it look a little prettier, little easier to look at. We're gonna change some of the styles in style.css. Go to Button. Styles for the button, All button tags. Technically, we want to say display block because currently buttons default to an inline display, which means that they can display right next to text or other objects. A block display. We'll put it under, it'll display blocks. If we say display block, that will be below this, we want to give it some space between hello world and itself. So let's do, let's do a margin. Actually it will just do a margin. Top five pixels, maybe ten pixels. Great. We've got our button, we've created it. What else can we do with this button while we're creating it? The interesting thing is, it's almost easiest to create the button and put everything inside of it before you throw it out onto the page. Now of course, you can select it later and do things with it. But if you know that you are a class, if you know you want styles with it, it's easiest just to put it altogether in one package before you send it to the page. I'll show you what I mean. We've got our text node. Let's say. We also want to change the style. Now in the next video, I'll get more into style manipulation and that type of thing. But very briefly, let's say we want. But let's do button dot style. Now we can say color. Actually background color would be, color would just be the text. But if we say background color, then we could say light blue. You'll notice this syntax is different than CSS, and I'll just tell you how that works briefly before the next video. Normally in CSS, if we wanted the button to be blue, light blue or whatever, then we'd say background, dash color, light blue, like that. The difference here in JavaScript is that background color is a single word using CamelCase, so that the first letter is lowercase and the following words are uppercase. Background color, light-blue. Let's save that and get rid of that. Let's go look at it. It doesn't appear to have worked. Let's see, we got an error button dot style dot background color is not a function. So what it's saying is it's saying, Hey, you can't put a parameter in there because technically This is treating it like a function and you can't do that. It looks like that's not what we're supposed to do here. Instead of using it as a function, we're going to say equals light-blue. Let's try that. It's a little hard to tell, but it definitely is different. It's not white anymore. Let's see if we can do it more distinct color. We'll just say Blue. You can definitely see that, okay, but what if we want to change the text color? We can say button dot style, dot color equals whites. Great. So that's sort of how we, how we append these different objects. We have to create. Imagine it's like a pyramid. We have to at the base level, we need our element, our button. And then one level above that, our text or anything else that might be inside of the object, we create. One level above that is sort of our styles and everything else. You could do this with any element. It doesn't have to be a button. It could be a div, it could be header tag. You could really do whatever you want. We've inserted that button in a couple of videos. I'm going to show you how to make it changed the color of the background here, but that is just a quick view of creating elements. Alright, I'll see you in the next one. 5. Manipulating Elements (especially with CSS): Alright, in this video we're going to talk about manipulating elements in the DOM. So currently, we've got our button here, we've got our Hello World. We have our background color. Let's see what we can do with these elements, starting with that background color. It's not very pretty in my opinion. Let's change it to a nicer color. In our app.js, I'm just going to create some space and come down here a little bit. So let's say we want to select the body because the body is what we used to create a background color of green. Here we can say background color. Oops, sorry. We can. First we have to select the body. Let's say let body equal document dot, get element by tag name. You could also use querySelector. Will say body. I believe you have to capitalize this one fully because it's a special tag. Let's see if that works properly. Okay. Okay. Yes. Okay. Sorry, I was wrong. This does not need to be capitalized. So what happened is when I typed in body right here and logged it, it gave us this HTML collection, essentially an array of elements. That's what that is. And it said, okay, at the first index, index 0, we have one body tag. It's a little bit silly because the way the tag selector works is it creates an array because we can have multiple tags. If we say get elements by tag name P, it'll get all the paragraph tags. Now, it did the same thing with body, but we can only have one body tag. What we're going to do here is select element 0 that gave us our body. And you can see it's selected when we highlight our cursor over it, it selects the whole page. And if you open that up, you can see everything. Everything is down there inside of it. Okay, so now we've got the body. Let's change its background color. So say body style. Style is how we access the style property. Okay, So let's say background color equals. Let's give it. Let's see if light pink is a color. I have no idea. Let's try it. There we go. Yeah, I like that. That's a nice color. Let me show you the difference between the functions that we used earlier and these equal signs. In the last video. I discovered I made a mistake where I tried to use background color. Do something like this where I said like background color, parentheses, light pink. But the thing is, it's not a function. Create text node is a function. It's reading something made of text. Create element is a function. Queryselector is a function, but these are properties of elements. Let me show you what I mean. Let's select the, let's select well, we can select the body tag. We've already selected the body tag. Let's log it. Let's click on that. What do we get? Body actually may not be the best example. Let's try, let's try the button. Let's, let's see. Sorry about that. Body tag. The body tag is a little bit weird, so we're going to select our paragraph tag that says Hello World. Just for this example. Let's say p for paragraph equal. Document, query selector, pound, hello. Then right below that, we will log P. We have logged P right here. We've selected this paragraph tag. But what we want to do is to get a little bit more detail is we're going to put the p.ball before the pound right here in the querySelector. So that way we can access more information about it. It's a little bit confusing. But when we log it, you'll see that we have this P lb hello. If we click into that, you'll see there are all of these things. These are properties of our paragraph tag. This right here, this paragraph tag has tons of properties. Most of them say null. We're not using them. But some of them we are, for example, style. If you click on style, you'll see a list of every style, basically every possible style for this object. Again, most of which were not using. But let's say we want to change the color of that hello world. Well then we can come look in here and find color. My point with showing you this is to show you why this isn't a function. Y. When we try to change the background color of body, we said body dot style dot background, color equals light pink. We did that because this light pink, sorry, the color was a property under the style property for this element. If that was a little bit confusing, it's okay. You don't have to worry about it. Just know that when you are modifying some piece of an element, its CSS, it's what happens when you click it, all these things. These are properties that you set equal to a value which are different from these functions right here. Now, when in doubt, if you look up change style, background color for an element online, you'll be able to see the syntax for this if you forget or if you look up create text node, you'll be able to see the syntax from a website like Mozilla or W3 schools. There are lots of websites that will tell you the exact syntax of these things. But back to what we were doing, we were changing the background color here. Let's see what other properties we can change while we're selecting our p tag. If we click P and press period, we can see all sorts of things. So maybe we want to change the text and click here on the text content. We know from earlier that the text content is helloworld. What if I want to change that? I can set this property equal to I like Pi. Now you can see that the JavaScript has manipulated this element, it's changed. It's textContent property. If you want, I would encourage you to look through the properties of each element. You can do this in VS code simply by pressing the dots after something and scrolling through this list, it'll tell you all sorts of things that you can access. For example, next sibling, which will tell you what element is right next to it. Or we could look up inner HTML that will show you what HTML is inside of it. You can ask if it has a certain attribute. All these sorts of things actually, Let's try that one has attribute. Let's say. I'm gonna show you a little bit of, a little bit more logic. The code with this has attributes. I'm going to get rid of that. Let's, let's see, let's do an if statement. We'll say if P has the attribute color, has an attribute color, then we'll do something. I actually sorry, not the attribute of color, the attribute of style dot color. I'm not sure if that exact syntax will work, but we will console success. Let's see what happens. It looks like we didn't get anything. What if we just say style? Still nothing? Perhaps we need to add a color. So let's try p dot style dot color equals blue. Okay, so look at this. It logged success because it noticed that it does have the attribute of style. Let's see what happens if we do style dot color. That doesn't work for it. So attributes in HTML elements are these things right here that you put within quotes that you put within the element. So I could see if hello world has an idea of Hello by coming over here and saying, if, let's see, let's do dot. We can do p dot get attribute. Let's say we want the color. We'll set this equal to blue. What is this doing? It says, get the attribute of color. Oh sorry. That's not what we're doing. I just spaced out a little bit. We wanted to know the ID. If that was hello. We got the attribute ID, which is right here. We want to say if that attributes equals hello, then console a success. Which it does. If we were to say if it equals goodbye, no success. You can kind of get the see how this is working from an overhead perspective and see that there's a lot of possibilities with JavaScript logic where you can use if statements. You could use loops. For example, you could use a for-loop and say, for numbers one through ten, create these elements or change their colors. Do all sorts of things. The possibilities are basically endless. So I've shown you a lot of things here. I would recommend if, if some of this was confusing, try to re-watching the video. Just go through step-by-step and learn what you can do to manipulate these objects. But just know that a basic recap, each element has properties, it has hundreds or 800 properties. And some of those properties have properties within them. For example, the style has color, background, color, margin, all those sorts of things. You can access those using these various functions. Off of elements. You type the name of your variable and you type up period. And it gives you all sorts of things. I would explore these. If you don't know what one is, look it up online and it will tell you the syntax. It will tell you how to use it, and all the things you can do with it. But I'll see you guys in the next video when we make this button, do things. All right. 6. Making interactive buttons: In this video, we're going to make our button do some cool things. We're going to make it change color and maybe outputs something in the console. Let's get started. To make things a little bit simpler for now, I'm going to comment this out and I'm going to make our button. I'm going to hard-coded into the HTML just to make it a little bit easier to manipulate. All right, We've got our change color button. Let's say if I click this button, I want it to change the color to blue. So what we're going to do is I need to create a function that when it's run, will change that color. Let's write the function. I'll call this change color. For now, let's just do console.log, changing color. Okay. Now in our HTML, we need to trigger this somehow. In our button tag. We're going to put an attribute called onClick. So you can get from that. But when we click it, it's going to do something. And we're going to type that function, change color, make sure you have the parenthesis. Very important. When I click this button, we want it to log changing color. If I open up the console and I click it, changing color, you can see the more I click it, the more it repeats that message. So now let's do something cool with it. What we want to do is we want to select the body and change its color. So we're gonna say let body equal document dot. Get elements by tag name, save body. And remember we have to select elements 0 to access the body. And we do that because when we select tags, it gets an array of every tag of that type. And body does that too, even though we only use one body tag. We select body. And then we say body dot style, dot background color equals blue. Now when we click our button, we just changed the color to blue. But if you click it again, it doesn't change back. Why is that? Well, if we look at the code, we're only telling it to change it to blue. If we refresh the page, it'll go back to green. But as soon as we click that button, blue. So I'm gonna show you how to make some logic to change it from one to the other. So let's say we've selected this tag right here. I'm going to get rid of this. Let's create an if statement. We'll say if body dot style dot background color equals, make sure you have that double or triple equals so that you're not single equals would set it like a variable, set a value to a variable. We want a double or triple equals to make sure we're comparing a quality. You can look up the difference between double and triple equals signs on the line. If the color equals green, because I think that's what we chose earlier. If it equals green, then change it to blue. Else, meaning the background color is already blue or something else. Else, change it to green. What this says is that it gets the body element and it says, Okay, if the background color is green, change it to blue. If it's blue, change it to green because we have this else statement. So if it's not green, change it to green. We go look at it. There we go. We're changing between blue and green. And every time we click it. Now, as you can see, there's a lot of texts going on here in this if statement and right here, that's been. Trend throughout this course. If you look up all of these things we've created, there's a lot of text involved. That's sort of the nature of vanilla JavaScript or just plain JavaScript. One way that we can shrink that down is if we're going to use something multiple times, for example, this background color, we can set the background color equal to a variable. We could say let background color equal body dot style dot background color. That way. We can just keep this background color part that significantly reduces the amount of code that we need. But did it work? Let's see. It didn't work. Let's see if there are any errors. No errors. I realized the problem is a good little coding lesson for us both. See here, I set the background color equal to whatever the current background color is. But here I was just changing this variable's color. Now this variable, once it's been said, is detached from the body element itself. We're changing this, but not what we want to be changing. And so I apologize, I made a little mistake in explaining this to you. These two things would still need to be body dot style dot background color. Because we do want to change that original background color, but we can still check the background color like this. Using this variable, which improves readability in the if statement. There we go. Now we got it working again. There may be ways to get around this if we were to take more time and dig into it. But you might be wondering, well, what's the benefit of declaring this up here? And then that down there. In this situation there's not much benefit. We could definitely write out body dot style dot background color right here. But let's say we wanted to use this background color somewhere else. And say, well, if background color blob, blob, it's nice to just have it shorthand and very readable because it's important to have readable code. You want to be able to look at it and see what you're doing. That's a little hint into what we can do with the background color. Now, we'll take it a step further and do a little console.log. Lets say this will be blue and this one. Whereas madness, There you go. Console dot log green. Now if we open up the terminal, there we go. Blue, green, blue, green. It's kind of cool. You can imagine all sorts of things you do with this. Whereas the real-world application, well, every website you go to basically has buttons. And when you click on there running JavaScript, that's doing all sorts of cool things. Calling functions that get data from the Internet that, you know, send messages. You can do unlimited things really with this functionality. So this is just a very basic look at it. And it's something I wanted to share with you earlier when I was talking about shortening your code using variables, is that there are a variety of what we call JavaScript frameworks out there, which are essentially somebody took JavaScript and made a version of it that has additional functionality or easier syntax in the code. That's called a framework. And you may have heard of these, some of our jQuery Angular React View, these are all JavaScript frameworks. They're just different ways of writing the code. They each have different syntax, different features. And so if you are having that shortened code is really important to you, then I would suggest looking into a framework. It takes some time to learn, but it can be a very rewarding experience. Oftentimes when you have a large complex app website that you're trying to do things with, with DOM manipulation. It can get messy quickly. I mean, you can imagine having all of these functions and just all this code written out here. It's a lot. And that's just the nature of vanilla JavaScript or plain JavaScript. But this change color function. If I were to do this in Angular, for example, it may only take three lines of code. Who knows? It can just be much easier to do things more quickly. But this is, it's important to know these things because a lot of these DOM manipulation principles that we use with plain JavaScript are used in those other frameworks. I know that I showed you a very basic example of just changing the background color through this button. In the next video, I'm going to talk about the project that I want you to do. That can be really rewarding, that can really teach you a lot. Because the best teacher I think is doing it yourself. It just digging in, trying things. I'm gonna talk a little bit about that, but that's all for this video. This just a quick recap. We talked about making our button do things. So we used the onclick attribute and set it equal to a function. And that function is important. We had to declare that inside of it. We could do whatever, whatever we wanted. You know, you don't even have to manipulate the HTML. You don't have to manipulate the page. In this function, it could do something totally different. It could compute math. It could, There's a number of things. But basically we selected the elements and did an if statement to change the color depending on what the background color was set to. Okay. I'll see you guys in the next video. 7. Project/Conclusion: Alright guys, you have made it to the last video of this DOM manipulation course. You should be proud of yourselves. The skills that you've learned here are going to be very important in any web development that you do. And really just improve your coding knowledge overall. These are things that really fascinate me that I enjoy and I hope you've enjoyed it too. To help you enjoy a little bit further, to help you learn more. I'm going to talk about the project a little bit right now. For this project, it's very simple. I just want you to explore, explore every function you can find anything that looks interesting to you. I want you to try it. If you have an idea of something simple you want to do like, Hey, if I click this button, I want to change the text on the page to something. Or I'm going to calculate some math. You can make a basic calculator or really whatever you want. I want you to go try it, explore functions, use the capabilities of VS code that I taught you as well as the Chrome Developer Tools to view the attributes, to select the things you want to change. There's so many things you can do. You could even try making a webpage completely out of escaping me completely with elements created by JavaScript with no hard-coded HTML or CSS. That could be a cool challenge. But really I just want you to have fun. I want you to explore and share your creations with others. If you learn something, show it to someone else. I think that taking the time to dig through this and I didn't learn it yourself a little bit and share your success with others is going, it's just going to feel really good. I hope you guys have enjoyed this course. I hope that you'll take me up on this project and just try it for 15 minutes. Try to manipulate objects, tried to do something cool with JavaScript and DOM manipulation. If you guys enjoyed this course, please check out my other courses on Skillshare. I have one on Angular and components, services, all sorts of things, routing. There's a great Angular course there. I'd recommend to go check it out and I will be publishing more classes hopefully soon in the future. So please check those out as well and share these with your friends. That could really benefit from this knowledge. But until then, My name is Taylor and it has been a pleasure being your instructor. And I wish you well.