jQuery 101: Learn jQuery (with JavaScript) from scratch

1. Course introduction: Welcome to jQuery 101, jQuery for beginners. Let's start with the big question. Is jQuery still used? And the answer is absolutely yes. Jquery is responsible for the JavaScript on hundreds of millions of websites. I'm going to repeat that. Jquery is responsible for the JavaScript on hundreds of millions of websites. Jquery was originally created to bridge a gap between browsers before JavaScript started becoming more standardized, Internet Explorer and Firefox use JavaScript differently. Chrome and Safari implemented JavaScript differently. And jQuery was how you could rate one language that just worked. Look, I know lots of people say you should skip learning jQuery altogether, but consider this if it's used by over a 100 million websites and still favored by organizations like Django and the jangle framework, then there is clearly a market demand for this skill. If you're getting into JavaScript recently, this course is for you. If you're a back-end developer and you want to write nice JavaScript without needing to learn an entire framework like react, this course is for you. To get the most out of this course. You will need to know a little bit of HTML. And if you know a little CSS, that's going to be helpful, but it's not required. And to really make the most out of jQuery, you should know some plain old just vanilla JavaScript. Hi, I'm Caleb, tell me and I've been using jQuery since it was invented in 2006. I've taught over 300 thousand students and worked with clients such as nasa, Mozilla, the Arctic Research Foundation, Samaritans, and the National Health Service in the UK. And this is my jQuery 101 class. Thanks for watching this introduction video, and I'll see you inside. 2. What is jQuery and why learn it?: Jquery is how we write one form of JavaScript and have it execute perfectly on all browsers. This is helpful because browsers don't implement JavaScript the same way. Some have different rules. Some don't trust certain features that you make and, and they make you write different code for different browsers. Jquery bridges that gap, meaning you can write JavaScript for all browsers and it will always just work. You don't have to deal with different browser support whatsoever. Jquery is also considered a library. It's not a framework, meaning you're allowed to mix your normal JavaScript with it and nothing bad could happen. And there aren't strict ways to write your JavaScript with jQuery. Whereas with a framework such as view WAS OR react dot js, there are certain rules you want to follow and there's a lot of magic behind the scenes that you don't see. Which makes learning other frameworks like react a little bit harder. Starting in about 2019, reacted JS and vis.js became very popular. And people now say things like, Oh, don't bother learning jQuery, but it's literally used on millions and millions and millions of websites. So why wouldn't you learn a skill that's so clearly in demand? And the nice thing is you can learn jQuery in a single day learning react dot js or view dot js is going to take a long time because there's such big frameworks, they're powerful too. But if you just need a little assistance with your JavaScript or you simply want to write less code than jQuery is 100% for you. And truth really from a senior developers perspective, you don't need to learn jQuery or react or view. You can do it all with vanilla or plain JavaScript, but these tools help us do more with less code. Furthermore, and again, this is a truth bomb using react dot js or view dot js on about 95% of all websites complete overkill. You'll end up spending too much time writing react for a small feature that can be written with jQuery in a matter of minutes, sometimes a matter of seconds. That's why I choose to write vanilla JavaScript or jQuery on most of my website's. Unless there's a real need for something big and complex, then I tend to choose, react or view. So the reason that you should be learning jQuery is because simply market demand, hundreds of millions of websites are using it. You might as well learn what is in demand. 3. Installing jQuery on your website: Hello and welcome to our first lesson on jQuery. In this lesson, we're going to be installing jQuery on our website. So first things first, we need to open up a browser and go over to jQuery.com. Now there's two ways we can install jQuery. We can download this and use it locally on our computer. So we can use an actual file on our computer, or we can use this thing called a content delivery network. So I click the download button there and we can download, download, download. There's another way we can use yarn and PM Bauer, all these other things. Or we can take the better way and where it says other CDNs, we can use Google CDN, Microsoft CDN JS or deliver or jazz deliver. And I'm just going to use JS delivered just for no particular reason. And in this course we're going to be using jQuery 3.5.1. And so what I wanna do here is get the minified version because we don't need all the extra source code. We don't need all the extra spacing or code comments. We just need the actual JavaScript and we don't really care what it looks like because we're using jQuery as a library. So let's copy the HTML and let's open up Visual Studio code or any text editor that you want to use. Let's create a new file here. Let's do HTML five. That's not gonna work. We're gonna have to save this first. So I'm gonna save this as index.html. And then I can do HTML colon five, hit tab and it auto fills a bunch of cool stuff for us. And we can do jQuery one-to-one as the title. Now, when we're using JavaScript, we typically want to put JavaScript at the bottom of our body, not outside of the body, but just at the bottom, just before the closing body tag. And that code that I copied there, I'm going to paste that in here. And we're gonna see that this is coming from CDN ab.js deliver.net slash npm yada, yada, yada. And so what a content delivery network is, is basically a series of servers across the world. And when you try to download this particular file, it's going to go to the closest, the closest server to you. So it's going to be faster download. The nice thing about this is they can also provide a layer of caching. And when there's caching, that means if someone has already downloaded this from a particular website somewhere else on the internet, and you're now accessing the same file is already been downloaded to your computer. And so you don't have to download it again, which is really, really nice. And that's actually the reason we're using a Content Delivery Network or CDN, is because we want that extra layer of caching just to make our websites super fast. It also means we don't have to maintain an extra file. Now when we are writing this, we need to have a script tag and a closing script tag. And inside of here, we are going to be waiting for jQuery to properly load. So even though this file could technically be downloaded on your computer, your browser might not have fully recognize that the whole file is there an end evaluated or executed the code yet, so it might not fully know. And so we do this thing where we wait for it to load and we do that with this weird little syntax and we'll talk about syntax in its own lesson. But for now we just need to get this up and running so we can do document.ready. Function, Console.log. Jquery is loaded. And so what we're doing here is we're an, again, we'll talk about syntax and a little bit. But we're using this as a selector. We're selecting the entire document, the entire page, and when it's ready, when the Document Object Model is loaded, when our JavaScript is done, loading execute this function and that's called a callback function will talk about those as well. And then once that's all done, just console log jQuery is loaded. And so if we go to our browser, open up a new tab and at the top of that is going to file, that's just outside my recording area, but I just want to file and then we can go to open file, select our index.html file. And we're going to see absolutely nothing happens. But if we right-click and go to Inspect and go to console, and let's not preserve the log there. It's just a setting from a project I was working on. Let's make this larger. It says jQuery is loaded. So every time I refresh it says jQuery is loaded and it should be almost instant. So you wouldn't actually notice that it is or isn't. Evaluating your JavaScript, your jQuery library. It's supposed to be super fast, but this is a good little method just to make sure that we can continue to use jQuery in our code. So before anything, what I would like you to do is make sure you go and get jQuery from a content delivery network, create a brand new index file like this, and then just write this weird little script here. And again, we will dissect this over and over again. So you'll be super familiar with what this actually is, but you just need to write this out to begin with. And then we will move on to the next lesson. So once you've done that and you're ready, let's head on over to the next lesson where we talk properly about jQuery syntax. 4. jQuery syntax: Alright, when we're talking about JQuery syntax, it's a lot like JavaScript syntax. It is actually, it's just all written in JavaScript is just a certain way to write our JavaScript. And so in our last lesson, we wrote this weird document.ready function things. So let's break this down a little bit. So that's where we're going to be putting all of our code in every lesson moving forward when we're talking about jQuery. But the syntax here, the style in which it's written, looks a lot like this. So we've got a dollar sign with parenthesis, and this is our selector. And so if you come from JavaScript, this is a lot like the document dot query selector method. The only difference is we don't have to write this anymore. We can simply write a dot div in here and that's going to select it for us. And so it's a nice little shortcut. So in here we have a selector, a selector. Then we have some sort of function or event or method or, or something happens with this selector. And so we see up here, we see ready. So we've selected document and we're gonna say when it's ready or when we have a button, we can say onclick or we can do something. So there's some sort of event that happens here. And this by itself is just a method or a function. And then it takes this thing called a callback function. And most things in jQuery take a callback function. So it's going to do a thing. So it's going to select something in your page. It's going to then execute or, or register some sort of event. And then when that's when that event is happening, what do we do? And this is where we wrap it in a function. So this is just an anonymous function and this just makes sure that everything stays scoped in here. So it's a nice way to make sure that your variables don't leak out of this particular area. Now, in our body up here, let's say we have one dot custom class name with an ID of custom ID. And so you can actually see how I wrote that. If I just undo that, you can see I wrote one dot custom class name id, customer ID. And this is exactly like writing CSS. So if you know CSS already, this is going to be incredibly easy for you. This is regular CSS and it just happens to be that VS Code has this thing called an Emmett abbreviations. So you can write your CSS and just simply hit tab and it will create your element for you. So we can say in here, Hello world. And now with our selector, and let's go ahead and create a new example here. In the last lesson, we did the document.ready function, yada, yada. We can use semi-colons. We don't have to use semi-colons, its regular JavaScript. So regular JavaScript rules still apply. And we can use a selector in here, so we can select this one like this. And we can do a thing here. And that's going to select this one. We can also say custom class name, and that's going to select this AS this H1 along with any other element that has this class name. Or if we wanted to get something completely unique, we could do ID, custom ID. And again, this is just regular CSS. And so when we're writing CSS, CSS, this is exactly how we write it anyways. This is how we create a custom declaration using a CSS selector. And so in jQuery, we do the exact same thing, and in modern JavaScript we do the exact same thing. So we have several different ways. We could even get really specific and say grab all H 1s with a custom class name. And let's say text is going to be changed me and we're jumping the gun here a little bit. And we're going to learn about text down the road. But I wanted to show you that this is an example. So what this is going to do is select this element up here. And then it's going to take that tax and change it from helloworld, which we know what's going to render hello world in big letters. And it's going to say changed me or let's change it to This was changed via jQuery. Let's save that. Refresh our page. And it says this was changed via jQuery is. But if I refresh fast enough, you can see that it flickers. And so if I right-click and view my source, let's make that just a wee bit. We can see that it actually says hello world. So when the page renders it saying hello world in here. But once jQuery is loaded, it changes it to. This was changed via jQuery. Now that is pretty much all the syntax we need to know right now there's a little bit more when it comes to event listeners, but we'll tackle that when we get to event listeners so that I don't overwhelm you with a lot of information at this moment. But the thing you need to know right now is this and that. Now what I would like you to do is this exact example. Go ahead and create an H1, select that one somehow using either class ID or an element selector. And then change the text with dot text and put some sort of new text in their viewed on your page if it changes properly. While I, you have now written some jQuery, it is as easy as that. When you're done, let's head on over to the next lesson. We'll talk a little bit more about selectors, specifically. 5. jQuery selectors: Okay, welcome back. Let's talk about selectors. So a selector is largely what jQuery is built around. And the reason for that is because when you're working with JavaScript, you're usually working with your document object model, which is all of your HTML in here. And the way that it's structured, that's your document object model in a nutshell. And so we can have an H1 in here, and this could be our custom title. And let's just set up an example here. We can have a button in here, and this is, this is a custom button. Let's go ahead and select Paragraph. And let's go ahead and put some lorem in there. Let's change from a Django templates to a standard HTML template. So if I type Lorem, hit tab, I get lorem ipsum p. Hit tab, I get a paragraph, Lorem hit tab I get another lorem ipsum paragraph. And let's just add some unique things in here. So we've got a paragraph and let's go ahead and make sure the paragraph and the button and all I did there was I selected one area and then on a Mac, I hit Command click. On Windows, it's likely to be altered or control-click. So I can type in two places at once. Class, custom, class. And so let's go ahead and work with some of these selectors now. And I'll just make that a touch smaller here so we can see it all on one screen. So let's go ahead and select R one and change this. And actually in fact, before we do that, this is what our page looks like. We've got two paragraphs and I'll make this a little smaller there. We've got a title, We've had a button that does absolutely nothing, and we've got two paragraphs. This paragraph in this button share a class name and the H1 and the paragraph are by themselves. In fact, let's do one extra one. I'm just going to throw this in here. This wasn't planned, but let's throw it in here anyways, let's add an ID to this paragraph. It's called Customer ID. And select, let's select each of these. Let's select our H1. So we could say selector. And maybe I will make that bigger selector. One dot text changed via jQuery. Now that's only going to select this one H1, but if there's multiple, each one's is going to change them both. So let's do this. Our custom title one, our custom title to. Let's go ahead and refresh our page. And it says, you can actually see that it flickers there when I refresh over and over and over again. And when I view the source code here, we see our custom title one, our custom title too. And we change them both to change via jQuery with a single line of code. How nice is that? So we selected all the H 1s on the page and we change it to change via jQuery. Now in regular JavaScript and vanilla JavaScript, we have to loop through all of those and change them one-by-one. Jquery does that automatically for us. And let's go ahead and select all of our paragraph so we can do dollar sign, parentheses, paragraph, dot Html instead of text. And let's do a bold tag in here. This is bolded and replaced. And so we know what this is going to do. We just saw this example is an H1 is going to select this paragraph and this paragraph, he doesn't care about the class name or the idea at the moment, we're not selecting those. We're just going to select both paragraphs. And let's go ahead. And when we refresh our page, you can see that it flickers again quickly. If I refresh fast enough and over and over and over again. And it says, this is bolded and replace it selected both of them. Now what's nice is you can select multiple things. So let's say we didn't want to do that. We wanted to select all the H 1s and all the paragraphs, but we did not want to select our button. And we wanted to change the inner texts you changed via jQuery. Let's go ahead and execute this. So it's going to select this one, this one, this one, and this one. And it's going to change that text to change via jQuery. Let's just make sure that it's working at say, number two. And it selected all of them. And all we did, there was another regular CSS selector, we said h one comma p. So select the H1, also select all paragraphs. Now because this is still JavaScript under the hood, we can select a paragraph that's like a paragraph by its customer ID and not ID its class. Let's do dot custom class. And where I'm getting that from is rate here, dot custom class and dot custom class. But this time I'm selecting just a paragraph with dot custom class on it. I'm not selecting the button yet. If i wanted to select both of them, I would get rid of the p. But I want just p with a custom class. And then I can say dot text changed again. And let's add a number three here. And when I go back to my browser here and refresh what this is actually doing, believe it or not, is it selecting this, this, this, and this and changing it to change view jQuery number two, which we see here. And then because again, it's JavaScript under the hood, it's going to execute one line at a time. So it executes that line, then it's going to execute this line, and it selects our paragraph and changes it to change view jQuery number two. But then it also select P dot custom class. That's this one, and overwrites it a second time. Now we can select by an ID as well. So let's go ahead and select an ID and we don't need to use P custom ID, although we could, if we wanted to, we don't actually need that element selector. And there we could just use ID. Same with our class. But because an idea as opposed to be completely unique in your page or on your page, there should never ever be more than one customer ID. Where's there can be more than one class name of the exact same name. There should only ever be one customer ID or one particular id per element. And so we can select this without having to select or specify a paragraph. Because our browser knows that if we're following the rules, there's only ever going to be one customer ID in here. And we can say this dot text changed again, and let's do a number four in there. And so this is what the code currently looks like. So it's going to select all over h 1s and our paragraphs. Change it to the one that ends in number to select the paragraph with a custom class change out to the one that ends in number three. And then select just happens to be a paragraph which is already selected up here. But we're going to select the customer ID, which is the paragraph. And we're going to change this one to change it again, number four. And when we refresh our page, changed again number four. And so now our pages are immediately more interactive. We can overwrite whatever HTML has been given. So if someone gives you a boring HTML page and you want to change a bunch of stuff, but you're not allowed to touch the HTML, which actually happens. Sometimes you can use JavaScript and jQuery to change it. Now, I'm not gonna talk too much more about selectors at this point just because it really is just a CSS selector and that's more of a CSS thing. Lin, It is a JavaScript or jQuery thing. So whenever you want to select something very specific, you could select your body. You can select some element, maybe a paragraph, and then you can select all strong tags inside of it. This is just regular CSS selector. So you're selecting your body, selecting all paragraphs inside the body, selecting all strong elements inside of a paragraph. And then we would be changing it. We don't have that example setup, but if you'd like to, that would be a, a fun little thing to set up for your project or not your project, but your homework for this particular lesson is to create a very specific selector, do dot text, and then change the text on it. Go ahead and give that a shot. When we are done, we are going to look at changing some HTML on the page dynamically. 6. Dynamically changing HTML: Let's take a look at how we can dynamically add HTML to a page. And so for this, we need an example. Let's give our page a div with a customer ID of custom ID. And there's not going to be anything in here, so it's going to be completely empty. And we know that if we go back to our browser and we refresh your page, there's going to be nothing in there. And if we look at our source code, it just says custom ID. There's nothing in there. Let's go ahead and add some custom HTML in there. So in the last couple of lessons, you saw that we would select this ID with custom ID. And I'm using the id selector here, dot txt, text in here. And so we were using taxed and that's, that's all, well and good. But that's not actually going to add any HTML. So if we wanted to add an H1 and here we can say H1, HelloWorld. And unfortunately this is not going to do what we expect it to do. And let's go back to our code here. It's actually going to print out H1, HelloWorld eight slash H1. That's maybe not what we want. Maybe we want to actually add some, some proper HTML here. So if we inspect this, we go into our elements and screw that up to make that touched smaller. We can actually see that there is no one element, it's just plain text. And so that's not always what we want. Instead, what we want is to use HTML. And so how this works is you have a selector, you do dot HTML opening parentheses, and then you put your HTML in there. Whatever that HTML is, it can be a string like this, or it could be a variable. And then you just close it with your closing parentheses. And the semicolon is optional. So I'll sometimes use it, sometimes not use it. Let's go ahead and refresh our page. And now we see we actually have a proper HelloWorld H1. And in our document object model in our source code here, what our browser sees it as, we have a proper H1. So what's cool about this is we can now go in here and let's write a span with a class of custom class, span, text slash span. So this is getting a little bit hard to read just because it's getting to be wrapped on, on multiple lines here. And because I'm pretty zoomed in with my editor. But if we refresh, we are going to see there's a span. Now we can go ahead and select that span. Once it's created, we can go ahead and select that span text changed. And we're gonna see that it goes from span text to change. Just like that. Now, spacing is a little bit off and this is kind of an ugly example, but it is a very functional example. And jQuery isn't about making pages look beautiful. That's what CSS is for. Jquery is meant to be a shorter way of writing JavaScript. So there's a difference between HTML and text. We learned about HTML in the next lesson. Let's go ahead and learn about dot text. What I would like you to do for this particular lesson is go ahead and select an ID or an element or rather doesn't have to be Beidi could be by class name, could be just select all the divs on the page, do dot HTML, and then write some actual HTML in there. And take note. You can always right-click inspect, go to Elements tab. And you can see that there are actual HTML elements in here. Once you've done that, let's head on over to the next lesson. 7. Dynamically changing text: Let's take a formal look at change text. And we've actually worked with this a lot so far, a lot, a lot in pretty much every lesson so far, maybe even every lesson so far. But let's take a formal look at it. And so in the last lesson, we looked at dot HTML. In this one we're going to be looking at dot text. And so what we can do here is Let's not do a div or an H1. Let's do a section element. And let's say put some HTML code in here. And so we can select this selection or section element with dollar sign, parenthesis, section dot. And then we can either change the HTML or the, or the the text. Now, if we wanted to actually put HTML code in here, we can't use HTML. So if I put a bold versus bold tag. So this is old way of doing bold. This is the new way of doing bold. Just save this and refresh my page. It actually, it tries to render itself. So if I go into the section here, it fixed up my B and strong elements. And that's because we're actually injecting HTML into the page. We don't need to do that though. If we actually wanted to see this code, we can just do dot text. And that's the difference between dot txt index.html is when I refresh the page, it actually shows up so I can write HTML in here now, which is really great for coding websites, coding blogs, things like that, whenever you need to actually display some sort of code. Now your task for this particular lesson is to select an element. It doesn't have to be a section, it can be any element. And then inside of that element with jQuery, I want you to use dot txt n dot HTML and write some HTML inside of it and see what the difference actually is. Now you've seen what the difference is on my screen, but it's not quite the same as actually getting some hands on experience. So go ahead and get some hands-on experience. And when you're done that in the next lesson, let's go ahead and talk about getting form values because form values aren't quite the same. 8. jQuery getting form values: Let's talk about how we can get form values now. So in the last couple of lessons, we did this cool thing where we did dot HTML. We also did dot text. Now, that's cool and that works with elements like a section that has content inside of it, content in side of it. And that's fine. But what if we're working with an element that doesn't have content inside of it. And what if we're working with an input element? Now in input element doesn't have a closing tag. There's no text inside of it. How do we deal with this? So first of all, let's save this. And this is what our page looks like. It's just an input element. It's a very boring input element. But what we can do here is we can now go ahead and get the text in there. So let's give this a default value. Hello world, just the defacto sort of texts that every programmer tends to use. And it says hello world. What if we wanted to be able to pull this value out? Well, let's start by first selecting it. We're going to select it by an input is the only thing on our page and we can just select it by its only input value. And then we can do dot val. Now there's two things we can do here, and I'm actually going to talk about DOT test.html as well in just a moment. But we can do this. Constant value is equal to console.log set value. And all we're doing here is again, we're, we're selecting that input dot. And then we used Lotvall, not dot value, dot va al. And we aren't putting anything inside the parentheses here, it's just empty. And so when I refresh the page and go over to my console, it says hello world. And that's pulling that value out of here so we can change that value to Hello World 1-2-3. And when I refresh the page, it says Hello 1-2-3 or helloworld 1-2-3 inside of the console. Now what if we wanted to change this? Well, that's really easy too. We could change this. And we could say, this is changed and always simply do is add a value. Now, we don't want to necessarily work with this anymore and let's get rid of that. So we're gonna select that input, say that value. This one up here needs to be, this is changed. So let's go ahead and check this out. And it says this is changed, but in our source code, it says hello world 1-2-3. Still. It just happens to be that JavaScript and jQuery together or overriding that value. And so you can actually see when I refresh fast enough it flickers a little bit. That cool little trick with dot val. When it's empty, we can do the same thing with dot HTML and dot text. So let's go ahead and give that a quick little example as well. Section that just throw some lorem in here, some lorem ipsum I type LO REM hit tab on VS Code and it automatically fills it with Lorem Ipsum for me. So I don't have to think about some sort of dummy text because sometimes it's hard to come up with examples like that. So what we can do here is now we can select this section and we can grab that text. And we can put that in a variable as well. So const text is equal to console.log text. And when I refresh this page, we have all this text in here, and we also have all this text in here. Now, notice that it actually also has the whitespace. And that whitespace, if I refresh a source code comes from red here all the way up to that new line in there. And there's also extra white space at the end. To the end of the section. We can do the same thing with dot HTML, and let's make this bolded. So we're just gonna bold the word REM. And we can see that it's bolded in here. And it's bolded in here. Now here's the difference. When we do dot text. Notice that this one is bolded up here, but REM over here in our console, it has the HTML stripped out of it. So just be careful there. So that's a fun little three in one lesson. What I want you to do though, is just ignore this for now. Just tuck that in your back pocket. And I want you to create an input element and use dot val to set the value of the input element. When you're done that, let's go ahead and talk about how we can dynamically add HTML to a certain part of a page, like inside of an element to the front or the back of it. 9. Prepend and append: Okay, let's talk about appending and prepending HTML. And so what we're going to do is we're going to select an element. And then we're going to add some, some more element or some more text at the back of it and the front of it inside of that particular element. So what we've seen before is we could have like an H1 with some text in here. And we've been able to select that one and then use dot HTML to put more HTML in there. But let's say we wanted to add a span at the end or we wanted to add a span at the beginning. Well, we'd have to pull all of this out stored in a variable, overwrite that variable with HTML inside of it. There's actually a better way to do this. So first things first, let's go ahead and do a document dot ready function. And that just allows us to put our jQuery code in here safely. Let's go ahead and select that h one. K one is selected. Now I can use append, APP END OR prepend. Append goes to the back, prepend goes to the front. So let's do append, and let's add some HTML in here. Let's add strong. This is bold. And that's, again, that's going to select this H1, and it's just going to append some stuff in here. So let's go ahead and save our page and refresh. And you can actually see that when we inspect here h one, at the end of it, we have HTML, we have strong, this is bold. And in fact, that was a bad example because it's hard to see. Let's do underline. There we go. This is Bolden is underlined. Let's make sure that's consistent. Consistent copywriting there. So this has some text in here. This is underlined. We could also select that same H1 and we could do prepend. And let's do a tally six. This is italics. And what this is going to do is put some code at the very beginning. Code in here. And that's exactly what it does. It says this is italics in our H1, we've got i some text you, but in our source code, we don't have any of that. And so now we are dynamically marking up our page just using JavaScript and jQuery. Now a fun little thing here is if we wanted to, we could chain these together. So let's go ahead and put this on a new line because JavaScript doesn't care about new lines. And let's go ahead and get rid of this one. And so we're going to select this one, and then we're going to append, then we're going to prepend. And what this looks like essentially is just this. We're changing it together. But we can put these on new lines. So it just looks a little nicer. And this will apply both of them together. So let's right in here and in here, number two, so that we know this is actually working, that this isn't just executing the same code from the last example. So let's refresh our source code and we see that nothing has changed in here. Our jQuery has changed, but the actual dom hasn't changed the Document Object Model. Let's go ahead and refresh the document object model. We're going to see this is italics number two and this is underlined number two. And that worked. And all we did was instead of selecting both of them, we just selected one. We use one selector and we reuse it. So we appended and we prepended. Now what's cool about chaining here is we could also do 2.txt. This is changed. Text, then append, then prepend. And so some text in here is going to say, this is change text and it changed all of it for me. So this one no longer has any of the contents that were original to my page. Jquery has now overwritten all of it and it has prepended and appended some HTML as well. What I would like you to do as little fun task is go ahead and give this a shot. You don't have to worry about the text part. But go ahead and append some HTML, prepend some HTML2, any selector of your choice. And then when you're done that, chain them together like what I've done. When you're done that, we're going to look at selecting an element and then adding some HTML outside of it, but before and after. So some here and some here, because right now prepend and append only work on the inside. We want to now work on the outside. 10. Before and After: In our last lesson, we appended and prepended some HTML to our page in this lesson, let's go ahead and add some HTML before and after an elements. So let's give this a div with an id of target. And there's not going to be anything in here. Now, I'd like, let's put something in here. Add HTML before and after this. And so let's go ahead and because everything in jQuery is basically select or base, let's select that target. We can even do div ID target. Then we can do dot before. And that's just literally dot before. And let's put an h3 in here. Helloworld, This is a title. And let's do it again. Let's select a Div selected by its ID, and then let's do after. And let's do a paragraph in here. This is a paragraph. And so what our pages now we're going to do is it's going to select this element. And before this element, just before it. Right in here. If I could spell any words correctly, right in here is going to say, it's going to say hello world, this has a title. And afterwards it's going to say with some sort of paragraph in here. This is a paragraph and this one is actually going to be an h3. So it's going to look something like this. Now let's go ahead and get rid of that so we don't have that in here. And delete, delete, delete, save. Let's view our source code first. Make sure that it's not actually adding anything in there. And let's go ahead and refresh this Hello World. This is a title at HTML before and after this, and this is a paragraph. And if you don't have your console open or your dev tools, you can right-click. You can go to Inspect, opened up the elements tab, and you can see there's now an H3. There's the same div that we originally targeted, and there's a paragraph after it. Now, just like in the last lesson, we can, if we wanted to chain these together. And so we only need to select this once and then we could say before and after and do these things. Let's go ahead and save this actually, let's go ahead and make sure that caching isn't happening. And we'll just put a number two in there so we know that this is working the way we expect it to work. So go ahead and refresh. Hello world. This is the title number two. This is a paragraph number two. And that is how we add HTML before and after an element. Now what I would like you to do is the same thing. Just mimic what I've been doing in these videos just to get some hands-on experience. And again, I can't say this enough is when you're learning to code, you can watch as many videos as you like. But nothing is going to compare to actually getting some hands on experience and being able to write it and to be able to create muscle memory. So go ahead and give this a shot. When you are done that, let's head on over to the next lesson, where we actually select an element from the page and completely deleted. 11. Deleting elements: Let's take a look at how we can delete an element from a page. So for this, let's create a more complex example. Let's create a div. And it's gonna have a paragraph in here. And it's going to have lower them in here. And it's going to have another paragraph in here, some more Lorem, and another paragraph in here with some more Lorem. So we have three paragraphs in here. And let's say we wanted to select this middle one class, middle paragraph. And when we Viewer page, yes, it's boring, but this is going to be a good example. So we have three paragraphs in here, inside of a div, and one has a class. So let's go ahead and create an interesting selector here. But before we do that, let's make sure our jQuery can be loaded. Document.ready function. Spell it right for the third time function. And then we can put our jQuery in here. Let's go ahead and select this. Now there's a few different ways we can select this particular paragraph, but let's go ahead and select one. In an interesting way, a way we haven't really seen yet. So let's select all divs on the page. Then let's select all paragraphs inside of the div. And then let's make sure that we're only selecting the paragraphs that have the class middle paragraph, middle paragraph. So now we're getting into an interesting selector here. And to delete this, all we have to do is type dot, remove parentheses. And that will literally deleted from our document object model. So if we view our source code here, we have three paragraphs. This still shows up. But if I refresh the page, you can see that it doesn't show up. And if I go into my elements here, we only have two paragraphs. Neither of them have the class middle paragraph. Now what's cool about this is because this is a class selector. We can say middle paragraph. It's no longer the middle paragraph, but let's just pretend it is. We can select both of these at the same time and delete them at the exact same time. So now it's going to select our div, select all paragraphs with a class of middle paragraph. Well, look, two of them are highlighted there. It's two of them. And we're going to delete both. So if we view our source code again, it still shows up as normal. There's still three paragraphs in there, but JavaScript is overriding our page and it's getting rid of the other two. And in here we have a div and a single paragraph. We don't have three paragraphs anymore. Now this is completely safe to do. This isn't going to ever delete or remove anything off of your computer. It's only ever going to work with code inside of your page based on the selector that you give it. Now if you wanna do, and you could also just say, hey, select every paragraph, remove it. But because all of our paragraphs are in a div, we could select that div and we can remove that too. And we can see in your document object model that div doesn't exist. Our source code hasn't changed, but JavaScript is overriding it. So what I would like you to do as a fun little task, go ahead and create any sort of example with HTML. Select a particular element, just one of them, and then remove it. Verify that it's been removed in here. Verify it's been removed in here. And once you've done that, let's head on over to the next lesson where we select an element and then get rid of all of its children elements. So we're going to empty it out. 12. Deleting child elements: There will be a time when you need to select an element and all of its children elements need to be removed. And so we could write some fancy selector to select pretty much everything. So we could say, for example, selected div, and it's like everything inside that div dot remove. But there's a better way to do this. And so let's go ahead and set up an example here. We can say div, and this is going to be our parent element. So parent element, and this is an HTML comment here. Right there. Let's write a strong bolded word here. Italics, it, italicized word here. And let's also select or not select the Create a paragraph with some lorem ipsum in there. And so if we view our page, okay, no big deal. We still have this div. What if we wanted to select this div? And let's give this an ID of parent. What if we wanted to select this parent ID div and get rid of all this stuff in here. That's really, really easy to do. And let's actually make this a little bit more complicated. So first of all, let's start off with div, select the parent ID. And then we could just do dot empty. And what this is going to do is select that ID, select that div, and just get rid of everything inside of it. Now we can chain together dot HTML and we could say something like hello world. And that got rid of all of the elements inside of this div and replace it with hello world. Now if we look at our source code, all of our regular source code is still there. This is not going to change throughout this course. All of our source code is going to be exactly as we write it. Javascript will continue to overwrite it. So this is going to be exactly what we write and JavaScript is going to change it. So from here on out, I'm probably not going to show you the source code too often anymore just because, well, it's going to work the same way over and over and over again. Now, let's go ahead and sort of changes into proper JavaScript. So we could do const. Parent is equal two. And when you're writing jQuery and you see a dollar sign in front of a variable name. That usually means there's some sort of selector. And so we can go ahead and select this. And then if we wanted to, we could say parent.value empty or parents dot HTML stuff in here. And we're going to CSS stuff in here. Now, what's sort of interesting about this is sometimes you just need to empty out an element just for something else to load a little bit later. But if you need it to happen right away, we actually don't need to use empty whatsoever. We can select this entire parent element and we can overwrite the entire HTML with a sentence that says stuff in here, Stephan here, and there are no child elements. Now if you're just coming into the world of document object models and you're like what's apparent, what's a child? That's a good question. A parent element holds child elements. A child element is inside of a parent element. That's all it is. So let's go ahead and give this example, a shot here, a little preview. And we're going to see in here, we have actually overwritten all of it, so we didn't have to use dot empty. We're really comes in is if you have some processing to do or if you need to fetch data from like an API, you could parent dot empty. Let's delete that parent dot empty. And then do a thing so you can fetch some information from an API somewhere. And maybe that takes three seconds. And then you can say parent dot HTML and put some new HTML in there. In the next lesson, let's start talking about event listeners, event listener syntax and how we can make something trigger when we click it. 13. Event listeners and the click event: Welcome to the world of event listeners. Event listeners are very, very interesting things. So the first thing we need to do is look at syntax, kay? So actually the first thing we need to do is talk about what an event listener is. An event listener is. When you have a button on the page and say it says Click Me inside of it and you click that button. What is supposed to happen? That isn't event listener. Or if you have an input element and you start typing in it. Every one of those letters that you press on your keyboard is an event. Anytime you move your mouse, anytime you resize your screen, anytime you focus into an input element or blur out of an input element or like leave the input element. These are all events and we're going to be tackling a bunch of these in this course. So first things first, let's take a look at some of the syntax here. So there's two ways to do this. There's the, there's the right way which you're going to see in the jQuery docs. And then there's arguably an even better way to do it, which is going to be future proof to Ajax and document object model calls. So let's take a look at both. So first we have some sort of selector and so we can select the button. And then we can say dot click. And this is going to take a function. And so without the function, this is what it looks like. That's an event listener. Now this function that we're passing in here is merely what we want to do. So we can say console.log. I am clicked. And because we have this button on here on this page that says click me, let's go ahead and give this a shot. It says Click Me and in the console here, every time I click it, it says I am clicked. That's it. That's all there is to event listeners with jQuery is a super, super easy. Now there's another way to do this. I'm going to comment this out. And arguably this way is better. You can have a selector dot button and then you say dot on what you want it to do. What do you want it to listen for? You wanted it to listen for a click event. And then you pass in a function console.log. This is clickable to refresh your page. And it says this is clickable to now Justin, really make life crazy difficult and hard to learn jQuery. Let's learn a third way. And this is actually the best way, but we're not going to do the best. We were going to do the middle way moving forward throughout this course. But the best way is document dot on click, and then your button, and then your function, console.log. And let's just log 33333. And this works too. And so there's actually a reason we do it differently here. And so we're going to be using this method going forward just because it's the easiest to sort of write to understand. And this one is a little more complex, but there is a reason that we do the complex wave and the complex way is because what if we ajax or dynamically created a button? And let's go ahead and do this and I'll show you an example here. Div ID. Put. Button here. Let's go ahead and select this. So we can do constant. Let's call it parent is equal to that selector. Nope, that's id selector. Then we can do parent.value HTML. We can put a button in here. Click Me slash button, button, button. And let's go ahead and get rid of the Click me one as a Click Me dynamic button. That's what this is going to be. Click Me dynamic button, it shows up. There's no event listeners yet. Let's go ahead. And let's say this event listener was created first. So how JavaScript and jQuery is going to work is from the top to the bottom. It's going to select all the buttons on the page, and it's going to register a click function. But currently, at this point in time, there just aren't any buttons on the page, there's nothing to click. Then we selected that parent and put a button on the page. And when we save this and refresh, we see that nothing works. Now, that's fine. If we can move this code below here. Because this button is now going to exist on the page. And then we can register the event listener. And this is going to work. Now, That's not always going to be the case. There's going to be a lot of times where an event listener is registered. But then your pages going to dynamically change. And this is very, very, very common in modern websites. So what do we do? Can we use this option? Lets move this up and let's comment this out so we know that it's not going to work. So we're now going to select a button and then onclick and we're going to say when that button is clicked, console log, this is clickable two. Now the same problem is going to happen here. It's going to look for all the buttons on the page. It's going to try to register an onclick event. It's not going to work for us. Let's refresh the page and see that this button every time I click it doesn't. Okay, so that's no good. This is nice, clean syntax, this is nice to write. It's not good enough for dynamic content. Dynamic content comes in here. And let's move this up. And so what this is saying is select the entire document when you click the document and you click the button. So it could be this particular button in here or whatever you want to give it an ID or a class or anything like that. This is your selector. Then do a function and this is going to make your websites dynamic proof, Ajax proof. So when things dynamically load on your page using other JavaScript, this is still going to work. And so let's go ahead and refresh the page. And we see this now works. We registered a click events on all buttons, but we attach it to the document. So even if there is something dynamic happening, we can still execute this. So this is really good to know. Tuck this in your back pocket for now. But we're going to be writing this way moving forward just because it's a little bit cleaner. Now what I would like you to do is create an event listener, something like this. Select a button. Dot on. Your first parameter is going to be what are we looking for? We're looking for a click event. When you click the button, what happens? Then you write a function. This is called a callback function. And anytime you click this button, what is it going to do? Go ahead and give that a shot. Once you are done with that, let's head on over to the next lesson where we talk about moving our mouse over an element and off of an elements. So we're going to hover. 14. Hover events: There is a way to register an event when you put your mouse over something and when you move it off of something. And for this, let's go ahead and write a little bit of CSS. So let's add some styling here, and let's create a box. And it's going to have a width of 200 pixels, height, 200 pixels. Background color is going to be black. And let's put in the middle of our page, let's do margin, 50% or 50 pixels top and bottom and right in the middle of the page. And so now we need to go and create a box and, and look at this CSS. This is an ID for a box selector. Box. I can m0 to abbreviate that. So I'm not gonna put any text in there. And then to select that box, all I have to do is write the exact same thing. And so now we're writing the same thing across basically three different scripting languages. We've got HTML, CSS, and JavaScript. So now we can say dot box on mouse enter. And what do we do when we put the mouse inside of this box, that's console dot log, you entered. And say your mouse is a hovering over this box. And so when we refresh the page, we have this black box. And every time I put my mouse over it, it says your mouse is hovering over this box. And so it only does it once while I'm on top of this box. And when I move out, nothing happens. When I move in, happens again. Now if you register when you move your mouse out, very, very simple. We can now chain these together and we can say on mouse enter, we can also say dot on mouse leave. Let's write a function here. And we can say console dot warn. You left the box. And so all we're doing here is mouse enter and mostly of now as a quick little recap from last lesson, cuz the last lesson was pretty intense. All we're doing here is some sort of selector, dot on the event name. And then a function, and that function will do whatever we wanted to do in here. This is the event listener syntax. That's all it is. So just as a quick recap, we have a selector because everything is based on selectors in jQuery. Well, almost everything on to register an event, whatever that event name is. In this lesson, we're using mouse enter and mouse leave, and then do a function whenever that event is triggered. Okay, let's save that and refresh the page. Ok, nothing is happening and move my mouse in. Your mouse is hovering over the box. It says you left the box area. Every time we go in and out, in and out, in and out. Now I'm going to be completely honest here. This was super popular a number of years ago, but people don't really use hover events anymore. We try to use hover events in peer CSS if possible. Sometimes that just isn't possible. So we can use jQuery or we can use vanilla JavaScript as well to make this happen. But typically we try to stick with CSS to make any sort of event happened when you move your mouse over something or move your mouse off of something. And in CSS, it's as simple as saying box hover, and then it does a thing. And when you move your box, or when you move your mouse off of this box and it's no longer hovering, it goes back to its default. So that's all it is then that's why we prefer CSS. But again, sometimes that's not possible. And sometimes we need to write a little bit of JavaScript, a little bit of jQuery to make that possible. Go ahead and give this a shot. I want you to do two things here. I want you to select some sort of element and register a mouse enter event. And just console login. We don't have to do anything fancy yet. We'll get into the fanciness a little bit later, but just come to log something. And then when you mouse leave console log or console worn something else. And then part two is I want you to chain these together. So currently, we know that it can look like this. Doo-doo-doo-doo rooms in a slack that bump that inwards. So this works, this will work perfectly fine. But I want you to chain them together to make a little nicer jQuery code. It's also a little bit more performance. It means your browser doesn't need to look up this particular elements or this particular selector more than once and can do it just once and use it over and over again. Once you've done that in the next lesson, we are going to be talking about the key up event listener. So what happens when you type in some sort of input elements? You type something in there. How do we get that value out of there? What happens every time you press a key on your keyboard? We're gonna talk about that in the next lesson. 15. Keyup events: Let's talk about the keyup event. In the keyup event we have like an input. And let's give this a class of select me and a default value of thing here. Now, hello world, or they got better. And so we need to select this by its class or, you know, we just like to bites attribute. We could select it by its element type. We get selected by all sorts of things, but let's go ahead and select it by its class. Then we can say dot on key up, function, console.log. You pressed KI. And so let's go ahead and refresh our page. And when we go in here, do, do, do, do, do, do, do. Every time I press a key, it log something in my code so you can see them spamming it down here. And that's all there is to it. And so at this point if you're thinking, wow, Kayla, this, this is just like the same thing over and over again. You're absolutely right. It's the nice thing about jQuery is once you learn one thing, it's very similar to all the other things. And so it makes learning jQuery really easy. It also makes writing JavaScript really easy. Now let's say you want it to get the value out of this. This is going to get very interesting, so it's actually delete that. And how did we get this value? We have two ways. We can get this value. We can say const, let's do input is equal to the selected me. And then we could do console.log and we can log that input dot val. Now we already know about val. So this is going to work for us. Let's go ahead and refresh this. And so it works for us the way we expect it to work. The problem here is you now have one selector here, and every time you press a key on your keyboard, it's going to traverse your DOM is going to look through, let's say, 10 thousand lines of HTML and try to find this. And believe it or not, even though it is pretty fast, browsers aren't really that fast. There's a lot of information to go through and you want to be performed with your code. And especially if we're trying to get a job as a web developer. So instead, what we do is we can, because we're using function and if you're coming from JavaScript, whenever you use function, you have access to the, this keyword. We can use selector, this dot val. And this val simply refers to whatever is being selected here. And so let's go ahead and console.log this Console.log, this dot val. And when I refresh hello world. And this is working better and it's technically fastest, technically more performing. Now what happens if we have another input element with the same class name? And this one just has different text. Is it going to select both of these? And then when you do a key up on either one of them, is it going to get the value of both of them together or is he going to get the value of just the one you're typing in? These are questions we need to ask ourselves. Let's go ahead and refresh. And HelloWorld 123. And let's go into the type and here, 123. So it is completely siloed from the other ones, which is really nice now behind the scenes, all it's doing is selecting all of these as nodes. So this is a node and this node and it's registering the keyup event on each of them. And so even though the selector is being fancy and selecting two things, our event listener behind the scene is actually registering a different event listener for each of these. And so they are completely separate from each other. Now as a quick little recap, we have our selector, so we selected an input element here. We said dot on up, That is our EventListener. Then we have a function. And in that function, we just console log this dot val. And this is the key takeaway here. This, we are not using this dot val because dot val doesn't exist on the this keyword. We're going to throw in this into a, another jQuery selector and then use dot valid because dot val exists on the selector in jQuery, not in vanilla JavaScript, this is a jQuery thing. And so we need to wrap this in a, in a jQuery selector. I would like you to give this a shot. And I want you to tinker around with the, this property, the, this keyword. It only works when you use a function. So if you're writing modern JavaScript and you use an arrow function, this may or may not work. I implore you to try this out, see what happens. But typically you want this element. And I'm saying this specifically. So this element is registered into this function. And then we use this keyword to tie it all together. Go ahead and give that a shot. Try creating a key up event listener when you were done, let's talk about what happens when you click into any event, not into an event into a particular input. So when I click into it or when I click out of it, what happens? 16. Focus events: Let's register an event listener whenever we click into an input element. And instead of using an input element, let's use a text area. And let's use a different type of selector. So this is going to have a name of my text area. And when I view the page, it's just a text area. Nothing happens. Now this is going to work with an input area, an input element, just like it's going to work for a text area element. So first things first, let's go ahead and select this. Now we can select this by a text area, but we can also select this by an attribute. And we can say the attribute and it starts like this. Brackets name is equal to my text area, and this is a different type of selector and this works in CSS as well. Dot on focus, function, console.log you focused into and this text area. And so when we refresh the page, as soon as I click into it to type something, it says you focus into this text area. It's not a hover. Notice how it doesn't trigger when I put my mouse over it, only when I click into it. And so that is basically all there is to focusing. This is also going to work for an input. So we could do an input. And input doesn't have a closing tag and it doesn't also have rows ID, or it could have an idea, but it's not going to have rows or columns. Let's like both of those and call it and my input. And so now we're selecting an input by its name attribute. We're saying on focus, you focused into this input area. Let's go ahead and give this a shot. And when I put my mouse over it and nothing happens when I click into it and it gets triggered. But when i type, it's not triggered. And so the only thing that's happening here is when I put my mouse over it and click into it. So I'm ready to type. Now if you're wondering, where on earth would I possibly use this great question. You know, when you're on an app and it asks you for your email address or something and your keyboard is hidden. Well, you click into that section or you put your thumb into that section, you tap it, and then your keyboard sides up. That is a good, very good example of an on focus event. Please go ahead and give this a shot. Create a focus event. This is very, very similar to mouse enter, mouse leave, click, and so on. So this should start to feel a little more familiar to you in the next lesson when you're ready. Let's talk about what happens when you leave an element. So we talked about when you focus in, what happens when you focus out. 17. Blur events: In the last lesson, we looked at what happens when you have an input and you put your mouse inside of it and then you like click. And then you, It's called focusing. You focus on the text area and you're able to type what happens when you want to unfocused. So value is going to be unfocused on me, on me. And what we're going to do here is just select this using a regular selector, dot on. And it's not called unfocused. It's called blur. And we give it a function. Console.log. You blurred away from this input area. Okay, unfocused one mean, that is a fun typo. Let's also change out. We now know that it's not called unfocused blur off of me. There we go. Blur off of me. And when I click in, nothing happens because that's the focus event. And when I click out of it, not when I move my mouse out of it, but when I click out of it and you can see that outline goes away out of it. It says, You blurred away from this input area. And every time I do it, it's going to trigger over and over and over. Now if you're thinking, hey, when is this going to be useful to me? This is a really good example of whenever you're typing in your address or someone types in a website URL and you want to work with that information, we can get the value here. We could say console dot log, this dot val, blur off of me. Doo-doo-doo-doo, 123123123. And when a blur out, it says blur off me, 123123123. And so now we can work with that information. Not on every key up, not when you focus on it, just when you're done typing, you can do something with it. And so as an example, we could do something like let website URL is equal to this dot val. And then we can say if website URL dot substring 04 does not equal HTTP, and we want to make sure that this is a website. So this is going to be some sort of website URL, so like www.facebook.com. But every website actually comes with HTTP. That's the HTTP protocol. And so we can now say the website URL is equal to. And we can use a template literal here. So we're using JavaScript ES6 and we can do HTTPS colon slash slash website URL. And we're using back ticks for the template literal. And then we can say this dot val is equal to the website URL. And so what we're doing here is whenever you blur off of this, if you have any sort of text in there that doesn't start with HTTP, it's going to automatically add HTTP. And then it's going to change that value to website URL. Now that website you or might not possibly changing, it might possibly change who, who knows. It depends on what the user types. So let's go ahead and, and write this as an example. Let's go to facebook.com. And when I blur out of here, it automatically adds HTTP colon slash slash facebook.com. And the nice thing about that is you can do user validation for them now. So you know, when you sign up on a website and it's like what is your website are what is your email address? And it's like you put my website.com and it's like, oh, actually you need that HTTP before you can submit this form before you can actually sign up. It's yes, I get it. But also the developer can do that for us. And you as the developer can now do that for the user, making the user experience significantly better. And that all happens with the blur function or the blur event listener. Now we're talked about submitting a form. Just now. Let's go ahead in the next lesson and see how we can prevent a form from submitting. 18. Form submit events: There's going to be a time in your life when you have a form and it's supposed to do something, but you actually have a button. Type is equal to submit. Submit this form and you have this button. And when someone submits the form, you want to do something, maybe you want to disable the button. You can totally disable that button if you wanted to. So people can't click submit more than once. That's a very common thing. Or you can completely stop the form from submitting entirely. Lets do an input here, and let's do the value is equal to, That's I do a value. Let's do a placeholder, Your name. And when we view the form, this is all looks like. So it's going to ask for your name and then you submit this form. Now, for this example, we're going to need to actually give this a name. Name is equal to name and this is going to show up in your URL. So when I hit submit and we're going to see name is equal to, let's put my name as Bob. And it says index.html. Question mark, name is equal to Bob. It's whatever you put in there. It's going to be auto filled in the URL. And it says be auto filled in the URL. And so maybe we don't want that to happen. Maybe we want something else to happen. And what I'm gonna do is zoom back in here. So what we can do is we can select this form. And then we can say On Submit, and this is where it gets interesting. Function can take any event parameter and we've actually been ignoring this whole time, but every event listener has an event parameter. And we can say event dot prevent default. And what this is going to do is say, hey, yes, a browser knows that a form is supposed to submit anytime you click the submit button. But when this form is submitted, its going to execute this function first. And we're going to say Take that event, the submit event, and prevented from doing its default thing, prevented from being itself. And so now we can say console.log form was not submitted. And I'm going to clean up this URL because we know that whenever we submit this form, that it automatically add stuff to the URL and maybe we don't want that. So let's go ahead and type Kyle As the name. Submit this form. You notice how the URL didn't change. The page, didn't flicker that page and reload and it says the form was not submitted. Now, honestly, at this point in time, this is completely useless to you because why would you want to prevent a form from being submitted? Well, you wouldn't maybe you'd want to disable the button, which we'll talk about down the road. Maybe you'll want to add a different class to the button so it looks different. So it looks like the form is submitted? Possibly, yes. We'll talk about that down the road as well. But the most common use case is when you have a form and you want to prevent it. What you want to do is you want to grab that form and you want to serialize the data. And then maybe you want to do some sort of ajax request. So the form should not actually submit to index.html or wherever you tell it to point to. Javascript can overwrite that and tell it to make an Ajax request to some other place. Now we don't know about jQuery ajax yet, so we can't talk about that just yet. We're going to talk about that near the end of the course. But for now, just tuck this in your back pocket because you're going to need it. And you whenever you submit a form and you want to prevent some default action, you're going to need to then grab the values from the input or the text areas or the select fields. You're going to want to grab that information and do something with it. And that's what event dot prevent default does. Now while we're on the subject of event dot prevent default, what we can do is let's go ahead and select this button. We know that when, whenever we press this button, whenever we click submit this form button, that is going to submit that form. It worked for us before. Surely is going to work again once we disable this JavaScript here, we can do the same thing with Submit. So let's go ahead and select that button. Button. But taught. But on, when we click that button, we're going to register a function. And because every function secretly has an event parameter, we can do event dot prevent, default. And just as a heads up, you will often see event as e. So whenever you see function e, chances are in JavaScript we're talking about event. And we could console.log. Button is rendered useless. And let's refresh the page and submit this button and it just says button is rendered uses the form is not submitting. I can do this. And when I submit the form, if it actually submits, this should be refreshed or it should be wiped clean. There should be nothing in here. But it's preventing the form from submitting. And why is it doing that? And it's because we said, take that button, whenever you click it, take that event, that click event, and prevent it from doing its normal thing, prevented from being a normal function in button. So in this lesson, what I would like you to do is write an HTML form when you submit it, prevented from doing anything. And then comment that out like I did. And when you have a submit button and remember that type of button cannot be button. It can not be reset, it has to be Submit. So when you submit this form by clicking the button, prevented from doing its normal thing as well. There's two ways to prevent the form from being submitted. And also remember, when you submit your form here, when you prevent it from being submitted. Typically what we do is we grab this information from like an input text field anywhere else. And we work with that information first and then maybe we actually submit it using JavaScript or maybe we don't. Maybe we send that information off to and ajax or an API endpoint. Regardless. If this is good to know that this is good to tuck in your back pocket. And event dot prevent default is very, very popular. You're going to see this everywhere and this is actually honestly, this is just JavaScript. This isn't even jQuery. So go ahead and give that a shot when you are done, let's talk about hiding elements. 19. Hiding elements: Okay, let's talk about hiding elements. So first things first, I'm going to need to show you what I have on my page. I have this box on my page, and it's just a 100 by 100 black box. And this is the CSS for width 100, height one, height 100, background color is black. That's it. And then I've got a button that says click me. And then I'm actually just applying the box using CSS here. And whenever we click this button, let's make this box hide. And so we need an event listener for this. Let's go ahead and select that button by its ID. Click me. Dot on. Click. Function. We can pass an E or event and do e dot prevent default if we wanted to, if this was in a form that would be useful. Currently, this is not useful because it's not inside of a form. But if it was, you know, this is a good measure to take. And then we can select that box. You can select that box. And you can see because this is jQuery VS Code is adding all sorts of things and we're not going to go through all of this. There's a lot in here, but what we want to do is select this box and we want to hide this box. And that's all we're going to do. So when I refresh this page, boom, hides it, gonna refresh again. And let's see what happens in our elements here. This box right in here, this is important to pay attention to at the bottom here. It simply does it display none. That's all it does. So if you want to hide certain things, you can do that with selector dot height. Now we simply wrap this in an event listener, in a click event listener. So we said, whenever you click that button, then select the box and hide it. We don't have to do that. We can do it right when the page loads as well. So when we load the page, you can see that it flashes because in our source code it shows up and we know it's going to show up in our source code. It's gonna flash and then jQuery is gonna kick in and it's gonna say, oh, actually, let's get rid of it. Let's hide it. We're not deleting it from the DOM. We're making sure that we can still access it later. So it's not being removed, it's not being deleted, it's simply being hidden. What I'd like you to do is go ahead and give that a shot, but I want you to write an event listener with it. Let's get used to writing event listeners because that's what jQuery is all about. It's all about event listeners. So right, an event listener on a button, whenever you click that button, hide the box. When you were done that, in the next lesson, we are going to go and make that box visible again. 20. Showing elements: Alright, so this is just taking off from the last lesson. This is the exact example from the last lesson. So we have a button and a box, and when we save and refresh the page, this is what we have here. Now, I'm going to make sure that this box is actually hidden by default, I'm going to use display non-block, but display none. That box doesn't show up. It's just, it's there, it's in the DOM, but it's just invisible. So what we can do is when we click this button instead of hide, we can do dots show. And this is really important too. Let's keep an eye on this down here, let's refresh this page. And down here we're going to see display block. And so it automatically assumed it was a block element and went for display block. And so it just showed the element. And actually I shouldn't say height up here, so it's a show element. Show that element. There we go. That's all there is to it. Nice and sweet. It's a lot like hide and show. So we have hide to hide something and then show to show something. Now as the full example, we could select id. Click Me, that's going to select this button. Let's write the, the old way we could do function. And this is just different syntax and we're using the dot on syntax usually, but we can do a click event here. Then we could select that box and not hide it, but we could show it. And it works for us every single time. Go ahead and give that a shot when you are done, we are going to get into something a little more fun. We're going to start adding CSS classes to our elements. So when you click a button, we can add a class to the element to make it look a little bit different. 21. Adding CSS classes: Let's take a look at how we can dynamically add a class to an existing element. So I have some CSS up here, and let's get rid of that. I just have a box with a 100 height 100 background-color black. Let's go ahead and change that class or add a class rather to change that background color to be, let's say blue. So we could say there's a class called blue, and it's simply going to have a background color of blue. Now, I need this box elements to actually exist. And in my jQuery here, I can simply say dot box, dot add class blue. And before I do that, actually, let's go ahead and let's just work with classes for a little bit. Let's work with instead of IDs that's worked with classes. So we've got class box, box, box, box, and let's change that to dot box. So now when I refresh my page, my black box turns blue and now it's, you can kind of see, let it flashes real quickly. But it changing my box to be blue. And we can actually see this in as a real example here is we can delete this inner DOM. And this is what it looks like by default. And all we're simply doing is adding blue to it. Now, let's go ahead and wrap this in some sort of timeout. So let's do set timeout. And we could give this a function. And let's make it timeout for two seconds. And then select the box and add the class blue. So when I refresh the page here, it's going to wait just two seconds, and then it's going to turn to blue. Now if we want to write modern JavaScript, we don't need to use a function there. We can simply use an arrow function that's going to do the exact same thing, refresh, wait two seconds, it turns blue. We can also wrap this in any sort of event listener that we want. So we could say something like the button when it's clicked. Function. Or because we don't need the this keyword, we can do an arrow function. And let's get rid of that and move that up. And because we have a button event listener, we needed button on the page. So let's go ahead and add that button. Button. Click me. And when we click this button, is going to select that box and add a class of blue. Let's go ahead and refresh. Click. And something is not right here. And that's because I type clicked, it's supposed to be click. So refresh. Click. There we go. Refresh, click, it changes, refresh, click, it changes. We can do all sorts of things here and we could change the width as well. So it's a width 100, and this is simply going to change the width to be 100%. And so we can add class blue. We can also add class width 100 and refresh. And it changes its to be width of 100%. I want you to give this a shot. Try this. This is going to be very, very important. You're going to be using this a lot in vanilla JavaScript as well as regular jQuery. So you're going to want to be able to add a class. You can add multiple classes by simply adding a space in there. And jQuery will figure it out and add those classes for you. Wrap that in an event listener if you do not need the, this keyword, I'm saying this like this. If you don't need that inside of your function, you can simply write an arrow function as well. It's just a little more performance, a little more modern JavaScript. And then you can select your box or your element. And then you can add a class of whatever your classes are. So you are going to need to know a little bit of CSS for this. If you don't really know CSS, that's okay. You can just pause the video here and copy what I have on my screen. I simply have a box, box class. I've got a blue class, any width 100 class. And all that's doing is going to be adding these classes. And again, when we inspect, we now have class box blue and width 100. Go ahead and give that a shot. And when we are ready, when we're nice and ready. Let's go ahead and take this exact example and do the exact opposite where we remove a class. 22. Removing CSS classes: Okay, in this example, let's go ahead and remove the blue class and remove the width class. And so what I have here is an element with three classes on it, box blue and width 100%. This is just taking off from that last lesson where we were adding a class. And this is my box blue end with CSS that we have made here. So now what I want to do is register two different click events. When you click Remove blue, remove blue from here. And when you remove width, remove the width 100 class. And so we can get a little bit fancy with this. So instead of selecting box multiple times, we can select it once. So we can say const box is equal to, and we're just going to get the box itself as a class. And this is just a simple selector. We can also do const, remove blue is equal to remove blue that's going to select that button. And remove width is going to remove the width. And so these are just selector. So I've selected the box removed blue and remove width. Now here what I wanted to do is when you click Remove blue, select that box and remove this class. And we can do that quite easily. We can say Remove blue dot onclick, function, vox dot remove class. That's all it is, just the word remove class. And then we want to remove blue. It's go ahead and give this a shot. And when we remove blue. And as actually as, as a better example here, down here we've got a box blue width 100. We could do remove blue and it gets rid of it for us. Then we can click another button and remove the width. And so what I'm doing with these concepts here is instead of selecting box numerous times. So instead of having to select that and put it in there, I can select it just once because I really only need to select it once. And then in a second event listener we can do the exact same thing. So we can say Remove width, dot on click. And because we don't need the this keyword whatsoever, we can do an arrow function and we can say Box dot remove class width. And that's not going to be, it's going to be width 100. We want to remove this class. Let's go ahead and refresh. When we remove the width, this is going to be a perfect box. When we remove blue, it is now black. And so that's really all there is. The only thing we really need to take away from this particular lesson is removed clasp. So go ahead and give that a shot. Remove Class, remove a class, and just try to make it work for you. Should only take you about a minute or two and when you're ready, let's head on over to the next lesson where we actually toggle classes on and off, because right now we can't really easily detect if a class has a blue class or a width 100. We can't really detect if an element has those classes rather. So what we can do is we can toggle them on and off with a very simple jQuery feature. 23. Toggling CSS classes: In the last lesson, we created some sort of box and we gave it a width of a 100%. In this one, we just have a perfect square. And what we want to do is toggled blue. So we want to, every time we click this button, get rid of the blue, and then click it again and turn it blue and click it in and just toggle it on and off. And so we can do that by, first of all, creating a click event. So we want to select the toggle blue class. And that's just right up here. We want to talk all. We want to select that button, dot on click function. And because we actually don't need the this keyword, we can do arrow function. Then we can simply say the box which we've selected up here, toggle class blue, and that's it. And so if jQuery recognizes that there's already a blue class, it's going to take it off. And if it recognizes that there is not a blue class, it's going to add it. And so let's go ahead and give this a shot, refresh our page, and watch this down here where it says blue bucks. Every time I click this button on and off, on and off, on and off, just like that. And that's all there really is. That's how we toggle the class on and off. Now, where is this applicable? Well, if you need to hide and show something or if you want to make something, Act because of a certain other thing. And actually as a better example, let's go ahead and get rid of this and let's create an input. For an input. And whenever we have this input, let's just like that. When we have, when we have this input and we key up, let's go ahead and check this value. And then if that value is a particular name, let's change the toggle, the class to blue. Otherwise the change it to not blue. So let's go ahead and get this value. So const val u is equal to this dot val. Now you realize that I'm using the, this keyword here. So now we need to write function. We can say if value is equal to Caleb, We could say Add class. Else, box dot, remove class blue. Now we're not really using toggle here in the sense that we're not using toggle function, but we are toggling classes by removing an adding them. And one thing we need to do is functions don't have arrow functions, it's just the function keyword. Let's go ahead and refresh our page here. And if I type, Jacob doesn't work, if I type gully doesn't work if I type, Caleb, boom, turns blue. And now I can toggle it just like this and by typing really anything else. So that's two ways in which we can toggle based on different event listeners. Now what I'd like you to do is go ahead and try toggle class. You don't have to do this whole example here. This example is, yeah, pretty big and not super relevant to this class. But make sure you go ahead and use the toggle class function here with a selector. So you could do box dot Togo class blue. Go ahead and give that a shot when you're done, let's go ahead and add custom CSS, not a class, but let's add custom CSS to an element. 24. Adding custom CSS: Let's go ahead and add custom CSS to a particular element. So in this lesson, what we're going to do is we're going to grab this box and we're going to add CSS to it. And we're not going to add a class, we're not going to remove a class. We're going to add dynamic CSS. So we can actually basically right. Style is equal to width 100%, for example, we can make that happen with JavaScript and jQuery. So first things first, we need to grab our box element. So let's do dot box. And all we have to do is type dot CSS. And this is really cool because we could do background color, blue, and this syntax is a little interesting. So what we're doing here is we're saying dot CSS, the first value in this function is going to be, what do we want to change? What CSS property do we want to change? And then we want to change the actual value. So we can change that to blue, but let's go ahead and change this to orange. And you can see that it actually loads black and then changes to orange. And you can see here, style background-color is equal to orange. Now if we check our source code, do, do, do, do, do, do, do. Where are we? There is no style attribute on their jQuery dynamically added that for us. Now if we wanted to, we could do multiples. We could do dot CSS, border, comma, ten pixels, solid black. And that dynamically changed it for us. We could do another one. We could do dot CSS, border radius, comma 50%. And now it turns it into an orange circle with a black border, instead of being just a regular black square. And this sort of leads us into Animations a little bit, which we'll talk more about down the road. Now there's a better way to do this. We could comment that out and we could do dot CSS. And we can give this an object. Now when we give this an object, we don't type background color because objects aren't supposed to have dashes in their names. We do background, and then we CamelCase It color. So look at the difference between this and this one. Background dashed color versus background color with a capital C. And let's go ahead and change this to yellow. Let's change the border. 210 pixels, solid blue. And let's change the border radius. Notice the capitalisation there and there's no dashes border radius to be ten pixels. And so this is just a regular JavaScript object. Let's go ahead and save that and refresh and look at that. We can change them all in one shot or we can chain them together if we wanted to. Now what I'd like you to do is try both methods. Tried chaining them together. So you've got the first one and then you've got a second one, then you've got a third one and then comment those out. And basically don't chain them together, just change them all at the exact same time Because right now JQuery has to go here, change at, Read the styling go here, change. I had read the styling go here, read that gender styling versus going in into this method where we're just giving it all of it. We can just say, hey, jQuery, deal with all of it all at once. Instead of doing three different tasks, do one big task. Next up, we're going to learn about how to fade things in and faint things out. 25. Fading in and fading out: Let's take a look at how we can fade an element in and fading element out. So in this lesson I'm going to use my console. And this is a cool little thing because in my code here, I'm using a CDN. I have access to that little dollar sign, that means jQuery, that little dollar sign. And so I can select this box, I can say const. Yeah, let's do const. Box is equal to and give it a selector. And when I type dollar sign box, it gives me this box the entire element. It's actually a list of nodes technically, but there's only one in there, so we can work with just the one. It's totally fine. Now to fade something in an out, all we have to do is doe dot box fade in. Actually it's already faded. Inlets fade out and it fades out. We could also do dot box, dot fade in and it fades in. We can also give it a timeout or not a timeout but a timer. How long should this take to fade out? Let's say this is going to take 4.5 seconds. So we do 4500 milliseconds, so that's 4.5 seconds fade out and it's going to slow. The Phaedo. We can do the same thing with fade in. Fade in, slowly fades in. And there's actually another cool thing we can do is we can give this a callback function, will talk about callback functions a little bit later, but we can tell it to do something when it is done fading into, it is done fading out. So what I want you to do is don't write your code necessarily in your editor this time. Go ahead and just open up your console. You can always right-click, inspect. Click the Console tab. Select your box like what we did. We've got const boxes equal to that box. And then we did box that fade-out, box dot fade-in. Give that a shot once that is working for you, let's head on over to the next lesson, where we learn how to toggle a fade and toggle a display. 26. Toggling fades and displays: Let's go ahead and toggle a fade, a fade effect, and a display effects. So we need to do two different things here. Before anything, we need some sort of event listener. Click Me, and it's just a simple button. So let's go ahead and register this button as a click event. Button. Dot on click function. And that's how we register the click event listener. Then we need to select that box. And we can do toggle. And we can do fade toggle. And this is either going to fade in or fade out depending on how visible it is. So let's go ahead and give this a shot. When we click this, fades in, fades out just like that. And we can see here there's a style attribute and watch it. When I click this, it's going to fade out. And it changes the opacity down to 0, and then it changes the display to none. And when it fades back in, it changes the UPC. It scrolls that backup to one or a 100% and makes it display block or actually just gets rid of the display property altogether. We can see it's display none. And it's going to be whatever I told it to be before. So if it's inline-block, it's going to be inline-block. If it's displayed block or flexbox, it's going to be flexbox, it's going to be whatever we set it to be in CSS. So we can fade toggle. The other thing we can do is simply toggle. This is going to toggle it to display or to not display. So simply, just like that, That's all we're doing. We're clicking it. And every time we click it, it either makes it visible or makes it invisible. That's all it's doing. Just as a recap, toggle is going to basically use hide and show. Whereas fade toggle is going to use fade in and fade out. Go ahead and give that a shot. Try fade toggle and try regular toggle. These are going to be useful when you create interactive websites for people. When someone clicks something, does it become visible? If they click out of it? Does it become not visible like a menu system, like a drop-down menu system. When you click the little icon that suggests that you could have a menu and it drops down. Maybe you want to toggle. So there are, there are lot of different ways in which we would use this. No, honestly fade in and fade out is not used too often anymore. Just because it looks a little bit cheesy, but, you know, maybe a couple of years from now that the whole web, the whole internet decides fading in and fading out is a thing that we wanted to do again. In the next lesson, let's go ahead and talk about sliding up and sliding down as another form of animation. 27. Slide up and down: Okay, let's talk about sliding up and sliding down. Real easy here this is a lot like fade in and fade out. So I have a button here is registered as a click event. And I want to slide this box up and slide it down. So like an FAQ question, a frequently asked question section on a website and FAQ. So we can select this box whenever the button is clicked. And we could say slide down or we can say slide up. So let's first of all, slideUp, slide up is going to hide it. Refresh. It, slides it up. Pretty neat, right? We could also do slide down, which is just going to slide it down and make it visible. Or we can slide toggle and that's going to toggle it to slide up and slide down. So let's go ahead and refresh. Up, down, up, down. So this is a short lesson. Honestly, at this point you probably don't need to practice this anymore. Just keep this tucked away in your back pocket. Slide toggle. You can slide up and you can slide down. You're going to use this one more than a fade in and fade out for sure. So if you want a little bit of experience, yeah, definitely go and create an example like this. You can even just steal my example here. Otherwise, I'll let's head on over to the next lesson where we talk about callback functions. 28. Callback functions: Alright, let's talk about callback functions. In a callback function. Really all a callback function is, is a function of a little piece of code that should run after something is done running. So for instance, we have a selector here and we said Register a click event listener. And anytime that's supposed to run, execute this function, that's a callback function. So once a click happens, do a thing. We can also lake select our box from our previous lesson. And we could say something like fade out. And we could give this parameter, let's say it's going to take 1.5 seconds. And then we could give this a function as well. And this is a callback function. And so we gave it a parameter, how long it should take comma function and then just a regular function here. And then we can say console dot log. Fade-out is complete. Let's go ahead and give this a shot and let's go to our console here. It's going to fade out. Fade out is complete. And we can do this with a lot of different things we could do fade out and we could do slide up. As, as fatal, it is complete. This should have said slide out is complete button regardless, the callback function still works. And so really all we're doing here is if we simplify this a little bit, we're saying select the box, slide up, take 1.5 seconds when you're done that console log ODE is complete or slideUp is complete. We can do this with a lot of different animation. So we've got slide, we could do fade. We could use it with togas as well. So as you toggle, fade is gonna take 1.5 seconds to fade in or fade out. And fade effect is complete. And so let's go ahead and click this. Oh, something is not right here. It's not toggled, fade, it is fade toggle. I get that backwards every time and every now and then. And so all that did was automatically fade out because it was already visible. Now let's wrap this in a event listener. Select that button, dot on click function. Due to, due to due, and you see them going pretty fast here it gets, it gets a lot easier over time. And you can see this starting to be a pattern in jQuery, we have a selector, do a thing, a Function Selector, do a thing, do a thing right there. A Function Selector, do a thing, a function. And let's go ahead and get rid of this. 1500 milliseconds or 1.52, fade in, fade out. And let's just give this a shot to click it. Fades out. Fade effect is complete. You can see it right down there. Perfect. Look at that. That is working exactly the way we want it to work. Now a callback function is really useful if something is faded out, maybe you want to then remove it. So let's do this, let's do fade out. And we can do this dot remove. And so once this is faded out, because right now you can see that if we click this, it's going to fade out. It's still actually in our DOM. Maybe we want it to be completely removed for whatever reason. We could click this. And you notice that it actually completely remove yourself from the document object model. So see this down here. Watch that it disappears, it becomes completely removed. And now we can't click this if it's rendered useless. So if you need a onetime event, that is a good way to do it. Now you actually don't need to practice anything with callback functions. We've been writing callback functions this entire time. So little bit of a surprise that are callback functions, you are pretty much a grandmaster Wizard at callback functions at this point in time. In the next lesson, let's talk about adding our own animations. 29. jQuery animations: Alright, let's talk about animations. In jQuery. We can animate certain things and we can not animate certain things. So anything that has a number value we can animate. So a width of 500 and for example, is a number value. And we can add inmate that down to four hundred and three hundred and ten hundred if we wanted to. A color is not necessarily a numbered is a mix of numbers and letters. It's like black is 000000 or F, F, F, F, F, F, And that's white. We could do an off-white F5, F5, F5. And a computer simply just doesn't really know, you know, natively how to scroll this up to F, F, F, F, F, F, or down to 000000. But if you have a width of 500, well, that's just simply decrementing the you could change it from 500 to 400 by going to 499, then 498487 for 9645, et cetera, et cetera, et cetera. There is a linear order of operations here. So let's go ahead and animate our box. So when we click this button, we've got a button up here that says Click Me, registered, click event. Let's select that box and animate it. So we could do something like dot box animate. And this is going to take an object. And so in here we can say the opacity is currently it's one we could change that to Lake is 0.5. the width is currently set to 100 pixels. And just because it says pixels doesn't mean it doesn't know how to work with a number and knows how to split this and say, okay, the width is currently a 100, and it's also pixels. So let's change that to five hundred, five hundred pixels because we need the measurement in there. Let's go ahead and refresh. And it animates nicely. It's nice and smooth and works perfectly for us. And if we wanted to, we could slow this down as well. We could say animate this over four seconds or 4 thousand milliseconds. And it takes its time, just like that. Now what's not going to work is if we wanted to change that background color, background color. If we wanted to change my background color to blue, it simply doesn't know how to go from black to blue link. What is the the definition or what is the function or what is the linear logic behind changing one color to another color? Making it look animated. Like does it go from black to red to blue or from black to purple to blue or from black to white to blue. Like a computer just doesn't know that. But a computer knows how to work with hard numbers quite easily. So we're going to see that changing the background color here to blue is simply not going to work. It's going to fade out. It's going to be a gray. That's absolutely not blue though. Your task for this lesson is to select an element and animate it. We can get rid of that. You can give it an object with what you want to change to Ed's value. So width, height, capacity, anything like that. Even your font size if you wanted to. And then give it some sort of duration. How long should this take? For me? I said it should take four seconds for you. Maybe you wanted to take 1 second or 20 seconds, or maybe you want it to change to be completely see-through. By time it gets you a 100% and this should take five seconds, will give you something like that to, this is one of those times where it's good to have some fun just to tinker around with it. And, you know, you don't have to do anything in particular. You just need to make sure that it changes something with a numeric value. And again, we're using CSS here. Javascript, CSS, and HTML all work very well together. They're all designed to work with each other. And also keep in mind, you can only work with actual hard numbers. 100% is a number, blue is not a number. Go ahead and have some fun with that in the next couple of lessons, let's talk about Width dimensions and height dimensions. 30. Width dimensions: Let's talk about height dimensions. So we have this thing called a Document Object Model. And when we right-click on that box and we select it over here, we come on down. We can see that we've got margin, border padding and the actual size of the element itself. We can check to see what that sizing is. So we can select that box. Let's do const boxes equal to dot box. And then we could do box dot. We've had a few different things. We've had outer width and width. So if we take a look at the width here, which is actually a function. So whenever you see this little curly f here, that usually means it's a function. That typically means that you simply forgot your parentheses. So my box width is currently 100. And let's go ahead and see if I can pop this out. There we go. We can also do the box. Height is also a 100. We can do the box. Outer width is a 100. We can also do the box inner width is a 100. And we're going to see that all three of these things are the same, but they're actually different. And this depends on the box model. And so if we go back here and what I wanna do is add some padding. A 100 pixels. No, let's not do a 100. That's a lot. Let's do 20. And let's do a margin of 20 pixels as well. And we're gonna see that this bumps the element and actually made the element look a little bigger. So now if I go back up, select my box, and I could do box dot width. It's now a 100. That's the inside. The inside is a 100. And we're going to see if we go over to elements that inside here is 100. Now let's do box dot, inner width. It's 140. Well, where do we get 1 fourth from? If we go back to elements, we can see that there's a padding here. This is the entire box itself, the inner width of the box. So we've got a 100 and then we've got 20 on either side. So 100101140. That's where we got a 140 from. Now we can do the outer width as well, Box dot odor width. Now we're looking at the outer width here. And then outer width has two options here. So we've got regular outer width, odor width, and this is the outside here. Or we can do outer width, true. And what that's going to do is take all of it, including the margin. So we've had a hundred one hundred twenty one forty one sixty, one eighty, and that's where we're getting a 180 from. Now what I would like you to do for this particular lesson is don't worry about the width, inner width or outer width. What I want you to do is do the same thing with height. So grab your Box element and then do inner height, or just height or outer height, and try it with true in there. Give that a shot. And try with different sizes. Make your box of different size. It doesn't have to be a perfect square either. And then what I want you to do is I want you to select your entire window, that is your entire viewport, and then do width and height. Now, just as a heads up, my height is very low just because I am super zoomed in here. If I wasn't zoomed in, this would be significantly higher than 289. Go ahead and give this a shot. These are important when you're working with positioning things on your page using JavaScript. So you are going to need to know how these work when you're done that, let's head on over to the next lesson where we talk about a new event listener where it checks to see if we're resizing our page at all. 31. Resizing window event: Let's talk about resizing the window. At this point in time, we've always had some sort of selector in a set of quotations like our box. But we can also set a selector to be your window or your document. And so for this, we want to see the viewport changing. Now that viewport is this entire white area. How big is that exactly? And we sort of looked into this in the last lesson when we did box dot elder with Box dot, inner width and window height, window dot with things like that. What happens when we resize our page? Well, we can take different actions based on different window sizes. So let's go ahead and do Window dot on, resize function, console.log. And then we want to console.log the window width. And this is why I got you to do this in the last lesson. Window dot width by window dot height. And so let's open up our tools here and that's redox this and refresh the page. And anytime I move this, you can see that those numbers are changing. And the height isn't changing, but the width is changing, the width is getting smaller and smaller and smaller. And so no, we can do something based on this. We can say if the page width is less than, let's say 230 changed the background color to black. Now, this isn't a very ugly example, but this is a good practice examples. So let's go ahead and get rid of that. And we can say if the window width is less than or equal to 230. We now know that we can change the body dot CSS background color to be black or otherwise, we can do the same thing and change the background color to white. Alright, so this is going to stay black or white rather, entailing gets down to two hundred thirty. Two thirty. There we go. And it's going to toggle just like that. Now we can do the same thing based on height as well. And I'm just going to put that console log back in here, where we're going to log the width and the height. And I'm going to change where this is docked, change out to the bottom here and refresh the page. Refresh. And now when I resize, we're gonna see the width isn't changing, but the height is changing. And we could take some sort of action if someone's page is, for example, on the 87 pixels tall, do something else, you could give them a warning. You could, you could literally delete everything from your Document Object Model and just say, hey, your browser is a way to small for this website. In fact, your browser, if it's 87 pixels tall, is way too small for any website. And that is how we resize the window. Now it's not actually super useful at this point in time. And I haven't used this in a number of probably a number of years. But it is good to know because sometimes I run into old code that's doing this and then I just convert it over to the CSS media query to make it responsive. And this is sort of where CSS starts to take over for JavaScript. But sometimes you need to know this in JavaScript as well. Especially if you're going to be creating a game of some kind. If you're going to create a game, you're going to want to know what the dimensions are of the game, the viewport, that game portal here, this whole white section, you're going to want to know what that size is and work with it. 32. jQuery each loops: All right, welcome back. Let's talk about looping through elements. And so when we have a selector of some kind, some sort of element, this could be one element or this could be multiple elements. And a good example of that is if we have like an unordered list with an ally in here, first item, the second item, the third item. And we select all of these allies. What if we wanted to do something different with all of these allies? But we still want to select all of them. We want to select each of these three list item elements. Well, if we did LI dot text, this is going to change it on all three of them. And sure enough, it did. That's that's not what we're looking for whatsoever. Maybe we want to do something different for each of them, but we want to use one selector. So we could either do LI and grab the first one. We can do a selector like this. We do first, we could do last, or we can loop through all of these and do something different based on one selector. And sometimes looping through is the right way to do things. It's just a faster way to do things. So we can say dot each. And this is going to take a function index. And the element. And that element itself is going to be this whole element in here. And that index is going to be, is it the first iteration, second iteration, third iteration. So we can now save the element itself, which is a lot like saying this which we've used before. But this is just referring to this particular element in this loop. Dot text is going to be index new item here. And so when I refresh the page, you can see it says 0 new item here, one new item here to new item here. Now if you're somewhat new to JavaScript and you're like, well why is it say 0? It's because computers technically start counting at 0 instead of the number one. We could always do index plus one just to offset that. They're Rio, new item here, new item here, new item here, 1-2-3. If we view our source, it's just the old stuff that we had. It's not the new stuff. Now we can say something like if the index is equal to two, select this element. Change at CSS to have a background color of black. And then we can chain these together. And we've done this before. I change the color to be white, so will just invert the colors. And it's like this one here. Remember 012. Now we don't have to do with just lies either. We can do it with dibs and let's go ahead and change these two divs is going to grab every div on the page is going to loop through them. Says first item, the second item, the third item, something went wrong there. Oh, because I didn't change my selector. There we go. One new item here to new item here, three new item here. We could even get fancier with this and we could keep its original text. So we can say something like Kahn's original text is equal to this element 2.txt. And we'll throw that in here as a variable, original text. And so now we haven't numbered first item, second item, third item with a dynamic number in there. Now if we wanted to, we could do anything ridiculous with this. We can multiply this by 303. There we go. So we get 036. We could do anything we want. That's just working with the index, the element itself. You can do anything with that element and it's just a regular selectors. So just remember when you're using dot h, It takes two elements are not elements but parameters. Your first one is going to be the index, where in the loop iteration is, is it the first iteration, second iteration, third iteration, et cetera, et cetera. And the second parameter is your element. And your element. You can then use the selector, which is a lot like saying this, but we're not really inside of the, the function. We don't want that to be part of the function. We want the element itself. So we select that element and then we can work with it. And it's going to do it for every single div that it can get its hands on, or every LI or every class selector, anything. What I would like you to do here is go ahead and give this a shot. I want you to select an element that hasn't multiple elements on the page. Do dot each function index element. And then I want you to either change the text or work with the index or select that element at least and change some of the CSS so that you know that it's working. 33. Changing attributes: Let's talk about changing element attributes. And I have a really good example lined up here. So let's say we have an input element and we want to change this from text to password. And so the idea here is we can write something like this, but what if we wanted it to actually look more like this, like password, password, password and stuff. We can do that quite easily. So let's go ahead and select this input. Let's do const. Input is equal to and then just the input is the only one on the page. So I don't have to worry about getting specific with it. And with the selector. Then I can say the input dot ATTR, that stands for attribute ATTR. Do not text type. And so let's console log this console dot log this type. And this should say if we do it right text. And let's bring that up. There it is. Text error if we did 123123123. Yep, same thing. Cuckoo, cuckoo, Cool, cool. But what if we wanted to change it? So this is a lot like Val or text or HTML. And what I'm saying here is dot val, dot text, dot HTML. It does one of two things. Either you give it a parameter or you've set a parameter. And so we're saying simply get the type attribute. This is our parameter. It's just getting the type here that, that matches that. Now if we wanted to change that, we could, we could say ATTR type and then change it to password. And this is going to happen so fast and sort of looks like it is going to happen behind the scenes. But when i type like this, after I refresh the page, it's going to look like a password field like this. Now what's kinda cool is if you want to see my password, I can simply select input dot ATTR type, and let's change it from a password field to a text field. And you can see my password is in plain text now, my password is also. So that's how we get an attribute and that's how we set an attribute. And just as a quick little reminder, to get an attribute just takes one parameter just like that. And if it has a second parameter is going to try to set that attribute. In the next lesson, let's go ahead and start working with some Ajax stuff. Ajax is really, really fun. It's working with APIs. We're getting into some good JavaScript here, some real fun stuff, more production level stuff, more professional kind of JavaScript that you're going to be writing using jQuery. 34. Ajax GET requests: Alright, let's look at ajax and some data with a little bit of a call back. Now we need a place to get data from. And one of my personal favorites is swampy dot dev is as a Star Wars API. And if you go to swap e dot dev slash api slash people slash one, you're going to see this information about Luke Skywalker. And so we can actually go there swapping dot.gov slash API slash people slash one. And we see all this information. But Luke Skywalker, Now this is the URL. We want this an API endpoint. We want to be able to get this information, this JSON information, and access it quite easily. So what we can do here is if I just move this up and actually no, let's undock this is we have access to jQuery in here with a dollar sign. You can see that we can use dot get and then that URL. Now if we do just that, we're going to see that it's just a regular Ajax request. But if I clear that out and give it a callback function, we know about callbacks, we know about functions. Let's do console dot log the data. And we're gonna see that this is the Ajax request here and this is our data. And so we're doing a get request here. We're simply asking for data. And so by using dollar sign dot get, there's no selector here because we're not selecting anything. And because there's no selector, we don't have a sector, it's just dollar sign dot get. And so now we have all this information loaded on our page or in our console at least that was available over here, named Luke Skywalker height 172 mass 77. 172, mass 77, name Luke Skywalker. It's all the same information. And so that's how we do a simple ajax request in jQuery. Know woods wild about that is this is so incredibly simple. We can do dot get. And I've just pasted that URL in there, the data. And then we can console dot log data name. That was what we're looking for, right name. So let's go ahead and save this. And let's just refresh this page. And it goes and gets it. It says Luke Skywalker, we could get his height. We could get his weight if we wanted to. Luke Skywalker 172. Wait, wasn't in there. It's called mass. That's why his mass is 77. And so now we don't have to worry about like a fetch API requests. We don't have to worry about taking that data in and basically parsing the JSON and turning it into a JSON or JavaScript Object. We don't have to worry about any of that because jQuery is doing all of that behind the scenes and it does it with a single line of code with the dot get function that you're going to need to know this for your final project. So I highly recommend that you give this a shot to try it out. 35. Ajax POST requests: All right, in the last lesson we looked at a jQuery GET request. And in this lesson we're going to look at a jQuery post request. And this is how we send data to a server and ask it to update data or create some new data. And this is really, really simple to, it's just dot post and then some URL in here, some data in here, and a callback function with the data that's going to be returned. That's literally all it is. So your data should be an object of some kind. So we get say, Hello world. And that URL we need somewhere to post to. And it's really, really hard to find a place to safely posting, but I found one called HTTP bin. So we do this as a URL, HTTPS colon slash slash HTTP bin.org slash post. And if we want to, we can put these on separate lines just to make this look a little nicer. And then we can say console.log post was complete with this data. Console.log data post was complete with this data. And let's take a look. This is all the data that we got back. An HTTP, HTTP bin.org tends to give us all of our data back in the form of property here. So it says hello world, we can put anything in there though. We get say, Instagram is equal to at coding dot for dot everybody. Which if you want free coding tips and tricks definitely come check this out. And form Instagram coding for everybody. And so we know that that is actually working. Now, if we want to make sure that it's not working, we could always just try get. We'll do dot get and will do it, will create a get request to the slash post URL. And you can see four or five, that means not allowed. You're not allowed to do that. It has to be a post request. So go ahead and give this a shot. Use HTTP bin.org. Don't forget you need HTTPS. You might run into that error if it's coming from an unsecure location to a secure location, just make sure you have that S and there. This is called your payload. This is the data that you're going to be sending them. And then you've got a callback function when it's done, what are you doing with that data? All we're doing here is we're doing console.log data. Now this is really, really useful when you're creating a single page application or progressive web app where you need someone to register or log in and you don't want to take them to another page, or you have an API endpoint, or they have to log in through a different website, something like that. You can send that data somewhere else for processing. And that data can come back usually in the form of JSON. And then JQuery can handle it very gracefully. In the next lesson, let's go ahead and create a random Star Wars character generator based on pretty much everything we have done in this course. 36. Final project: Okay, welcome to your final project. We are going to be creating a random Star Wars character, a generator using jQuery and JavaScript. So what I want you to do here is go to this URL here, I'll zoom in so you can see this. And we need to go to this URL here. And we can see all sorts of stuff that we don't want routes all we want an ID. So let's go to ID. And we can go to, for example, slash Star Wars API slash api slash ID one dot JSON. And we get Luke Skywalker, and we also get an image and a Wiki and all sorts of other stuff in there. We could go to character. I think there's only 83 in here. Yeah. This one doesn't have as much information, but at least he's got a name and an image, which is really all we want at this point. Let's go to 84. There's one, there's a bunch of new information in here, I think. But there's not a 100 characters, there is not 100. And let's see if there's 90. Let's see if there's eighty seven, eighty eight, eighty nine. This is important that we do this. Ok, there's 88 characters, so we need to randomly get a number between 088 and go to this URL and replace 88 with a random number. And then on our page I want you to be able to show the name of the person and their image. And so we're going to need to work with some inner text. We're going to need to work with changing an attribute. We're going to need to work with a get request and some random numbers. Now, I want you to, if you can, if you know enough, JavaScript tried to do all of this on your own at this point in time without watching me do my solution. Now if you get really, really stuck, first of all, definitely go and google, half of web development is Googling stuff. But if you get stuck on Google and you don't know where to go, you can always come to the learning to code Facebook group or simply resume this video once I fade out and fade to black. And then you can watch me do my solution. So I want you to go ahead and give us a shot at it can look like anything you want. By the way, this is completely up to you. Make it look amazing. If you want, make it look terrible. If you want that is 100% up to you. Go ahead and create a random Star Wars character generator based on the very little information that I have given you. And I've purposely given you very little information here because this is going to be very good practice. As a professional web developer. People are going to give you very little information and you're going to need to work with it somehow. So I'm going to fade out and then I'm going to fade in and you can watch my solution later. So just make sure you pause when the screen goes black. Okay, let's go ahead and create a random Star Wars character generator. So the first thing I'm doing here is I'm looking at my API endpoints and I'm reading through it. And this is very important to read through it. Don't just take someone else's where like my word from earlier. Actually read through it if you can. So we have a base URL or a cached CDN URL. Let's go ahead and use this cache CDN URL. And we have two routes. So we can use this URL slash, all dot JSON or slash ID. So let's go ahead and do slash. One. Is this gonna work for me? Nope, that's not gonna work for me. It's gotta be slash one ab.js IN problem for probably, right? Nope, that's not going to work either. So that wasn't working. So we read through this and we see that this says ID, but it should actually say id and then the number dot JSON. And so documentation could be slightly better here, but we see an example of it here. So let's go ahead and put that URL in here and do slash ID, slash 1 dot JSON. And we get Luke Skywalker. Now, how many characters are there? What's our maximum number or maximum number is going to be 89. Nope, that's not going to be right. It's going to be slash ID slash 88 dot JSON. There we go, captain plasmas, the last character we have, so we have numbers one through eight, which we can work with. So let's go to our code here and let's create a button. And it says generate character. And we need to, when this button is clicked, dot on click, do a thing function. So that's just registering a regular click events. Now we need to do some sort of GET requests. We can do dot get and then that URL. And so I have this URL in here, and I'll make that just a touch smaller as just 88 dot JSON, whatever that's going to be just returned that that's fine. We can change that later. And then we want to get that data and console.log the data. We want to make sure that this is going to work for us on our browser. So let's go back to our browser and refresh our page, generate character. And it did, it got Captain fascinating God, our information in here, that's perfect. But now we need to randomize it because if we click it again, it's just going to keep getting a plasma. So let's go ahead and randomize that number. We know we need to create a random number and this is not jQuery, this is just JavaScript. So we can do constant. Random number is equal to math dot random. And this is going to give us a number between 01 times 88, and that's going to give us a number between 188. And then we want to do math dot seal. And so what random is going to do is it's going to actually give us a weird number. It's going to be 0, 1-2-3, 4-5-6. That's gonna have a bunch of decimals and we don't want that. What we want instead is whatever that number is multiplied by 88 and then bump it up to the closest highest number. So if it's like 74.1, it's going to now be 75. And let's go ahead and change this to a template literal. This is just regular, plain old JavaScript at this point. And we're going to put random number in here. Let's go ahead and save that and refresh our page. Generate a character 0 random number is not at a typo somewhere right there. Okay, let's try this again. Here we get an Chewbacca id 13. Id, ID 21. These are all low numbers. Strangely, ID 64. There we go. So now we need to get their name and their image. So we've got all sorts of stuff. We've got like when they're born, born location yada, yada. We want their name like palpating and an image. So let's just scoot this down just a wee bit. And let's go ahead and put a name in here. So let's do H1 name. Let's just leave it empty and let's select an image. Src is going to be nothing as well. Please give this a class of character I mg. And let's go ahead and work with some of this. So now we know we can fill name with data name, data name, and that's accessible. And when I click in here, this is all the data in an object. I can scroll on down to name. So now I can select that name. I can do H1 dot name. 2.txt is going to be data name. And so we see nothing. Boom, boom, boom, look at that. It is working so nicely right now. Let's go ahead and add an image as well. And that's also, let's zoom out because we are at like 250% that's getting dressed to be too much. Now we can select that image, we can select the character IMG. We can select that attribute of SRC and set it as what we have, what in here. If we look at it, it is just called image. So we do data, IMG. Okay, let's see if this works. Okay. I have no idea who that is, but cool. Cuckoo, cuckoo. All right. All right. All right, yeah, this is looking pretty good. So basically we have this working now. Now we can make this a little bit nicer if we wanted to by adding a little bit of styling. So we could do something like style. We can select our H1, text align, center, text-decoration, underline, font family. Let's do a san serif font. Doesn't really matter what the font is, just a Sans Serif font. And let's generate character name underneath that. Let's do button. Display is going to be Block, margin is going to be auto, and this should be centered. There we go. That looks a little bit better. Let's go ahead and style that image a little bit. And we do IMG. Width is going to be, let's say 200 pixels. The height is going to be auto. Bach shadow. Ten pixels, ten pixels. Let's give it a little bit of a blur. And let's make it black. Now let's see what this looks like. Oh, that image didn't show up and probably doesn't have an image. Okay, not bad, not bad. Let's go ahead and center that as well. Let's do display, block, margin, auto, character generator, Greedo, character generator, deadbolt, character generator, all sorts of people in here, look at these. And so that is our random and character generator. That is a terrifying photo. And we did that technically in about seven lines of code. Yeah, it's somewhere on there. So we've got mapping run 12345678 lines of code. So we have our event listener. Whenever you click the button randomly get a character. Randomly create a character or a number, rather rent randomly create a number, get. And then just the URL, that's that API URL. And instead of getting like 88 dot JSON or one dot JSON, and we just said, every time you click that button, create a new random number and put it in here. Then when it's done, we have a call back function and we're simply getting the name and the image, and we're setting that H1 name and the character Image attribute, the SRC. That's all there is to it. Now, mine is pretty ugly. If you wanted to take my code and make it significantly nicer looking, please be my guess I would love if you could do that. Don't forget to share your project. It is really important that you share your project with the rest of the class. It is both inspiring and helpful to other people to see your code and to see what you've been working on. One last thing, if you are like, well, what is Math.sqrt, math dot random. These were covered in JavaScript one-to-one and JavaScript to one as well, where we actually made a very, very similar project using just plain vanilla JavaScript. This way is just a little less code using just straight jQuery rather than just straight. 37. Summary: Thank you for taking jQuery one-to-one with me, Caleb, telling, I hope you learn to love how easy jQuery is to work with. Don't forget, you can also follow me on social media at Caleb tall lean on Twitter. Or for awesome little code snippets and updates on new courses. You can always follow coding dot for dot everybody on Instagram. Lastly, if you're looking for a coating community, come join learning to code on Facebook. It's a completely free group and you can ask any web developing question whatsoever. Thanks again for taking jQuery 101 and I'll hopefully see you in another course. Happy coding.