jQuery for Beginners: Learn the Essentials | Dave Dixon | Skillshare

jQuery for Beginners: Learn the Essentials

Dave Dixon

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
40 Lessons (5h 38m)
    • 1. Introduction

    • 2. Let's Edit

    • 3. Bring jQuery to You!

    • 4. Bones

    • 5. Adding Stuff!

    • 6. Style it Up!

    • 7. Selector's Challenge

    • 8. Challenge Solution

    • 9. Intro to Filters

    • 10. Continuing Filters

    • 11. More intense Filtering

    • 12. Filter's Challenge

    • 13. Challenge Solution

    • 14. Intro to Events

    • 15. Various Events

    • 16. Events Challenge

    • 17. Challenge Solution

    • 18. Intro to E&A

    • 19. The Fades

    • 20. He's Invisible!

    • 21. Slide that over here

    • 22. Intro to Attributes

    • 23. Enter...the Attributes

    • 24. Attributes challenge

    • 25. Challenge Solution

    • 26. Intro to DOM

    • 27. DOM Manipulation

    • 28. DOM Movement

    • 29. That DOM Challenge

    • 30. Challenge Solution

    • 31. Intro to AJAX and AJAJ

    • 32. Get the Load to getJSON

    • 33. post() and ajax()

    • 34. AJAXAJAJ Challenge

    • 35. Challenge Solution

    • 36. Final Project Intro

    • 37. Folder Setup

    • 38. HTMLCSS

    • 39. jQuery, MySQL and PHP

    • 40. Final Touches

11 students are watching this class

About This Class

This class covers all the essential elements of JQuery. It includes many practical examples for beginners in order to understand things btter. You'll learn how to traverse the DOM, handle events, perform animations, learn about attributes, perform Ajax requests, and even unit test your code.

If you want to learn and understand how to build interactive web pages, unobtrusive script, and even nice animations that don't kill your browser, this class is for you.

What you'll learn in this class:

  • Learn how to use jQuery with DOM to overcome the limitations of basic HTML and CSS

  • Learn how jQuery selectors and actions can be used together

  • Learn how to write functions & wire them to interface elements

  • Learn how to use jQuery effects to create actions on the page

  • Learn how to make your web pages come alive using  animation

  • Learn how to develop interactive web pages with jQuery and Ajax

  • Learn how to build forms in web applications


1. Introduction: you guys. Welcome to, uh and shoulder Jake Worry. So you want to know Jake Worry. Will you come to the right place first? A little about myself. I've been working with computers since I was about 12. As far as the innards in how they work. My experience with Jake, where is extensive and like you, I started by watching and learning by doing, we'll be using the latest version of J Query here in J quarry. Beginners. Well, first go over theory, and then we'll see and code along with several examples building on each, uh, prior well, each prior example and finally wrapping up each section with a challenge. That challenge at the end of each section will require you to use external resource is just like you wouldn't realise real life to complete the challenge where the very leads to have to watch the videos again in the section or the ones prior in order to complete the challenge is welcome. Jake, worry. I'm happy to see you 2. Let's Edit: Hey, guys. Welcome back to the tour interest, Jake. Recourse. All right. Now, in order to follow along this course, you're gonna need some sort of text editor. I'll be using sublime text three and or presentment work to you guys as we proceed through the course in order to install sublime text three. Please go ahead and go to www sublime text com slash three using the most updated one. Now it has several different several different versions. You can have one for Mac or Windows and Windows 64 as well as Lennox Distress. I use it on move on to and a couple of different Linux distributions as well. Uh, this is a This is a great text editor. It's not free, though, But how you install it was just select your platform and Donald Installer package. If you're on Windows in, uh and Lennox, uh, you have to actually add the you can add the repository. And there's plenty of instructions on how Teoh how to download and install sublime text three, uh, for Lennox platform. Now it is a great one, but another one you can choose from is no pad plus plus Now, in order to get that one. You could just head on over Teoh. No pad plus plus dot org's no pad plus plus dot org's. Okay, Now all you gotta do is go to the download tab. Stick with the light. Most latest of the latest and greatest. Now this 32 bit and 64 bit systems built for the four note pad plus plus, you need to select which one is your system. You can easily find that out by just checking into your Windows properties. It'll tell you if it's 64 bit or 32 bit systems. Okay, both of those forces air Great. Both used plug ins to Sister in your coding adventure. No pad plus plus is free. Uh, if you're a Mac user, I don't use Mac, But if you are, uh, you can still use sublime takes three. And you can also use a text editor called brackets. And you can you can pick that up from brackets dot io download brackets and install it. Okay. Now, of all these, all three of these text editors have shown you, um, well, you can You can just use a no pad for this course if you wanted to, or another variant of it and work the same way. It'll just take a lot more. A lot more time. Okay, Now that we're set up with our text editors, we are ready to rock and roll with Jay Query. So I'll see you in the next section. Stay motivated, get up, walk around, get a drink of ah, coffee or or energy drink some kind. Just stay motivated. I see that. 3. Bring jQuery to You!: Hey, guys, welcome back, Teoh. Section two of DDS Jake. We're beginner's course. I'm happy to see that you have decided to continue in this course. And keep in mind that if you ever have any questions, please don't hesitate to contact me directly through email or simply leave a comment in the Q and A section. I'll be sure to get back to you since I can. Okay, now, let's go ahead and bring J. Curry to us so we can actually see it. Keep in mind that J. Query is, in fact, a JavaScript library. So if you know JavaScript, you're gonna be able to do Jake worry. Or if you decided to learn Jaqui first. Because it's easier than you're in luck. Because if it is most definitely easier, trust me. Learning Jake Weary was cyst you and learning the rest of JavaScript. If learning Js has really given you growing pains than yes, this is definitely a good decision. Okay, enough of that. Let's go ahead and get started first. All you need to do is either download the source files or use a cdn. The source files can be found at Jake. We're dot com right here. Jake, we're dot com slash download. This is where you'll find your source. Now, this is for including it. The Jake reproduction directly into your file. It'll save men. Js It's a men ified version. It's also the most updated. You want to try to keep using the most updated, if at all possible. Okay, in order to use either the cdn or the men ified version, uh, you must put either of them in the head not really suggested or in the footer of your Web page index, uh, you script tags within the two body tax of the document. If you want to put the Java script your JavaScript in the bottom of the page, that is what is suggested because it lets your page run quicker. So your users aren't sitting there waiting for a page to load because it's gotta grab the the job script J. Corey libraries or whatever other libraries were using chocolate or anything like that. All right, now this right here is the men ified version. This over here is a J Quarter Cdn. This is what we'll be using throughout the course. This right here, see how it's encased within script tags. That script tag closing in this. An opening with a source in cross origin. Okay, those two are the ones you put in your in deaths. Uh, just background information. You can use other cdn as well. So it's just the one available Google or others. Just be aware from where you of where you're getting your Jake worry from. If you're using or need to use a version of J query prior to 1.9, you could use the migrate plug in. All right, Teoh Sort of bridge the gap that could occur when you find Let me just tell you what I find it you can find at Jake. We're dot com. Let's see, That's a jay Cleary dot com slash of grade Died 1.9 Jaqui migrate! Plug in. Here it is. Now you have to do a little bit of reading in order to include this plug in. If you want to use version 1.9, the use right now of me showing you how to use 1.9. Or at least the migrate plug in, is outside the scope of this course, and you'll need to dio more research on YouTube. Google, Dr Go to search these methods of usage for this plug in. All right, this video's getting kind of linked, so I'm gonna go ahead and stop here and move to the next one. Take a break. Get up. Walk around. Uh, i'll still be here when you get back. All right, See, then. 4. Bones: Hey, guys, it's back again. Let's go ahead and get this going. So we left off last video with bringing the Jake. We're library to us now. What do we do with it? Well, let's answer that question together. First made. Sure. Make sure you have grabbed a text editor. Several choose from. Remember this course I'm using supply. I'm takes three on Windows 10. If you're on a Mac, same situation applies sublime text. Three similar installation windows. However, if you're on a limits machine, you perform a few more steps. Like, uh, just ignore that I'm in my in my Js file. This is what you would have to do. First, you would have to, uh, add at repository. You need to have to do a you have of date. Yeah. Weber state team slash sublime text three. That's what you would have to tap type into your terminal, and then you have to perform in, have to get update. It's just update. Not on time of day. It's thinking I'm trying to type JavaScript. This is pretty good. Pretty good way to show you. All right, then you'd have to, uh ah at install sublime text installer and then it will. All of that will install sublime text three with no problems. Then you just have to find it. Or you could just type. Uh, it's ubl in your terminal and it will go ahead and launch sublime takes three from the terminal. Remember, if you don't want to purchase supplying takes three. That's fine. You can use no pad plus plus or similar No pad. However you should decide to use. If you decided to use a simple no pad, you gotta find it difficult for looking at your code and actually doing what we're doing in this course. Uh, sorry for repeating myself, but I believe it's necessary in order to get the point across that those text editors that I mentioned will make your life easier. Uh, well, now go. I have already created a, uh, a boiler boilerplate for my Jake. We're here. We don't need this. I've already created a bullet plate from a J quarry and index dot html. Customs here says and custom J Quarter Digest. I called it that just said the name of convention I'm using for this course. It could be whatever you want it to be. uh, the important parts of this data of this file structures the file extensions as well as the index dot html, particularly if you wish to place these files into a live server like on the Internet one like Apache server who like to look for the word index in the directory and present it. First, however, those could be changed in their respective configuration files from whatever. Whatever server you've got going on, I'll be putting together a course on Essex soon and, uh, almost definitely have to have a server in order to make these do a lot of things that we will be presenting happen. Uh, but that's not this course. All you need here is a text editor and updated browser, like chrome or chromium for Lennox Opera, Safari or Firefox. Okay, first up, as you can see here, I've created an index dot html and in the head pay attention in the head Metta charset utf eight You need to make sure that's in there. Title whatever you want it to be. Here's the Jake where Cdn. All right, now just a little. Just a little tip from from sublime text you compress control and then if you find your left curly brace, it will go ahead and fix your indentation. The left curly brace for this Is it left or the right curly brace pushes it right. Bring back to the left and I'm using bootstrap just for a little simple styling. I like bootstrap. It's fun. 337 is the cdn that I'm using. You also put it right below the J query. Bootstrap actually needs Jake. We're so you gotta have it. Okay. And then I put my style sheet directly below my my bootstraps cdn. It's right here. I've named it custom stuff. CSS. This is how we will be. How will be porting our files within this course? We'll be bringing them in. We're not going to be doing in line in line styles. That's not happening. Uh, in line scripting, not having either. That's just that's not how we've been doing it. That's not that's not how you how it's usually done. So I'm gonna show you how it's usually done and at the at the very bottom of our file, we have our customs equally. Now this could be in a in a regular job script file you call it like Js one or Custom Js or Java script or whatever you wanna call it as long as it's got that dot Js extension. It's a job, script, file and performance such all right. So now that we've got our HTML file set up, let's go ahead and add some of our classes that will be just in simple ones. That's not a CSS course. They won't be too extensive. There's a Jake where, of course, and we will use thesis, says classes, just in order to show DeMann demonstration and illustration. Not really hammering on CSS. That's for another course at another time. So let's go ahead and, uh, but we'll definitely use a highlight class and we're gonna do a regular color for a highlighter. Did you have a highlighter? We've all seen them. We all know what it is. Um, like to try to keep mine in alphabetical order, so I just kind of went out of order there. We're going to use a bigger yeah and fun size 20 pixels. That's fine. We'll stick toe or stick to the pixels one instead of the M, and then we'll at a box it class because we're gonna be putting boxes around stuff, too. Fantastic. So now that the CSS and HTML follow out of the way, you can go ahead and take a look at the custom. Jake or foul? I'm saying Custom Jake weary because it's J. Crew that we are making. We're not using a plug in or anything. So this is how it's set up. That's easy enough. Let's see if it ported correctly. Well, let's see if our cdn appear is actually bringing us the the J quarry leverage that we want . Okay, it starts off with this little dollar sign right here. Document dot Ready? So jaklitsch document start ready. And then the callback function All your Jake where we're going here and you're gonna have multiple document ready functions. But it is really not necessary within this document. Radio saying, Hey, the documents loaded. So it's ready to go. All right, So let's go ahead and at a at a pitak here, and this is leaving a regular piece bag. And, uh, that's another, uh, short cut in sublime text. If you just type Florham and then put a tab, it will give you some Lauren Ipsum. That's just dummy Texas All it is. And there's no class at this at this point for the P tag. This paragraph tanks all it is. So But it's open this in our browser if you right click and sublime scrolled on the open browser. Okay, I see how it's all crazy up there. That's fine. We'll fix that later. We're not worried about it too much right now. Now, if we right click and inspect, as you see, there's no classes here at all. Now let's go ahead and go to our sublime text again. So we're going to be adding targeting the P tag. We're just checking to see if see if the J. Corey worked and it's bringing brought in. Um, we'll get to all of this. Uh uh, here shortly. We won't use that highlight. That was our class name, right? Yeah. Hello. Right now. This will happen immediately. It's not waiting for a trigger. Well, it is waiting for triggers, waiting for the document to be ready. But, uh, we won't have any buttons Depress. It should just happen as soon as we reload the page. So it's reload. There it is. Added the class highlight so success. Just a little. Just little tidbit, information and chrome control shift. And then I will bring up your death tools, your console elements, sources, network performance. All these will be brought up by Control Shift I. But if you just want to do it the the regular way. Right? Click, inspect. And then I'll bring you directly to your elements. Pack. All right. We were successful. We brought Jake order to our webpage. Now, in the next section, it starts to get interesting. Keep at it. Get up, Stretch! Go! Go! Ron, We're work out. Get the blood flowing. Let's keep this party party rockin We'll see in the next section. 5. Adding Stuff!: Hey, guys, Welcome back. I'm real excited that you continue to that. You have continued to keep up the pace with this course. This is where the more interesting to you in regards to starting to actually learn. Jay Query. Now that we're already set and ready to go, let's do some learning. This section is called selectors now. It's called Selected for a reason because that's all we're gonna be doing in this section is really concentrating on selectors or more directly, what do you want to mess with on the page? First, it's gonna be wise to show you a few of the different selectors that are available on what they're called, the first of which is our element selector. So we're gonna select the diff the development on our page at a class to it just so you can see it's a figure. Okay, Now, the next one is gonna be the class selector. So after, if that's one of our classes. Well, not that is one of our classes, but, uh, not a class like we're gonna be adding to it. So we can We could definitely add if def. But we're not doing it here. We're working on the illustrated ones. So let's go ahead and highlight to our f tive because p tag with a class of effective. So we're adding on additional class to that effective class. So now we're going to be targeting the idea of emptive. We're gonna add a class, do it of Fox, it we're gonna put a box around it. Simple. Simon. Right. Okay, now let's go take a look at it in our browser. There it iss We've got a highlight on R F div all the all the text within the within that def tag, uh, has made larger up to 20 pixels and the boxes around. And if all right, beautiful. Okay, Now let's go back to our text editor. And, well, the element class or element I d selectors can be chained together. Okay? So one can be chained to the other in order to really get the correct target that we want. That's think of it as zeroing in on our target. Uh, so for now, let's go ahead and add a couple more elements to our index html file. Just a simple list group will work. So you well done, list group Okay. L I list no heading our list. Group item. Okay, first. There we go. No, this is just first through Fifth Force. Okay, so we've got a list group 1st 2nd 3rd 4th and fifth. Save it. Now that we've got a list group added and the selectors have been discussed, we could get into the various methods that inexistent J query, the first of which you have already seen called the ad classmethod, which is this guy right here. Now it does exactly what you think it does it Add the class to an element that you have selected. You may be asked yourself Wait, I thought we were just Dustin selectors, and you're right. But you need to know a little bit about what we're going to be using with our selectors that I'm going to show you in order to comprehend what is really happening. So their head classmethod after your selector will add a class to the element that you have selected. Added to that, you can also add multiple classes to the selected element at one time. Let's see first. Well, you guys have already really seen the adding the class. Just one class So let's go ahead and see how to add multiple. All takes is a space right after the the class that you added initially. And another class, that's all it takes is a space. All right, so we've saved it now our end, If that had the box around, it should also have the highlight class that added to it as well. So let's take a look. So this will not here should be highlighted up. There it is. And here's our list group. Outstanding. Now that's how you add multiple classes at once, you know, like from a button. All right, really. The fundamental operation and J Query is selecting part of the document. This is done with the Jake. We're function. Show you what that Jake reflection is Now. You've been using it this whole time. There it ISS. That's a Jake. We're function No, that dollars, sun. And this means the exact same thing. You get rid of that. There you go. That dollar sign, the dollar sign right there, and J query right before the princes means the exact same thing. Typically, it'll take the string as a parameter which going to contain any CSS selector expression. In our case, we want to find all the elements with the idea of F. Dev. Well, the idea of India's right here, the selectors Simple. It's great to start out as a base in order to climb the mountain of Jane Corey that we're gonna be climbing in this course, we'll get into more and more coal staff as we progress together through this course. Okay, when the Jake or function returns a new Jake weary object instance, which is the basic block will be working with this object encapsulate zero orm or dom elements and allows us to interact with them in different ways. I think that as a grab bag coolness that you're about open. All right, This part the ad class method is chained with his dot operator. Now it's just training to it. So all that's needed here for us to accomplish a goal and changing appearance of them. Death, uh, is changing it together, that's all. But we'll have to delay our codes execution in our case until the dot war. In any case, really, until the document is ready to be executed mainly because our Dom isn't ready, it'll go ahead and fire off all that code right there without even having the document ready to go. That's where document and ready comes in, and that's what it does. It checks to see if the document is ready. The images may not have rendered yet, but Jake we will still fire, regardless, if the image is already pretty cool. Feature found J Crew that allows for an elegant cross browser solution that includes browser native Dom Ready implementations went available and adds a window dot on mode event handler that excellent safe in it. This right here adds a window dot on load event handler, which is great. We haven't gotten to event handlers yet or event listeners, really. But we will later in this course, and it also allows for multiple calls to the document dot ready and executes them in order in which they were called. So you can have a document out ready here, and then outside of this you can have another document that ready. But for this course, there's really no need for it. We don't need that, but we can now. It also allows functions to be passed directly to document ready. When it was called after the browser. Vin has already occurred. All right, now this is getting a little off topic, so I'm gonna go ahead and get back. Teoh, get back to what we're doing. And really, this this video is getting a little long. Someone go ahead and I'll see you in the next video. We'll dive deeper into selectors now that we have little introduction in tow. Thank you. And see in the next one. 6. Style it Up!: Hey, guys, Welcome to the second video in this section, and I'm really I'm ready to go. I hope you are. Let's start playing with our selectors first. I want to dissent for me. When should accurately select Pete A with a class of effective. Okay, remember, they could be chained together. Go in, positivity. Oh, and try to do it. Let's get it. I hope so. Because here's how you do it all it is is p that stiff? It's all it is that's targeting your selecting it. If you didn't get this, go ahead and re watch a few videos before this and come back to us. Okay, so you've selected your target. Now what do you do with it? Let's use the dot CSS a method so dot CSS now the most the most logical place to start with using this particular method Is that what arguments does CSS has property Take? Um well, one answer that one. It takes a property name and value like this property. They told us Now the whole point of this method is to include sits as a touch button said you want to change the general feel of page their user users air on in order to ease their eyes or change Jokela that I like. Uh, you could include a clever Jake. We're function made up of CSS and press that button and that function flyers off. Let's see a sense function here. It takes property name in the value. So let's play with some examples. Our first will be the elements. Elector, Let's pick on the did tack for now, talking. All that is within a document giving ah sis's background of orange. Let's do that. Okay, now we'll start here. We're targeting our def tag. Right? So all of them is giving the background color of march. Here we go. Let's take a look. All right, Now, these two have the class highlight put on top of him. So the background color of the diff is trumped. But the background color of this div right here the highlight just cause it's a layer one stacked on top of the other So we'll go ahead and comment is out. Control ford slash Safe go Now our entire r div has the background color of orange. This list item, this list group rather has its own background is stacked on top of that. That particular document, it's on top. Now Let's go ahead and target that FTO. It looks promising. Let's give it a font size of 30 vessels. So it really stands out Now, we're not going to use our sisters class of bigger. You could, but we're not doing it right here. So let's target that. No. Started a class after, if for their CSS I'm gonna give it a fought size of 30 pixels room. Make it really stand out. It'll be obvious to us. So let's take a look up. There it is. 30 pixels moving right along. So you've seen how to target this way. Let's go ahead. And, uh, we're in the were using a container. We've got a container class here. Now this container has a bunch of Children. Now we're gonna get into the real strength of this particular script that we're that we're learning. It's called changing. It's exactly what it sounds like. We're going to be chaining up several larger of career functions together for the next few examples. So let's go ahead and get into an example of changing and we'll grab a container class, So let's go ahead and grab it. Okay. All right. We've grabbed the container class, and now let's grab the Children of the container class. Give them CSS property as color and white. All right, so all the text should show of white. There it is. Now, you can't see these because it targeted targeted the container. And it's Children. So everything within that container here's a container day. Def tag right here. So everything in here is a child of the container, not a direct child, because the direct child of container is this row. But the Children includes the descendants as well. All right, so let's go ahead and get back into it. Jake, we're file. Now that we can see there that we can add several different styles to a page a long time or one time to a specific element. Rather, let's go ahead and try that out. Let's go ahead and target all of our list Group class. Well, the Children that class and give it multiple properties and values through our CSS method. So we have selected our what's gotta have quotes there, not back spaces quotes. All right, This group. Okay, we're targeting the Children of the list groups so that the Allies, Sears says. And in order to add multiple properties using a CSS method at one time, you have to use curly brackets. Quotes, color. Let's see. No, not that. This There we go. Color black, the color purple. Okay, now you see what I've done here. I've got the property and a quote by itself. So I forgot about Colon and then the actual value over here after the colon. And then after your property Colt property value combination put a comma and then the same pattern over again. So far, sighs Colon, let's say 20 pixels and background color. Let's say, is a purple so yellow we're gonna contrast the colors now. This should work very well, So we'll go ahead and save that. Take a look. Beautiful. Go Background to our list group The Children of the list group and purple font color all done by targeting the correct thing. So get list group Children CSS. I know this seems like a lot and it doesn't seem like we really messed with a lot of selectors. These are the beginning selectors. Okay, Now you can get a living more in depth with, um, such as filters. And we'll get to that in the next section. But for now, time has flown. This video is a bit long, so I go ahead and continue this section. Next video. Stay motivated. You can definitely do this. 7. Selector's Challenge: Hey, guys, Welcome to the challenge video in this section. Now it's time to put your skills to work. This following X says will test your ability to research into Jake. We're using the documentation as well as other resources like stack overflow of Google in order to complete the task. Okay, Now, the five list items that we put up there that would put into our index dot age tomorrow. I want you to highlight every other one, starting with the top and ending with the bottom there, five of them. So this should work. Please. Attention. Do this one yourself. So you contest and really hold in the knowledge that you're that you're gaining when you do your research. We haven't went over how to do this, but you will see it. This is just a real life scenario. You don't know how to do something research. It asked some questions and see about how to do it. Okay, good luck. And I'll see in the next 8. Challenge Solution: Well, guys, it's the fourth and last section of the selector section. We're gonna be diving in. Fillmore advanced selectors later on through the course. But for now, let's figure out, how do you do if you were able to do this tiny project according to the specifications that I gave thing? Congratulations. It's not. Don't feel bad about it. You haven't been taught the even in odd filters yet. I was just putting that one in there to show you that Google and Yahoo's friend and so a stack overflow and just random documentation that she could find on Jake, where, when it comes to research in these concepts, you have to use multiple sources, especially when it comes to learning it as well. Okay, so really, how this worked? L i even now we're using the even filter. Now that looks kind of strange, right, because 13 and five or not even numbers but the list. They are one based, however, the filter of even zero based. So guess which one trumps the other one. In our case, here is obviously the victory is and why it appears is 13 and five were highlighted from the even filter. Even though those numbers are not even, you guessed it Gonna work the opposite way for the odd filter. Let's check it out. We won't do in. Highlight one will just l I pod that, uh, class box. It will put boxes around the around The odd filter. Okay, now, this is a great introduction. As faras the next section goes because we'll be getting into filters boom box around this one box around that one. Yes, indeedy. Feed meeting zero to, uh, that was a little tricky, but it does set us up for the next station. Hope to see you there. Keep practicing. Stay motivated. Will get into the next section of filters and you'll be ready to go. All right. Have a great day and keep on 9. Intro to Filters: Hey, guys, welcome back to the wonderful Little J query. Hope everyone is staying awake. I know I am, if not going get some coffee or something like that. It's about 3 30 here. I'm still going at it. You got to say, it's not really a struggle when you love what you do. Side note. If you find yourself waiting for the weekend that work on something broken, that's why you hear trying to fix it, right, as mentioned in a previous lecture, this section. 10. Continuing Filters: Hey, guys, Welcome back. Let's do a little review What we've learned so far. You know what? You know what a selector is? Uh, is your here element selector, Glass elector I d selector. Okay, now that let's say if it was a P tag instead of a diff, that'll select all the P tags. Okay, now, if it was just clients to select everything with that class, So we get the little review out of the way, let's go over some basic filters. All right, here's some basic filters in Jake work first. Okay, that's guess what that does last. That's another obvious one. Okay, so even now we saw that one. We saw that a little bit too. All right, This one we haven't seen yet. Uh, yeah, that e que is equivalent. Ok, Is looking for an index. This one right here, g t creator. Then it's looking for the index greater than whatever we put in that France's right there. All right, so now you get the intro to what we're actually gonna be covering. So let's press a little further on to a practical review. Hopefully, everybody's coating along with me. Let's give RP tags CSS with a border of three pixels. Solid rig. All right. Next. Let's target the FDA of class. So not that FT. If All right, let's give it a CSS background color of purple. Now, this would give Thea the classes with effective the background color purple. Now, before we get any further, I forgot to mention this. Go ahead and add some additional P taxi. I've just copied the ones we already had one of each. All right, let's go ahead and do that. All right, let's get back into it. Next. We're gonna go over first. That filter. I was talking about the 1st 1 So ftf Colon first, give that first effective class that we find in a document in the CSS class. Background color. Oops. Background color of green. All right. Now, this one should target the first ftf class and give that one that only one a background color of green. All right, we've got three here. Let's go ahead and take a look. Go here. Right click open in your browser. All right. Beautiful. All right. Okay. Well, I think we're goofing up somewhere here. P Texas's borders throughout. Whoops. There it is. Solid rid. Okay, refresh. There it is. All of our P tags have a three pixel border of solid rid. Effective. Oh, there's only two f Tibbs, but it's selected. All of them. I'll go ahead and show you that. Now, get rid of that background color green right here. Just gonna comment it out for now. Now, let's take a look. So you gave both of them because we targeted both of them in that second piece of J Query would put on there this one. So let's go ahead and comment that now the first f tive will the first did with the class of first p tag with a class of theft. If so, the first instance of the class, effective in our document will have the background color of green to look. I don't think I saved it. I didn't. You go both. Okay. There it is. All right. Beautiful. Now that is the first filter. Okay? It's gonna filter out and only target the first instance of that class effective? No. Let's go ahead and target this elder over here class and pretty sure it's a class. Now, let's target the very last one last. Let's give it a big font size 25 pixels Auto dio just to show what we're doing. All right, You know that one should target are last in the last instance of the elder of class. Now, this one, Let's target the p target. The first instance of the P element. The very 1st 1 Yes, border, one pixel, solid blue. Now it may seem like that I'm bouncing back and forth because I am. The more you do it, the better off you're gonna be. Now we're going to target our lists are list items. So let's hit the odds. We've already done something like this before. Okay, now, I gave it a three pixel solid purple. This will select the L tag. Well, the list tags. Defenders of one just You're a selective. There we go. All right. See the index of one 23 There are numbers one and three or odd. This select the ally Taggart, the index of one, because the filter is zero based and like a raise. But Lissa, one base, or at least no. 1234 and five. How we seal, uh, Turkey s practice. You'll get the hang of it now. We saw you barely see it, but we have a You know what? Let's increase pixel size on that. So you guys can really see it. Let's give it three pixels. There you go. The target. The first instance of RP tag. Now you can use the odds and evens as well. And you get every other one I'll leave that to you to practice for Okay. Now we're gonna go ahead. And now the reason Well, real quick. Now the reason that instead of this solid red border that this p tag right here has this p element. The reason this one the 1st 1 it doesn't have a three pixel solid red because script top down this one over. Right, That one. Still, it works outstanding. So let's go ahead and comment all this out. Hopefully, you guys were writing some notes next, all of these, and keeping him on keeping him commented just like this, that where you guys can refer to it later when you go to practice. Now, let's use that equivalent filter, so l I c equivalent have to We're looking at the index of two. All right, so let's check out our browser real quick. So the index of two on this list zero 12 So it should be third. The one smack dab in the middle should be should be targeted. It's, uh, given a CSS background back ord. Okay, that ground color, Let's make a great Okay, now this ship target that very middle one. OK? Because there's five elements, so there's there's 01234 As far as our index numbers, take a look. There it is. Now we've commented out all that other stuff. That's what went away. See? So our third are sorry. Our list tag with the index of two has the background color of green. Sorry. Talk too fast to get jumbled up already. Run along now. We're going to target the diff target date of element. The tag P. All right now, I'll explain it as soon as I show you all of it. Okay, Pixel solid Red. Right now. This should target all the P tags within a day of tag. This right here. All the peas, the P tags within this def within a diff tag. It could be we can add 80 of things. It's gonna target all the gift tags. Well, and all the P elements within a diff tag. There it is. Outstanding. Now we're gonna move on and check out our on ordered list tag. We're gonna do something similar. CSS for born P X, solid purple. Now, this should target who's should target just the UL tags that is contained within Native. So our only eurotech you will take that we have here. We could put another one right outside that dip tag and it would leave it alone, so we'll check it out here. Okay, so you notice that it's around the an ordered list tag? It's not on our list elements. Okay, Now, to get toe list element, we gotta go a step further, or you can go a step further. If you want to be more laser focused as faras, which one you're targeting? So Div, you l and then Well, I Now this is a talkative one of them. But we want to use this function. This filter I mean greater than so. We want to target the ally tags with the index greater than one. So the only one that should be untouched is that very top one so C s s border foreign pixel , solid purple. Right now, it should target all of them. All the ally tags that have an index greater than one. Now it says greater than not equal to. So it's going to, uh, leave off zero and one. And then Onley hit 23 and four. So we should only see three of them with a outline. Approval? Let's take a look. Okay, that's that's too thin for you guys to really see. So let's go ahead and crank it up. Three pixels and we go ahead and get rid of this one. I'm just gonna comment it out. We can really tell Beautiful. We left off zero and one, but it hit 23 and five. No. If we had 100 of these different different items in the list, it would hit everything from zero and one on, You know, everything greater than one. You may you may be saying, what's all this greater than nonsense is confusing me. Well, I'm glad you asked. See, this right here is different, then. This right here, this top one right here. Select all the P tags that are descendents of a diff now this one. Well, only select the P tags that are the direct Children of the death elements element. OK, do you see how it works? Now? You could use a class or an I. D. You know, all the Children of particular class or a particular all the Children of tickle I D and really laser. And as far as your focus goes Okay, you know, uh, I really hope you guys are picking this up and don't be confused by this, okay? For this, it's just like picking a potato to bake instead of throwing the whole bag in the other. I hope that makes sense. This is beginner's course. That's why I used that particular metaphor. Uh, if it doesn't, please don't hesitate to do some solar research or asking ask questions in the comments. Some of your classmates and really be able to tell you some of your classmates also have a little bit of expertise in Jake. We're is well, or even email me. That's fine. Like I said, it's stuff that's about 3 50 Right now I'm still awake, so don't hesitate to email me any time in ways I'll see you guys in next video. Stay motivated 11. More intense Filtering: Hey, guys, Welcome to look into the third video of our filters Discussion. It's a little earlier than I started on the last one. So let's have a good time learner about a few more advanced filters. Uh, keep in mind, these are basically just selectors, don't be intimidated. You already kind of knew this. Let's check out some advanced filters first when we had a couple of words to our document and make a gang that later, uh, see at a Waldo here, Paul do at a Waldo truth here. And then although here. Cool. So we got three Waldo's in there. Right? Okay. So save it. Go to our custom. Jake, we're here now. Let's go ahead and target the first child. Okay? I haven't seen that one yet. Yes. Is too border three pixels. Solid purple. Now this target, this should target the first child of P tag. Okay, Now we're gonna go ahead and add another one. Okay? Yeah. Another one. P colon. First CSS given a border of pixels, so not purple studio yellow that Okay, now let's take a look at this. Uh oh. We got one over overlapping. Don't. So this guy over here is overlapping that. So let's go ahead and comment him out. Out. There it is. You know that one? Listen right here was just overriding the previous one. Because it is a talk down. That's how it works. OK, now, let's get a little bit more still more tricky diff. You really don't need to select that because we only have one def. All right. No. Let's, uh, target our lists in the last child of the of their lie tags. CSS order three pixels. So it purple. Let's take a look. See what does? All right. That's the last child of the ally tags. That's a quick way to get to it. Now, this will target this particular selector and filter will target the last child of every single l I tag. So you can have, uh it will do the same thing to more than one element. Okay, so multiple lists or multiple button groups, you could do it that way. I just change out their lives, had for a button. Okay, Now let's target our last p tag with this handed little guy right here. And child one, actually, that's the Yeah, let's do this one p tag in child index of one. Okay, that's what it's looking for. Looking for the index of one on the P tags. So the peas in hours goes 01 23 and seller, but it starts at zero. Soapy in child one. And we haven't seen this one yet. Append. I think that's where is Yeah, that's it for sure. Okay, A trip. More case, you know, and give it a class of got to use double quotes. What could use templates, Strings where we're gonna go ahead and use double quotes button, but primary. Okay. And let's say let me Hey, finish up their tag. Now, let's go ahead and take a look. Okay? Now, what this has done effectively is a penned an anchor tag that looks like a button with the bootstrap class button and button dash primary with the label in this thing hit me Now I just tacked it onto the end. You can use pre penned as well, but we're gonna put it right here because it's a little easier to handle. Like people for beginners. They see it. Okay, now, this once clicked. If you if you looked at the bottom of your page. Your browser. It'll tell you where it's going? It'll say of wherever your of your document is located, Uh, it will say the path and then more HTML. Now you can send it anywhere just because all all anchor tags you to make him go to a different one and even set the target toe blank if you wanted to open up in a different tab . The N tal filter is one based has his apparent here? Please keep that in mind when you're using it. We'll also keep in mind that you have to think it's not just the child of the P tags that you're looking for is literally a sequence of different elements. And if one is a P yes, here it's gonna pin the ankle tag that looks like a button. Uh, the reason why. Let's say Okay, let's say here, let's see what's what's a good one. All right, let's say let's put a button element in here, Okay, let's put a button element in there. Now, let's try to change this P s child to a to okay, and we're looking for the It should be at the index of to the P tag Attendance at the at the two. Now, let's take a look. See how it goes. There's a button. And I went to I think Jack that up. Okay, let's try to do three. Let's try to put a button around. They're still button. Okay. All right. Now may have misspoke on the on the child as Faras is looking for the p tag. The child of three. So it's looking for the sequence. So, uh, the 1st 1 2nd 12 There's three right there. Now it won't tack on the three right here. I can't believe I misspoke. That is crazy. All right. The reason why three doesn't work is that the button element is not contained within a P Tech. This but element is not contained within a within A P tag. Right here. Now, if we put a P tag here Yeah, There you go. Put a pitak there. It will upend to 3rd 1 Let's take a look There it iss because that button is contained within a pitak. All right, if you put it the inch out of three and there's no p there, this whole pins not gonna work right now. his comment is out. Move to the next thing. Now we're going to go to the list tag and last of type, Okay? And then we're gonna give it a CSS border. Keep it simple. Four p x solid yellow So you guys can see it. Notice should target. Uh, the last l I tag the last of the type right here. It will search the entire document looking for the last L I tag. There it is. That's the last one that we have. Now, if you have a whole bunch of them, it'll target just the very last one. Now we're going to get into the has filter. The has filters, literally checking just that. If what we have selected has some property or class or attributes that's defined within the braces. Okay, so we're gonna move down. Let's say, uh uh, has button That's element that we've selected. Pend found him. I think There. Now we're gonna change it. Let's really make a stand out. It's ah, border four p x followed red. The has will determine if this selected tag contains within its boundary the button element . So we'll say, Hey, does the p tag does a P tag if it has a button upend found him. Border four p x solid red. Now, this is your selective right here that has just filtering it out. Okay, so let's take a look. There it is. It put a border all the way around the death all the way around the P tag found him because it has the button element there. All right, Now, if we change that button to some other element like, say, an ally tag its changes to an ally, it's not gonna work. Well, it's working. It just can't find the ally tag within. That's contained within a p tag. Okay, now we're gonna play that game that we just that would just messed around with. Well, we just added to our html the Waldo so p contains Waldo. Ah, we gotta have doubles here. There we go. Border three pixels. Come back Solid. Read. Okay. Now that contains can easily search for words within a paragraph or text in a document. It also changed the content as well. Say you're finding this and then you would inter html and then change. That changed that. The p tag, whatever the contents are to something else. Okay, let's check this out. There they are. All three of those change the border. Okay. No, that was simple enough. Okay, now, if we change it further, we can hide it. Now it's going to remove the P tags that contained Waldo in this text section. Now, this is just a little peek into the next section. He removed them using the Hyatt function. That's that's sort of an element. That is an animation. This is gonna hide it. Okay, guys, this video is getting really long. I'm sorry for that, but we'll see you in the next video. Stay motivated. 12. Filter's Challenge: congratulations on making it to the challenge section of our filters discussion. The challenge I present to you maybe a bit more difficult than you may expect. And if you run into a speed bump, please don't hesitate to pose the question in the comments or use another number of source any number of sources that you might find on the Internet. All right for this challenge, I want you to add a CSS class called Red Man to the first P tag that exists in our document . Then I want you to make a button that win clicked fires off that styling that you just made as well as a pins, some texts to the very last P tag that exists using what you've learned in this section. Give it a go. I'll see you in the next video for the solution, albeit not the only solution. Stay motivated 13. Challenge Solution: Hey, guys, I just want to say congratulations again If you made it through the challenge and you figured out a way to do it, ask that challenge brought to light a method we haven't seen yet. Like I always like to do. Like to make it work for it because he worked for your learning better because however easy or difficult, this was If you had to research how to do it, then you will be better off and you will understand and remember how to do it. Okay, I'm now going to show you how I would have done it. Now, there's plenty of ways to do this task. But I wanted to. I wanted you to use what you have learned in this course or in the section more specifically with a method we haven't seen yet. So sticking to the requirements of the challenge here goes first. I'd start off by making my CSS class red man. Now give it a my last type background color, Fred and foreign color of light, so I can actually see my flight very well. Okay. There's gonna see it says class. Then I probably put a button in our html file. We already have one here knowing. Let me get rid of these P tags. I give my button class button button danger. Outstanding. Okay, then finish off that little bit of J query before this challenge. First target specific among button click function. All right. You know, Target my first pitak. It's that little error there. Okay, Class red man. Then I would, uh, he's turning red escape. It got escape the comma apostrophe. Okay. And then I would hand to p plast. Now upon that pollen, pressing that button with the class danger, we should have the p tag. The 1st 1 with add class of red man, So should have a red background wife on and then ah, he's turning red. Should be opinion to the last p tagging her document. So let's take a look. See if I goofed it up. Ah, he's turned rid and there's are red. Outstanding. I hope this challenge wasn't too bad for you guys. It was. You need to take a look at the last lectures and research into up into, and while you're at it, months will research into prep into as well anyways, stay motivated and I'll see you in the next section. 14. Intro to Events: Hey, guys. Welcome back in the intro, Jake. We're Bodega Development. I'm excited to see that you have continuously kept at this course and have hopefully been practicing. A bit of Jake were on your own. If you haven't had the time to really practice, take off from this course for right now. Pause the video and practice what you think you know and practice a bit of jaqui. Try filtering or selecting an object or an element from your own, uh, from your own template or from the course template that I've provided in the course files and see what you're gonna accomplish. This literally. The only way you're gonna be proficient in J query or in life, for that matter. It doesn't matter if you can do something great once it matters. Really? If you can repeat it. Furthermore, it matters that you can know it six so extensively that you could do it without thinking about it. Okay, enough of that. Let's go ahead and get started. Welcome to Section five event listeners 15. Various Events: Hey, guys, welcome to our second video in our event listener section. Um, what we're gonna look at first is the resize event. Now, this generally used to fire off a function during a window or any type of re sizing than a curves. If the target actually exists in the document in our case, the the target will always exist because it is the window. Now, this method is really just a short cut for trigger. Thats particular event can be set fire continuously or default. Well, continuously is the default or just one time. Um, unless common browsers, like some of so that exist on Lennox Lewis like tour or chromium chromium does exist on windows, But it's you says the as the chrome equivalent in Lenox Hill s is of Okay, so let's go ahead and take a look at our, uh, window resize. Okay, Now it takes a call back. So going to target our after or if def class and let's upend something to it we're gonna up in the actual window with, uh to our festive now is gonna continuously fire a whole bunch of So we should see a bunch of numbers running at one time once we resize the the window here. All right. Okay. Nice to be good. Okay, go ahead. Open this up. Make sure you gave that a safe 16. 19. That's the That's the window with 16. 19 right now. So we're gonna shrink again. Keeps on going. And again, It's the last one in 1903 Now, the window resize is something new for us here, but the results are obvious because you can pay attention and you're coding right along with us right now, as you can plainly see that once the window is resized, the width of the window itself is appended to our idea of 50 at the right below the actual class. Esteve. So it's just tagging it on. It's not putting it in line with RP tags because we didn't, uh, we didn't aligning with the P tags. We put it with the with the diff. All right, The real size was something new, but this part should be a little bit more familiar to you. Okay, let's go ahead and go back in here. Go back to our Jake weary comment this out. We're gonna keep it right. This one should be a relatively easy for you guys to grasp if you have been practicing and if you guys have been paying attention, if not, that's fine. You can always, uh, just a positive video rewind, and you can check it out for yourself later. And if you have any questions as far as the click events, which is what we're doing right now we're targeting our button. That's the button elements it was going to target Every single button uh, we're gonna be doing is, uh let's go in Tuggle class. That's good. And we have a box of class, so we're gonna use it. Steve, that is safe. Go back into crow. Refresh. Boom. Now, that's just a button class. All right, so this should be you should be okay with this. Now what it has done once we click it, talk of the class of boxing around both of our FD of classes, talking on off, wax on, wax off. All right. Like I said, this piece of J query is just targeting any and all button tags. Now you can get more specific by giving the button and I d or just given that particular button or button Group A class? No, we don't want to use ideas all the time. You need to use those sparingly, because sometimes you could have run into this is where you give the same I d two completely different elements. And while you're your job script bakery, end up breaking. Uh, So if you want to be more accurate, touch more accurate. Speed up the process. Identification. You should use an idea or class. Okay, moving on. Now, at this point, if you haven't done so already, I'm not sure if you guys have or not, uh, add in and input. Just a simple import tag type text. Okay, for now, we're just gonna leave him like that. I need you. Put two of them just right below in your document of, uh, right below the button. Okay, go ahead and go and put those in there, and we're going to go to focus. Now, the focus of it happens when element is clicked into or tabbed into, like, a on a form or some other sort of input. Field of black said simple Simon. Right. All right. Let's go ahead and move into our input field. So input and we put two of them there. So we're going to use our first. We're talking because our our input tag html is a you know, it's lined up horizontally. Okay, so, yeah, it doesn't say left, but it is the first thing that occurs in our HTML document for an input tag. So we're going to focus. All right. Takes call back. All right, So we're going to Let's miss with India. Let's make sure that it is, uh, this It's an I d. Okay. Idea. And if on let's do the 1st 1 Yeah, do the 1st 1 The first ended that occurs. A pen. Let's see. What's a good one? Oh, yeah. Your focus determines reality. That's a good quote to go with that on. And, of course, all you nerds out there, you know that Everyone said that? No, that wasn't over one with it. No, that's quite gone. Click on. Not sure if I spell that right, but doesn't matter, because this is Jake. Recourse. Don't really care house about the fictitious characters. Name. Okay, moving on in. Let's check it out. Opened up in the browser. Up There it is. Your focus determines your reality click on That's from clicking in there. Okay, so he did it again. Now, the focus of that fires when the element is clicked into our tabbed into. So now that we've already done that, this next one is similar to focus. That's actually quite different in the sense that it can lead to event bubbling. Now, if you've taken a job script course, you probably know what event bubbling is. So focus. I really cannot lead to have them public the function of the function I'm dealing with its focus in you might ask yourself, What's the point? We'll tell you the point of using an element as well as its Children to detect, focus and apply the action. That's the purpose. Okay, Now we're gonna go right back into our script here. All right, Now, let's go ahead and we'll use the second input to deal with this. Now, uh, last child little refresher for you guys from last time. Okay, so, focus. I see. Thanks. Function okay. Now, here is this. Okay, So this is referring to the input tag. The last child of an Impala tag. So it is the very last one. This is what it's pointing at. Okay, let's give it something simple. E. I don't know what that was. Background color. A little simple CSS. That's good stain. All right, So when we clicked into that last input section, focus in it should give it a background green. We shall see open a brother. Okay. Uh, what did I do around here? Last time? Input. Last child. It doesn't have any kids. Okay, so let's try it again. There it is. The last head last child. It doesn't have any kids. Not containing anything. Okay, give my this right here. Is most useful at least my experience experience with the focus out method along with it. So let's go ahead and demonstrate now. Okay, So let's make them to separate ones. I'm put last. Okay, focus out. Here we go. So focus in focus out. Usually used right in conjunction with one another. Focus in folks out. Folks in focus out from that is fantastic. Okay, so we dealt with the focus is just now. Now you can do a little bit more practice on this. Now, if you noticed I was using the key word of this where we've been using our selectors and filters right here. Now, this is in order to target the specific thing that was clicked into for this. Shouldn't be using this to explain it. This is, uh, for when you click into the input tag. Uh, what we're referring to change the background color is the input four. This I know that's this. The keyword itself is a little bit tricky for newcomers to really grasp. It was hard enough for me to explain. I can understand how it would be difficult to really grasp. I know I struggled with it since I started, but Jake Corey will really bring the this keyword into focus, especially with your JavaScript later on. So we'll be using the keyword this a lot through the rest, of course. So get used to using it. So the next event will be discussing and showing is the cover event. Let's play with our button element that we already have on the page. Okay, So, uh, you know what? Let's go ahead. Make another button. Yeah, that'd be good. Let's make another button as well. Okay. You doing OK? There you go. Let's give it a different class and, uh, different ideas too. What is going on? Okay, Heidi equals Ah. Hey. I need your clothes said hey. Hey. But, hey, you, uh, soon. Okay, Now we're going over the hover event, so we'll go ahead and let's go ahead. Comment these guys out. I know this video is getting a little long. Just bear with me. Okay? Button right idea. Hey, this should be the 1st 1 the red one dot hover call that member referred to Is this that fade out? So Okay, that's just the speed saving setting for the fades, remember? But no. Let's go ahead and do it again. This fade in. What is that? Okay, get rid of that. Okay, Let's see what the hover function does with our button. Hey, get rid of these two. Don't need him. Faded it out. Fade up. Back in. Use not doing anything yet, But you can set both of those too fast and make it look like it's bouncing. We're not bouncing. Blinking. Uh, that said on the fast. I see. Pretty cool, huh? So if you want to draw a one of your clients is attention to something, that's a good way to do it, Okay? because people see stuff blinking on the page. It gets their attention really fast. Okay, that was button. Hey, now there's other ways to combine. Fade out, fade in. Let's see if you guys can figure him out. Posted to the contents section. It'll be fun. See what this set up? It sort of looks like it's blinking of Yeah, let's keep on going. Don't worry. We don't have many left to check out in this video. You can make Let's took it. Take a look. A key down key down to get a good event to mess with. Now the key down will fire. Uh, when either any keys are pressed were just one in particular. Now, what we want to work on is just the one in particular were listening for it. Okay, so now, um, let's go ahead and target our and put let's say the which one don't attack. Okay, Now we'll do d 1st 1 Okay. A key function? No, let's see. Yes. Event which Okay. The witch you're going to see along too a lot. Uh, key value that we're looking for is why, And that key value is 89. If you want to know more about keyboard values. Every every key on your keyboard has a particular number of value attached to it. If you want to look into more of that, you can check out just Google key codes. And that'll really pointing in the right direction. Do some reading. It will be good for you. Okay, body dot CSS background color. What am I doing? Get over. All right. Background color. Yo. All right. No else. Okay? It is important. We're gonna run. Which back function? Now? We haven't, uh I don't like with me that we haven't. All right, Now, if you fired this one right now, it wouldn't. You wouldn't see anything Early's. You would see the yellow, but you wouldn't see it. Switch back. Now, we want to be able to switch back. So let's go ahead and put us a, uh, function up here. Switch back. Body background, color. What? That's simple function will get into those later. Now this selections up here because it flows down. It's a script, so it's gonna flow down already. So let's go ahead and go to this one. All right. There's Ella. Now it's back. Why again? Any other colors. Why back? Cool already. So in using key down, we and I said we because in this instance were look, for one particular key to be pressed. Now, the event don't which is looking for the event we called against it. Okay, In this case, it's a key code. So event dot which it could be anything could be a click or something like that. But in our case is key code 89 because that is what happened. Okay, uh, if you're taking a J s course, you probably being introduced into key codes. Um, there's always a list of everything online now, so you can figure out which one you want to look for. And maybe you can implement this within your projects later on. But until then, you guys have a great day. Stay motivated. Sorry. This is such a long video, but it is a ton of information. Do you have a nice day? CIA 16. Events Challenge: Hey, guys. Welcome to the challenge section of the event Lister section. This will be one one of the challenge that maybe a little bit difficult for you guys. Toe master. Really? No. I'll give you this check back on her last discussion. Create an event listener that listens them get this anyway, that listens for Cheops. Okay. Very similar to our last, our last section where we used function. Switch back and check for the event dot Which, uh, 89 I believe, looking for the key down of 89 which is why no. Check that out and tried to make it to wear this button, send you somewhere else. Okay, so you're changing the attributes. Okay, Go ahead and check that out. If it's too much, just go ahead and go on to the next next video in the section, and I'll give you a solution. But they issued a code along, and if it confuses you, watch the section again. Because event listeners big thing in both javascript and by extension J query. All right. Good luck 17. Challenge Solution: Hey, guys, welcome back to the challenge solution. Now, you may have found this challenge to the Ah, a little bit much. I may have not explained myself very clearly, but your clients are gonna be like that. But that's no excuse. I really should have explained myself very thoroughly. Um, now what I ask as you Teoh create create an event listener that listens for key ups and outputs up to the page using just j query. Okay, if this challenge proved a little bit too much for you, that's not a big deal. Your your beginner's. You're just no learning this. You're definitely going to see away of doing this in a more direct mayor. Um ah, a little bit a little bit more funny. So let's, uh, without further during, let's go ahead and do this. Okay, the first thing we want to do is check out Hey, what we were meant to be doing So when I say looking for Cheops So let's check this out. I want to do a sequence key key code sequence. So multiple multiple key codes being inputted at once and you're gonna need something to store that. So let's go ahead and use the let keyword because we want to be able to modify this particular available and we're gonna be able to rip. We're gonna make it an array or make will set this variable equal to an array. In this instance, it's gonna be array of uh I see 104 while I'm not sure why that went away. Okay. Editor's note. One to work with me right now. OK, 104 123 June 996 five. Ok, now that is the Those are the key codes for 8675309 309 If you wanna be more directly with song, OK, Now, we're gonna have to set, uh, some parameters to make this thing start listening. Well, to make the event listener start listening, you don't get it's attention. So we're gonna say start equals false right off the rib and account nickel zero because we wanted to start listening and then stop once it gets to a certain, uh, when the array gets to be a certain size. Okay, so we're going Teoh, I want these Kiev's toe work to where the document is actually reading it just It doesn't have to be an input, doc. Unit key down function event key. Scholl's event Key code. Uh, capital C no worry about the council over a new. Yeah, it's probably best for you guys. See it? He now we want to set the start to, uh I want to set it to true eventually. So it actually started listening. But we want to make an if statement. So if it's not started, okay, if not started, sometimes you'll see that exclamation point called Bang. Like if your shell scripting it will be a hash sign and a bank it's referred to as a shoving 14 start. True. Now, that should betting thing. That's really not pertinent for this. But I figured out Throw it in there. I'll be doing a prepping for for LP. I see one courses well, coming up. O p I C one is the first level linen certification. Yes, are. So if it's start, if start equals true, that's what if start iss um C code count. Okay, we're seeing how many's in there equals key. You see here. So by this point, we should be good. So we're gonna say count put us. That's how many's actually in there. That's how many key codes actually in that array after it. After Here's that 1st 10 for it. Saying true. It starts listening right there. Okay. So else, uh, said resets a good one now resets not a built in. It's a It's a function we gotta make so we'll make that right after we get this done. Uh, let's see. Okay, Count does equal seven. Because that's how many key codes have up there. So if the number of key codes that Aaron that array equal seven we're going to do this. We're going to check out our button with the idea of hay given attributes, uh, click. And we're going to send it to a location and its location, not a draft to set the H ref in a We gotta use double quotes because this is an address. Actually, if it's double quotes because of using, we're tryingto quote something within single quotes. My vehicle. Six W t t w See. Thanks. I have that off screen here. Just, uh, just to be able Teoh send you guys to it without actually you guys know what this and I'm not just gonna copy and paste this. Know what kind? Of course this is. You'll see a lot of Jake. We're courses and other courses for that matter that the instructors love, love to copy and paste. I am not. This is a learned by doing course, so I will do it along with you. Okay, reset. Ready. Now that that looks good. We need that to match up with that one up there. See this fluttering here? We need that one. That's why it's here. We're gonna go and close that. But so now we need to make that function reset, so function reset. Okay, so start false. Now, this function right here is designed purely to reset it all back to nothing. So when they enter this secret code, they will be able Teoh to see where it actually goes. They won't even actually know where it's going until they actually click the button. It's like a cheat code return. Okay. No, it's check this guy out. Okay. Control shift. I so I can show you as counsel. Now, see, control shift and I it read those keys. So eight. Hey, 60 no. Letting it 8675309 I think I did it. No, it did not. That did not work. Okay, what's going on here? 86753 Old night. Yeah, I guess I don't know what happened before, but there it is's gonna send this record. Their so 8675309 Uh, Tommy two. Tone No, no. Okay, guys. Well, that's the That was the key of challenge. I hope you guys are staying motivated and are really getting into this because I'm trying to make it fun. Hopefully you guys were having fun. I know I am. And I'll see you in the next section by 18. Intro to E&A: Hey, guys, looking to section five effects? Well, no, it's not. Section five, Section six. Poof. Really moving now. Okay, this is section six of facts and animation. In the last section, we covered event listeners. Well, a small portion of the event listeners that a president within J quarters libraries This is a beginner's course. Uh, if you've been researching into different challenges that have presented them Bravo, you have found methods to solve problems that you will encounter. This is key to getting experience If you can solve your own problems quickly that plus more directly as a boost to your self confidence that you know where to look if you have and a problem Uh, it's really an interception subject. You know where to look for the answer. Uh, did you gotta be more efficient? So in this section, uh, toward your perseverance there, of course, we're going to enjoy learning the bread and butter of J. Corey. And that is those nifty little animations that you can visually see take place in front of your eyes. So the first set will cover is the fade family followed by the visuals of hiding show And then we'll move to show the slide set, and we'll finish up with the animate function itself. So let's get to it, see in the next video. 19. The Fades: to in our affects an animation section of in charge. A query. All right, the base Jake weary. The animation and effects are great. Okay, First first said we're gonna go over is the faith family. First, let's go ahead and add a few buttons. Let's add four buttons for each of the different fades. Okay, so go on. Go, Teoh. Yeah, that's a good spot. No, do it this way because I'm using emit, uh, class button, But default. I got four of them there. See? Fade out And they tuggle and fade to cause that's the four. That's the for, uh, fades in Jake. Now let's go ahead and give them Spidey's. I stayed in. Remember, Camel casing could help you out later. Make your adjustments for each one. We want to differentiate and make it very simple to deal with already. Uh, no, the next one. The 1st 1 we really want to mess it, miss with is the is the 1st 1 right here. Fade in. Now we need to go ahead and give our class of FDA the display. None. So just so. It's hidden mud fault. So you can really see the animation take place. So now we have the fade in i d We're gonna make it clickable the function Let's see here and we're going to show after what we wanted to fade and slough. You guys really see it? Okay, so everything's good looks skin. All right, let's go and open in the browser. See, the F div class is hidden, so we're gonna go and click. Fade fades in. Alright, beautiful. It's working All right. No, that that's there. We're gonna go ahead and move to fade out. We'll leave that there. So and we've got the idea fade. You guys obviously know what this does. It fades something out and way. Uh, I really don't like after, so we're gonna get rid of him again. So fake out fast. We really don't like him. So we're going to get rid of him quickly. Go here. Go back to my browser. Fresh. It's a trade in. Right out. All right, cool fades working. Fade in, fade out. There's usually hit right together and those two are pretty self explanatory. The fade out and fading effects Take a speed, Brammer, which you see here slow and fast. Now you can also set it to milliseconds. So 1000 milliseconds is one second 2002 seconds and selling? No, we'll get to another part of faith coming. That's the toggle. See the trend? Jaqui likes the toggle switch, so let's go ahead and use it here. All right, So fade Tuggle. That's the That's the button fade. Toggle. Okay with the idea of fate toggle, I don't want to confuse you guys just in case. So we're going to, uh, let's see who we not messed with right now. Idea of end if Okay, let's get the ones right in the middle. I don't need that classroom number there. Heidi MDF, Chicago. It's a fast We're not sure what we want to do it. We're fickle. So we're gonna keep pressing a button and making that I d and they disappear. Bunch. Okay, so let's go ahead and refresh taco for a filmmaker. Oh, come back. See? It works those press in press and go dress and go straight in. No, Chicago. Okay, cool. Let's go ahead. Go ahead. Move on. That's pretty easy, right? Uh, no. Let's try the last one fade to So we've got the idea of fade two on our button. Lots of click functions. I know it's the best way to demonstrate. Let's work on something else. It's working on our ally times Give up background color green and, uh Go ahead, chain. Okay. Remember what I was talking about earlier? We're changing our stuff, so we're going to set it to 2000. Okay, that's two milliseconds. And in a pass ity of 0.4 Okay, so we're gonna fade itself fresh. Okay too, huh? What's going on here? L I c e says there's fate too. You too know what's going on in? I'm not sure what I object up, but I am pretty sure Sure something to do with my syntax. There it is right there. Well, boots, because you can't type, That's why. All right? Looks good. Okay, So what we've done here set the background Allied tags to green and then faded those tags by changing the CSS with a fade to setting during duration of the action to two seconds and played in the color to capacity of four. Okay, guys, this video is getting a little long, So go ahead and see you in the next section. We'll see the next video, not section, actually. Dio Okay, So you guys 20. He's Invisible!: All right, guys. Welcome to video three of our events and animations. So we're gonna go over off right now. Is the height the hide and shield? Very simple. I've already commented out my last ones, my fates. So let's go ahead and let's go ahead and go through hiding showgirl fast. I know you beaten up by all the long videos, so I'm gonna make this one short into the point, okay? All that we're doing is targeting the MDF i d one of the paragraphs. So once we click on one of those paragraphs sections, no matter where it is within the p tag of let's go ahead and the last list item. Okay, so we're going to hide fast. Okay? I just see a lot of these animation type type functions. They use speed parameters. I was going to give that a safe check it out. He said, but there's our endeavor. There they were. The last ill. Whiteside was. Check that out. Make sure we see it. There it is. Fifth is gone. It's still there. It's just shrank down where you can see it. Okay, so we'll leave that up. No, Uh, we just went over hide. So let's take a look show. So when we, uh no, let's do the first ally tag. Make it clickable. Let's check that out. And let's bring back our last show. Now, these speed parameters, you can set him to milliseconds or seconds. Well, milliseconds because it before 1001 2nd 2000 just like appear in our fate is it's Tuesday. All right, let's go ahead and, uh, give that a safe and we'll go to our What you here. Okay, so Well. Oh, it's gone. Oh, it faded in slow. Check it out because slow Just kind of waves in there. Awesome. Okay, so there's another element of the page that you've just turned into a collectible element with reaction to your actions. Those two small examples of the hide show, uh, wrap up, uh, the hiding show video. See? Not bad, Right? Okay, guys, stay motivated. The next section it's gonna get crazy. 21. Slide that over here: Now that we've covered the fades and hide and show functions, let's go ahead and jump to the slide family first bet. Slight up. So before we get started on that, let's go ahead and add some buttons through one for each of the slides that will be covered . Okay, let's go ahead and comment those out lower. Had it is going to save it. It's and some buttons right above our list group here, given I d. Live class. Okay, slide three buttons slide down. Name it. Taco. This further differentiate. These has changed at the food drive classes. Danger. Okay, No, let's go ahead and let's grab an image to using. Grab any image we want. You could go toe pixels and right click and copy image address. And use that as your source. I happen to have one right here. Ready to go. So go ahead, Grab it. There it is. Make sure are quote. Good. All right, we're good. Now, first, before we start any animations, let's go ahead and check some browser, okay? Oh, man. That's beautiful. Beautiful. Most Okay, Here's are different. Are different buttons here. Okay, Everything looks did. Now, uh, you know, What? Let's do slide down first. Yeah, let's just like now. Now, the slide down method animates the height of mashed Ellman's. This causes the lower parts of the page to slide down, making way for revealed items. It takes the speed of the slide as well as a callback function. You can add or change other functions to, so we can adjust the speed faster, slower and milliseconds as we did for the fades. Su, Let's check it out the button. You don't have to do this, but we're going to for practice. Right? Action. Okay. Callback function. Take our image. Were targeting the image specifically, uh, just in case We have multiple images. Okay. They slept image for the idea. Motorcycle. Let's make sure our image has the idea of motorcycle. There it is. Idea of more. Now, when you copy image address, you're not gonna have this idea. You're gonna have given a different idea which you can make anything. But we're just targeting that image with the idea of yours. It should slide down a slow, steep. Okay, that last right now this the slide doesn't do anything. Why? Because this image is already slid down Okay. Now, in order to take care of that, we can use the slide up method. Now, the slide of method animates the height of mashed elements, just like the slide down. This causes little parts of the page to slide up appearing to conceal the items, but they're still there. Once I want the higher reaches zero or said to whatever CSS men high property is for the image display property is set to none to ensure the element no longer affects the layout of the page. So let's check it out. Slide. Okay? Because that's the button. Quick. Wow, we had a wacko now. Okay, now it's still working on this image here cycle. I'm not sure what my When the editors want todo I'm doing this. Okay? This button named slide up should slide are image up, so check it out. Refresh. Find out those work does. There's a list again down, and you can see the list is actually still there. Set up. Now you see the speed difference. There's fast, they're slow. Okay, now, I'm sure you guys have already guessed it. Slide Toggle is next, so we're gonna be doing it, But I d slide Chicago function. Judge Moger. That's a fact. Now you can set that to most seconds. Just like any other speed. Okay, let's check it out to refresh. Boom! Works beautifully. Slide down. Buy me. Buy me, Buy me. Okay, so we've went over the slides. Okay? Now let's go ahead and get into the animated function. All right? Enemy allows for the customization of movements of targets. This combines all of the previous methods from the effects in the animation section, which is this one. Okay. Now, in order to make animate work, the position has have the position absolute in CSS, or you can just set it in. Jay Query. We are gonna go ahead and set the position absolute in Jake, we're now. So let's go ahead and do that image motorcycles Because we're trying to practice Jake. That's what we're doing. Okay, now that will set the CSS property of the image motorcycle for with the idea of motorcycle to position. Absolutely. Okay, No, that'll put it at the X axis equals zero in the Y axis. Now, this is simple starting point. That's all of this. Okay, so let's go ahead and do some animation gonna work on our motorcycle again. Now we're gonna make it clickable. Uh, so this there it is. Animate. Okay. No, this one. You have to put curly braces inside the parentheses. Okay, Now, that is for purpose. We'll get into it, OK, now we're going to fade it a little bit. Fated to 3/4 when it waas com left. Now, this is distance from the left. 200 vessels. Let's throw that down so you guys can see Okay, now every time we click it. All right, we're going to move it. Frigid pixels. Okay. And right here, we're going to set a speed parameter so fast. Night again with speed parameter fitting. If the function except this pretty parameter, you could always use middle seconds fast or slow, and it will work. So go ahead. And it's just a just a preference. Okay, so let's go to our Okay. We got her slides. Right? Right. There it goes. It's going. It's going away. It is gone. Okay, That includes this particular section. We will next be going into Jake weary and attributes. I will see you in the next section. 22. Intro to Attributes: Hey, guys, welcome to the attributes section of our intro, Jake. Recourse. Now the interview method gets the absolute value from the and only the first element in the marriage to get the value for each element Individually, you could use a looping constructs like J queries dot each or dot map. We'll be touching on the dot each but using Jaques actually method. But hear this? That's Ashley. To get the value of the elements actually has too many benefits. It's convenient. May called directly on a J. Corey object and change the other messes just like everything else. It's consistent cross browser uh, the values some attributes are reportedly they're reported any consistently across different browsers. Tour de age, chrome, Firefox, that sort of thing. The attribute meant that reduces such inconsistencies. Um, let's say to change the altar attribute, you would simply select the old extra using natural. So all you have to do is pass the name of the actual and its new value through the actually method. The first thing we'll do is quick hit on the on the dot each method I told you about just a few seconds ago and just so you consent. Multiple attributes, multiple attributes for different elements within the dog. So let's go ahead. Dive right in, start altering after stay motivated, I'll see in the next one. 23. Enter...the Attributes: Hey, guys, welcome to video two of our attributes section. We're gonna focus right now on that. Each method I was referring to earlier, just so you can really get a grasp. So first off, let's go ahead and make a button. Well, let's go get rid of that. Now. Let's find a good spot for this. Let's put it, Rapallo, this Peter Heywood class, I'll do each cool. Save it now. Let's go ahead. Switch over to R J Query and let's use that age method, but each That's correct. We're focused on our list items because we got a bunch of those. Let's go ahead and loop through each one of them. But give each one of them a classic highlight. It's good us. I like ago. Perfect. Okay, let's open this bad boy up. Okay, each. Okay. Now, as you can see, the each method looped through each one of them and gave each one of the class highlight. Now, you should have an idea on how the each method works. Very similar to other ages that you seem like for each. So it'll go through each deliberate through each item. And so here is how we're gonna use it to alter our ally tax attributes. So let's go ahead and use the It's alter the h rift. It's pretty simple. Just do that. Okay, so we'll leave that believe that each, but we'll use it. Okay, so we'll use this right here on this. Get rid of that. We're gonna make it. Haiti are so actually work. Hey, trip. Come on. Now, on click Patient A draft. Right, Because that's how we do it. This, this method anywhere you're altering that of a trip. That's what you're doing. Uh, so that's a good we shouldn't have any trouble troubles that actually reaching the site. Okay, this is going to go to refresh. So we're gonna click one of these ages. Well, it's controlled. Shipped I so you can actually see it. It's inspect element. Okay, now we're looking at this, okay? No. What's that? Ally? Our council there. They gave on click adjusted the address. Now let's make sure it works. Sure does. Okay, cool. Now, we've already checked out to make sure that the element has been actually changed. Trying to float you guys in. Okay, As you can see, successfully changed the attribute of the Allied tag and definitely turned it into a hot, like having to place. No. You can change the attribute with the click of a button on just about every HTML. Uh, let's say the social picture. Let's take a look. Yeah, let's do a picture. Okay, Now make a diff. Okay, lets see. Go ahead. Yeah, coming that out. Let's go ahead and make a death. Uh, just make a dip right above our slide buttons did 12. Cool. And now let's go ahead. And with the i d of cool, right? Courage. Okay. No, you can go ahead and find a picture that you like. Pencils dot com. That's a good one. Uh, I already have one. Ready to rock. I'm gonna go image Take my source over here. Place that now I believe that all. Tempe, I'll show you. Why here Just second. Go ahead and give it a class. Is it the stretch? Last image responses and let's get this image The idea of bike motor, That's what iss. But don't worry about the image tag you guys already know self. Close. Okay, so let's go ahead and take a look at this first hand. All right of bike motors. Huge. It should be. It's inspect. Okay, you can see. I must say, gift up there. Orange. Also empty. There it is. Okay, now we can Actually, we can alter the attributes of all to change it to, uh I think this is shining. Okay. Within a single line. Uh, let's go. Four. Let's say called it a bike motor. Right. Okay. Shining. Okay, that simple. Let's take a look. Now, did you see right here Also empty. Let's check it out. All is now shiny. Okay, now, that's just one. That's just one of the attributes. Chicken adjust. Okay, so, uh, but let's make that image clickable. Um, age, right motor, clickable. You could easily just change those two together, but let's just practice writing it. Hey, this Let's go ahead and change. The whole source altogether of should be simple enough. Another cool guy right over there ago. Now, that should put the source in this case, a path of our image and outputs it Well, it just outputs image, so it should be fun. Let's take a look after we click in. Of course. You got a click. You check out the source. right here. It's your fresh we got to. So that's two completely. Everything okay, Shannon? You That's exactly one. Okay, so you've seen how we can We can even change the source. You can change all kinds of HTML element attributes using this, your target. Any attributes in the dumb of whatever element and set them tow whatever you like. Just make sure it's formatted correctly. And remember, the setting of the method requires two parameters. The Ashley it and which one? Sort of like when you're when you set headers. And okay, that's it for this video. Stay motivated. I'll see in the next one for the challenge. 24. Attributes challenge: Hey, guys, Welcome to video three in our attributes section. Now, this is the challenge video. So in this video, I'd like you to make a document like the one we have here. Give the document and image that animates itself across the page along with the addition of the image. Make the button that will add HTML below. Move it along with the picture. Now, uh, if this if this is a little much for you, that's okay. I'm going to show you the solution that I have come up with in the next video. Good luck and stay motivated. 25. Challenge Solution: Hey, guys. The challenge presented in the previous video combined what you have learned through the past sections. It's, you know, it's good to have fun and play with what? You're what you're learning. So I'm sure you guys have clicked over to this video to check out the solution. Now, what I'm gonna do is I'm gonna miss with our our bike motor image that we have here, we're gonna make it clickable. Okay, Now I'm a move to use the this selector changed actually there whether this editor was yelling at me. Okay, so I've got my image here. You guys can't haven't noticed Big fan motorcycles. Okay, so there's our image. No, I want to do here. Scroll over. She guys can see a little better. There you go. I'm gonna change the you guys. Didn't this that I wanted to combine everything just to show you some, uh, some chaining and some stuff you can do. Parents chain the parent. I'm going to pre penned a bold tag. Hey, where you going already And we're not done yet. So we're going Teoh, make that whole thing clickable function this animate ago. So I'm going to set the so passive 3/4 use a comma left started from last Sequels. That's when we click it. It should shoot across the page. No, they won't go very fast because I haven't said it to go fast. I'm going to send it to go Take. See? It takes 5000 seconds. About 5000 milliseconds. Not sure why £5 there. Okay, now this is above and beyond what I asked you to do. But this is just an example, but what you could do with it Now watch now it's still on our page. Hey, where you going? Now? As you notice in this code, I have changed after view change. CSS targeted the parent of this of the image bike motor. So are targeted. The diff I'm going to creep in. Hey, where you going to it then? Going to click when I click it, It's going to automatically anime changing the opacity of the 3/4 adding 1500 p x to the left. So it's just gonna move to the right 1500 pixels. Now you can change this. So it's changing. It just takes a second. Okay, Freeload you there does. And as you notice it's still on the page. Hey, where you going? Still on the page. It just animated across the okay if you got this one. Fantastic. Now what I showed you was playing chaining lots of different methods All happening on one click of the picture. Hopefully, you guys were able to get it for, uh, with what I requested. But if you are, just take a look at the videos again. Try it out yourself with something different. If I explain something insufficiently, please don't have stayed toe. Let me know so I could make adjustments. Great job making it to the since through this section. Uh, let's go ahead. Move on to dom movement. See in the next section. 26. Intro to DOM: Hey, guys, welcome to Section eight of our intruder J career. Of course, I'm really excited to see that you have continued to muscle right on through this course. And well, in this section, we're going to be discussing our document object model, specifically moving around and manipulating it. So in this section, we will be discussing and demonstrating various methods for moving around in our Dom Dr Ben object model and different techniques of manipulation. Uh, so we've already seen a couple of these in the previous section, but we're gonna go a little bit more in depth as we discuss parents chipping little Children, siblings and other manipulation techniques we haven't seen yet. So enough of that. Check this stuff out. 27. DOM Manipulation: Hey, guys, welcome to video to and our document object model section. First things first. You guys have already been using Don manipulation methods already during this course without even knowing it. The ash view method of that's a method for manipulating the dog, and it's further recognized as a getter. So it grabs information from our Dom in order for us to use later or immediately, as was the case in previous sections. Now seeing is which we've already paid the attribute method. It's do as far as paying attention to it. Let's go ahead and take a look at a few others in the same category. The 1st 1 we're gonna be looking at is the HTML meant it. Okay, before we get started with Jake, where I have already taken out the elder of from taking out the text from the elder of Class P tags, I just removed the text. This is just for demonstration. Okay, also, go ahead and remove that that class f tive display None. We're just commented out in your CSS. Okay, so this is just for demo. Let's go ahead and take a look at we're going to use our effective class. We're gonna make it clickable function. We're gonna store content of the F div class. The text. That's really what we're getting that as soon as we took it. So we've got to use So this issues that we're gonna grab it from the HD moment. What? Using the HD moment. And then we're gonna use that HTML method Teoh to set the text content of our elder class that we just We're just deleted all the text from so text content. Okay. All right, let's go ahead and take a look at that. Get a refresh. Now, once we click on either of these two guys, it should go ahead and update, and our elders should be right in here. There it is. I see each one of them has different text in it, so it's going to continue to change it. It's not adding to it, it's completely changing it. So, uh, they see the dot HTM Oh, method isn't that bad, right? You have manipulated the dump once again of what this code is doing, of course, is grabbing the age demo loaded in the P tech with the class of F def, storing it in the variable content like a showed you. Okay, right here. And then you're simply plugging it in is text of the class elder with the using the text method. Now, this is getting the h Timo from the f tive using that variable in place in the text of the HTML and the receptive. Now we're not done yet. Hang in. There is probably gonna be a long lots of ground cover, so let's continue. Okay? We checked out how to add simple text and on a clip, let's see about adding a real deal. HTML to the dom. Okay, let's do something. That's sort of a swap out. I'm talking about using replaced with? Yeah. Yeah, replaced with the good. Let's do that. Okay. So replace with myth, it works just like you think it would be. What it does is like saying you make something clickable replace with, and then you're just put the html that you want to put in there. Okay, So let's play with it now. We haven't Endeav idea. Believe Yeah, it's an idea of India. Go ahead, select it. And if function we're gonna make the NDF clickable this we're targeting them. Did replace with. I'm gonna make it. Let's do in each one. This is because it is. It's really simple. Jaker is it's supposed to be fun. So let's go ahead and check it out. Right. So it should be. You do this. There it is. Have This is easy. Okay, Now, let's make sure that that one wasn't supposed to give it to us, okay? Yeah. Pita, I D M div. Yeah, Both of these should work, you know. Let's check it out and see if it does. I guess it's already fired. Yeah, idea. And if Yes, Okay. All right. No, you got to see what we have done. You can easily do other things with this as well. Think chaining you can make one. Collected a number of things as long as you're not stepping all over yourself. All right. Those are pretty simple. So we've covered the replacement and get it. Dumb related methods are so let's go ahead and move on to complete removal of dom elements . There are two very, very simple methods that you can use in order to fill you needs just in case. There's a time that you need Teoh. Use it So the first of these will cover is the ra movement. Now this one will grab the matching elements from your selector. No, just like we have been selecting and remove them. Let's keep it simple and remove them about when you when you click. So we're going to go ahead and gonna move after every, like, meh slam. Yeah. You guys should get riel accustomed to using that click event this, uh, move. Okay, beautiful. We'll go ahead and take a look. No deceptive right here should be removed. Just that active. And it was. And that one the other ones do that. Okay, cool. Now remove works one at a time. The only remove the element with the FDA of class attached to it. Because that's what selected, especially in this instance when we have it targeted directly at the after simple, effective, just like Jerry quit. So let's get slightly more powerful method that will remove all the matching methods as well of the Children of as well as the Children that are attached in any other descendants as well. So it goes deep. Let's go ahead. Target our container and MGs target contents completely. Okay, so dot Continue. Come on, learn how to We're gonna say, done empty. Let's go ahead and comment this guy out. Okay? Now, as you can see, I'm over here in the margin. I'm clicking all over the place, right. Coming to the centre, into the container. Boom! They're all those. All right, as you see demonstrated. But you dudes out there coating as well that once you clicked in the container, it all disappeared. More than that, the Dom elements were just poof gone and face, you didn't notice. Go ahead and reload your page. Eso Maturation is visible. Go ahead and click over here in the margins right over in here or over in here cause we're in a container using bootstrap. There's a purpose I was using Bootstrapping. This is it. No, this is one of them right here. Click in the margins you could do. You could do this without bootstrap, but as far as speed and ease of use, you guys, a beginner's bootstrap, very easy to use. So just go ahead and click in the margins. Nothing will happen. But this right here, boom. It all goes away. Simple. Simon, Right? Okay. This woman getting a little long, so I'll see you in the next video, where we'll touch more on insertion of additional dom elements, as well as discussing how we can use Dom methods to locate elements. And in addition to those two things, we're gonna talk about the parents and Children as well as siblings within the dom in ways . Stay motivated, have a great day. 28. DOM Movement: Welcome back, everybody. This is the third video in our Dom section. Now, it's gonna be a bit short in the last, but not so much, I think. Okay, the first myth we're gonna look out is the find myth. This one works the same as President Control F in your browser window. You know, just like when you're searching for a particular word on the page, find will grab all the descendants of the target elements successfully. Okay, so let's, uh let's go ahead and target our container. Not sure what that's doing there. Okay, get rid of that. Okay, Let's go ahead and target our container. Our container class. It just tells you you were aware what I was doing. Okay, We're gonna find the ally Tax. Okay? We're gonna chain it, give it a background color of, uh, aqua. That's a good one. Uh huh. Go ahead and, uh, fresh. Okay. So what what fine method has done is it has found the ally tags within our class container and has given all of them the background color of aqua. Now, you can imagine how quickly this can speed up your development. Um, as well. With in addition to practicing and figuring out what you can and cannot do. So let's try something else. Okay? I've tried to stay with the console majority this course because that's what a lot of the J . Corey instruction job script instruction for that matter is very keen on doing is working in the console often, but you're gonna have to get used to seeing in a lot. So let's go ahead and do something that involves the consul specifically. So Doc Container, Find Ally and let's do a beach because we're gonna get a rate through each of our ally tags . Yeah, I think so, Yeah, Ally tags that we're going to log their class toothy console. So used to this key word. There we go. Now let's go ahead and yeah, comment that out. We don't need that right now. Okay, let's go ahead and refresh control. Shift I to go into the console. Okay. Now, as you can see, one of our list group items has the class of Mario attached to it as well, and four of the other ones just have list group items. Let's go take a look. It's looking at actual code. There's list group item. And then Mario threw that one in there. Just so you guys can see, they will differentiate. No, it said those afore right next to these list grew up in these ally attacks with classless group item because those are identical. Now, it'll separate based on uniqueness. Now, this one, this first ally tag as list group item, and then an additional class with it called Mario. Okay, we just used our fine method in order to find Ally tags listed somewhere in the document. So let's go ahead and attend to insert html before these elements. So let's go ahead and use what we have here right now, and, uh, we don't need to each I don't need that. Let's go ahead and just use what we have here, okay? It's gonna find the ally tags, and we're going to use What, does that keep yelling at me? Okay, no, should be fine. There's nothing wrong here. Oh, it's because it's because it's not ended. It's not anything correctly. I don't need that. So we're going to use the before method because we want to insert html before three. The ally tag. Okay, use age class button but primary. Okay, so we're going to exit out, call it before, close our anchor tag, and, uh, let's go ahead. And, uh, no, it's just leave it like that. That'll work. Now. What we should see here is an any time an anchor tag pop up before each one of these ally tags up. And thus there it is before each ally tag. There is a in contact with a button primary class to it. Okay, moving on. We've done that before, so there's obviously going to be in You guessed it on after. Okay, so let's go ahead and at it and Mr the same thing. Okay, We're going to the same thing except changed the We're gonna change the button. Primary to the button. Danger there. Danger. So it should be read. Yeah, we're gonna call it after we're changing. So cynical and he's removed. Here we go. Okay, but it's pretty. This up a little bit. Let's go ahead. It's going to give it a line break there. Okay, So before l i after the ally now you can It's not really a big deal. You can see here that the before in the aftermath is dominant relation work in similar fashion. Except, of course, there is a change in position with respect to the name. Now there are dozens, if not hundreds, of ways. These don manipulation methods can be used in order to work for you. It's up to you to make the to make the magic happen. I can't make you. You gotta practice. So okay, now that's being said. Let's go ahead. Move on to parent Children and descendants. My brilliant students can most definitely riddle this out as to what the words mean. Every element in your Dom has a parent. Some of those parents have Children elements, and some of those Children have Children elements of their own, those referred to as descendants of the tippy top parents. So let's keep this in the spirit of Jake. We're which is simplicity, so I'll show you the simple methods involving what we just mentioned. Let's start with Parent. Let's go ahead and coming that out. You guys can use that later. So let's see. We're playing with Ally Tags that's really good at demonstrating what we're doing here. Okay, parent, and it's at a class of box it. Okay, now it's important to note that this parent I will only go up one level. So we should see a box around our UL tag because that's the parent of the ally Tech. And this There it is. There's a box around the UL tags. You can see how wide and how tall the Actual UL tags element actually takes up space. What space? It actually takes up. Now, what if we were to put an S right here? What do you think that would do? It would probably put a box around all of the of the parents of the Ally tag, but it should leave the Ally tags alone. Let's check it out. Did sure did they put a box around it? Every single parent parent notice these buttons don't have boxes around him. Now to do these P tags, Okay, You can see pretty plainly what it will do to all the parents at a club class of boxes to it and all of its ancestors. So more than one level to get a ride parent one level parents multiple. We've talked a little bit about parents and parent methods, so let's move on to the Children. So, uh, Let's see. Here. Let's leave that. We're going to use this. You Well, So, Children, Okay? The Children alike last all the, um, class. I'm pretty sure you know what it is if the allies. So let's go ahead and put it on. Syria says background color yellow. Okay, let's take a look. Okay. Cool. Now put a box around all the ally elements of the Children of the U Element. And it didn't bleed into any of our other sections. So it's good boxes around the ally elements, and the ally elements have the background of yellow. So now you l has five Children, right? So it goes without saying that those Children are siblings. And to target those, we can simply use thes siblings method. So let's take a look. Uh, see, here we do have that class, Mario. So let's go ahead and target it that way. Now, we could use ally first or something like that, but we have a class called Mario just sitting there, so we should definitely make you said that you'd be crazy not to siblings CSS background cover. Sure you guys know the the sibling of Mario Luigi and his color is green. Okay, Now you notice we targeted this 1st 1 because it has a classy Mario attached to it. Now all of its all of its brothers and sisters are green. All right, that's as pretty simple to do it now. Tart Mario didn't receive the same treatment as siblings. Make note of that. Just because you targeted and you say siblings that saying all of the other siblings of Mario, but not Mario. There's another method that works just like this one called next all but it does the same thing. So I mean, you could even you can even try. Hold on. Let's check it out. Okay, let's take a look here, See the exact same thing. Okay, so we're gonna move on to if we have a next all we definitely have a next. Okay, so it's the next in line after Mario because Morrow's and l I tag. It's gonna be the next list item. So go ahead and get rid of that. All refresh. Those would be the 2nd 1 There it is. It's beautiful. See, moving around the dom should be considered an easy task because it iss don't be intimidated by just just because it's another acronym you've never seen before. You're gonna see a lot of acronyms you haven't seen before and the rest of your front and studies. Okay. Anyways, I think we did a great job finishing this video. Now, in the next one, we're gonna go ahead and hit the challenge section, so stay motivated. Um, take a break. Go for a walk, Get ready for this challenge. Have a nice day. 29. That DOM Challenge: Hey, guys and girls, welcome to video four of our Dom movement trans versatile and manipulation section. Okay, this is the challenge video. So this challenge will combine. Several topics were covered in previous sections with the idea of being that you can gain recall of the different methods and, uh, and really just get really good practice on Jake weary using it and manipulating the dom with it. So I expect you to accomplish Really? In this challenge is a drop down list. So, like those you see on bootstraps, drop down menus, the only thing is, you shouldn't use bootstrap. Anything in order accomplishes go. So the list. So of the list here, I won't only see the first for the last item when you click on an element of your choosing and then the rest of the list will reveal itself in one way or another using just j query. Not Jake, Were you I or anything like that. But just Jake worry. Um, now, again, don't use bootstrap. If you do, you're really just cheating yourself from the challenge. But if this challenge proves a worthy opponent, you can just move to the next video and I'll present a solution for you. So what it should do is this? See? That's what it should do. Okay. Okay. You guys have seen what it should do. Best of luck to you Stay motivated to get it done. 30. Challenge Solution: already. That was the challenge, guys. Did you nail it or what? We're talking? Of course you guys, dear, because you guys and girls are off. But just in case you want to see what I do to match the challenge first, let's hide the siblings of airline tag. That's in pretty easy stuff, siblings. Okay, that's simple enough. Then let's figure out what we need to do, what we want to do with our first ally. Now, we wanted to be able to click an element on the page to reveal all the options right now. Specifically what I said I wanted first or the last ally attacked. Go away. I want to be clickable, not just Italy. Uh, so let's do that now. Also said it would be like bootstraps. Drop down menus. Right. So let's target Our first live tag here was targeted. This has to be 1st 1 because that's what we're talking. We want to make it collectable. Okay, function. Uh, first siblings and bringing back the slide toggle. Okay, let's check this out and make sure it works. Yet There it goes. Remember that slide taco can take a speed. You can set it to anything? No. You can see these ally tags were just like a drop down menu. Bootstrap. Anywhere else who dropped anywhere else. You see? Drop down menu items as well. Congrats. If he did well and accomplish test if not, no big deal. Like I've been saying this whole time, just take a look back at the previous videos. Try again. Practice will make you perfect. And Jake worry alone. Everything else, the more you do the very, in a way. Oh, if you guys are staying motivated and I look forward to see you in the next section, any Jax is on its way. 31. Intro to AJAX and AJAJ: Hey, guys, welcome to Section nine of our Ancient Jake. Weary, of course. No, it's titled Jake Weary and Ajax. If you're taking this course, you're probably unaware what Ajax actually is. Well, it's an acronym that stands for a secret. A secret is JavaScript and XML. It's most practical Uses loading data from server without having to refresh the page or a Syncronys hisley. The J Query Library has an entire host of methods that allows for Ajax to, uh, yellows and, more directly, an easier way to use Ajax or its brother, A J J, which is asynchronous JavaScript and Jason object, which is probably most problem that's one of you is the most. Now we'll need to install some sort of server on a system in open all files. Through it. You can use lamp for Mac was and for PC or lamp for Lennox. All of those work great. The weapon. The zam are the easiest to install if you're having in any trouble installing them, uh, just contact me directly, post a question or email me directly. Now the lamp installs air even easier than when. For example, if you're used to run a command line a lot. Well, that's that makes it really is just a suitor advocate. Install Apache two and, uh or you just you just Google Energy really having an issue. Now we'll be discussing and demonstrating various uses of J query methods in regards to Ajax in the coming videos. And we will be using Zampa. Okay, you'll see this toolbar pop up. Now, if you'll notice in my Apache reports 80 and 4 43 right? As well as my squirrels 33 or six. You may have to do some configuring if you have problems, let me know. And, uh, I can really help you guys out. Now, it is important that you guys use local host. Okay, Local host. And then whatever the name of your file is that you're using to run the course files on this course, whatever the actual folder name is. Okay, cause it's gonna look for index first anyways, All right, Now, if you use this okay, you may have what is called a cross origin request air in your code. I will show you guys what it is throughout throughout these throughout these next few videos. But so make sure using the local host. Jake, We're Boiler and you won't have that problem. Okay, guys, let's get into it. Here comes Ajax. 32. Get the Load to getJSON: Hey, guys, welcome to the second video on RJ Corey Ajax section. Why don't we go ahead and work on some of Ajax shorthand methods? Uh, now all these methods should work without having to bet refresh the page. So let's get to We've all heard of loading death. It's usually from an external source. That's that's the whole point of dynamic programming itself to load something when I havent are hard coded like this. That's I mean, that's great that you can do that, but it's not usually how it's done. OK, but the data is usually produced elsewhere and loaded into the page dynamically. So, uh, let's go ahead and get to it. We're gonna work on some Ajax shorthand methods, Okay, not the big boy Ajax function, uh, get method the load method and the get Jason Method in this in this lecture, uh, well, let's first go ahead and create a more HTML. If you guys haven't already done this yet. Didn't do it and give one of these gives the class of nomad. We'll get into that later. And, uh, just one. Okay, that's that's imperative. Just just make one of them have it now. uh, we're gonna have to do some adjustments to our HTML, so let's, uh yeah, it's at it. Right. Okay. I want you, Teoh. It was a jacks. A comment that separated. So we're gonna make a button class button, but okay, way also need to get so that's not gonna really make a difference. Coat load. That one will use that one here in just a minute of now. We want somewhere to place our data that we haven't used before. So we're gonna go ahead and create Jax. It's good to comment. Echoed gas. Just Teoh. So you can pick up where you left off if you get distracted by something else. So let's go ahead and create a dead colors. People okay? And inside, people, let's go ahead, make the ul and give it a class bootstrapped. Classless. Let's see, right below that submission, All right? Yeah, it's That's pretty descriptive. Gonna be using this area for I say input. Okay, so let's give class of default now. I'm using a lot of bootstrap classes because I want to make it actually look good when we take the post. That idea will not send most. It's not going to use the post meth. But that's what we will use this for, just to separate it from our buttons. Okay, so give that a safe, you know? Let's see here. It's reload ago. Okay? Now our HTML files should be ready to go, So let's go ahead and check out the basic syntax of the load function the load Ajax function. So it's our button load for a time function. Let's go ahead and target the class of people, please. And, uh, that more age tomorrow that we just checked. But let's give that a save and take a look at it. So it does nothing. Now, we should click this right here just to check it. Okay. What's class class? People? I need to reload the page. Whole bunch of years. Go to load resource. Oh, lives There you go. Not sure what? But that slash There nowhere is, though. We got it. This come from? It's inspect. It should just be our regular stuff. It is title Morris Gym. This that's us. Cool. Let's break down what we've done so far wants press the button with the idea of load. We see that Ajax requests a specified euro from the well in the form of a string through through the server, it either grabs everything in that fire or just peace. Now let's check out the piece. No matter. So all we're doing is targeting the class of no matter that's it. So we should only be able to grab the class of no matter from this. This grabs a class nomad this. Now, if you attempt to do this on a portion of page that does not have your domain, you will get a local whole stare. Just try to keep our files within our own domain. Okay? Because teaching the runaround that sending your own headers to replace the ones that are there day parents site, where you grabbing that, grabbing the page itself. That's outside the scope of this course. I will be going over further and later. Of course, nothing. Just remember what I said in the first video. You may run into issues if you're just opening it in the browser from your text. So let's check that out. Now. Open a browser. Okay? Nothing happens, right? Check out the air there. It ISS xml htp requests cannot load that particular viral cross origin requests. Okay, it will still work. I'm here because we're on the same domain. Keep in mind, uh, if you're having issues, uh, brothers in that, like, if you're doing local host and then your file, I like it here in using a lamp server. Go ahead. Be sure your permissions air set because that's one of the reasons that if the file permissions themselves aren't said correctly, then it's not gonna work. Load is just a short hand method, Jake. It's very similar to get in the sense that it performs the same quest. So let's move on, Teoh. Now let's let's go ahead and do that. Yeah, let's go ahead. Do you need to see it anyways? Let's do it. No comment that out. So you guys have it later? No. Let's kit or paged him because load performs a get request now, it'll simply this right here. Well, similar. Ignore the return results, but a holds the information. Uh, let's go ahead and give us some more steptoe work with. So you guys can actually see it stuff this little safe Sometimes you'll see if you're researching this, you'll see this parameter right here. called data or de or something like that. But it could be whatever you want it to, long as this corresponds to what your help putting in some way now it looks a little bit like we did with the button before, but it's not gonna work. The same is but because it will fire automatically assumes the pages load because we're in our ready function. This guy way up here so it's gonna fire immediately because it's called. It is the get function is just a short hand of the Ajax function. So let's go ahead and move on to get Jason and better understanding that Ajax also works for JavaScript. Object notation files. So, Jason. So let's go ahead and make a Jason file. It's a new file. Let's go ahead and, uh, let's see, what do we want to call it? Say stuff, Jason. Hopefully, you guys are a fan of history because I definitely now Jason file is very strict as faras its form. Let's check name fire inside. Okay, so we've got two strings ones, a key ones of value. This is just an object. This is job script object notation. So it's all it is is a job script object King Because he was a king. That's his city ointment belonged question. Okay, now he does in the year. 10. 16. No, Ridge are inside in my images folder. You guys, congrats that from the documents. So make that images folder in your parent directory like I've got it here and go ahead and grab you some images, but make sure they align with whatever you have here. Okay, That's pretty simple. Keep in mind. See how I have commas that into these. If you have a hanging common right here like this and nothing going beneath it, that's not valid. Jason, if you need to check out your Jason file, go to Jason. Went something just where you can just type in, validate Jason into Google, and it'll give you a whole mess of sites. Uh, so let's go ahead. I will comment that and, uh, let's perform a get Jason if request get Jason. Very simple. Okay, Don't get unintimidated by. See? Check it out. Are called we need because there's a bunch of there's several peas in here and values, so we have to perform a each function. You're right. You've got it? No. That each. It'll start with the object that you want to iterated through. Okay, So whatever you've named this, you need to start it with the object. You want to enter it through and going to use a callback function? Uh, let's see, We have keys and values, right? So let's call it key and value. That seems that seems pretty simple right now where we want to put this way have class of people. We can put this. We're going to use our pen function class. You strap class for lists is list three. Okay, that works. I say need to keep that right there. And how you can Katyn. Eight. The values you have to use the key. We have to use a key to get the value right here after reference this whatever this is in your Jason file. So we have a name, Jason. His case sensitive. So I have to use the lower case. Name can just put all caps plus no, no. Also, be sure when you're adding classes and you're contaminating enclosure tag with doubles and anything that you need quoted and singles like this name right here. Confused quotes, Let's go ahead and close that out. That one don't need Teoh. Just like so. Go ahead, run this happy list of items plus value. Name, key value, the lives, Too many columnists. There we go. We just grabbed the name because that's what we selected. That's what we select now that's working out pretty well. However, What if there were several more objects in our Jason? Follow them. It works the same. This video is getting pretty lengthy, so I'll see you guys in the next video. Stay motivated. 33. post() and ajax(): Hey, guys. Welcome to Video Three and Ajax section. Jake. We're Course, uh, in this video, we're passing that on to our server using Ajax s post Met, uh, what you should have already is on input box of type text see of me. But with the idea of post, it really doesn't matter what class it is. And that's it. As far as HTML goes. Now, in order to use these two, we got a what way? Have to target. Right? Let's go ahead and get going. So first, let's go ahead. Make up there called. That'll grab the value of that input box Me. Now, let's go ahead. Move on. We were We will set up our post request. So post your processed up Ph. B we have made It's me. I mean, you call this as long as they alive. Now all we need now is an event to fire all of this. All right, so it with these guys keep our indentations nice, but post click. Okay. Stuff all this. Let's test this out by in putting our names into our input box box. So use post nothing, is there? What does that mean? It didn't work, forces it and try it again. Use post. There's process. Stop PHP Network. Our sources there This so the request mint that is posed and it's 200. Okay, but where's our stuff? They should go to preview groups. I guess we forgot to make our process. That's simple enough in your home directory. Go ahead and make a file called process dot PHP. We will use just a touch of peers for you. Okay, let's check to see if the if the post super global has been set me has. Let's go ahead and set a variable. People maybe. Okay, Internet. And then we go it up. Just put some welcome. Contaminate the stream with me in return it it should. Three. There's no process. Remember network actuals? There's need right there. Preview. There's Post Status Co two. That's fantastic. No, we don't see it here. That's because we didn't select anything to go there. But what we can do it is This is a quick, dirty way to do it. But it works. Process stuff. You'd be me. Me? No, this should perform the same request. A post request is using processed PHP. We'll find out right No, he's supposed this Make sure, actually. Did a post requested? Not again five. Stephanie, those okay? We have to process stuff. Huge. He falls. Okay, The one milliseconds and for looks like the one we're looking for Post and post this one. It took to most seconds to run it on This one took three. And as the scripts can see, this post request fires before this one. So this one, you know, seconds this will 63 So that was pretty crazy, right? No. You'll see that the that. There's a lot of information on this as far as what you can set in the post once again. And the agent, Let's go ahead. Get into my favorite one, the agents. So we will do something relatively easy. Let's perform a get request. The get a get request. At least the request method is the default the agent. So, uh, go ahead, make a call it txt in some sort. Some law. Beautiful. So we have the whatever doc THC in our base directory, which now we want to do is make a Ajax request dollars. And Jake Jax use parentheses, incur the brackets. You are well, and grab dot txt. This is where we'll grab in the data from. Make sure you put your and usually these of these types of men that I've been writing on in line a lot. Usually maybe it's better if you break it apart, so that's here. Successful. It usually comes last all after your mother. Other stuff that you can select like you can set cash toe falls or or some Let's go ahead function This is this right? This function or here will only fire If this gift request is true or work and number. This train right here can be whatever you want. Data right here and stuff right here. Could be whatever you want. Just long correspondence to send that people set the age 10 to change comes from that final I see now this should fire immediately. All this text should fire page in that function. There it iss and there's whatever dot txt it is a get request. Okay, now let's go ahead at an interval to it to set it to continuously fire near real time. Now usually don't want to do that in a really, really. But to show you that you can will A date wants to this Tuck all this in here. So that show Okay, no set interval takes a with the time fire going by 1000 milliseconds So the fire every 17 every single second is gonna fire and check So let's go Let's take a look Se We play the week a j changed I just There goes It's firing every cent. Let's go so far I was Oh, there, Save it and see Is there cool Latin? Get a little difficult to tell. Where is that? Uh huh. No, let's go ahead and stop this from comment than out. We don't want to continuously. Really? Don't No, you may be asking yourself boat. Isn't this supposed to be a sink in his job description? XML? Well, yeah, it iss we did age agent A very synchronous job script and Jason. Now let's go ahead and take a look at the XML. Okay? Now we'll start about forming a simple get request to retrieve information from the file that you can retrieve from the class document. It's not an XML course. So here's some XML. You can get it from the course files. All it is is a book catalogue days author. Tighter genre guys published a and description all in one single. Now, XML is very strict as far as the syntax goes, So I want to write it yourself. You can you can copy what you got here. Just make sure the XML versions there. Make sure also that you close. Okay, close it out correctly. If you want to. Just grab it from the course files now. Still be here back. Okay, so let's go ahead and form our get request Looks, XML, That's where we're getting it from callback function, that is book six Miles, a source file that are used to text test external retrieval. It's from Microsoft Developer Network. You can find it really easy where you can just download it here. Now, we'll use a callback function because we don't really need to set anything else. Uh, really. So, in order to transform Traverse traverse the death found Jason, we had to use the each man. So here we'll be using the data parameter that was right here as the selected element using to find while using flying against each. Okay, He isn't fine against each book in the string performing H function against each one to go through each of the book tags in our XML Doc. That sounds pretty simple, right? Let's go ahead. Okay, so we use our data as a selector, and then we'll use the find method in order to find a particular tag years. There's a that's what we're looking for. And then we will chain Keach function told you, change very important in that well used that and the go into. Now that that's done, we should probably creates invariable so we can actually look at this stuff. Let's make one see what this is for sending the variable to book this. So that's finding the say what this is. Give us It's not gonna help. Will a t least give our other so title book reason that variable right title we're getting ? Yeah, we're just trying to get the text the same thing. Exact Same thing published. I said published date right here because that's exactly what it says right here. That's what it's looking. If you don't you try to give it your variable name like we did here in here because published doesn't exist in There we go. No Valls Let's go ahead and target the people class we use just a minute ago and this data to it. And since the, uh let's see, people class contains a UL. That'll work the people class and, uh, let's go and let's it inside. So, uh, classes we have now I know iterating dealing with all this kind of stuff is a little boring, but it will help later break it. That's a tot available. This, however, doing this cat that's over breaking lines. So won the title. The genre in the published eight. I'll find their way list where they're supposed to be closed. List item. Sure, that's close. Teachers. That's close. Proper indentation keeps you from issues like, uh, like in the filers. Lots of that. So proper and indentation will help you out. I know it seems pointless. Beginners. It could be a pain, really, To kick your stuff. Your coat. Be sure. So it's good. Take fresh right there. They are pretty awesome, huh? So what we've done here is iterated through each the tags and are grabbed. What we want left out the rest. Now you guys can grab the price in the description on your own and check that out as well as the author, and you can actually even style it. What you want to do now, there are a few other settings you can change like I mentioned earlier. Or you can check out and take advantage of one of the status code where you can set a function of fire. Is the status code in the head and section equals like a four a four. If it's not found, do something else another, it's probably issued to grasp is the default is get. But you can set it to post inside your you know, that could be a pretty handy, particularly if you weren't. If you're not a fan of using the shorthand post method from earlier, you can set the method post Have to be. You just used post right here, right here. The shorthand. But what? We're going through Ajax, like right here consent the method. That's it. Trying to do it before your success. Okay, that will work out for you pretty well. Okay, well, this this'll long video is coming to an end. Forgive me for having such a long video, but hopefully you guys learned a lot of stuff in this. Get ready for the next one because it's the challenge 34. AJAXAJAJ Challenge: Hey, guys. The challenge presented in the previous video combined what you have learned through the past sections. It's, you know, it's good to have fun and play with what? You're what you're learning. So I'm sure you guys have clicked over to this video to check out the solution. Now, what I'm gonna do is I'm gonna miss with our our bike motor image that we have here, we're gonna make it clickable. Okay, Now, I'm a move to use the this selector changed actually there whether this editor was yelling at me. Okay, so I've got my image here. You guys can't haven't noticed Big fan motorcycles. Okay, so there's our image. No, I want to do here. Scroll over. She guys can see a little better. There you go. I'm gonna change the you guys. Didn't this, that I wanted to combine everything just to show you some, uh, some chaining and some stuff you can do. Parents chain the parent. I'm going to pre penned a bold tag. Hey, where you going? 35. Challenge Solution: Hey, guys, how did you do that Challenge? Pretty interesting, right? Hopefully you get it. Well, yeah, I hope so. If not, that's OK. It's practice. And it's practical. See, what we want to do is used the get Jason function. Said the euro rail to this file, which are original Jason file. After that function is set up, go ahead. And more data to this file that that is to more complete objects. Go ahead and keep them the same. And, uh, we'll grab some other images. I've already grabbed those images A Z you saw in the example. And, uh, all we'll do is plug in the data. No, that's not too bad. Right? Okay, So our Jason foul eyes set up like this the way it should be now we were just add. Uh, Paul says it's gonna be the basically the same thing. Go ahead and copy it. Get rid of that hanging comma. All we're gonna have to do is change some stuff. So we're going to write, remove that out the way So you guys can see Nikola Tesla. Okay? He's not from the UK. He's from Croatia. His alignment, he was in it was an A C electrical engineer. They died in 1943. And his images the only 1/2 is Tesla. And that's it. Okay, now, on the next one, it's, uh, Vona. Yeah. Fun, huh? On thrown. You know, the rocket guy. And he was from I'm not even going to try to pronounce that. I'm sure you guys probably can. I cannot. You foolish? Never got better. I'm not sure how to say that. Word have. I want to butcher it. Okay. Rocket science. He died in 1977. Yeah, 1977. And from here we go there shouldn't be anything wrong with that. Jason file member. You can check your Jason out with Jason went or something like that. You know, like they have a JavaScript Lind. Same thing. No. So not too bad. So what, we're gonna do his create our get Jason function, Not in here. Of course we're going here. So we're going to create our get Jason function. Uh, no bakery. Get Jason from our stuff done. Jason, File function data looks pretty similar to what we did already in there, doesn't it? It data function Teoh value. Then we're gonna set it to go to the people. You Well, don't go into upend. How are I class? We gotta get rid of these singles. Then I'm gonna work for us. There you go. List group. Um, Okay. All right. That looks nice. And let's go ahead and do something different. Put name there your face. Now, there's a couple of things were going to be adding here, so we'll go ahead and drop this down. Use the we'll go ahead and contact contaminate that way so we could keep track. When you start contaminating the whole lot, it's good to go ahead and break up your lines. That's for you and for others. So, like you guys, when you're taking a look at this code, you will be able Teoh figure it out, at least about looking at it, you know? Okay, So plus value, we're going to say, picture, it's case sensitive. Or at least in my experience, it is case sensitive. Okay, so we get our picture there, we don't need to doubles. We need a double and one single. The reason I say double in one single. Here's our double quotes right here. And our single quotes match it. Okay? That's just how it has to be. The thing. No wrong way. I got him flip flopped. There you go. And not that do that. All right. My editors yelling at me. I need to figure out why. Okay, here's our doubles for this one that matches up with the source. The single right here matches up with this single, and this double matches up with this double. Okay. Was that guy go? Hey, goes there. This guy ago. Here we go. Here we go. I think we'll find out one way. Refresh. No, there's an issue. You see? Image source. Let's flip flop thes. I may have had him. Correct. Beginning. Okay. Nobody's yelling at us anymore. All right, this check it out. There they are. It wasn't too bad, was It's just a lot of concatenation. A little bit of that muscle memory. Keep working at it. You guys did great. Now we'll go ahead and ah, do something really interesting as far as bringing it all together and just a little bit extra And our final act in our final project. I can't wait. See there. Stay motivated 36. Final Project Intro: Hey, guys, this welcome. The Section 10. There are intro Jake. We're of course, this is our final project section. So we're gonna be working on on this right here. It's a Star Wars chat board. Now what this is is just a location that your users can come to anonymously and post Post fan are just pictures, like get here. We're just text gives the time, the date and, uh, well, it just looks pretty cool. Not to mention the customs Star Wars fun that we're able to bring in now how this is gonna work. We're going to make our html CSS markup, make our database and then continue with the PHP. My school portion finished that. And then focus on our Jake. We're oh, our way. May do the J Korean job. Script first. Not 100%. I think we're gonna do the job. Script first. Yeah, that's Steve Jobs first because the Jake we're in peace. The PHP my school part doesn't take. So without further delay, let's go ahead and get this started 37. Folder Setup: Hey, guys, Welcome to video two of our project section. All right, this is only the second video, so I started kind of slow. We're gonna go ahead and go for the folder center. So first, let's go and make our project folder. And let's call it Chat Board. That's chessboard finished. Bolder. Call it chat board. Okay. No, If you guys down with the project files, you do have this boilerplate. I'm going to copy what we have in there. Just paste it red there. Go here, add it to a project. Now, in this folder in the boilerplate folder, you're gonna find an index dot html a jazz one dot jazz in a custom CSS. And this boiler comes ready to go with bootstrap and Jake or three. No, we need to change the name of this index dot html. So we're gonna go ahead and just rename it to index up here because we will have a little bit of PHP within this within this little project. Okay, so I just say we got a custom. CSS suggests wanna index PHP. We still have a couple things to add to our project for really get running first. you need to grab. CK Editor got jazz file from the project. Now, if you don't want to get it from the project photo, you get the latest version and seek editor dot com slash. That's where you need to go on the Web, and that's where you can get it. Just grab the standard one or you can make one for yourself. Either way, I need to grab it. So the next thing we need to is well, you guys can download and just take that downloaded zip file and put it into jails full. Now, if you do have the have project, resource is, we'll go ahead and take our See Canada right here. Don't worry about those other files. If you don't have Okay, that's fine. Don't worry about that. Going to go to our chat board charges for put CK? No, it's a very big fall, so just be sure to extract it into that voter that now if you have the if you have documents that then I sent with course you will have the sounds for So I need you to grab that copy and paste that right into your right into your chat board application for this right here is just a simple wave. That's all it is. It's gonna play when we press about now, this is what I've found. That was really cool with us when I was making this project. I thought what would be a cool front probably haven't seen in a Web development project that I'm pretty sure they would like to see. So I thought, Why not grab Star Wars? T t that is custom font file for Star Wars. So what we did take it and put it into our our CSS folder. Now that TTF that's that'll come in handy here in just a minute when we've in the next video, when we go to set up our our a C Moses wire frame, it was really start rolling. So these phones are different than the ones you simply poured from Google. These are not Web based world Web safe fonts. They won't work on everything, but there will work on most things. And though there's there's several different files that you can actually use, According Teoh, whatever browser you wanted to be optimized for, you can optimize it for all of it. But that's gonna take a long time and that the scope of this project. So, uh, now that the folder structure and are set up is out of the way, we have oh, groups almost forgot Teoh support in our r c K editor. That would have been a master. Okay, so we need See what? This. I think I'll put it right below this bootstrap CD and jobs. Okay, so it's just script tags. Let's go in. Call it what it is. Give it a little A little comments, so we know what it is. Script source. Yes, slash ck a chance. And that's it. That's the only thing we had now that I work with a lot of other plug ins as well. So if you want to use other plug ins on here, feel free to this. Once you finish. Once you guys finish this project, it is yours. So you can do whatever it is you want to with it. But just a little side note disclaimer. A lot of the Star Wars stuff that amusing. I don't own any of it. I'm sure you guys are aware of that, but I should mention it in this video just in case of No, that wasn't too bad. Right? So, uh, let's see if you're using A If you're on a lamb server, If you set this project up through Lennox, be sure to check permissions on the file and set them to 7 55 on the parents holder. Now, a good way to do that. If you're if you're taking Jenny Quarter for the first time, you may be new to minutes is well, so mods are Bashar 7 55 far html slash That's if you're using a land. Now, if you're using example on Lenox, then you're direction status that you may still have to set base permissions like that or you might not. I'm not sure I didn't have to. You guys might on a example set up if you're using a Zandt folder. If using Land folder, you're definitely gonna have to. There's there's no getting away of that around that. Also, in order to get full use of CK editor, we should really go into r H. Http d dot com on Let's see. No, we'll have to bring it over here. You have to go to config and then http de dot com. Okay, Now, for Apache users, it'll be in BTC. Apache two slash Apache two dot com. That will be your com file that you need to adjust for Windows and Samp users. This is what you have to do. You need to alias your CK editor. See Dr Example, lips seeking editor, and, uh, be sure to adjust. Teoh your individuals. Now we are looking for, uh Where is it? It should be Alias. There it is. Right here. I've already said it up and set it up for that chat board. Chance to see. I'm not sure where that other one came from. Noise. There it is. You alias it and it will actually allow it to be used like files to be sent through the server. Now, after you add this, you will have to You have to restart your server. So I just made an adjustment. I saved it. Make sure you do this. Not say that's just say, stop your server. Go and stop for my school 12 And this started back up in sequence. You have to do it in sequence. But that's a good way to make sure that both no uh, that's it. Guys, we are ready to start this thing. Stay motivated. We've got a very, very, very long video coming up in the HTML and CSS three sections Just because I like to keep those two together so you can see what it's all right. See you next one. Stay motivated. 38. HTMLCSS: Hey, guys, welcome to our you and RJ Quit. Now we're gonna be setting up our HTML its history. The skeleton for for application actually run now, since we are using a PHP were we are using eight. We're using PhD within this. Now the very first thing you're gonna want to do is make a diff with glass container within that, uh, for people to actually see our post is little others to see him as well. Let's go ahead and create idea Ward and then the class this ally with classes just so we know you, that's we will. We'll load these dynamically later. But this is just for replacement. We'll replace this, uh, now let's go ahead and above our board. So it's It's always good to comment code for others. I assume you won't be working by yourself. Your dinner. You should start branching out looking for other people to assist. You can learn. I will have to. We'll have to create the post from somewhere, right? So let's go right underneath that. Did you just make and may? Let's make another day with class this class de six class center, So offset of three the grid system. Bootstrap works in 12. So if you offset it by 36 should put you right. Okay. Now, now that we've got our city or centering, let's contract. Let's construct the form. So form tag much. No class of form control. You name? This is her name in this for Had a place name, not just beneath. We need somewhere that users can actually post a message pictures. So let's go ahead and make a text with the Yeah, closed. That's not the method posted. Just I d right. Go ahead, Class. Sure do that. So got our text. I think we should send this really send it with a but, well, J classle buns. Success. This is just Texas. Sure it's a other ones, too. Text editors post cause you're posting it to the board, they're safe. So let's go ahead and make some other changes to the time data. There's so plays like a little a little systems, our forms rating. We're almost done with HTML markup. So let's just have one more thing to form. That's something that this go ahead, make an audio tag inside of it is that's patina. How do you source Let's see sounds and whatever wave the one in the documents, of course. Documents gave you is called Good. Don't wait. Give that a listen. Just go ahead and double click on it twice. Bring your right. So, uh, no page really is complete without a foot. You could do anything this border footer. I'm just doing it for Stacy. We'll target that footer Patty talk or something just to stretch it out. I get this safe, but go ahead. Hers? That well, do something with that age. Pretty soon. Okay? That's the basic set up and what we're gonna be building with the HTML Saturday. So let's go over to custom CSS. No, we have to do something. Really? With this all great. It doesn't really say Star Wars. No. See this? This doesn't sage sores to me at all. It's, uh so use the body I like to do on my main tax First, give him in the top. That way. I know. What if I need to solid at source level, I should be able to trace it. No, it's background property that's I've already got. And this. Now let's make sure we don't have a mess. uh, all over the place, So check this out. Right time physician. It said. Attachment? Uh, this sighs. And just to be safe X, that's simply precautionary measures. Just in case you run into an instance where content overflows to the left and right, it's exactly so horizontal ones. Let's go ahead and give it a safe is. Sometimes you have to clear the browser cache mentioned that a couple of times during this course there, you saw where actually now, uh, get to work on next. It's an age like this guy right here. That's not gonna fly. It's It's too far to the left. It's so let's go ahead and get a contrast in color in there. Contrast Teoh dark colors is like, so we'll use white target age. What center store? Make it white? Her right and the and said the fact there's, you know, just take a boat that's not found. I have. It's not one yet. We gotta make it. We'll get to that. Just men target our rul tag. No, it's his are, but that are you will not take up the entire screen with the amount of post that we have coming in it's gonna be really popular, right? Just to make sure or at least attempt. Make sure that isn't Philip the entire screen, and our users have to go screen two inputs. We could limit the height. So he said, the height, you poor 50 th that's that's literally 50% of the view pores. If it was 100 Ph. 100% of the view port, that's what it would be set to. No, we still have more work to do. So five kids or posts is I'll get to that. Just rul has the height of 50 pH. Right, So let's go ahead and target. Are you now of 100% 100% of the content, not the window. We're going to float all of to the left, so we've already saved it fresh, All right. It's given us 50%. The report Heights. Just calculate gamer not gonna take up half your screen immediately. It's just how big the UL element is. That's how much space it's taking. Knowledge realistic. You guys know you guys know CIA. Since this should be new stuff, I'm just explaining it just in case. Now there's one more of the of the main tags left our posts. Like I said before, have the images have the ability to just No, they won't exactly be huge, so let's make sure they're not. But some image tag and instead the height to with. So it should be little. Not anything. No, we get that footer tangos. Let's see, uh, Bridge. That's how much real estate it's. I see it for us. Related. Gave us a little bit of space more at the bottom. I remember that that header tag right here that we're just messing. Let's go ahead. Go ahead and give a little our senses. Well, that fought family, of course, dollars doesn't exist. Browser I have included are in our course those files. Those files I had. You include your seats. That's follow here, occluded that so you could use them. So what we, in order to use those fonts is at a farm, faces property. I know it's new keeps you from and not being restricted to using only website phones, but it's cool the same. And if you have the correct fault files sorry, guys like the ones I have include, then you can use them that well, so make sure you type that put far. It's it's abs. Foreign stays, I think gets okay, horse. And then right right beneath it. We're gonna add a source source. You're fonts slash horse. Stop. Make sure it's it is case sensitive. Should be. So it's to save. Make sure issues like Okay, put equals Long day, guys. Okay. Seizures are their star wars right there. Sometimes guys, when you're running through this day, but making some mistakes. But now the fonts let's go and start making some adjustments to our boots Tried classes that we have all over this thing and we will. So let's do that from the top bottom. So when I started here are you l owners work away and flutter. It's so much overrides as they are just adjustments. That's so the tippy top is our so target that make sure you have class overrides at the time. So you know what you're missing. I really wanna mess with is the I'd say that list P records for release. So all right. Yeah, now I chose u Z m. Because it's based on test. That should be 18 tons size of the text or whatever thought you decide zoos now that may be new to use. There's all right, so we're going to go ahead. All right? Flex safe, legs wrapped. Do it. Just in case is a lot of content in one list item. So they just put it Ernie for We're about stuff. Okay, let's dinner down. So see that cool background? Let's go ahead and give. Give our list items. Pass it, though it's a little over half see under capacity of one. You can actually see it all the way. It's 35% you can see through. That's what that means, I said. Background. Hey, guys, Background color. See, I just that should be with Since this, let's go ahead and leave that that height off of there. I believe that. Hide off there for now. Okay, we can't really see our so no, it's Yeah, we'll get back to the to the 1.8 e m. Size for the list of items here that we can make that work. It doesn't have to Work. Way could definitely work without more control over my boots. Strike classes. It's just one of the fall backs using next up is our just form controls. So inputs, it's just Let's just keep working on this form control first. I don't like to use the shorthand version that's right here, where it's just right down on left being more verbose. So you guys can tell what do Go ahead, Patty Color. Let's just make it that same color regret. Let's go ahead, acid match What We have list 0.65 away. It is 85 So our user knows that Hey, or she's clicked in change the color light. The default is black. You really won't see the color here. Let's let's check target this. I don't that let's because we're gonna be using a Sikh I would out of the auction Zaken set is cold. Make if they said the bold text this right here well said that even holder more boulder actually is okay now this is the I'm. We might might run into an issue as faras no are in putting our names. Last list right next to that is like space. It's it was last type of last child the last time margin. You won't be able to see that. So we started loading our lists so Okay, last one before we move on to are Yes. You guys, this last one grab the I see custom I ds because their ideas that you called and that it's given a patting top of Tim PX. Let's make sure that that last that list group last child touch heading pickles. Go ahead level. Make sure you put that. Okay, guys, I'm really sorry for section of second long video. Thanks for sticking it out with. Well, I figured out my issue on here, but you're gonna run into stuff. I know it seems like it's a lot, but just keep plugging away. You guys, that's the skeleton and the in the shiny parts. I'll see you in the next stay motor. 39. jQuery, MySQL and PHP: Hey, guys, welcome to the fourth video in our final project. First things first. We need to go ahead, make a database called Chat Board. Now, let's just go to PHP Madman. His local host pH me in my admin. You don't even need this, but it puts it in there when she attacked local speech. Now, if you don't have PHP my Ironman, go ahead and head on over Teoh PHP mind men dot net slash downloads and download 473 No, uh, it's got 64 bit and 32 bit versions. You can run it on just about anything as long as you're running a lamp or a PHP top server or pearl types. No. Once you download it, uh, run the installer and then restart your your server, your mind school server and your Apache server. Now you can, of course, forgo the creation of a password When you when you input this, it's not really necessary. But if you want to create a password, uh, you just go to user accounts and we'll be messing with root. So go ahead and click on edit privileges appear says change password. I'm not too worried about it right now. I've already got a password set. Okay, so let's go ahead. Make our database on. Duh. Let's call it chat board. Now in this database is just going to standard one. So we need to make a table called posts and we'll get four columns. Yeah, four columns. Skin. Okay. Now, the 1st 1 we need to make it. So I d I'm gonna leave it an int. Keep that in limited toe. Five imagers. So that leaves five. Now, you can set it to whatever link you want. No, a very common one is 10 out of Why take up more space in the database? You don't have to. And this is gonna be our primary I d. We're gonna set it, Simon. So the primary key. Okay, that's what that primary needs. And we're going to set it to auto increment. So with each post that comes in, gets in, gets a unique I d. And that increments from one all the way to, uh, it should be able to go. Teoh 99,999. That's that's what it could go to. So should be plenty. No need to take up more space in this next one list should be. Let's see what we need to make it. Let's go ahead and make it name. He's the march are and, uh, let's see pretty long name. So let's go ahead and put 30 characters. All right, So the 30 characters, I don't know a whole lot of people whose who even go by names that are longer than 30 characters. Be difficult. Say regularly. Okay, Now we're going to go ahead and set our our post gonna make it our car as well and length of 500 just in case you have a lot to say. Now, that's about four times as long as a tweet. I believe yet tweet is 150 characters or so. All right, so that should be fine. No. The next one, we're gonna make a date. Okay, so we'll have their name, whatever name they just had to post under the post and the date that they actually do it in . No, we're gonna set this to text because we want to output a cold looking date of a date That's better than the one that comes from PHP comes from your server. Uh, so we'll go ahead and leave that text, and we'll leave the length. And I think we just leave the length like that. Just text. No. Think. Yeah, Fine. Okay, so we have I d name, post and date. Now, we should be good to go on our database that was set up here. Now you can run regular SQL of as faras through the through Your terminal is gonna shell and time My Yes, you p There you go. And we use a variety be so show data bases. And there it is. And then you go use chat board, no death, and we're gonna show tables. You go. So there's our tables in our chat board. You can do it this way, or you can use PHP. My you guys are beginners. So probably best to stick with Julie for now until you guys really learn. Okay. Well, uh, that's it is faras as far as setting up for the database. No, What we need to do next is set up our connection. So we'll go ahead and close this out. Clothes that and bring up our our folder structure here, and we need to make a new file called db dot PHP tv dot Save it. Okay, open it up with PHP tags. Beautiful. Now we're gonna go ahead and define some constants. Okay? Define we're gonna make it host. And they were going to set the value of host to local host. You want to keep your your constants in all uppercase just so you can identify. Define, uh, user. And we're using our route user. Now, if you set this up on a hosting service, your user will be determined by that hosting service. Don't try to use this connection string for your for your web server that you're using. Like if you go to host it some. That's my password. I figured that's how many movies they would make. Turns out, didn't host user pass and database, So we're just gonna name it d be. We'll know what it is, and our DVD is called shepherd. Perfect. Now we need to actually set all these to my school out. Connect Gonna set are variable. We're gonna put all of this connect and we're gonna use are constants. So host, user Pass and Devi now for my school I connect. It takes those four parameters. If you leave the host out my school, I will. My SQL I is my SQL improved. That's what the I means. So it's gonna connect. And if you leave out the host, it's gonna assume, uh, local host. But you still need this common right here. So that's your server. Here's the name password, database thing. Let's go ahead and check the connection Will write a a simple if statement. Yeah, no connection. Going to echo failed and holdups. This is a variable. That's cute. So, Sq, will I connect? No, this is just my school. Like connector will give us our our error if there is a problem. So what else? Go success. Okay. No, If this works, we should see success in our response. So we're gonna go ahead and do this. Goto local host. Last chat board and db dot PHP They're ago. We're good to go. Now, let's make sure that this is not just echoing success. Let's this change the password. Really? See, this is what my school I connect gives you access. Denied. Root user using password. Yes. That's if you have a password set. If you don't have a password set in in PHP my admin or in SQL. Begin with. Just leave the password blink but recommended to set password. Just so you don't have any issues when you see this access denied. It's usually something up with your is usually something up. Your connection string. Okay, so let's go ahead and accept that. Okay? That is our connection. We're good to go Now. Next, we're going to start our Jake weary file. Well, javascript file. Really? So, uh, it's go ahead, x out of there. We don't need this right now, and we're in a javascript file. So the first thing we need to do is start this party off, lift our document, and they were going to say Ready function. Why does it do that? Okay, document out. Ready? Okay. The very first thing you need we need to do in our document. Out ready? Is Teoh use Actually use our r c k editor. Okay, we're going to set it. This what we're gonna do? So that is called. It's a text area idea of post. All right. Startext areas, ideas, his post. We're gonna use CK Editor God's place and and post now this right here will replace it by itself. But we're going to go ahead and and set some rules. Let's see here. Yeah, keep him on these just rules. You can set any that you want. Just make sure that they they go along with what CK editors actually supposed to be doing. You can find a set of rules that you can set on CK editor. Just Google it and it'll take you to seek editor got Jacque's plug in sight and let you know what rules you consent. Now, I have already went to that site and grabbed this rule. This one right here always jails time by typing all that in. That's a mess. You guys don't need to know that. But what this is doing, this will output your paragraphs as text, just text. And this is just the rules for the P tag. Now you can set different rules. This is referring to the CK editor that's replacing post. It's going to set the rules for P in death. It's not gonna let you end it break before open. It's gonna break the line before it opens. So it's not crammed all the way to the top and it's gonna break after open. Well, it's not going to set the falls break before close. That's also it's not gonna break another line. It's not gonna is gonna break after it's closed the P tag. Okay, remember, Same thing. That's an object. No hanging, no hanging comments. Let's make that happen. Okay, Now, that is just a rule that I found, Okay? I didn't make this up. I know of. Let's see, Let's give it a test to make sure it's showing up, just in case we have issues. Okay, that's our db dot PHP was going to go get sets again. Believe that dinner. Okay, reload. Let's see about browsing data. There we go. I don't know what crime once wanted to do. Clear browsing data all the time. So it's a real big pain, as faras this for is trying to get this going. Now, if you're just doing it regularly, I'm trying to make a video to show you guys how to do it. Uh, this is this is what CK editor is. Okay, you can adjust the size. Okay. You can put source code in here. Can upload pictures, set tables, horizontal line, and make it maximize. You can also do block quotes and all kind of stuff. Okay? No, a thing for that. When you're setting this up, if you want to upload pictures and whatnot, you need to make a little bit of adjustment to your http dot de All right, So is go h two b de dot com for it here. And we need Teoh. I need to make sure that we're still a liest. Okay, there it is. Alias ck Editor Chessboard. I'm pretty sure you did this in the previous one, but that was just a precautionary just to make sure that you guys caught okay? No, If you have any issues with these buttons, you can go to your config Js and you can take out different toolbar groups, forms tools. Just be careful which ones you pick out because there may be dependencies scattered around through here. Check out the CK of their Js plug in sight for more info. Okay, now that we have that dealt with and the config Js covered, we need Teoh. Need to attempt to, uh, try to grab data. All right, That's what we're gonna That's what we're doing this whole thing for so, uh, let's see, what was that? Was that buttons name the idea of sending. So how do we do that? Click event. You're right. Good job. So you're getting it. Send it. We're going to click function. All right. We're gonna try to keep everything contained within this click function. Not too bad, right? All right, let's go ahead and get some data from our for so read to store this data that we get from the form in a very So save our name because it is called name in the form and name. Okay, that'll grab the value from that particular input box. OK, No, let's see what did, uh, what we call that? Oh, we called it Post bar Bar. Bar Post equals now to grab data from a CK editor, you have to use ck editor dot instances and then we'll say instances of post. Okay. Now, if it was named something else, we'd put another name in there. So kit data now that a grab, uh, from our posts in our CK under text text area Right here. Is that get data function right there. Okay, Now way. Want to make sure we don't have any white space there, so replace equals post dot trim. Now that'll take the white space from the left and the right, so it's really just condensing it down, so we don't have a lot of a lot of gaps their way. Want to be able to send all of that. So we're going to make a make a string, so we're gonna call it data, and that name equals sat in eight. Your name? Variable. And then we have to put an ampersand just like you would see it up in the up in the URL on get requests showed you that. Okay, now we've got end replaced. Content in eight placed. We need to set this to replaced. That's living more verbose. Well, it's living more descriptive. I should say no verbose and our date. Okay, because we haven't said that yet, but we're going to I almost left it out. Okay. I need to say date to the date now. We haven't made this function yet, but we're going to We'll make it above this document. Ready function, plus the date. That Okay, that looks good. Now let's go ahead and involve some Let's involve some validation on a lot. We're gonna be validating in our in our PHP file anyways, if name because a blank strength string hurt. I learned. So the form me. Okay, that's fine. No, if you, uh if we make it past the name, we can just make an else statement to execute the create portion of our crop. That's what we're doing right now. We're just creating and reading. That's it. We're not updating and deleting in here were just posting. Now, we're probably said it wasn't in our in our PHP my admin to delete these posts automatically every day. So we really don't have to worry about that just to keep our database a little cleaner. Okay. Now, in our else statement, this is where we want to make our age extol. Hey, Jets. Good. Remember Carla braces? No. Said the cash false. Just because I don't like cashing. You've seen it dealt with before. A lot post? No. Set it to post cats. You know, that type is just the method of sending in the u. R. L will equal, uh, C two levels. Okay, because we in our JavaScript phone. So we need to go back out of a job script folder and then back into our main into our based document, which is chat board and, uh, you say chat board and then gonna make a file called process dot PHP. Now this. Go back. Remember this? Go back to directories from this file access processed up PHP and then running. Okay, Not too bad, right? We're gonna make common there. Our data, Dad. And uh, no, this data right here, this is just part of the Ajax function. The status are here is the variable. So I'm gonna go and put a note for you guys there. This is the variable data, please. Earlier, we got a success function. No, this will only run. This function right here will only run if the actual Ajax called the post call. If the Post is successful, that's one of around. Then we're going to set board. I believe that's what it waas tive did board cream and stuff now that I had posed to our board. Okay, beautiful. Let's let's make sure we get our Ajax called good to go. So I'm gonna put some commons here, Need you guys to follow you need to if you got a bunch of opening and closing braces here and your you're indentation isn't stellar. Uh, this will healthy and success function and Ajax call and else. Okay, what's this guy ending? Okay. And quit function now, this right here. It won't do anything yet, because we don't have We don't have our process dot PHP running or even created, so it's not gonna do anything. Okay, now, that wasn't too bad, right? Uh, yeah, that wasn't Oh, whoops. Almost forgot to create the date function Looking. Give yourself some space. Now, let's go ahead and create function. Save what we call it some of the date the date. And, uh, here, Michael knew they when we're using Let we're not using the six. You are here equals here. Well, I gave it that variable here because it is based off me, the web minister or the creator of the site. So here say, saying it's it's me. It's my home station, so here dot We're going to use git UTC month. We're gonna break these apart because there's lots of contamination here, so we're gonna break him apart, all right? At the end of the ut sees. So plus here Did you see day plus make that a space us here hours. This is that formatting of the data is telling you just a minute get prettier than the PHP My did I get, uh, now we're using We're accessing this date object here. So here now becomes a date object And how you all access objects and run methods against them. Because this date object that we have set to hear makes the here evil date objects date using the here object using the method within that parent object. That's how that works. And of going to return date. Too strange of medicine are date too. It will make all this this object turned into a string. Okay, Well, um, we're still here. You know what? We're just gonna go ahead and split our our javascript and database video up. Make it different from our PHP our process. Ph b. But before we go, uh, let's go ahead and make a new file process dot PHP PHP. And there were going Teoh, Thank success Port. We're just gonna echo successful just to make sure that it's actually there. Okay, So go there and reload don't have any alarms going off Five. Okay, Terrible. I was just checking for alarm, See if they were there. Process. Object not found. Okay, let's check this out. Oh, whoops. We made it. Our JavaScript founder. Delete that. Go here. A tough new file process. Stuff. Ph. B. Sorry about that, guys in their own folder. Okay, so we're going to success. I'm just gonna make sure it's our browsers reading success. Okay, This video is getting a bit long. Just like the other ones. Not too bad. I hope you guys are feeling good about this. That Jake worry. Not too bad. We've seen that kind of Ajax called before. Right. So, uh, we will continue on with this process dot PHP and the final touches in our last video. You guys are doing so awesome. Stay motivated. 40. Final Touches: Hey, guys, Welcome to the last video of our final project. Congratulations for region. End of the course. Now, we've only got this last video do that. Our project should be good to go. And you guys can do other things too. So we have our have our database connection. Oh, real quick. I'm pretty sure I left this out in the last video in your jazz wound file. Go ahead and set a return. False To keep this form that we have our button in from submitting. Okay, We don't want it. Teoh to submit immediately. Now you can go ahead and put up here, prevent default. That function right there. You can do that. I just went ahead and return falls because it is a function and return. False. Keeps it from sending. Okay, that's pretty simple. Right. Okay, we get our our JavaScript. Jake, we're ready to go, and we're making reference to this process. Go ahead. Open that up. All right. And process. This is how we're going. Teoh, insert our data into our database. So what we're gonna do here is we need to include DVD dot PHP. So we're gonna include the database file and now we're going to check to see, to see, if not pose, name equals plane. And, um, let's see, if not post name equals blank string and not do that this night. Let's just go ahead for posed name. I need to check if it's set. So we use is set for that. So we're just checking If it's said I'm not sure with Asterix before we need ampersand because we're doing If the post super global the key is set to name of one of them and the other post super global, there's a key in their name placed. We're just saying if they're there or not, that's sex. Post place. Now check and see if he said I'm going to echo success, okay? We're just seeing it for form, actually submits that. We're gonna refresh this ones that question mark there. So we're going to check someone in the boat. Okay, those are network post. Okay. So, as you see, our request right here is process dot PHP. It says success. Beautiful. Okay, so our post super global is has keys in it named name and replaced. Okay, Now, in our process PHP file. Let's go ahead and give ourselves from space. Here, get rid of that. Well, I'm gonna comment that out. So you guys gonna have it? Give you guys some notes here. Check to see if Post News go ahead and cast that for you guys already. Now, let's put the keys from our post super into some variables and will escape them as we go. Now. Escaping is to prevent things like, you know, various attacks like SQL injection. No. See how it says un escaped string where you are going to set those two? Well, we can. We can do that. We gotta include our connection connection, and then we can include are super. Okay, so we've got name placed. Nice go. So I wonder why I did not a complete no worries connection there, Post. And then to placed, I try to be as descriptive as possible. That replaced variable is coming from our form as they replaced string that we trimmed from post and then date for equal My secure line. No, there it is. Action. You doing go back post date, right? Because we're already we're already adjusting our date toe. How we want it to look, This is where we'll make adjustments to our our time zone. So us where we are making Ah, we're making this application here. And no matter where our server is, it will revert back to using our time zone. Okay, so we're setting it. We're going to use any set and then we're going to use date time zone. We're going. Is America do York? Okay, Now, I chose that one because Eastern standard time, That's for that's format. If you want Teoh, if we want, check out PHP dot net and they have an entire list of Dave Dark time zone you can use of. You could set with your any That's other ways to do it. But we're gonna use it this way. We're gonna set it in the any now we're gonna format the date the way we wanted to, so we'll use PHP is date function to do so and we're going to set a date. I'm gonna reset it to date f. Now that's for the full text month J. That's for the day of the month without any leading zeros. So if its first it's not gonna have any, it's not going to say 01 okay? No, we need that common there. We need Why? For the full 44 digit year, 2017. So you'll see to 2017 Okay, Now we're going to use the G, which is a 24 hour frame. These I for the minutes with no zeros, both Bush. I think it's a minute with zeros. The now you can use the, uh, the lower case G here, remember? And then we haven't aid to say m r p m, but I have the 24 hour stand, so I really don't need that. Just showing you guys just like it did before. Remember, it should look like it should look something like this just in case you guys have gotten 13 . 20 PM OK, that's what it will look like. Thank you. Rid of that. Beautiful. Okay, we have our variables handled, So, uh, it's going and start putting stuff in our database gets room down here. Let's begin with a variable called query. A very descriptive. Now we're going to set it equal to, uh, now this is SQL Insert into post, remember? That's a table name. We have name Post in the date okay. They were going to split the line values set in multiple values. And now we're going to, uh we're gonna have to have strings close that help us out. We got three values to input. So and we have our variables up here. So we have name on this B B p A free, bearable place date. Now, the reason for the single closer here is that these are all string values. If they were imagers, we could simply do that. But is they are strengths. So that's how we're going to set him of If you're not familiar with SQL. Definitely. It's very simple to learn. Did they're taken? Things can get a little Harry when you mess. When you're messing with joins like multiple tables, that's that's how you would call data for multiple tables or put data into multiple tables . I'll be coming out with a course on SQL specifically my SQL and probably another one on post. Correct. Uh, it's not difficult. You can do it. This is all the this and one other line of SQL is all we're doing in this one. So we need to finish this off by using our quarry and inserting into a database. So we'll check the connection again, just to be sure as well as our query within. If Now what this will do is this will using my askew ally query. It's going to check your connection, make sure you still connected database no issues, and then it will check your query. Now, what it's gonna check is that this, uh, this table actually exists. Okay, insert into post that we may have a problem there. Let's see here. There we go, my dear, not you. Here we go. Not sure what happened on that. All right, So chat board our tables actually called posts. That s don't put that Aston that s in there. Okay, If you try to insert into the table that doesn't exist, it's going to give you the air. We'll show you that and just say so is, uh if the maestro like query, if it's not the case, that means that this fails, then so failed. And then we'll need to attach some sort of error code to it. There they were passing our connection. They're not too bad, right? I'm not sure what that's there for. All right, Now, We need to follow this up with an else statement toe. Push the query out. Okay, so what else? Member? Because it's checking to make sure there's not one. Because if there's no if that my school I queried connection query works. Um, it's gonna move on to our else statement. So we're going to echo do it there stuff today. Class equals list group. I don't Okay, I believe that. There. I'm going, Captain. Eight hour date variable. Yes. Underscore. Then they were going to add in our name and they weren't going to fruit. And we're gonna break the line we're gonna add in our string. Okay? Now, these variables are coming from up here. That's where they're ultimately coming from. No, I want to use devils now. We should be good. Uh, yeah. So with that, it, uh, this concludes this flower. The only thing really left is go back to our our index pH being include our ally tags. So let's go ahead. Do that. Save this file, so make sure in your index PHP that you have included db dot PHP the actual final. So use include parentheses. Singles will single. Quotes devi dot PHP and you're just gonna have to include that connection. So we're in our index page. Hopefully by now. You've already included this TV PHP file that we've already checked out of an enclosed This right here in PHP tags PHP can exist within an HTML file, but we've named it in next PHP. So it is PHP file. You're right. Okay, now that is done. Let's let's grab our data from the database and I'll put it first thing is the grabbing park so very similar to the insertion part in our process that PHP we need to set up variable query and what set up. We need to select all of them from posts. We're going to order, but I d We're gonna order by descending limit to 10. Uh, most limited to five. Wonderful. Now what this SQL is doing, we're selecting, And this asterisk means all this from this saying what table you looking at? His posts. They were going to order by No, that's one command I d. Because that's one of our fields descending. So it's gonna go with the idea with the highest number first and limit five. So it's going to say the highest number first in the highest five. This limit right here needs to be at the end. Okay, Uh, make sure this is always at the end of your query that could that could lead to all kinds of problems. And you don't know what you're looking for. And it's just it leads to hours of trying to debug something, especially when you're first starting out. That's what happened to me. Uh, let's go ahead and well said, Terrible call post PHP verbal Kalpoes. And let's go ahead and set it equal to my SQL I query connection. No, we just set one of these in the previous file. So we just set this query in the previous file right here. So don't get this one. This query right here confused with him, okay? They're two different things. Yeah, they're they're SQL queries. But they're in two different files, and they shouldn't They shouldn't conflict with All right, so that's good. Now, let's go ahead and head on, head on down to here, and we're gonna get rid of him. We don't need him anymore. Let's break this part. So, uh, you PHP tax. All right. The result please. Days Now, How are we going to grab those? Grab those posts from from our database. We're going to use a wild, true loop. Okay, so while these are true, I'll put them. So we're going to use while I am gonna set so called Rose. That's pretty My issue. Alive Search. Okay. Now you feel used. Can still we're not going to. You can use my school fetch all use social because we're trying to grab and associative or way from our variable posts. It's up here. That's the one we grabbed. So we're using that. And for a while, if you use that that little cynical in there were not cynical, but colon use a colon. Now we're going to echo. They lie class. Make sure otherness That doesn't exist. Both. I thought that looked funny. Ah, like class, because list crypt. Let's group item close that now there's a little bit of captain and going on. It could be a little herring. Eso If you run into issues, just just go do your best. Take a look. At course files and compare your compare you. But if I can answer your one of your questions, hopefully to answer your questions. If I understand what you're writing, we are breakthrough. It's a rose post. Okay, so what we're spitting out here were saying the date the name wrote so be ah, with the August. You see what's toe? I'm not sure with Davis is okay. August 18. Uh, it'll say August 18th at whatever time it is. And then rose, Uh, it'll give date, desk dash, whatever name. You put it in there and then wrote in the break a line and go to the next line and show your post. That's what it's doing here. That should be okay. We need to end a while if you're writing it like this. No, If you're writing it with curly brackets, you don't need this. But you had to use that. Okay, Save that. Now all we're doing here is fetching an associate array. Well, that's it. We're out putting it. That's all we're doing. So let's go ahead and take a look. We're gonna leave this open those. So our ally tags gone Both, uh, both. That explains what was yelling at. Okay, well, I you know, that's what was jacked up. That's good. I tried again. Okay. Hey, What's that? Cool. There it is. Now what we're gonna do, we're gonna test our ability to upload pictures. Oh, okay. And Ah, let's see. There's a picture. Weaken. Grab. I think we've got a pretty cool linen are custom. See, it says here. All right, now, to make sure we got quotes here. Yeah, you are. Uh, no. Should grab it. Grab it. Go ahead and live in it, too. 300. No, this will reset the aspect. Check. Cool. Okay. Puts more text in there. Text in here. Post. Mm. Didn't at it. Sleep. It added to a data race. Reload. Yeah, it sure did. It's there. He did it. Grab all of it. It sure did. It grabbed everybody. Okay, well, that's just supposed to output. Oh, there it is. Okay. No problem. Okay, that does look pretty cool. All right, so that wraps it up of, But we will do a little bit of Let's take a look at this. Let's style it up a little bit, huh? So, uh, go back in here, Jess. Oh, yeah. We need to play that. We need to set that audio file to play. So se I would do it. Come on audio. And then we'll say zero play Now, that audio that we've got should play when we click this awesome. You guys. I'm not sure if you guys heard that one or not, but it is pretty awesome of in ways. When you guys said it, whatever wave you said, Well, uh, will make that adjustment for it. So, uh, all right, let's make, uh, make another adjustment. It's a custom CSS. Let's see here. Go. Let's let's do some of this. It doesn't really flow with all of this. Reckless won't let me play with elements. Find your form crew. There is. We're gonna target this entire Dave right here. C k e underscore Post. Now it is usually going to be ck Undergo. Underscores something. It's whatever you replace it with Zinke underscore Post because it sets a new i d dynamically with whatever it whatever it's replaced with. So this CK editor is replaced with, uh, the post text areas replaced by CK editor. So pre pens ck underscore to whatever you do. Whatever you give it. Okay, so we're going Teoh, Let's give it in the past of, uh, se zero. Let's make it mass form control, okay and background color of. But you just sing background color difficult. And the, uh that might work, but you can make adjustments to your CK underscores. The styling goes That's what This time now you should be proud of yourself. Let's get rid of these two right here. But those we'll make some adjustments and make in addition to this course After this, you guys have done great. You should be proud of yourselves. Is a great journey you made it through. Stay motivated, keep learning. And, uh, I'll see in our next course, you'll have a wonderful day.