Launch A Rocket: Learn JavaScript Basics The Fun Way!

1. An introduction: Hey, hello. My name is Rich Armstrong, and I've making websites, apps, and interactive things for last 10 or so years. This class is about learning how to write basic JavaScript. I'm going to teach you some theory. I'm going to teach you how JavaScript relates to HTML and CSS, and then I'm going to teach out of write it. Being able to write JavaScript allows you to make interactive websites, apps, and games that are dynamic, that move, and that can even think for themselves. JavaScripts is super fun. When you combine them with HTML and CSS, you'll be able to take over the world. By the end of this class, you'll be a white belt JavaScript ninja, and have a basic understanding of JavaScript. You have launched a few rockets. Your friends will think you're amazing. You're mom will think you from the future, and you'll be able to make more interactive things. I really believed knowing how to code makes such a big difference in the modern world, especially if you're a designer, especially if you're creative. I'm really excited to teach you how to code, so join me and get excited. 2. What we gonna make???: What are we going to make? What am I going to teach you? Well, we are going to make a rocket launch sequence that Elon Musk would be proud of. We're going to get a rocket to go from standstill to hitting the scar, maybe even exploding. I'm going to take you through button clicks and CSS animations, and functions, and variables and if statements, you're going to learn a lot, but not too much, your brain will not explode. I'll show you how to use Sublime Text, I'll show you how to use Google Chrome developer tools and how to use GitHub desktop and how to use GitHub pages and how to share your creation with the rest of the world. We start small and easy and then get into the fundamentals of JavaScript. It's light, it's fun. I narrate everything visually and I provide simple metaphors for you to understand. Come join this class and let's launch a rocket together. Yeah. 3. Downloads these 3 free apps: So to start writing JavaScript, we need three things. The first is a code editor, will be using Sublime Text 3. The next app that we need to download is Google Chrome which is a browser. The third app that we need to download is GitHub Desktop, which synchronizes with GitHub online and using this, you can share your code and you can back it up and synchronize it. Open up Safari or Internet Explorer and let's search for Sublime Text 3. Click that link, and then download the right one for your operating system. For me, it's OS X. The next thing we need to do is search for Google Chrome, click on that first link. Sometimes this page takes a while to load and sometimes it changes. Just get the one for personal computers and download Chrome, accepts and install and sooner or later Chrome will be installing. Final one is GitHub Desktop. Search for that, open up that first link and then just click the Download GitHub Desktop button. It's available for Mac or Windows. They do look a little bit different, but it shouldn't bother you too much. The next thing that you need to do is you need to go to github.com and you need to create a new account. Sign up, if you haven't got to GitHub account. You pick a username, enter your email, and you create a password. What's really important here is that you need to verify account before you can actually start using GitHub Pages. For those of you who already have one, sign-in and enter in your details. All ready, so sign-in. What we're going to do here is that we actually want to create a new project. It's called a repository in GitHub. All I want to do here is you want to go back and create a new repository, and we're going to call this JS rockets. We can put a description in of launch rockets with JavaScript. Let's keep it public. It always helps to initialize a repository with a README file. All right. Let's create that repository, and from here on out you'll be well on your way to getting started. 4. Install, signup and write some JS: So once all of your apps have downloaded, you'll just need to drag your GitHub Desktop app into the applications folder. I already have one, so I'm just going to replace it, fantastic. Your Google Chrome, you'll need to open up because it's a DMG, not quite sure what happens on Windows, but just do the normal process of installing an application. To Google Chrome, you just drag it straight into your Applications folder. Sublime Text. Double-click on that DMG file and drag that into your applications folder too. I already have it. Cool, I'll replace it. That's your installation process. You can then delete those apps. So what you can do is, you can go to your Finder, you can go to the applications folder and you can find it there. The first thing that we want to do is actually open up our GitHub Desktop app. So I've already got it in my bar at the bottom here. So you open it up. So sure, let's open it. If you've already got some projects in your GitHub, it will show you that, hey, there's a bunch of changes if you need changes. But what we're wanting to do here is if you haven't signed in already, go to your preferences and you know what your username is and you know what your password is. So sign-in. Then from here, you can actually go Clone, so I want to say cool, I want to clone that js-rocket, cloned js-rocket. Where I'm going to put this, I'm going to put it on my desktop. So I choose my desktop, and now it's going to say cool, cloning. What we need to do here is we actually need to create a new branch. I'm going to call this GH pages. I'm going to clone from the master, and then here we're going to work on this branch because then we can access it as a website online. Create Branch. So you'll see you've got your js-rocket and maybe a couple of other ones that you can choose from, but now you've got your js-rocket folder on the desktop with nothing much in it. So let's open up js-rocket in sublime text and you'll see that there's a bunch of files and folders on the left and then your card will be on the right. So let's go File, New File, and let's call it index.html. So let's save it. I'm going to go to my desktop, save it as index.html. Thanks, mouse batteries are low. Here. Let's just write hello js-rocket and spell that correctly, and then save. What we need to do now is just double check that this is working, so we go back to our finder, we drag our index.html file into Google Chrome. Fantastic. Open that too. Hello js-rocket. That's working. I'm going to go to GitHub Desktop, it goes, hey, you've done something. So all we need to do here is just say added our index file. You can give a more detailed description if you want. You then commit to GH Pages. What you do is you then publish it. So this actually synchronizes your local version of js-rocket to the online version of js-rocket. So then in Chrome, what we do is we need to go to github.com and we're going to sign into our account. Mine is mrra-screencast and my password is my secret. Please remember your password. We then want to navigate to our js-rocket repository, we want to go to the master branch and change it to GH Pages branch, and then you'll see that there's a file here, it says read me, it says index.html. The files that are in your GitHub website should be the same as the files in your GitHub Desktop app. You can see our history here. So what we want to do now is we actually want to get into this pages accounts. So what we're going to do is, we're going to go mrra-screencast and use your username here. So if yours is Bob, use bob.github.io, and then we're going to go and put our project here. So the last one that I did with a cartoon here. So what we're going to do here, is we're going to go js-rocket, press Enter and there we go. So if you see that, it's working. If you don't see that, you need to synchronize it and you need to make sure that you're working on the GH Page's branch. The next thing we want to do is just write a little bit of JavaScript. What we do here is we open up script tag and see what Sublime Text does. It does a lot of work for us. It goes to script tag, is of the type text in JavaScript and even close it for us. Over here we're going to go console.log hello there friends. Then we're going to save it. Oh, I don't know what I did there. I'm trying to close that. You should say Save. You'll notice that when you go back to GitHub Desktop, it will say hey, there's been a bit of a change here. You're just going to say Added some code or added some JS, Commit to Gh-pages. So it commits the change, and then we synchronize. It makes it the same on our local computer as it does online. Sometimes it can take a while to synchronize. We then go to Google Chrome, we then navigate to our js-rocket project or repo, we can then go to the commits tab over here, it's quite important sometimes, and we can see that it's added some JS. If you refresh here, you might not see anything different, but if you right-click and sometimes this could be at the bottom, or sometimes this thing could be at the side. What we need to do here is we actually need to go to console. If you have a message that says hello there friends, your JavaScript is working, your GitHub is working, and you're ready to rock and roll. Pumped. Yeah. 5. What is JavaScript??: What is Javascript exactly? Well, JavaScript is a really cool and clever programming language used mostly on the web, on the internet. Javascript loves HTML, it loves CSS, and really really loves humans. It can also communicate with a server, so I guess it's like everyone's best friend. Cool. So where do we use it? We mostly use it in the browser, but we can use it in a few other places as well. Javascript is also being used as a server language, which means you potentially only need to know one programming language to do everything on the web but don't worry, we're not going to get into server stuff in this class. I'll keep it light, fun, and easy. So then what can JavaScript do? Well, JavaScript can do a lot, it can count ready fast, it can count to 1000 quicker than you can, it can count to a million way quicker than any human, it's amazing, it's really good at math, it can make things move, which is amazing, it can talk to the server, it can change words, it can drag things around on the screen, it can alert you, it can be programmed to do anything, and it knows a lot, it stores a lot of information about the browser and the web page it's on. You can pretty much just ask it, like, how big is the screen? Or what browser are they using? Or what color is the background? Or what is the URL? Where are we? It knows a lot, which is really really cool. 6. Properties and methods: What is JavaScript really? Well, it's quite simple, actually. JavaScript is a list of objects it has access to and a list of actions you can ask it to perform. The first are called the properties. It's the list of objects it has excess to, they're called properties. The list of actions you can ask it to perform, they're called methods. There are a bunch of default properties and methods, and then there are those that you can write yourself and add to JavaScript. If we were to see JavaScript as a car, for an example. A car would have properties like paint color, seats, tires, engine, make, model, is turned on, year made, current speed. Then maybe it would have methods like turn on, change gear, show how fast we're going, pop the hood, open the sun roof, show the warning light. Properties can vary inside. So the turned on property could have been yes or it could be no. The color property is a word, it could be red, it could be blue. The engine property, well, that's an actual thing, it's another object. Seats, it's a list of seats, and each of those seats is an object. Now, each object also has its own set of properties and methods. The seat property is a list, and so it could have its own property of number of seats and have its own method of give me seat number one and once you have seat number one, you can access its properties and methods, like color, is the seat-belt working, and the method like warm the seats or recline. Well, how do you write JavaScript? So to access all these properties and methods of an object, we must use.syntax or.notation. We can say car.seats and it would give us the seats. Or we can say car.isturnedon and it would say yes or no. We could say car.currentspeed or car.colour or car.make or car.turnon. Now, that's a method. Some instruction, we could say car.popthehood, or you could say car.opensunroof. You can see how these are instructions and the instructions are different because they have the parentheses after them. To make use of those, there's a language that we can begin to learn, and it's a language that I'm going to start to teach you. Let's do it. 7. Variables: The first thing that I want to do is explain what a variable is. A variable is something that refers to something else. If I say favColor, and I'll give my favColor a value of red. You can see here that there's this var keyword followed by a space, followed by a name, followed by an equal sign, and then a value. It ends off with the semicolon that basically just says, "Okay, we're finished with this line." This var keyword is special, you have to spell it this way. You must leave a space between the var keyword and your name of your variable. This name can have underscores, it just cannot have spaces and cannot have dashes. I prefer using CamelCase which is a small first letter, and then every time there's another word, instead of a space or an underscore, I just use a big letter or an uppercase letter. Around the equal sign, you don't have to have spaces, but for me, it just makes it much easier to read. Then we assign it a value. The reason why we assign it a value is because this can change, this can change to green, it can change to blue, and so when we're working in our code, we don't need to keep track of what this value actually is, we just need to have favorite color. I'm going to copy this and show you how this works. If I say blue, or maybe I'll just copy this whole thing, I'll go to Google Chrome and I'll say "View," "Developer", "Developer Tools", or you can just right-click and say "Inspect", and then go to your console. What I'd like to do here is just paste this and say var favColor equals blue. I can then say favColor and it gives me blue. Now, I can then change this and say favColor equals green. Then I can say favColor and it'll give me green. I don't need to keep track of this JavaScript, no one keeps track of this. What can we store here or what can we refer to? Well, there's a few things that we can refer to. The first is text. In JavaScript and most programming languages, you call it a string. You can put double quotes or you can put single quotes. Sublime Text is really cool because if there's nothing there and you press one quote, it normally it gives you two of them. if I do that, it gives you two, so then you write your piece of text and then you end it with a semicolon. Now, another type is an array. Now, array is basically a list. What you can do here is keep any sort of list. You can keep text, you can keep numbers, you can keep variables, you can keep objects, you can keep functions, you can keep and store and list whatever you want. For example, I can say myArray or let's call it my favColors. I can say blue, red, green. So this becomes a list. I don't have to then have favorite color number 1, favorite color number 2, favorite color number 3. I can then say, var numOfFavColors equals 3. Now, this is a number. You see I don't have any quotes around it because if I made it like so, it would actually be a string now or text, but we want it to be a number so that we can perform mathematical operations on it. The next type of object is a Boolean. This is a true or false or a yes/no value. I can either say true or I can say false. It's basically the same as saying zero or one, zero is false, one is true. You can say true with uppercase and say true or false with uppercase too. Sublime just likes it in lowercase, like so. We've got these four basic types. There's another one which is an object, which can combine all of these things. An object is like an array, but you can give it a name for every single list item. I can say firstName, and instead of saying equals like so, I do a colon, and then I'll say Rich. Then I go comma, and I can say lastName, and I can say, Armstrong. Then I can say favColors, and I'm just going to copy this, and I can put an array in there. I can say, yearsAlive 103, and that's a number. I can say, isMale, true. You can see that this is all inside one object which is very cool. It means you can access all of these details with dot notation. So richObject.isMale and it'll give me true. So let's copy this and I'll show you how it works in Google Chrome. Let's just clear this console. I'm going to say rich objects, and now, I want to say richObject.firstName. It'll say Rich. This is very cool because we don't need to know that. I can now change this and say firstName equals Bob. Now, when I ask for richObject.firstName, it'll be Bob. So that's variables in a nutshell. 8. Functions: All right. So what is a function? Now, a function is something that can be re-used. So it's much like a variable and can actually be stored in a variable, or a variable can refer to a function. So we need to say function, give it a function name, whatIsMyFavColor. So this is something that makes it a function, these two parentheses, brackets, whatever you want to call them. Then the stuff that happens inside the function or the method is inside these two brackets or inside this closure. Now, we can call this functional or type it like this, and then we can very easily type it like this, which I much prefer because it means that this only need variables instead of variables and functions. But it is slightly different because it has these parentheses. So what is my favorite color? All right. So this is a question and you want it to return something. So I'm going to copy this and say doSomething. All right. Now, doSomething could do a console.log do Something. All right. Now if we copy this and we get into Chrome, and now I just say Paste, now I Enter, and now I say do something without the parentheses, it's going to say, cool, there's the function that you're referring to. But if I say doSomething and I put those parentheses after it, it's going to log it, it's going to do something. So putting those parentheses after a function is really, really important, especially if you want to call it or only if you want to call it or invoke it. Now, what is my favorite color? Well, I want to know what my favorite color is, so here we can actually say return blue. So if I want to question what my favorite color is, and I can put a whole bunch of code and logic into this function to determine what it is, I want it to return blue. I don't just want it to log something or do something, I want to get it. So this is pretty cool because it's much like a built-in function. I'm just going to try to clear this. So when you say Math.round and you give it a value of 4.568, it's going to give you five. You don't want it just to do something and not tell you. So when I paste whatIsMyFavColor, I'm going to say, whatIsMyFavColor, and it's going to say blue. Fantastic. Whereas this other one, this doSomething, you'll see that it returns undefined. It doesn't actually give us anything back, it just does things. So there's two different types of doing functions. You can also return true, you can return arrays, you can return anything you want. But if you return something, it doesn't return or get to anything else, it literally stops that function right there. So if we copy this, let's just clear this console, and paste it, when I say whatIsMyFavColor now, it's going to say false. You see it doesn't return anything else. So that's pretty important to remember, that anything after return doesn't actually run. Now there's one more thing I need to show you about functions. So if we wanted to do something like know the area, so inside these parentheses, we can actually say, well, width and height. Then we can say return width multiplied by height, and you can see I'm doing some math here. So if we copy this, and clear the console, paste it, and I say area, not a number. It's like, what's going on? Now if I pass in five and four, there we go, it's going to give me 20. So we can do this again and say var fullname equals function, and over here we can say firstname, secondname. So we can then return firstname plus secondname, but we can put a space in between. You can see here these are also almost like variables, except they are parameters. So this firstname, although we don't know what it is, will be combined with secondname with a space in between. So if we copy this and paste this, and then we say fullname and we pass in Rich, and it's wanting strings now, it's going to come back with Rich Armstrong. If we say Rich and Armstrong like so, it's going to be saying, well, what's really going on? This is pretty important, but what we could do here is say, var myName equals Richard. Then we can say fullname and we can copy myName and put a check because this is now referring to Richard. When we press Enter, after I make this one a string, you can see that it comes back with Richard Armstrong. All right. So those are functions in a nutshell. You don't have to have two, you can have as many as you like. Sometimes you only need one to do whatever you need to do inside the function. Remember, you can return things with these functions, so they become really useful, and you just can do things with them without returning. 9. The If-else statement: Now I want to tell you what an IF statement is. Basically, we can say if something, then do something. If what is in these parentheses is true, then do something. What I'm going to say is just alert male. Now, if true, alert male. I'm just going to copy this and paste this, male. It's true because we're just explicitly saying this is true. But now we want to actually make this a little bit more dynamic. We can say if male equals, equals male, alert male. Male, fantastic. But that may be a little bit obscure for you. Why not just use one equals? Well, because one equals assigns a value. It just won't work. We're actually testing if this is true or false. It's a comparison statement. We can say things like one is equal to two, which you clearly would say false. Great. Well done. But if we say one is equal to one, it's true. Or we can say 10 is bigger than one, true. Or we can say 10 is smaller than one, false. We can also say 10 is bigger than or equal to one, which is true. Or we can say 10 is smaller than or equal to one, false. These become quite powerful when combined with variables. We can say number 1 equals some number, and number 2 is another number. We can do these with strings, we can do these with arrays, we can do any sort of thing in here. Remember, our functions, they can also return true or false. In here, we're looking for a true or false value. We can say number 1 is bigger than number 2. Now if we copy and paste all of this with the variables included, nothing happened because number 1 is not bigger than number 2. But if we do this, now we can take out the vars because they're already there and say male. Maybe we shouldn't say male, male we should just say, true. It's not working, but that does work. We can say, if something happens, if this is true, perform the stuff in here, which is great. But now we can also say, else. If this isn't true, then alert this. We'll do something here. If you always want to perform some action, whether it's true or whether it's false, it's great to use an if-else statement. But now this is a default. With numbers, it's okay. But now if we wanted to say name 1 is Rich and name 2 is Bob. If name 1 is equal to Rich, alerts true, else-if, name 2 equals Rich, alert true, else, alert false. Let's just clear this. If name 1 is Rich, alert true, and what I'm going to do here is true 1 and I say true 2, just so we know which one is which. Just going to copy this and paste it for further reference. True 1. We expected that. If we have to now change name 1 to Gareth, and then we had to rerun this, it's false. Because now name 1 is Gareth. Name 1 be Rich, and name 2 is not Rich. Now we can say name 2 equals Rich, and voila. If we then say, that IF statement again, it's true. Fantastic. Now we can say if, and else-if, and else. We can say, if this is true, do this, else-if, this is true, do this, else, as a default, do this, which is great. Now another great thing with IF statements is you can say and, or you can say or. You could say name 1 is Rich and name 2 equals Bob. What we're doing here, is we're saying this must be true and this must be true. What we're saying with this one, this or, is quite a hard one to remember, is we're saying if this is true, or this is true, then carry on. These are if-else statements. 10. Write some basic JavaScript: Let's drag in js-rocket folder to our Sublime Text app, and let's do the exact same thing to Chrome, except let's open up index.html. There we go. It's pretty much where we left off last time and now let's start writing some JavaScript. We've got the script tag which is meant to fit into our HTML. You see what Sublime Text does, it's amazing. It just auto-completes stuff for you. I'm going to cut this and I'm going to put it just inside the head tag here and indent it a little bit, and give the HTML page a title of JS Rocket. I'm going to Save it after I put hello js rocket into the body, and we can put that in an h1 tag. Let's indent that, and now let's Save. Where we left off last time, we inspected the page and inside our Console tab here, we can see that it said, hello there friends. This is really cool because it means that we can communicate and see what's going on even though the user doesn't see that. If we inspect again, we see that, hello there friends. This is because you are writing console.log. Let's just start writing some JavaScript, and I'll explain things as I go. What I want to do is I want to create my own object. I want to say var car. When I say var, it's a variable, is something that can change. Car is an object. Now this object, we're going to say equals, give it a name called car equals an object. That's a very weird thing. Let's press "Enter" and inside here, we're going to give it some properties. I'm going to say make, and I'm going to say VW. Then I'm going to say type, and I'm going to say Polo. It's a VW Polo, and I can say color: blue. I actually have a blue VW Polo. There we go, we start off with three properties. My car is an object. You signify an object with these curly braces, and then you have a property and a value, key key value. What we can also do here is that you can see that these are just text. What we can then do is we can say, what other kinds of properties do we have? IsTurnedOn, true, or we can say false. You can see here this is a yes-no value, a true-false value. This is called a Boolean, such a weird name. It's named after somebody. The other thing that we can have is a number, so numberOfWheels. That was a good whistle, numberOfWheels, and four. You can see that these aren't text, these are actually numbers. Then we can say seats. Then here, we can actually have seat 1, seat 2, seat 3, and seat 4. You can see that these are actually still text and JavaScript isn't precious about how you lay this out. Oh, isn't too precious, I should say. But let's make it easier to read and let's indent it. You can see I'm putting commas after every set of key value pair. This is really a good practice. This is my car, for now, I'm just going to Save this. Then I'm going to go into Google Chrome, refresh here, and I'm going to see if car is here. Car is here. We can see that, it's color is blue, isTurnedOn false, make VW, numberOfWheels four, seats, it's an array. An array is actually a list. Here we go, type Polo. We've got a couple of other things in here. You can see that seats has a property of length and it's four. We go car.seats. You can see that it returns us a bunch of seats or the list of seats. If I press up in the Console and I go car.seats.length, it says four. You can see here that, wow, car.seats, it's a property. Gives me a bunch of stuff. Car.seats.length, I'm actually doing dot notation, I'm going further and further down, but car is still the thing that I'm referring to. I'm not going seats.length because if I go seats it's going to say, ah, flap. Seats is not here. Now let's create a method. Inside this car, we can then say turnOn, and we're going to call it a function. Now this is a method and this is how you write it. We could pass in a value here, but we'll get to that just now. But basically what this does is I can say, isTurnedOn is true or false. We're going to say, copy this, and I'm going to say this.isTurnedOn equals true. That's how we write it. This function or this property is actually a method, which all methods really are, but this property is a function, it's a method. We're going to say this, and this refers to the car, isTurnedOn, which is this guy here, is true. You see that it's false, initially. Let's Save this. Let's refresh. Car.isTurnedOn, false. Now let's say car.turnOn, and now we can't just do that because it'll say, cool, there's the function. That's what it is. What we need to do is say car.turnOn and then put these parentheses after it to say, do that. It says, undefined. But that's because it's not giving us anything back, and I'll show you how it gives something back. But now what we can do is say car.isTurnedOn, it's true. You can see what happened here. You did something, you turned it on and it changed the property without you having to change it. You could say when the user clicks this button, do something, change something. Another example of this is, let's write another function. Let's say fly. We could say alert fly. You can see here that when we say fly, it's not just a normal function, you're passing something into it. You'll see what happens here now. We say Save. Let's go back to Google Chrome, refresh, and we can say car.isTurnedOn, it's false. But why? Well, it's because we refreshed the page. When you refresh the page, everything else starts from the beginning, and we start at false. What I was really trying to show you here is car.fly. Because it's a method and we wanted to execute that method, we put those parentheses after it. It comes up with this little irritating box that says, fly. Now what's really cool is we can say, well, can we do this? Let's try it, and let's create a new property, which is a method called switch. Switch is a reserved word actually. Let's go switchCar, function, parentheses, and curly braces, and then there we're going to put a parameter, isOn. We said switchCar. We can say if isOn, we copy that, equals equals true. If we just use one equals, we actually say isOn is true, which is not. We say if isOn is true, so we are asking a question, then we're going to do something. I'm just going to copy this here, and then I'm going to say else, false. If I'm going to say switchCar, I'm going to say this, isOn is true, and say this isTurnedOn is true, else, if it's not false, and I'm going to say this isTurnedOn equals false. This is a bit of logic for you. You can start to do different things based on what you pass through. Let's go Save. Let's just go console.log, and over here I'm going to say turn car. I'm going to put a space here and then I'm going to say plus isOn. What this does is it goes, I'm going to log "turn car" and then I'm going to add on isOn to this piece of text. Let's save this. Google Chrome to refresh and let's go the car.isTurnedOn is false. I can say car.switchCar and we can say true. Turn car, true. Now we can say car isTurnedOn and it's true. We can say car.switchCar, false Turn car, false. Then we say car isTurnedOn, it's false. There we can actually put through a bunch of arguments and you can see every time the console is going turn car false or turn car true, it's going and changing what it does based on what we parse it. We can parse in true or false or we could parse in a bunch of other things, but we're going, if it's true, do this, otherwise, do that. This is really powerful. You can start to put in different things to a function and get different things out depending on what you put in. We don't have a lot of JavaScript here. I don't have a lot of HTML. We've got quite a bit of JavaScript here. If this gets really hefty, lots and lots of HTML, we don't want to have to write our JavaScript here. The best thing we can do is literally just cut all of this. Then instead of having all of this, we literally go source equals and then here we go js, script.js and save that. What we need to do here in our finder is we need to create a new folder called js. Inside Sublime Text, we need to go File, New File, and paste. Let's re-indent it here. Then if it doesn't automatically pick it up, which it probably won't because it's untitled, you can always change it to JavaScript. You can see that the colors come back. Let's save it now and save it as script.js. Save and then let's see if it works. Hello there friends. Car isTurnedOn false, switchCar to true. Fantastic isTurnedOn true. Now we can also use car turnOn and that can still be true. There you have it, we now have our JavaScript in a separate file. Just like we put our images in a separate file, just like we put our CSS in a separate file, sorry, separate folders. We have our JavaScript in a separate folder, I guess and in a separate file. Now we've got our HTML. We're referencing our JavaScript's here. If we wanted to reference our CSS, we would say, cool, let's go "css/style.css" and you can see that it's slightly different. Your JavaScript script tag looks a little bit like an image tag and your CSS tag looks really different and it's got this href, but it's pretty much the same thing. We don't have a CSS folder at the moment, so let's create one. In your CSS folder lets create a new file. We're just going to say body and say background color, gray. Save this inside CSS as style.css. If you ever get one of these pop-ups, just say cancel. Don't purchase Sublime Text. I do have a license but not on the screen casting profile. Let's save it and index.html, and let's save this one. Then you go back to Google Chrome, refresh, and now you have CSS working and JavaScript working. But now I want some user interaction. Remember, the user's not going to be able to access all of this through their console. Let's have some fun now. If we create a link here and let set its href to hash, and I'll show you why this is important. Click Me, File Save. Refresh. If we go Click Me, you can see that it just puts that hash on. It doesn't refresh the whole page. This is really important and it can save you a lot of headaches. The next thing we want to do is go to href. Cool, it's that. But what about on click? Let's do something. Maybe we can say car.fly. That's pretty interesting, we're running JavaScript in HTML. Let's onclick attribute. What the heck is that? Well, there's a bunch of ones that relate to JavaScript. Let's save this. Let's see if it works. Click Me. That's basically JavaScripts. You can pretty much set up a whole website like this. You've got your script, which has a car and it's got this method of fly. When you call it, it alerts fly. Now what we can do as well as we can say, switchCar to something. Maybe we don't have car to fly we can say, "switchCar, true." We can turn it on. Lets save. Let's go back here. Now, if we see is car turnedOn false, Click Me, Car isTurnedOn, true. Now you can see that as you interact on the interface, stuff actually starts to change where you can't see it. You can make things pop up, you can change colors, you can animate things. Have some fun here and try things, experiments. Its a really nice way to do things. You can even write things not with car dot. You could write something like var and you can just make a function like sayMyName equals the function and then here you can say name and you can say console or maybe you want to say, alert, "My name is plus name." File save. What's really important for any text and in JavaScript we call them a string, we use inverted commas, so double quotes or single quotes. Just make sure that they're the same on both sides. sayMyName. If we copy this and put it into here, sayMyName and I'll put "Rich" in there. Just be careful here. If you're using double quotes here, use single quotes here, if your using single quotes here use double-quotes here. Save this. Click Me. My name is Rich. There we go. Have fun, do amazing stuff. But now, if you want to then share this with your friends, and I really encourage you to share in the project gallery, just to show off, just to show what you've done and you can also ask questions. If things aren't working, post it, put onto GitHub, post a link and say, "Rich, I'm stuck, it's not working." Then I can go into here and I can say, "Looks like there's some errors." I can look at your code and I can say, "This is not working." Other people can also do that. In GitHub desktop, just commit your changes, say, "Made some car stuff happen." Commit to gh-pages. Makes sure that it's on gh-pages and not master gh-pages. Cool. Then you synchronize. While that's synchronizing, let's go to github.com. Here we just want to navigate to our JS rocket repository and look at our commits. Go to the gh-pages branch. Made some car stuff happen. Let's open up a new tab, and we're going to go to your screen name or your username.github.io/js-rocket. You can see that things are changed. Click Me, my name is Rich. If you inspect here and go to your console, you can go car. If you press Enter, you'll see a bunch of stuff that your car can do. Fantastic. Share your projects. 11. Start playing around with CSS and JS!!: Yeah. But Rich, I don't want to just have text coming up and popping up and text in the console. I want some cool stuff to happen. Well, let me show you some cool stuff then. Onclick, let's say doCoolStuff. How about that? Then we're going to put in a div, and it's going to have a class of cool. Inside it, it's going to have some texts like, ''Hello, I'm cool." Let's indent that. Now what you'll see what happen here, make sure you are on your local host is that when you say click me, it says, ''Something's not working.'' It's really cool to have your console open because it tells you when there's errors. It can also tell you one error. If you click there, and it will say, ''That's where the error is, please help me out.'' Hello I'm cool! Great. What we want to do here is we're just want to style that cool element a little bit. I'm just going to copy this, I need to style it. I'm going to give it a width of 100 pixels. I'm going to give it a height of 100 pixels, and then I'm going to give it a background color of green. Then what I'm going to do is I'm going to say.cool.red, background color red, and then I'm going to set a transition. Let tap that one out. Transition of background-color, I'm going to say, let's make it a 1,000 milliseconds. Well, maybe just one second. Let's Save this. Now what we can see happening here, it is cool, it's green. But if you inspect this guy, and you make him, what if I say red. Did you see that? Well, there's some cool stuff happening there. I'm just going apple zed and apple shift it to change the class. If I change this back to just cool, you'll say it changes to green. That's what we're going to make. I'll click ''Click Me'' button do now. There's a few ways to do this. One of the easiest ways is to go and give this an ID of something unique, and we're just going to call it cool, then Save. I'm going to copy this. Then inside here, I'm going to say var. What did I call it? doCoolStuff, and it's going be a function. Over here, I'm going to say document.getElementById. I'm going to put that in there. The document is your main thing, like the window, the document. I think it's more main, or maybe it's not. But it doesn't matter right now. Since a document getElementById.cool, and now we're going to change the class name. A document.getElementById.className equals cool and red, cool red. We can change the wrapping of this, I think somewhere. Sublime Text, let's change the settings Default. I'm just going to search for wrap. Word_wrap auto, Files, Preferences, Setting-User, word_ wrap. You can see that even in Sublime, it's JavaScript, check at this. Word_wrap, true, Save that. className equals cool red. Let's save this, and we can close the defaults. Fantastic. Let's go in to Google Chrome, Refresh, Click Me. Whoa, did you see that? Things just got real. That's really cool. You can do cool stuff now. A few other things I'd just like to show you is to go, if you want to make a comment, that's how you do it. If you want to do it on multiple lines, you do it like so. Anything in between here is commented out, the browser when you look at it. But it's quite helpful when you say something like this. This function does this. When you say document.getElementById cool, the className. You can just say like changing class name. That's you do comments. Those are quite nice. Now what would be cool is to change it back. Now do cool stuff. What we can do is we can say var currentClassName equals that. We're not actually getting it, the className. We can say if currentClassName equals equals cool. Then we can say, and we'll make it cool red, or we can say else space, and just name it cool. Let's close this, File, Save. If it is cool, changes to cool red. If it's not, changed it to cool. The way it's transitioning is it's transition background color. We can change this to two seconds, and when you add it, it's transitioning. Super cool. Let's refresh, Click Me. Fantastic. It changes to red. Click Me again, did it change? No, it didn't. I wonder why it's not changing. Here we go. We've got if else statements, but then we've got it at the bottom here, we're just sending it to cool red anyway. I'm just going to remove that. Let's Save it again. Refresh, Click Me. Goes to red, great. Click Me, goes to green again, and you can see what's happening here. The class name is changing. Now you can change classes with JavaScript we're at, and that clause can just do incredible amounts of things. It can change size, it can change your capacity, it can rotate. It can do crazy things. You go from left to right. It can display, and then it can hide. It's just ridiculous. Just check this out. We can say, okay cool. Let's put a display of none. Cool. Display block. Cool. Let's Save this. Let's see what happens. It's gone. It's there. It's gone. It's there. It's pretty cool. You can see it's not transitioning, and that's because it's just displaying block and displaying none. What we can do there is we can set the visibility to hidden, and then the visibility to visible. Let's Save that, and then pretty cool. That's how you can do some fairly cool stuff. But next, it's time to build our rocket, and our rocket launch sequence. I'm excited. 12. Planning first :): What I'd like to do is just do a little bit of planning. I want to make a rocket launch sequence with JavaScript. Basically I want the rocket to go from there when the user clicks the button, launch that rocket into the air, and it gets a bit of flames underneath and it goes. So what I do is create like a bit of a storyboard. Basically start over here, the rockets on the right and the interface on the left, then they click ''Go'' and then it starts counting down. There's an abort link or abort button to take the user back to stage one. The rocket still pretty stationary. Then it gets to zero and it says liftoff. The rockets gets some flames underneath and starts to take off, and at some stage it says, " Well done. " and offers me a chance to do it again. The rocket about this stage is cruising, it's out of the atmosphere. It's doing so well. There's no chance of failure. But in between that stage, something could go wrong. There could be an explosion, there could be all kinds of stuff going on. Again, we must do it again. So that button will then take us back as with that one all the way to beginning to do it again. All right and that's my planning. 13. Let's write the basic HTML and CSS for our rocket: Now that we know how we want our rocket launch sequence to go, let's open up the project and drag it into sublime text. Now, what I'm going to do is create a new file, or File New, and then I'm going to save it as rocket.html. I'm going to save it in JS-rocket folder. Rocket.html, and they're going to quickly type some HTML here. Fantastic. Then we say Rocket Launch sequence. I hope that's how you spell sequence. But it's not what we're doing here. We're not doing a spelling lesson, we're doing a JavaScript class. Now, what I'm going to do here is I'm going to start writing my HTML for this rocket sequence. I've basically got two divs. One is on the left, one is on the right. I'm going to call this one left, and I'm going to call the next one right. Let's give this one a bit of space too. Then the left is going to be various amounts of different divs, and on the right is going to be one rocket and maybe some ground. What we're going to do is we're going to say, let's go div with a class of rockets. Then over here, we're going to say div with a class of state1. I'm going to close that div. Now inside here, I'm going to give it a heading 1, and say JS Rocket Launch. Then we're going to have a button, href, say Launch. I'm going to give it a class of button, and what I'm going to do here is I'm going to say on click start countdown. There we go. We've got our first state 1, and let's see how this looks. I'm going to save this, and I'm going to open up rocket HTML inside Google Chrome, click Launch. Let's open up our console. It's quite nice having it at the bottom, sometimes on the side, that's great too. But it doesn't now start to count on us. That's okay. I'm just going to start styling this page. I've got my left, I've got my right, this is where my rocket is going to be, this is where my interface is going to be. All right. Inside my CSS, I need to create a CSS folder, so I'm going to set my href as my link to CSS/rocket.css. Save this, and in my CSS, I'm going to say say File. New file, and let's just go left. I'm going to save this rocket.css. Dot right. Then what is the button going to look like? Then what the other A going to look like? We don't have any other As, but we know they are coming. What I want to do is, on the left, I want to set this position to be fixed. Fixed is awesome. I'll show you what it does. I'm going to set the background color to, let me look for a really cool background color. HTML background. Let's set it to aquamarine. Position fixed, and I'm going to give it a 50 percent width and I'm going to say height, I want it to be 100 percent. Then I'm going to say top zero, left zero. This means that's going to be 50 percent of the width of my browser window, height is going to be 100 percent. The top is going to be zero and the left is going to be zero too. Let's save this, let's see what happens. Fantastic. There we go. You see I can't really scroll that much, and that's what happens when you set something to fixed. So I'm just going to copy this and paste it in the right one. Instead of the left, I'm going to set the right to be zero so it's going to stick to the right. I want another color for this one, so let me change this color. I want a blue, so maybe sign will work. Alice blue looks nice. So I'm going to change that to Alice blue and refresh. You see I've got my two panels now, left, right, interface here, rocket here. The next one I want to do is, let's style my rockets. I'm going to set this guy to position fixed to, maybe I should say position absolute. Now absolute is really cool because it goes, where's my parent? So the rocket, which is here, will go, where's my parents? And it goes right, right is my parent. Then it goes, cool, I will position myself according to where that guy is. That's the wrong style sheet. My rocket is in position absolute, I'm going to set its left to 50 percent and I'm going to set its bottom to 20 pixels. Then what I'm going to do is I'm going to give it a width of 20 pixels and a height of 100 pixels with a background color of blue. Because cool rockets are blue. Refresh, and there's my rocket. That little blue pencil. Now what I want to do is actually I want to put some ground on this. Just go div class of ground, and I'm going to save that, and then my style sheet, and I'm going to put some grounding. I will say background color is green, and say position absolute, and then I'm going to say bottom zero and left zero, and width I'm going to say 100 percent, and height, 20 pixels. I'm going to save that. Let's see what this looks like. Fantastic. Now, we have a launchable rocket. We can make it look even better just now, but this is a JavaScript lesson, the JavaScript class. So we're not too concerned with how it looks, but we can make it look pretty cool just now. All right. Now what I want to do is the rockets, and once you add a clause, I want to say rockets.flying, and I want to say bottom, 1000 pixels. I'm then going to put a transition on this of bottom, say 1000 milliseconds. There we go. I'm going to save it, so rocket.flying. Then we can inspect this up here. I've got the ground, got the rockets. Now if we put this flying, what happens, nothing. It's because we haven't refreshed. So let's refresh and do that again. Flying. Did you see that rocket fly? We may need to slow that down a little bit. So let's put an extra zero in there, File Save. Flying. There we go. The rocket is flipping flying. 14. Let's add the JavaScript for our rocket: So what we're going to do now is we got to put different states on to make this rocket fly. We're going to press Launch, we want the countdown, when the countdown is finished, we want to say lift off, we want the rocket to carry on going up and then we want to say, well done, or we want to say failure and try again. Let's give this a go. So we've got our five states that we need to put in here. I'm just going to copy and paste this and just say state2. I'm going to give this an id of countdown and it's going to start at 10. Then we're going to say button, startCountDown and we can say Abort. We can see what this looks like. Looks fairly similar, state1, state2 they come underneath each other so if we look on the left over here state1, state2 they come underneath each other. So we want another one it's called state3. We don't want to countdown what we want now is we want to say Lift Off. There's going to be no buttons there. The next one we want is we want a state4 and this is going to say, Well done without an assurance. Instead of abort we're going to say, doItAgain. Then our last one it should be state5. I'm going to say, Oh No, doItAgain, fantastic. Then I just want to say Try again here. Let's save that command S, control S, or you just going to File, Save. Now, what we have here is we have a bunch of different states, but I only want each one to be there when it needs to be there. Not all there at once. So what I'm going to do is inside here, I'm going to say.state1 and I'm just going to copy that a few times 2, 3, 4, 5. I'm going to say display: none. So what this is going to do is it's just going to hide them until I need them. So File, Save and there we go. They're gone until I need them. Then what I can do here is I can say when the class of the body changes to something else, then we can start changing it. When the body goes body.state1 we can then say state1, display, block. I'll just write on one one it will be easier. Using as state2, state3, state4, state5. So we have state2, state3, state4, state5. 2, 3, 4, 5. Otherwise we can say all of these actually just display: none. Display: none, display: none, display: none, display: none. Instead of having interact display: none so many times I'll just go, all of them display: none. So save it there. Let's see what happens. There is nothing there which is okay. What we need to do is we need to change our body class to state1. We save that, we refresh, and something broke. What happened here is that state1 is display: none. So this is now problematic. What we need to do is we need to think about this, how do we actually change this? We can actually change this to body-state1. We can copy that. We should save this and change this body-state1. File, Save. Things back the way they away. Now we can go. Class body-state2. There we go, body-state3, Lift Off, body-state4 fantastic, body-state5. That's great. But now I'm thinking, wow. These states so what happens if these clicks can just change a state? So I can go changeState to two, sounds pretty good. The abort button changeState back to one, cool. Do it again, changeState back to one because we're going to go back to state1. Then do it again, changeState back to one. But how do we get to distinct three? Well, we haven't written any JavaScript yet. So you'll see here remember you got a console changeState is not defined. We don't even have any have any JavaScripts inserted here. Let's put some JavaScript in here. Script, fantastic. What will the source be? The source will be js/rocket.js, fantastic. Now on our JavaScript folder let's go to new, let's save this as rocket.js fantastic. Then now we can actually, I'm going to close this. We can start interacting with things so let's do some quick JavaScript stuff. We can go var changeState is a function. Then we can say, state. What are we going to do in here? I'm just going to save this but now actually I don't know how to do this. I want to go and change the body class to whatever I'm going to say let's search this, JavaScript how to change body class. Let's see this, document.body.className equals whatever. Cool. I'm just going to copy this, and I'm going to go here and paste it, document.body.className equals body-state1. I'm going to pause through numbers. If I go and copy this, and I'm going to say, "Cool, let's change it to body-state plus state." There we go. Let's see if this works. So File, Save, Refresh here, Launch, there we go. That just changed from state. Abort, back to one, Launch. Fantastic. We have some stuff going on. Next thing, how did we get from the countdown to counting down? Let's do this. If state equals 2, we're going to start counting down. The way we do this is we've got the countdown ID, so I'm just going to copy that. I'm going to say, document.getElementsById('countdown').innerHTML. Doesn't look right. What I can do here just to test is I'm going to copy this, and go into here and I'm going to paste that ('countdown').innerHTML. There we go. I don't know why sublime wasn't picking it up. InnerHTML equals, and I throws a function maybe but it's actually just a property, and we're going to say, nine. Let's save this, and let's just see if that works. We Refresh here, we press "Launch", it goes to nine. But I want to actually countdown, so what I'm going to do is I'm going to create a timer; var timer equals null. I'm just going to set it to null, which means nothing from the meantime, just so that I know that I have a timer up here. So I'm going to copy this and then I'm going to say timeout equals setInterval, and then I'm going to put a function in here. We'll say go every 1,000 milliseconds. What this is, it's a timer. In a given interval, 1,000 milliseconds, it runs a function. It's basically passing in the states or passing the parameter, except I'm passing in a whole function and I'm saying, do this every 1,000 milliseconds, which is a second. Then I'm going to say document.getElementById innerHTML equals, and now what am I going to do? Now I'm going to say var countdownNumber equals 10. I'll say equals countdownNumber. Then we'll say countdownNumber equals countdownNumber minus 1. That means the next time it runs, it's going to be one less. Let's see if this runs. We Refresh here, Launch. There we go 10, 9, 8, 7. You see there's a bit of a delay, but that's okay. Then it goes into minus. We're going to sorted that out next. What I'd like to do here is to go, if countdownNumber is smaller than or equal to zero, and then you're going to say clearInterval. I'm actually going to stop the timer. I'm then going to say changeState to three. But now, also, maybe I shouldn't put the clearInterval here, because what happens if we want to import the timer? What I'm going to do is I'm actually just going to put the timer up here. If there is an interval on the timer, it's going to clear it. Then I'm going to go else if state equals, equals three, do something else. But let's just see if this works. Well, it's good to 79 already, taking long to explain this. We'd click "Launch", 8, 7, 6, 5, 4, 3, 2, 1, lift off. Cool. So that works. My rockets isn't going up though, so we're going to have to change them [inaudible] or I can, so rocket.flying. Maybe what we need to do is to say body.body-state3, rocket. Cool. Let's save this. What I'm going to do is I'm just going to increase this to 500, just so it's a little bit faster. Refresh it, click "Launch", and let's see what happens. We have a rockets. If you've been following along and typing with, congratulations, you just launched your first rocket. Freaking fantastic. Then we're going to say, "If it's good, then show the success message. If it's not good, show the, oh, no message." We're going to say, var success equals setTimeout, which is lack of set interval, except it runs the function in a certain time, not over and over. Inside here, I'm going to say, cool, run it in 2,000 milliseconds, so in two seconds. Then I'm going to say, var randomNumber equals Math.random. Let's show off method random is real. We can always go here and go to Math.random. Let's do it again to see if it is truly random. Cool. It's not what I wanted to set method random, I just want a number from 0-10. So what I'm going to do is I'm going to say, multiply this by 10, which is great. But then also we want to round it, so I'm going to say Math.round. I'm basically going and parsing it in a number. I'm rounding a number; that number is going to be a random number and multiply it by 10. There we go. I'm just going to copy and paste that. Random number is that number. Then I'm going to say, if randomNumber is bigger than five, do something else. What I'd like to do if it's bigger than five is this would be a success. Then on the [inaudible] , I'll say changeState to four, else, changeState to five. Let's see what happens here. I also like to log this, just to make sure that it is the right number. So console.log, randomNumber, so let's say text plus randomNumber. I can also just say randomNumber, randomNumber. Now, this random numbers text and this is actually going to put the value of this variable in here. Let's save this and see what happens. Launch, 10, 9, 8, 7, 6, 5. Well, can't count that fast. Woo, goes up. Okay, well done. Do it again. Why is our rocket coming down though? The randomNumber was nine, fantastic. Let's do it again. The key here is that it's actually changing the body state. So if it's four, there's a bit of an issue. So what I'm going to do here is just go, Control C, Control V, and change that to 4,2, so that it's always going to carry on going up if it's time to go up or if it's a success. Let's save this. Refresh, launch, and it comes down. If we go abort, it's going to be going back there, but why did you go back to two? We have to cover that. Oh no, try again. So randomNumber was five. Is that correct? If it's bigger than five, it's success. So if it's five, we'll allow it to failure. What I want to do here now is to go, countdownNumber is 10. So whatever happens, it must be 10. If it's state2, we can count down. Also if it's state3, we can say, let's see if it's a success or a failure. Let's try this again. Launch. Well done, do it again and there we go. We have a successful rocket launch. The rocket comes back down. You see it as a transition there, we can change that if we want. So if we say body-state1, rocket. We can say transition, none. Let's save that. Let's go back to Chrome, refresh, launch, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, lift off. Fantastic, try again. You see what happens when I click "Try again"? It just went straight back. Launch, there was something a little bit weird there. It didn't start straight away. So what happened there is that even though the countdownNumber went to 10, the actual HTML didn't. So I'm just going to copy and paste that right there. Then what I'm going to do here is I'm going to put this countdownNumber before the actual HTML changes, just so it doesn't stick on 10 too much. Let's refresh this, launch again. You can see how many times you come back and forth and change things. It's not just like clear-cut, like do it once, never touch it again, do it again. So that's feeling a lot better. Now, of course, we can make this thing look amazing. What does your rocket going to look like? Oh, I don't know, try again. I guess if you did that, your rocket would explode and eventually come back to the bottom. But yeah, how's your rocket going to look? How is your interface going to look? What does this look like? Lift off. Oh no. You can see here, 7, 5, 2. Let's try again. Lift off, oh no, again. Let's try it once more, see if thing is a success. You can see this is like it's random. JavaScript is generating random numbers. Terrible. But anyway, open up, go to desktop and you're going to want to make sure you're on gh-pages and then you'll say, "Made my rocket." Come into gh-pages and then you want to synchronize. All that synchronizing. Let's go to GitHub, github.com. Let's go to our js-rocket repository, make sure that we're on the gh-pages branch. Go to our commits, made my rockets. Now, what we want to do is to go to mrra-screencasts.github.io/js-rocket. But if we just go here, it's going to take us to that old page. So actually, we want to go to rocket.html and ta-da. Is it going to work? Yeah, online for all to see. Oh no, try again, lost one. Let's see if it works. Last one. Oh no, our luck is not good. So you can change that number to something else if you really want. So you can say if it's bigger than one, then it's a success. It's got a really small chance of failure. That's our rocket, you can stop here, you can share it. The next video I'm going to show you how I made my rocket look cool. 15. And now we make the rocket look pretty!!: We've got our rocket to launch, and now we're going to make it look cool. I've got a couple of elements that I'm going to put in. I've made a bunch of images. Here's my ground and here's my rocket. Here's my rocket in state 2 with a little bit of a thrust, and this is my rocket in full bow with a lot of thrust, lot of ness. Then that's what happens if things don't work out, it goes boom. Then I'd also like to add a "I can't wait" and a "I'm nervous" to the little guy that's in the rocket. See him smiling. Let's open up JS rocket. What I'm going to do here is I'm going to create a new folder and I'm going to call it IMG, and that's where I'm going to put all my images in. So I'm just trying to create a new file in the Window, go to documents, go to desktop. I'm just going to drag one of these images into IMG. Fantastic. Okay, I can't really remember what our rocket look like. Let's just see. Let's drag in rocket.html into Google Chrome. While we're waiting for that, let's just open GitHub desktop 2. Okay. It's very boring. I'm going to see if the CSS work. So let's make it look a little bit better. I'm going to start with the rocket and then I want to focus on the interface. Okay, so let's go into here. Let's open up our CSS rocket. Just going to decrease the font size a little bit. So we've got the rocket in the fused little states, but I just want to see what size these images are. So rocket state 1, 143 by 272, and I made them all the same, so it'll be easier to work with. If you just copy that, and I'm going to go here, and I'm going to set the width to 143 pixels and heights of 272 pixels. All right, and let's see what this looks like. So let's save this, refresher. Yeah, it looks pretty good, but it's not in the middle. What I like to do here is just put a negative margin, so I'm just going to say margin left, and I'm going to say negative 272 divided by 2, 136. Fantastic. What it does is it puts it in the middle, but then you still got all the width on the one side. So then you need a margin left of half of the width. Now I actually did the margin left of half of the height. So let's try that again, 143 divided by 2 is 71.5. So that's what I'll do, 71.5 pixels. Background color. I actually don't want a background color anymore. So what I'm going to do is just use background, and yes, I want a URL, and then here I want my image folder. Because the CSS has a little sub folder, I'm going to go one up and then I'm going to go and find the images in the image folder. Okay. Then what did I call it? Rocket state 1, state1.png. What's really nice about this background property is that we can say, "No repeat," which means that the background doesn't repeat, and I wanted that 0-0, which means the x position is zero, the y position is zero. You can set that to 10 pixels, minus 10 pixels, whatever you want. You can also say top and bottom or center and center. For me, it doesn't really make much of a difference because my width and height is exactly the same as my background's width and height. So I'm just going to keep that at zero and zero. File Save. Let's see what it looks like. Okay, so there we have my little rocket, it looks amazing. Is a little bit off the floor though, which frustrates me. So what I'm going to do here is instead of having a bottom at 20 pixels, I'm going to have the bottom at zero. I think I might actually have to have a negative bottom. Okay, so let's see what I have to do to get this to work. We could go back and forth from Editor to Chrome and refresh all the time, but wow, that could get really laborious. So what I'd like to do here is just go to bottom minus 10 pixels. Does that work? There we go, minus 13. Minus 13. Fantastic. Save this, cool. Refresher. Here we go. Okay, now the next thing we need to do is change our background image when it starts to launch. What I'm going to do here is I'm going to say [inaudible] , I'm going to do comments. Now comment in CSS, you have to use these comments. Whereas JavaScript, you can use comments like that, and CSS doesn't work. So I'm going to say here is rocket bg image. So state 1 we've sorted, but now state 2. What is state 2 going to look like? Then I also want the state 3 and upwards. So state 3, state 4, and then state 5 is, oh, no, I'm going to have to do something a little bit different there. Okay. Let's just take this one out for now. I'm just going to cut this so that the crowns are above here, just so there's some clear differentiation. Okay, so state 2, I'm going to change this to background image, and I'm just going to copy and paste this. Because it's background image, I can't put "no repeat" on, and I can't set the background position. All I'm changing is the background image. I was state 2 that, I'm going to change it to state 2 and I'm going to make sure that's a GIF or JIF, however you prefer to say it. Okay, I'm going to refresher, launch this. So you see that little thrusters are coming out. Fantastic. Then it lifts off. Okay. For state 3 and state 4, we're going to change this to state 3. Fantastic. Let's see how this works. Voila. We have a thrusting rocket. Then if we do it again, it starts back over there. That's fantastic. Now, we need to do the state5. I'm just going to copy and paste this again, and states. What did I call it? boom.png. Now, it's got a different width and height so what I'm going to do is copy this, I'm going to change it, width 209 pixels, with a height of 200 pixels. Now, because I've got this margin-left of 71.5, I still want to center it, so what I'm going to do here is, it's got a width of 209 so that should be negative 104.5. I could work that one out. Let's "Save" this and let's open up our rocket.js. We're going to go over here to the randomNumbers, if it's bigger than one, it's going to be a success. What are the chances that it's going to fail? Pretty slim at the moment, so I want to say if it's bigger than nine, which means that it's got a high chance of failure. But that's great for now because I wanted to test my boom image. I'm going to "Save" this, go back to Chrome, "Refresh" this. What does Sublime? No, I don't want to purchase it now, thanks though. We "Refresh" this, "Launch". Fantastic. Boom. All righty, so that works. "Try again". You can see how we're having a bit of fun here. That's on my images, my rocket images. I would like to change this back to two maybe since it's still got a good chance of success. I'm going to "Save" this. Then what I'd like to do is change the ground, some color, so change that to background and the url. I'm going to say, let's go to find in images directory. I think I call it ground.png. Let's just go see that ground.png, and it's 723 by 15. The width is fine. But what we're going to do here is we're going to say, no-repeat but the x is going to be center. I just can't spell center, sorry, center center, and the y is also going to be center. It's always going to be in the center so that the rocket will sit on it exactly in the middle. Height 20, that's okay, but let's change it to 15, it'll probably work better, and let's "Save" that. It looks quite nice, but I wanted it to be a bit higher again, so x will be center, y I'm going to change this to zero, so it'll sit at the top, then I'm going to change this back to 20. Let's see how that looks. Still not great, so let's change the ground's bottom position to 10 pixels. I'm going to copy that. Then the bottom, I'll put in 10 pixels. "Save". Now, we have the ground, we have our rockets looking really nice. It's looking cool, some little guy. But now I want to get him to be saying things as the countdown is going. We'll have to change from JavaScripture and change some CSS. It's inside our rocket.js when the countdown is going over here. I can say, if countdownNumber is whatever, you can change the states. What we can do here is we can say, if countdownNumber equals five, let's do something. Maybe we can say, be nervous. Then we can also say, countdownNumber equals three, we can say, can't wait. What I'd like to do here is I'd actually like to change some classes. If you see over here, I want it to appear somewhere over here and somewhere over here, so I'm going to have to put in a new piece of HTML. This is on the left, the one be on the right, the rockets over here, so I'm going to say, div I want to give it a class of "nervous", and I want to do another div with a class of "can't-wait". I'm going to "Save" this and I'm going to copy nervous and can't wait. Let's copy that. That's going to rocket.css. Over here, say nervous, I want to give it a position absolute again. Just for now, I'm going to say top 100 pixels and left 100 pixels. The background, it's not going to be a background color, it's going to be an image again, so say url, and we say img/, I'm going to call it nervous.png. It's going to be no repeating, and it's going to be positioned x at zero and position y at zero. Now, the width is going to be 223, the height is going to be 100. Fantastic. Sorry, I did something wrong there. We shall see how this works. I'm going to save this. Rocket JS, I'm also going to save. You'll see that even though there's nothing in here, it won't affect anything. I'm nervous, that looks actually really good, depending where this is. But for now, it's probably best to be at the bottom. So I'm going to inspect this and I'm going to move this to the side, just so we have a good understanding of where this is. See if there's not much space here, but that's okay. What I'm going to do is I'm going to say this nervous div actually I want it to be from the bottom. So I'll change top to bottom, and I'll change it to 100 pixels. That looks about right. So bottom 220. I'll go back to here and I'll change this bottom to 220. Let's save that. We would need to sort out it's left position. The left, 100, we can go 50 percent again. Fifty percent, that's great. Then I'm going to go to margin-left. So I do plus, or I can just press Enter here. Margin-left, this is going to be a negative values, so negative 20 pixels. So negative 180 looks right. So margin-left, paste that. Cool. Let's save this again. You can press this, refresh. Fantastic. It means it's probably going to be in at the same place no matter where we are on the screen. That's great. That's an amazing thing about absolute positioning. The next thing that I need is I can't-wait. We'll do exactly the same thing. Where it says cant-wait, I'm just going copy this and I'm going to paste this. I'm literally going to copy and paste all of this and change this to cant-wait. I want to see how big this is. So 206 by 65. Now we'll just have to see how this works exactly. The bottom probably going to be the same thing, left, 50 percent. I'm just going to comment this out. We can go command forward slash, which shall be your comment, or you can tap your comments manually. So File, Save. Let's see what this looks like. Can't wait. It actually looks really good. I'm going to remove this margin left. Then we've got a cant-wait and we've got I'm nervous. What I'd like to do now is display this as none and display this as none. When I add a clause of cant-wait.show, I want to display it as block, which is its natural display type. If we add a clause and show to each of those, it should work. Let's refresh here. Inspect the element. We can see on the right, here's I'm nervous. If we add a clause of show, they'll be, "Hey, I'm nervous," and if we add a clause show onto cant-wait, they'll say, "Hey, I can't wait." If we take that away again, you'll see that it's going away. So that's what we're going to do with JavaScript. We're going to dynamically add those clauses of show. If countdownNumber equals five, we're going to say, get this element. So let's give this an ID of nervous and ID of cant-wait. Let me save this. I'm going to say document.getElementById. We're then going to pass in, let me say,.className = nervous show. Let's copy and paste this over here. Let's just do cant-wait and copy that like so. Let's save this and see what happens. Five, three, fantastic. But now we don't want those things to be there for all time. What we can do here is say else, copy it, just change to nervous, and else, just change to cant-wait. Now what we can say is, if it's countdownNumber is bigger than three, and countdownNumber is smaller than five or smaller than six, but we can say smaller or equal than five. What does that mean? It's bigger than three, so it'd be four or to be five. So maybe we can make this six and countdownNumber, let's just leave it for three. We should refresh here. Launch. I'm nervous appears, goes away, can't wait, that was very, very quick. So let's change that again. Maybe we can change this to seven and this to four. It gives us a range of five, six and seven. Let's just do the exact same thing here, except it needs to be bigger than one and it should be four here. So it's three and two and four. Four or three, two. Let's save this. Go back to Chrome, refresh. Launch it. Well, yeah, there we go. That's our rocket. Our rocket in style, we've got some extra elements going on based on the count down. So I have some fun day. It's really, really cool what you can do. I actually just want to make this look good. So the rocket HTML, all of these are code, state 1, state 2, state 3, state 4, state 5. They all look pretty much the same. So what I'm going to do here is I'm just going to call it an interface. I'm going to give it a class of interface, just so I can style them to all look exactly the same. I'm going to save this, command S, or Control S or just save it there. Now this interface, although it's all on the left, so I'm just going to put just now,.interface. Now how do we want this to look? I want everything to be center aligned first of all. So I'm going to say text-align, center. I then want to give it a padding, say of 20 pixels. Awesome. Now you see what happens here. That's pretty interesting. If you can figure out how to take those away when I click Abort, good on you, but I'm going to style the left hand side for now. I want the big buttons to be big. You can see here where it says button. The rest of them are actually all buttons. I don't want them all to be buttons, I want the launch to be the button, and maybe they try again to be a button. Do it again, that's cool. Let's just take off button on the abort and save this. That's our interface. Now I want to change the button, so I can either put a.button or I can just leave it as button, but let's do a.button. I'm going to say display inline-block, and I'm going to say background-color let's make it white, lets make the text color black, and let's see what that looks like for now. I'm just going to save it, refresh. Looks okay for now. I'm going to give it a padding of 40 pixels. I'm going to say text-transform, uppercase. Cool. Let's have a look and see how that looks. It's quite a weird-looking button, so I'm going to say 20 pixels at the top and 40 pixels around the sides. That looks good. I'm going to say text-decoration, none, because I don't like to underline, and then I'm going to give it a border-radius of 10 pixels to make it look like a button. Let's see how that looks. Much better. But I don't like the fact that it's all serif fonts, I want sans-serif font. I'm going to change this and say body, font-family, and let's change this to Helvetica or Arial or sans-serif. Save that. Looks much better now. The interface, the button is over here. I now want to add a hover for my button, and here I'm just going to change the background color. What color should I change it? Maybe I'll change just the color to red. I want it to look not so jary, so I'm going to say transition, and then say color, 300 milliseconds. There we go. Click it. The abort is still there. Lift off. You can see my button is here, still in the center. Let's try again. That's how to style your page. Make it as amazing as you want. If you want to try some different things, if you want to try some amazing and cool things, give it a go. I'll be here to help you. But this is how you make things look cool, this is how you make things interactive. I hope you've learnt a lot. There's one more thing that I need to show you, which I think is quite cool, and then we're going to synchronize it to GitHub. When somebody rocks up on js-rocket on my local host, it gives me this thing, which is like, "Oh my goodness, what is going on here That's just a bunch of files. You can actually click index or rockets. If we go to index, that's what it looks like. But remember, on your GitHub URL, it just takes you straight there. You're not even at index.html. In this, I would like to add a link that redirects to rockets.html or automatically goes there based on a timer. Let's go to our index.html, and what we're going to do here is we're going to say a, go to to rocket.html, go to the rocket page. Let's save this and let's see if that works. Yes, it does. That's one thing. What we're going to do here is just say p, you will be redirected soon. I File, Save. Let's go into our script.js and let's say, at the top here, set timeout. I'm going to put a function in here, and we're going to say, I don't know, two seconds. What we're going to do here is we're actually going to change the location, so if we had to test this in our console, we can say location.href equals rocket.html. Just like that, and it'll change it. What we're going to do is we're going to set that in the timeouts, so after two seconds it's going to redirect us. Location.href equals rocket.html. Let's save this. Let's go back here, refresh, and after two seconds it takes us to our rocket launch where we can have some fun. Oh no. Then once you're done with that, you open up your GitHub pages, make sure you're on the js-rocket's repository, makes sure you on the gh-pages branch, not the master branch, the gh-pages branch, and then say, made our rocket cool with drawings etc." You commit it and then you synchronize it. While its synchronizing, which can take a bit of time. Let's open up a new tab and go to github.com. If you're not signed in, sign in, then you go to the js-rocket repository, you go to your gh-pages branch, go to your commits. Made our rocket cool with drawings etc. Once that's happened, let's refresh this GitHub page and let's see if this works. Fantastic, it works. Lets see if everything is grafting here. Looks like it is. You'll see that there's a couple of flashes as the images change, that's completely normal, but it's because your browser hasn't cached it. If we try it again, you'll probably see less flashing. Yep, no flashing. Share your rocket creations in the project gallery. I hope you've learnt a lot. 16. Thank you, and next steps: It's the end of the projects. I hope you've learned a lot. I know it can be quite overwhelming trying to learn HTML, CSS and JavaScript. They're all so huge, and I feel JavaScript is probably the hugest because it can manipulate HTML and change CSS at the same time. I hope you've had a lot of fun. I hope you've enjoyed it, and I really hope that you continue writing JavaScript, HTML and CSS, and even if you do two lines or five or 10 minutes every single day, your brain will start to remember it. It won't be such an overload, so give it a go, give it a try. We've understood what properties are, what methods are. We've understood how to write JavaScript, the syntax. We've built a rocket, we've launched a rocket. We've learned a bunch of little things like, if statements, we've learned about functions we've learned about variables, chippers. There's so much more to learn about JavaScript. We've also learned how to use Sublime Text with JavaScript. We've learned how to use the Console in Google Chrome. We've learned how to use GitHub pages. We've learned how to use GitHub, how to create repositories or projects. I'd really like you to share your projects with people that you know. Give it a share, go to your project gallery, post links, and remember that the Google, is your friend. If you're stuck, if you have an issue and you can't figure it out, Google it. There is so much stuff out there. The whole Web is built by people who know HTML and JavaScript and CSS. They will be able to help you. If that doesn't help, ask a real human. I am a real human, so ask in the forum on School Share. Other people may be able to answer you, but I'll certainly be able to help you if nobody else can. I hope you've enjoyed. Bye for now.