Intro to JQuery: Event Based Programming (Modals and Mobile Menus) | Maya Noelle | Skillshare

Playback Speed


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

Intro to JQuery: Event Based Programming (Modals and Mobile Menus)

teacher avatar Maya Noelle, Web Dev, GA Instructor, TV Obsessed

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

9 Lessons (45m)
    • 1. INTRO

      0:17
    • 2. INTRO TO JQUERY

      1:58
    • 3. WHAT'S JQUERY ?

      7:06
    • 4. JQUERY FUNCTIONS

      4:34
    • 5. ADDING THE JQUERY CDN

      5:04
    • 6. LET'S CODE! PART 1 (Making a Modal/Popup)

      11:44
    • 7. LET'S CODE! PART 2 (Making a Moibile Menu)

      6:46
    • 8. LET'S CODE! PART 3 (Visual Effects)

      6:25
    • 9. CONCLUSION

      1:21
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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

209

Students

--

Project

About This Class

Dive into Basic JQuery and learn  to write “event-based” code! Modals and Mobile Menus are our focus for this 1 hour workshop!

Write Less and Do More with JQuery! This class will cover “event-based” JQuery functions that you can use to make your site more user interactive! Enable your site to run functions/animations based on user events like clicks, button presses, and mouse positions in order to link to other pages, expand, collapse, show, or hide content. Also learn to add pop-ups to guide your user to specific actions! Using our starter-code, follow along in class to add JQuery into our class demo site! By the end of class, students will have the basics of an  interactive site to include in their portfolios or for personal/commercial use!

Prerequisites: Intermediate HTML/CSS skills are required. It is recommended that you take a basic javascript functions class prior to this class!

Materials:

  • Starter Code: Download from github link
  • Software: A text editor (sublime, atom, etc.)
  • Computer with access to internet
  • Common questions/Troubleshooting (included in starter code file)

Meet Your Teacher

Teacher Profile Image

Maya Noelle

Web Dev, GA Instructor, TV Obsessed

Teacher

Hi! My name is Maya and I am a freelance Front-End Web Developer. I made the leap into coding in the Summer of 2016 with a course in python. Since then, I've have taken two courses with General Assembly working toward developing my skills in Front-End Web Development and Javascript development. While most of my professional background is in finance, I enjoy learning to create professional, lightweight, user-friendly products. My passion is taking products from ideas to fully-formed creative concepts! I also teach Intro to Code at General Assembly in NYC! Come learn with me!

See full profile

Class Ratings

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

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. INTRO: Hello, everyone. Welcome to Intro to J Query Event based programming Today we're gonna be focused on mode ALS and mobile menu navigation. Yes, that's a mouthful. I love some militarisation. My name is Maya Brooks. I will be your instructor today, so let's get started. 2. INTRO TO JQUERY: Hi guys. Welcome again to intro to J Query event based programming. Let's dig in in today's class. We're going to discuss what J query is the syntax that we right Jake re with and how it's related to JavaScript, as well as go over about nine useful functions that you can use in J Query. To make your site more mobile, interactive and more user interactive, I would like to note that intermediate experience in HTML CSS eyes required prior to taking this course Basic JavaScript is also recommended, but not necessarily required in this course. We will be talking about the relationship to Java script here. If you'd like to brush up on your HTML CSS JavaScript skills, I do recommend taking the build a website with HTML. CSS and JavaScript, classed by Danny Florian, hosted here on skill share In today's class, our materials are going to be a computer or tablet with access to the Internet. Most tablets should be able to see support the software will be using today. I do recommend using a computer, preferably a Mac. If you have one, we will also be downloading a starter code that I've hosted on my get Hub website, you can click the link that's in the power point or copy and paste it into, um, a browser. It will take you straight to get Hub, where you can download the ZIP file hosting the starter code. Also included in the Starter Code file is a troubleshooting document that you can use as we go throughout the rest of this course. And finally, you'll need some software. So if you don't have a text editor already like Sublime or Adam, um, go ahead Google and download that I've also included links in the Power Point. If you need some direction on how download a text editor, I'll be using Adam today. But it doesn't matter if you decide to use sublime or at Let's Go. 3. WHAT'S JQUERY ?: So what's Drake? Query? Jake Very was introduced in January of 2006 by John Resident at Bar Camp, and my C Jake Weary is a JavaScript library that could be used to simplify event handling. So our HTML dom or a document object model is what we're going to be manipulating with RJ Query J Query simplifies the HTML client side scripting by allowing us to manipulate that dom by picking certain elements in our HTML page and then applying actions to them. Using a shortened form of JavaScript, you can follow the A P I linked below that, says Jake. Very AP. I docks and read up on the full capabilities of Jake Very. I've included some of the functions that would be using later down the line in the power point. In short, J query allows us to manipulate the dom the document object model in HTML faster, easier and with less keystrokes. So what's the dom again? Time to brush up on that html. The dom or the document object model is a representation of our HTML document. It could contain a number of dom elements at a high level, though a dom element could be thought of as a piece or an element of our Web page, so a Dom element could be a div. It could be the body. It could be a paragraph, anything that you can select with a class with an element name with a tag name or any sort of attributes. Liken a draft is known as a dom element, so our job JavaScript J. Query object is designed on a simple object based paradigm. That means that J query is essentially a JavaScript object. An object is a collection of properties, and a property is an association between a name or a key and a value. A property's value can be a function, in which case the property is known as a method. In addition to objects that are pre defined in the browser, you can define your own objects as well. Basic object structure Looks like this. You have an object name. So in this case we have an object called my car, which I've defined using VR or variable for short. For those of you who are familiar with JavaScript, so I haven't object. Called my car. I have, um, property names or keys and values that go along with those keys. So my property name here would be make and the value of that property key or property name would be Ford. Ah, value could be a string. It could be a function. It could be a boolean variable. It could be a number. It could be a lot of different things that can even be no. So whatever we'd like to define for our objects here. If we're going to make our own, you can do a lot of great things with objects. I can also access the properties on my object as shown on the right. So my car dot make if I invoked that function should give me Ford or my car dot drive. If I invoked, that should give me whatever the drive function is able to dio and again. A property that contains a function is called a method. So is Jake very itself an object? Yes, it is. J Query is an object. And, um if it because it's a function of JavaScript J. Kerry has several other methods that we can invoke to manipulate our HTML dom. The J Coury method is written below. You'll see this definition over and over again. You'll also see the definitions of the other methods that we can call on RJ Query function later in this presentation. But for the most part, this will be the J query, um, syntax, that we're going to use. So Jake, weary with a parameter that takes some sort of selector. So either our class on Di Di or some other way of selecting a new element or tag on the page, as well as the context in which will be using it in. And then we'll invoke that function using dot notation. Again, this is some simplified J Curries in tax. You'll see that that dollar sign just kind of replaces the word J query. It's the exact same function. But when we right, Jake, very. We're not always going to write out the word J query. That dollar sign was just a stand in for Jake, very. And then the function is our event handler in this case. So just a refresher on how to convert Javascript to J query and how they're related. You can see that I have javascript on the left and the syntax is a little bit lengthier, and it takes longer to invoke our function. We have document, and then we have to get the element by name, put that element in our parentheses and then invoked the function with Jake. Very. You could just automatically choose the name and invoke your function. Same thing with Get elements by i D. For JavaScript. We have to write documents dot get elements by D. We have to put our I D in our parentheses and then call the function we're with Jay Query Weaken. Just automatically choose the idea of the element and then invoke our function. So I just want to show you guys a little bit of what J query can do on a website. A swell. Let's talk about a couple of the things we will be doing in our project for this class. I've pulled up the site for minibar delivery dot com. You can see where my head is at, but they've got a really great website, as's faras, displaying what J query could do. Um, right when we opened the page, you can see that there's this pop up with a promo for $5 off your first order this pop up that loads as soon as the page loads is something will be doing as well for our project and drink. J Query. Right now, we'll go ahead and exit that out. You can see that in the navigation as I roll over each of these, um, navigation links that the background turns white. That is J query in action as well. When I click up near the location pin, I see where two and enter address changes to the word change whenever I have her over it. That is also Jake, weary in action and then below when they get to their feature products. As I roll over each featured product, the background of the picture turns like gray, and I get a button that says View details. So that's J query in action as well, because there's an action I'm taking that's invoking some sort of code on the page. 4. JQUERY FUNCTIONS: Okay, so we're going to go over some of the J query functions that we're going to be using in class. Before we do that, I'm gonna talk a little bit about what event based programming is event based. Programming is a generic concept, describing how the user of our website may initiate some sort of event that we want our code to respond to. For example, if a user clicks the mouse, our page may do something. If they press the enter key on their keyboard, that may trigger an event as well. If they scroll down, the page will trigger a certain event. If they push a button, will that trigger a certain event? So our code is set up to quote, listen to these event handlers and then enact some sort of action. Based on that, the J Query Library gives us access to several ready made functions that we can easily call at any time again. All of those functions are located in the a p I documentation of J query. If you Google J P J. Query AP I documentation, you should easily be able to find it. I also included a link earlier in the power point in this class, we're going to be using functions like add class, remove class, toggle class mouse over mouse, leave on click HTML and CSS. So first to address add class, add class takes a parameter of class name, or it can take a parameter of a function, and we can add the specified class to each element in a set of matched elements. So this means if we have something that is currently hidden on the page and we want to add a class of active, we can run Jay Query on that to add another class into her HTML remove class does just the opposite of that. So are remove class function will take the class name as a parameter. And if the class name matches the name that we specified in our remove class, it will remove that from the HTML element that we've chosen. So if we have something that is hidden and then we want to remove it to make it visible, we can do that. Toggle class is a way to toggle between adding and removing a class, usually after each click of in argument. So if we're clicking a button and we want something to show and hide multiple times every single time that we click it. That's where toggle class becomes very useful. Next, we have our click events. A click event will be what we bind. Toe anything toe, listen to the users. Click Um, and once the user clicks on, say, a button or a certain element on our page, then we'll enact a function mouse over is another event handler that is listening to something that the user would be doing. So if the user happens to hover over or drag the mouse over, a certain HTML, um element, then are a mouse over. Function will become useful, and we can change our HTML or our CSS styling or anything else we'd like to dio. Once the user mouses over that element, Mouse leave basically does the opposite. Once we type mass leave, we are waiting for the user to drag their mouse off of whatever object they've previously been on, and we can revert the object back to its previous form. Dot html will not necessarily accept any arguments, but we can use HTML to update the HTML code of some of our elements on the page, for example, will be doing something where we change a submit button to read the text submitted after a user has clicked it. This is something that we can do by updating the HTML with a query. The last thing we can update is our C s s just like HTML. We can choose a specific property that we'd like to update our CSS, and we can do things like changing colors, changing the borders, um, changing the physical styling of the element based on our CSS J query function. 5. ADDING THE JQUERY CDN: everyone. So we're going to get started on the coding portion of today's class. I previously posted the link to the in Troj Query Skills share file hosted on my get hub. If you put the link, it should take you directly to this page. Um, you'll be able to download the code by hitting view raw and, as you can see, it downloads directly into my downloads folder. I've already gone ahead and moved that folder onto my desktop, and then I'm just gonna drag the folder straight on top of Adam to open it in. Adam, if it comes up with something about the get command were firing things, just say not now. You don't need it and go ahead and reopen page. You can get rid of all the welcome guides. The welcome welcome to limit tree consent. Except you will be working in the index file so you could go ahead and double click that and open it up. If it's not already open also, go ahead and click in scripts. Double click on Manger s to open R J s page. We'll also go ahead and click in styles and open our main CSS page by double clicking. If you don't like the way that this looks with all of the windows right next to each other , you condone drag main CSS over to the right and drop it and his main Js as well You could see that a little plussed will pop up and they start to form in different windows. I like my main CSS and Js right next to each other on 1/2 of the page. So that's how I formatted. Okay, so now that we're set up here, the first thing we're going to do is load in our Cdn for J query inner index file. We're always gonna want to put our J query all the way at the bottom of the page. There are some online tutorials that will tell you to put scripts in the top of the page in the head. The reason I advise against that is because you want your J query and the rest of your JavaScript toe load after the page has completely loaded. Just in case there's any errors in your JavaScript for J query files, it won't prevent the rest of the paid from loading if they're in the head near the top of the page. Your J query or JavaScript may load before the rest of the document or its elements load, which will cause problems later in your code. So in order to find the J query CD en and link it right into our page, we're going to Google J Query Cdn. You can click the first link, it's located right on top, and we're going to get the latest release. So the latest release is Jake very core 3.2 dot one for our purposes. Today we're gonna take the mid ified version, which just means it's a little bit smaller of a script. Um, and it's a faster load onto our page, so it allows us to copy and paste the entire thing, which is what I'm going to dio, and I'm going to pay step all the way at the bottom of my index dot html page. As you can see, I have a couple of scripts already loaded in here. I have my main J A script at the very bottom, which is my personal JavaScript page, and where will be typing all of our Jake very for today. Above that I have a J s script loaded in from a framework called Materialized. CSS materialize allows for faster J query CSS and HTML creation for our purposes. Today I've cut out a lot of may do in order to minimize conflict, but I'm gonna leave it loaded in there because some of our elements on the page will not look as nice without it. So again, my main Js is all the way at the very bottom. Anything that may be in materialized JST. And since both of these two scripts the materialized Js and the main Js rely on J query in orderto work, Jake Perry has to be loaded first before my name Js. So that's why it's before the two of these and again, all of your scripts are going to go right below your flutter at the bottom of your page but before your ending body tack. So I'm gonna go ahead and save that now we should have working J query on our page. Next, we're going to start coding our first pop up 6. LET'S CODE! PART 1 (Making a Modal/Popup): The first thing we're gonna code today is our pop up. We're going to make something like you saw on the minibar delivery page where as soon as the page loads were going to get a box pop up asking the user to do something in order to get rid of it. So now we're ready to build our first pop up. As you can see, I've left you guys some comments on where exactly? Everything in our index dot html a slows our CSS code and R. J s code should go. So the comments that I left are supposed to be helpers for you guys to remind you exactly where we need to add classes or what the goal is on what we should be manipulating at the time. So the first thing that we're gonna look at is our papa. It's about halfway down the page, Line 68 and it comes right after the comment that says, Start our pop up just to give you guys a preview of what this is going to look like when it's done. It'll look a bit like this, and you could see that as our user scrolls this pop up does not go away. Most people get annoyed by pop ups, but it can be useful for people like advertisers who want Teoh either advertise something directly to people before they enter the website or if they want to capture some sort of information about them before they get into visit the full site. So the first thing we're gonna focus on with our pop up is what the goal is. We obviously have the body here of our pop up. What we want to make sure that we have the ability to a loaded assumes the page loads and B make sure we have a way to get out of it in the final version once I click X. That's the kind of code that I want to create here with my papa. Just to make sure I can see all of my code within my HTML pain, I'm gonna hit view, toggle soft rap on every window order to get a better view of my code. So let's go ahead and take a look at what our site looks like right now. It's still a little bit incomplete. It's not gonna look like the final version, but we can take a preview of our site by clicking index that HTML right clicking and Adam on the left hand pain and hitting coffee full paths. After you had copy full path, you can open up a new chrome windows and paste in the path. This will now replicate the folder directly onto the Internet as if it's a live page. It's not your only hosting from the files on your local drive, but it will replicate what the page would look like if it were to be alive so you can see that are motile or our pop up isn't really showing up. We just have our regular site spec tool in order to see this. If you guys haven't worked with inspect before, it's a really handy thing that Google chromecast. If you're using a browser like Firefox, you should also be able to reach the inspector tools or developer tools. If you're on safari or another browser and maybe a little bit more difficult for you to access this so again, I'm gonna hit right place. Inspect. Now I have the inside code of what's happening on my site. So as I'm rolling over here, I can see where my pop up is supposed to be. It says Div class pop up rapper The Papa Body. It's supposed to be floating right there. However I currently don't see. It doesn't look like anything's wrong here. There's just no real styling that's added. In order to make this pop up appear the ones I could pop up overlay. I could see my style start to populate, and I'm noticing that currently and pop up overly, we have visibility fitted in my CSS file. My pop up is all the way at the bottom, near the bottom of the page line 1 74 And I can see that I've left myself a note here to add a class to two of the following four elements to make this pop up active and to make sure that I look at the visibility of this item. So currently we have a pop up overlay and pop up content, and both of these have visibility hidden, which means that when the page loads, we will not be able to see the elements or any of the content inside these elements upon load. So in order to make this show, I'm gonna select two of these, Probably the first to with the Morse with more of the styling and I'm going to save visibility Visible ability visible. But I've noticed that I have the same name of class for all four items. So pop up overlay pop of content. And then again, I have pop up over late and pop up content. The way that CSS works means that Papa overlay at the bottom and top of content will overrule the tools that I have at the top for papa overlay pop of content and again render my element hidden. That isn't what I want. So I am going to add another class to the top of my overlay and my content in order to ensure that the specificity is there. Teoh have mine class act differently Currently I'm giving it the class active dash Papa, Since I have materialized CSS loaded into this page has lost materialized Js I want to be very careful with the class means that I give you can make up any last names that you want . But I know that materialize sometimes uses things like active show, hide, etcetera and I don't want to conflict with the names that they're going to give their classes. So I'm gonna name mine Active Dash, pop up just to make sure that it's different. Okay, so now we have to CSS items with two classes. So my CSS is trying to point to my html and look for an element with two classes to apply this to. Currently, I don't have any of those available. I just have a singular pop up overlay in a singular top of content. Let's see what would happen if I added active Dash Papa to both of these. As you can see, I made a mistake here and added the doctor, it is not supposed to be there. So do you make sure that you're always careful with spelling? Um, errors, etcetera. Okay, so I'm going to save this file. I saved my main CFS file, and now I'm going to go back to my demo page to see if anything that's strange. Okay, Now I've got an active button that loads as soon as the page load. However, my close button isn't working, so there's nothing that's allowing my pop up or my mobile to disappear from the page. It's appearing but we want to be able to have the user clicks X to get rid of it. So that means we have some more work to do with Jake Mary in our main Js page. We've already met our goal of the pop up loading as soon as the page load. We don't need to type anything like Document Dot ready because our script is already at the bottom of a Now we're just working on making the pop up disappear when the user clicks. If the user is clicking on something to make something disappear, that sounds a lot like our click events that we learned about before. So we're going to start writing our daiquiris in tax, starting with the dollar sign, parentheses and double quotations. The user's gonna click on the X or the close button in order to close this content. So in my HTML, I'm going to point to where my clothes button is, which is this about class, and it has two classes called Close and Close button Lee out. I'm gonna select clothes as the class I want to enact my J carry on, so I want to say Jay Query, choose the button with the class close and on. And then my quotes again click, run some function. And now I'm going to define what I want that function to be. Any time you invoke a function, you have to keep these extra parentheses, so make sure you don't delete those. Then I'm gonna add brackets and I'm gonna hit enter a couple times to define my function. So some sort of function is running. I'm gonna layer on top of this another j query call. So after I clicked on my clothes button run a function that selects my papa overlays as well. That's my papa content my pop up over late and my pop up content after I click the X I Want TEM are elements with those two classes. Now I have to think about what I want to happen to those two items. Before we added the active pop up class, there was nothing on the page. And then when we added our active pop up class, are visibilities, stuff suddenly became clear. I want to get rid of that active papa plastic end so that my visibility again becomes hidden. I go back into my CSS page if we only choose pop up over late and pop up content without the active papa class. So that's what I'm going to target to dio in my Jake great function and just as easily as we added that class immersion to remove that class, club removed class and the fast I want to remove is active dash Papa sin types wise. If you have any questions on how to write things which quotes belong where what belongs? Where if there's a period involved, If there's multiple selections, check out the J query AP I documentation. It gives you very specific examples on exactly the function work. So I'm gonna finish this with a semi colon, indicating that my Java script has ended and a semicolon here also indicating that my Java script portion has ended. Then gonna make sure that I saved the files. Go back to my website, refresh the page and see if this works. So right now, just scrolling through everything looks OK. When I click on the X, my pop of disappears 7. LET'S CODE! PART 2 (Making a Moibile Menu): Now that we've got our pop up working, we're gonna focus on Part two, which will be to have a mobile naff that opens and closes on command. So we're going to start now by working on our mobile navigation. As you can see, we have a hamburger nab off in the demo site. Um, and when I click it, a menu should appear with various leaks. Right now, nothing happens when you roll over them, but when you click it, there should be a menu that pops up in our final version currently on our version that's pulling straight from our local file computers. If I click on this hamburger now, nothing is happening. So that means we need to invoke some sort of click event on our hamburger nap in order to show our mobile navigation. So I'm going to scroll back to the top of the page in my html, up to where my comments as begin mobile menu now, and I could see the HTML structural code here, So I've got my hamburger Nab's, which wraps around the entire now. I've created my hamburger here from scratch with dibs and spans instead of with an SPG file . You could do this either way. I just chose to do something a little bit simpler for this. Go round eso I used some tips and spans to mimic what a hamburger menu would look like. And CSS about lying 36 is where you're gonna find thes CSS styling from my mobile menu. Now, as you can see, there's a lot of styling involved here, mostly around positioning. It's not gonna be that necessary for our purposes today, but we're going to really focus on is how to expand our response of menu once we click on our button. So what we're gonna want to focus in on is the dim with the class in my responsive menu. This is where all of our links are gonna be house that we want to pop up that are currently not popping up right now. So we want to have some sort of class that's going to expand. This one clicked. As you can see, I've left you guys. That helped a little note underneath all of the styling for the mobile menu at Line 87 CSS and I said, expand. Pasko's here, so I'm going to write a class called expands and set a mass tight at 300 pixels. As you can currently see from my responsive menu, the Max Fight zero, which is why it's not showing up on our page. So with a class called expand, if the max height is 300 pixels, then hopefully, once this class is added, our response of many will expand to that height. The other portion of this is that even though it added and expand into my CSS, there's nothing that is triggering this to open right now. So we need to set up a listener on our button or on our my menu button at the top so that when we click on our hamburger now, this menu open for that, I'm gonna head to my main Js stage, and I'm going to start writing my Jake very syntax in order to get that to pop up. So I'm gonna select the class with my it's underscore menu Underscore Button. You could also select the i D. Here. It really doesn't matter. You can either right on clique and write the functions, or you could just right click on this play one of function invoked that function and now I'm going to define my function. My function is going to be another Jake Barre requests to listen for the class in my responsive menu. Did you concede popping up down there? So I'm gonna just ticket typing my response of menu, and I'm gonna run the function for the J Query method Chicago class. And the class that I'm going to toggle is expand the class that I just wrote CSS. I'm gonna finish that with a semi colon and finish my entire J query syntax here with a semicolon. I'm sure you're wondering why I chose here to use toggle class instead of add and remove the class every time I clicked on the menu button. Taco Class is really great for something that you want to show and disappear Multiple time with our pop up. We only wanted to show in the beginning, and then we wanted it to stay gone for the rest of the time. Which is why haven't removed glass there with my toggle class. Any time that the user clicks here, I want them to be able to open our menu, nap and then close it. So if it's a back and forth like that. We're going to want to use taco class. So I'm gonna save this file and save this file. I'm gonna refresh again. My problem was gonna pop up in the very beginning. I'm gonna exit out and then I'm gonna click on my more math. Right now, nothing's working. Which means that something we did went wrong. Let's go back and see what did it. I can already see that I haven't chosen my classes correctly. As you can see, I've chosen them on Lee with quote and I forgot the period notation. If you forget the period notation, your code will not work. So it's very important here to watch out for spelling errors, etcetera. Those will be the things that trip you up the most in Jake. Very weird job script. Now that I've added that, let's go back and try again. Gonna refresh the page. I'm gonna get my annoying pop up again and I'm gonna click and bam! There goes my menu that pops up and every time I click it, it shows it goes away, it shows it goes away. So part two is done And now we can move up 8. LET'S CODE! PART 3 (Visual Effects): for Part three. We're going to work on some visual effects on our subscribe, but so the last thing we're gonna do is focus on our subscribe button. As you can see on our riel site, what should happen is if I roll over my subscribe button at the bottom of the page. The background terms pain. And then, if I click subscribe, my text actually changes to the word subscribed, letting the user know that they've been successful in subscribing to whatever this is. And that's what we want to happen on our demo of age. So if I spoke all the way down to the bottom of my index dot html page, my subscribe button is located at about lying to 30 and I could see that I have this small little button here, it said in a div. And it has the class subscribe button mean, So I'm going to choose the class subscribe button main, and I'm gonna do dot on. You don't always have to do dot on, but I'm going to use it in this case to help me clarify exactly what I want to dio. But you could just click dot and then whatever method you want to call from Jake. Very so this time I'm gonna do dot now, over which listens for when my mouse rolls over the element. And then I'm gonna run some sort of function and invoke it with my parentheses that I'm going to define it with my brackets. We're curly braces, and I'm gonna do something called Choosing this. This, in this case is going to refer back to my button main. If you have not heard of using the this keyword in javascript before, don't worry about it. It's not super necessary for this course, But that is what we're gonna do for many this two point back to my subscribe button name. And then we're gonna affect the CSS on it by using dot CSS our day parade method from reading the FBI documents. I know that the CSS method can take a background color and the color that I want to change it. Teoh, I've already chosen the color, but whatever color that you want to change this code to your more than welcome. I have chosen this specific explode because I like the way that it looks that you can change your college Anything you like so again Because I've read the documentation. I know that it takes these parameters my background color, which is my property name in CSS. Just like wood style. Anything else and the color that I want to change it to. Then I'm gonna end with a semicolon and end my entire syntax with a semi colon as well. I'm gonna say that and we're going to see how this looks. I'm gonna hit, Refresh. We're gonna get our pop up in the school, the way to the bottom. And when my mouth centers, I see that it turns pink. However, when my mouse leaves, nothing has happened. So we're gonna need to use mouse leave in order to replicate that effect. In order to do that, I'm going to coffee and paste this entire thing. But I'm going to change maps over infamously, and I'm gonna change the background color to what it previously was before and previously, the background color had this specific tax code and head back to my site. That's local off my computer. Refresh it. I get my annoying pop up subscribe turns pink when I roll over it, and it goes back to its old color when I roll. So we're pretty successful there. So far, the last thing that we need to do is to update the HTML from subscribe to subscribe. We could do that using Jake Carias Well and again in the interest of saving times being efficient, I'm going to copy that whole thing. But instead of on mouse leave, I'm gonna write a quick event that's going to say when you click this event run the function that changes this h TML and this again refers to my subscribe button main. I'm gonna change my html to reflect the word, submit it or subscribe. Gonna double check my syntax to make sure everything is correct. I've got quotes here. I've got quotes here. I've got to semi colons, so we should be okay. I'm gonna hit, save, go back to my demo file that's loading locally. And when we roll over, we see this works and when we click, you've got subscribed. So we've been very successful and if you wanna watch this happen and inspects, I'm trying to do that as well By covering over this scrolling down Teoh where we are in the winter of our code scrolling down even more, just drilling down into that coat There. We've got this subscribe button main, and we have subscribed here. You can also watch the RGB code change as I roll back and forth over subscribed. 9. CONCLUSION: well that wraps up the class. Thank you so much for joining. And if you have any questions or need additional resource is I've included a great slide with some places that you can go if you need additional information or would like some help from the coding community. W three schools has a really great tutorial system for J Query, including a lot of examples include ability to do that. Stack overflow is another resource that you can use in order to ask other developers questions. You can post your specific code, and people will respond with ways to fix it. Um, the third thing is to read the J. P. J query AP I Documentation. The link is below as well in the power point and for further education, you can always check out skill shares, other premium classes. There's a whole library of wonderful resource is out there for you guys in order, Teoh further your learning skills. If you'd like to get in touch with me, you can reach me at my Web site at www dot maya and brooks dot com. You can also tweet me at my unwell one or at coffee, X Code underscore And my c I also have an instagram devoted to that coffee X code Underscore NYC. Stay tuned for a new project there. Thanks guys for tuning in.