Hi there, in this video we're going to look at adding some JavaScript to take this ugly looking Desktop Menu, and when it switches to Mobile, then you clicked them all out, it shows you the ugly Desktop version. This little toggle clicked on and off. I realize the styling's not great and there's a few little problems with layout. We'll do that in the video after this one. What you really need to do is pay attention to the magic, clicking, showing thing. We're going to do it in JavaScript. So let's go and do that now.

First thing before we get on and start making it, is what is JavaScript? Think of these three components to a website, it's HTML, css, and JavaScript. HTML is an easy one, think of it as the noun. So it is the things that appear on the page, it's the objects. It's this button here, it's this image, it's this text. Those are all in my HTML, and those are things. Then you've got your css. And this css just describes the styling of things. It says, this is my background color, this is how much padding it's got. The pretty stuff, it's the adjective. So I consider them, HTML as nouns css is adjectives, the describing words. And then you've got the verb, which is JavaScript.

What happens when the user clicks this? So it's the doing of things. It might be that the user clicks a button, like in our case here, this menu drops down. Or maybe when I use, it clicks the play button on a video, or drags this slider, or realigns things on a page. So it's generally the user interacting somehow with your website, JavaScript happens. And when I say we're going to be learning JavaScript we're actually going to be using something called a jQuery. JavaScript is a lot more complicated. So what some clever people did, is they created this thing called jQuery. And what it does is, it's slightly built on top of JavaScript, to make it easy for people like us. Instead of having to write lots and lots of syntax out we can use lots of simple language that makes sense better for humans. And it does pretty much everything we need to do in terms of front end web design. So we're not learning essential JavaScript, we're learning something called jQuery which is just easier language used on top of JavaScript. So let's go and do that now.

This little snippet here is going to help explain what we're doing. I wasn't sure if I should leave it in this tutorial series or not, I'm going to leave it in probably, just to hopefully explain, instead of just following me blindly, we're going to figure out what we're doing here. Basically what we're doing is, I'm previewing this in Chrome. And I've just got some nerdy stuff over here to help show you. So basically, what I would like to do, this little navigation here, when they user clicks it on their cell phone, I would like to use JavaScript, so when the user does something, I would like the JavaScript to add a Class to this little strappy menu called Expand. And that will expand the menu out. Because at the moment, there it is there, Desktop menu. It's got one Class applied called Desktop menu, no other Classes.

What I'd like to say is, when it's clicked to magically use JavaScript to inject the Class into here to make it expand, so watch this, keep an eye on this thing here. When I click it, I'm a user, using my mobile phone, I click it. And magically, this picture Class - there, go away - that gets added. And that little Class there, we're going to define in our css to say, make it nice and big, and show us the menu there. So that's what we need the JavaScript to do. So let's go learn how to do that using JavaScript and jQuery.

So the first thing we're going to do is, we're going to create that Expand Class. So we're going to put in our styles.css, we're going to put in Global, and we're going to say in our Selectors, we're going to create it, it's going to be called dot '.' Remember, it's a Class we're making up, it's going to be called 'Expand'. And what we'd like this thing to do, is display. And we're going to say display 'block'. Your little job as a Class, is when you apply it to anything, is to show things up. But what we're going to do is get that to apply to JavaScript. Not hard coded like we had to for everything else. So one next thing we need to do is create our JavaScript file and connect it to our index page.

Now when we did it with our, remember our styles.css, it happened automatically because we've got this cool little CSS Designer panel. To do it in JavaScript, we do it a little bit the long way. Let's go to 'File', 'New'. And let's go to 'New Document', 'JavaScript', and let's click 'Create'. It's called 'untitled', but save it. Where are we going to save it? We'll put it inside of our Desktop, inside my files here called 'Dan's Awesome Portfolio'. I could save it in with the rest of the files, but it's really common to create a folder called 'JS'. Inside of that folder, I'm going to put in this file called-- it's really common to call it Scripts, you can call it anything you like but most people call it scripts.js

Let's click 'Save', now let's go and close it down. So we just made it, and closed it down, because now we need to link it to this index.html file. We can see up here, in my index, and source code, and you can see here, the styles.css, this was done automatically for us. We need to do this manually, so we need to put a 'return' in. And we need to go to 'Insert', and go down to 'Scripts'. Click on 'scripts' again, and it knows it's going to the js file. Find 'Script's, click 'Open'. And there you go, there is a link together. Hit 'Save', and you can see, there's my styles.css, and now, my new little Scripts file. This Burger Menu up here is because it's in svg. If you use the png version of our little menu before, this won't appear there. Just ignore him for the rest of the course.

So go to 'scripts.js'. And now we get to add a JavaScript, or in our case, jQuery that controls that turning on and off. Okay, I totally lied, we don't really do our JavaScript here. What happens is, your computer, or at least the browser that people watch your website on will understand JavaScript just fine, but it will get to the jQuery which is basically shorthand for JavaScript, and go "What the hell am I talking about, this is not JavaScript." So what we need to do, in our Source Code, is we really need to, at the top here, tell it, we'll look for the definitions of jQuery. And you do it using something called CDN, a Content Delivery Network. There's a few of them online. So we're going to go to Google, I'm going to type in 'jquery cdn'. And there's a bunch of places you can link to. So you can go to jquery.com, I use the Google one. Where is he? Down here. developers.google.com

And here, it says-- this is the link for jQuery, I'm going to grab it all. Actually, starts up there, grab all of that chunk. What I've done for you is, I've put it in your exercise files. Under Code, there's something called jquery cdn. You don't have to come here, you just copy and paste my one. So I'm going to copy it, and all we do is dump it in here. And that just tells it where the library is. Why do we just not have it locally? We've got scripts.js in our css, on my machine. The reason is because this is a really big library. And the benefit of using, say the one hosted by Google, it means that, say a user is surfing the net, and they go to 10 sites, they all use jQuery because loads of sites use it. When they get to your site, and the browser goes "Oh, I'm going to have to load jQuery," and it goes, "Don't worry about it, I won't load it because I've already loaded it from the other website I was at last." That's why we use a CDN and link to a website, rather than having it actually on your machine. Just means that Google's going to have it online all the time, loads of people use it, and you don't have to download it like a millionth time when they get to your site because it's just that same old one that's been linking to there again.

So the browser of the user doesn't bother going and learning all this new language again. It's already there, it already knows it. Long story short, just copy and paste that, stick it in the top, and it will happen. Let's go to scripts.js, and in here, we're going to learn a little bit of jQuery. Just so you know, when you are designing websites, nine times out of ten, you're going to be using jQuery rather than pure JavaScript. So the first thing we need to do is, throughout we're using jQuery, you can see, the little coding hint helping there. And what we're going to say is-- we're going to put in lots of brackets and lots of curly braces. So let's get ready for them.

First bit, is we're going to put in our brackets. Inside this bracket, we're going to write the word 'document'. Thank you, code helping. After the brackets, we're going to type in 'ready'. This just means that, jQuery, don't load until the document's ready. Because what can happen is, jQuery can start doing its thing before the document is even loaded, or the whole page is loaded. And it just causes lots of errors. So what we just say is, wait for the document to load, and then do your thing. And you find you don't get any errors. The next thing we need to do is tell it to do something. So in brackets, we say, do something, please. But we don't call it 'do something please', we call it a function, just think, I would like to do something, but code language is called a function. And now we put in a set of brackets. Set of curly braces, and at the end, we put in a semicolon.

These things here, I never really do anything with these first set of brackets. These are attributes that, normally they're just left into. These curly braces are the really important parts. We're going to put all the things we want to do inside of this. And lastly, this semi colon just means, finished here, "I'm done, I've finished writing my jQuery, don't go any further." All of the good stuff goes inside these curly braces. I could type it out here, but it's going to look a little messy, so I'm going to undo. And what we'll do is, we'll put a return in between. And we'll just type them in here.

Now I want to say again, I'd like to say, jQuery, but instead of saying that-- jQuery is a long word, what the shorthand is, is the dollar '$' sign. So dollar sign, just think as the shorthand for the word jQuery. So I'm going to replace this one up here because you'd be weird if you were using the word jQuery, everyone uses the dollar sign. So we're saying, "jQuery, I would like to do something." And in this case we're going to use brackets again. Inside of these brackets, I would like to add apostrophes. No, quotes, apostrophes. Because what I'd like to do is I'd like to do something with the Class remember, period, for Class. Something with the Mobile view.

What would we like to do with them? I'd like to look out for a click, so when you're clicked, I'd like you to, brackets, do something. Remember, we don't use the word 'do something', we use the word 'function'. Same bit of queries and syntax. Brackets with nothing in it. Semi colons, where the good stuff goes, and at the end we put a semi colon to say, don't go on past here, please. So, in where the good stuff goes, hit 'return'. Same as above, dollar sign for jQuery. Same thing with the Class, we're going to put in apostrophes, a dot. 'desktop--view'. What would we like to do to this Desktop view? I'd like to add this thing, instead of a click, this one's going to have a toggleClass. And that toggleClass is going to toggle this thing called apostrophe expand.

Remember that Class we made earlier? Weirdly, we don't write in the full stop for this particular one. Just leave it off; doesn't work. Gets to the end here, I say, don't read anymore. And that is going to hopefully make our menu work. So let's back date it. We're going to say, there's an 'expand' Class that I have. I'd like to toggle it on and off, Desktop view, when Mobile view is clicked. If that was a mind bender, and there's commas and apostrophes flying all over the place, I've created a code you can copy and paste in your exercise files, you can go download those, they're free.

So that is, writing some jQuery. Let's go see if it works, that's the main thing. Remember, 'Save All', jump into our browser. Bring it down, click the button. And it doesn't work. I have to pause this, figure out why it's not working. Be right back. Okay, I'm back, and I've figured it out. Happens to the best of us. I really want to re-record the video, and make me look super awesome but I also want to let you know that it always happens, happens to everybody. And what I did was, under styles.css-- it's actually working, I tested it and at the expand, Class is getting added, so it's nothing wrong with the jQuery, it's the styles.css.

What's happening, I put this in, in order to expand in Desktop, but I don't actually need this thing, because it's in Global, I need this to be in Tablet and in Mobile view. So I'm going to grab this - you're in the wrong place - cut him. And I want you to be in-- you can see, my Media Query here, this is for my max-min for Tablet. So just before the ending of the close bracket, see, that's the opening. And there's the closing there, I'm going to put him in. So I need to copy it in there. And down at Mobile view, I need to copy you there. All right, oops. Now let's go and test. Now click on it, still not working, hit 'Refresh'. Now it's working, click, click, our jQuery works. It still looks ugly, I know, there's some layout to be done, but we'll turn that into another video, because this one could be the longest video I've made in my video career history.

So, that is our jQuery, clicky, Mobile and Desktop drop down menu thing. Now let's make this menu look kind of nice.