Javascript: Gentle Introduction for Beginners

1. Welcome & what we will be building.: Hi, my name is Chris and a big welcomes my JavaScript calls for beginners. If you were looking at stake your HTML and CSS skills to the next level, then you come to the right place. This course will give you the knowledge and confidence to add interactivity and cool features to your websites. Along with the ability to build standalone applications, we'll begin with the basics including understanding JavaScripts and what it is used for, where to include JavaScript in your websites, datatypes, and how to get JavaScript displayed on your web pages. We'll then move on to cover JavaScript essentials such as variables, arrays, functions, strings and string methods, and JavaScript objects. All the sections will have various many challenges to get hands on experience and make sure you understand exactly what we're doing before moving on. Once you have a grasp of the basics, we will then introduce you to more techniques such as JavaScript, math and dates, control-flow and loops, how JavaScript can manipulate the DOM, and of course many challenges along the way. Then finally, at the end of this course, you will build in this exciting full project, you will have the chance to build a fully functional business card application which takes the user's inputs and creates a business card using JavaScript. By the end of the course, you'll have all the required skills to complete this by yourself. This course is designed to be beginner friendly. However, JavaScript often works alongside HTML and CSS. So basic knowledge of these languages is definitely recommended. Thanks for your interest and I look forward to you joining me on this exciting cause. 2. What is Javascript & what do we use it for?: In this video, I just wanted to give you a overview of what JavaScript is and what exactly JavaScript can do. First of all, let's take a look at what is JavaScript? JavaScript is a programming language which we have traditionally used to make web pages interactive. When you're browsing a website and things such as a pop-up box appear or if you hover over a menu and you get a dropdown with different menu links, basically a lot of the features which happen without refreshing the page, that's all JavaScript. JavaScript can also be used to create standalone applications. Traditionally, we've used JavaScript in web browsers and websites. Now JavaScript is become a more and more popular, finding more uses. JavaScript is now being used to create full applications, both the front and the backend. Nowadays it's really easy to make a full stack application with just knowing one programming language. I mentioned that JavaScript is used to make web pages interactive and the reason that can happen is because JavaScript is built into and runs on all the major browsers. JavaScript even works when the user is offline. The fact that JavaScript is built into the major browsers and is a default script and language for web browsers means that JavaScript is here to stay and it doesn't look like it's going anywhere soon. The Java programming language is a completely separate language and it's not related to JavaScript. That's the basics of JavaScript. Now let's take a look at what JavaScript can do. We know that JavaScript can make web pages interactive. It can also change the HTML and CSS elements on a web page. It can change the colors, it can change the font sizes, it can change the text upon a click, various things like that. This is what's called manipulating the DOM. We'll look at the DOM more later on in this course, but for now, just understand that JavaScript can change elements on a web page, and that's exactly what we're doing now with this demonstration. We're manipulating the DOM by clicking on a button on the left, which is adding some text into an empty paragraph tag. Next, JavaScript can also validate data. As an example, if you fill in a form with your name and address, JavaScript can check that the information you provide is correct such as, it can check that there is no letters in a phone number, it can check if your email address is correctly formatted before it gets submitted, and it can even restrict how many characters is entered in a text field. This is all done in the browser without any help from the server. JavaScript can also be used to create full stack applications. By full stack we mean the front-end which the user can see and interact with and also the server side which is the backend of the application. Historically, JavaScript is just being used on the front-end in the browser, but now more and more applications are being wrote with JavaScript for the full stack, thanks to Node.js. As well as websites and applications, JavaScript is also popular to creating cross-platform games. We can write game once in JavaScript and use something such as PhoneGap to deploy your game to different devices such as Android or iOS. We can use JavaScript to patch holes in browser spots, so we can provide polyfills and feature detection to check if a older browser supports a certain feature. If it doesn't, we can provide a alternative way of dealing with that. JavaScript and HTML5 work hand in hand and JavaScript powers a lot of the new HTML5 features, such as the Canvas and of course, much, much more. JavaScript is becoming so popular now that there is new uses being created everyday. There's also new libraries and frameworks being created all the time for JavaScript. So it really is a great skill to have. Thanks for watching and enjoy the rest of the class. 3. Where to include Javascript: Welcome back. For this course, I would recommend creating a new folder on your desktop or somewhere you can access it. I'm going to create mine on the desktop, and I'm just going to call this JavaScript. Within that folder, we can save all the examples that we create on this course, and then you put them to hand if you need them for reference. Within the JavaScript folder, I'm going to create one new folder, and this is going to be called understanding-javascript. That's the name of the section on the course. The first thing we're going to look at is where to include JavaScript, so I'm going to create a new folder called where-to-include-javascript and save that. Then if you go to your text editor, I'm going to use Brackets, drag in the folder that you just created. We want to create a new page, so ⌘ or Ctrl+N, save this as index.html. To start with, I'm going to put in the basic HTML structure, and I'm going to use a plug-in called Emmet. Emmet is available for most of the popular text editors. If you're using Brackets like me, go into the Extensions, and then search for Emmet, E-M-M-E-T. I've already got Emmet installed, but if you don't, just click on the "Install" button. Emmet is a great plug-in which allows you to use shortcuts such as html:5, and then press tab, and that creates a new structure for you. But if you're not using them, it is not a problem. Just pause the video and type this out, and we can duplicate it for future videos. In the title, I'm just going to call it Where to include JavaScript, then just make a little space after the title. I'm just going to include the Bootstrap stylesheets, which will allow us to make our webpages look nicer. Just search for Bootstrap, and then go to getbootstrap.com, and then go to Get started, and I'm just going to include the Bootstrap CDN, which is the hosted link for the stylesheet. I'm just going to copy the top section, which is the stylesheet. I'll copy that, and then paste that into the head section just below the title. Now it's all set up, we can take a look at some different ways we can include JavaScript into our project. JavaScript can be placed in either the head or the body section. I'm going to get started, and we need to start by including some script tags, so type out the opening and closing script tags. All the JavaScript that we type needs to go between these two. To check everything's working okay, I'm going to get started with a simple alert(). An alert() is a pop-up box which appears in the browser and alerts a message to the user. Between quotes you can either use single or double quotes, it doesn't matter. I'm just going to alert, Javascript is working, and add a semicolon onto the end of that statement. If we save that and then go over to the browser, you can see a alert box pops up saying, "Javascript is working." This is your first time writing JavaScript. Congratulations, you've just got your first work in Scripter. Just click on the "OK" button to get rid of that for now, and head back over to the next page. We mentioned before that JavaScript works in both the head and the body section, so if we just cut the section, out with the head, and then paste it in the body section, and straight away, we got a change. We're being taken over to the browser, and again, exactly the same thing has happened. We've got the alert box popping up saying, "JavaScript is working," so that's all fine. Sometimes, when we've got a lot of JavaScript on the page, we want it be separate from the HTML just to make it more readable and easy to maintain. We can do that by adding the JavaScript into an external file, so create a new page in the project and save that. I'm going to call my file alert, and it needs have the extension of.js for JavaScript. Then, go back over to the index page, and we can link this external JavaScript in the head section. Again, we open up the script tags, then we need to tell the browser where find the JavaScript file by using the src attribute. Because our file is in the same level as the index page, we can just type in the file name, so that is alert.js. Now, we can get rid of the script tags because we're going to put these in a separate file, so go over to the alert.js. When we're working in an external JavaScript file, we don't need to include the script tags. We can just start typing the JavaScript. Create a new alert. Between the curly brackets and the quotations, we could put in our message again, Javascript is working, and the semicolon at the end. Save that, and save the next page, and go over to the browser, and then refresh. There we go. Great. The alert is working also in the external file. External JavaScript files are useful for storing JavaScript you may want to use on different webpages so you don't need to type the same script over and over again. You can just link in the file that you want to use on every webpage. As mentioned before, it also separates the HTML from the JavaScript, and makes your code more readable and maintainable. The external JavaScript link that we placed in the head section can also be placed in the body section at the very bottom of your page just above the closing body tag. This way, the HTML is not blocked by loading scripts so we can improve page load times. Just save that, and refresh the browser again, and you can see everything is still working. So that's three different ways we can include JavaScript into our project. Thanks for watching, and we'll see you in the next video. 4. Displaying Javascript on webpages & comments: Welcome back. In the last video, we looked at how we can use alerts to alert users to a certain message on the webpage. In this video, we're going to take a look at some different methods of how we can include JavaScript's onto our webpages. We'll also take a look at how we can include comments in JavaScript for making notes, and also commenting out our code when we no longer need it. If you go into the JavaScript folder and still in the understanding JavaScript section, I'm just going to select the first one that we created and then press Command or Control D to duplicate. Or if you prefer, you can copy and paste. I'm going to call this comments and display in JavaScript. Then open up brackets or your text editor. Then dragging the new file that we just created. Then open up the index page. We've got the alert box that we created in the last video. If you just get rid of that for now, so we don't get that popping up every time we go into the browser and then change the title, to comments and display in JavaScript. In fact, we don't need to use this external alert file. We can get rid of that. Open up your script tags either in the head or the body section. It doesn't matter. In the last video we looked at add in a alert to alert the user to a message. It doesn't have to be texts that we can alert to the user. We can also use numbers and mass. We can alert at 10, take away free. Then if we go over to the browser, you can see that the calculation has been performed and we get the results of seven. As well as the alert box is different methods we can use to display JavaScript. Another method is the console log. Instead of the alert, we can type in the console and we can send a log to the console of the same message. If you go over to your web browser. If you're using Chrome just right-click and go to Inspect Element and you can toggle between the bottom and side by clicking these three dots and then clicking on the dock side that you prefer. If you go down to the bottom, just make a bit more space. You can see there is the Console tab. So select the Console tab and you can see that the result that we just created of seven is appearing in the console. The console is often used for debugging rather than displaying alerts to the user on the screen. We can just keep it confined to the console. We can print things to the console such as error messages. That's really good for debugging. If we go back over to brackets, as well as the alerts and the console log. We can also use what's called the document.write. As you go through the course, you'll see the word document quite often. The document is the full webpage that we're targeting. I'm going to write to the page whatever is in between these brackets. Save and then refresh. Now appearing on the webpage we've got the results of seven. But we need to be careful when using document.write. If it's used after the page has fully loaded, it will overwrite the whole page with the result. So we need to be careful when using that. Again, as well as maps, we can include text such as hello and that will appear on the page are exactly the same. The last thing I want to show you is how we can manipulate the current HTML which is on the webpage. So I'm just going to go down to the body section and create some HTML. I'm going to create a h1 heading and just leave the contents blank for now. The h1 I'm going to give a id of title and average, copy the script tag. Just onto the bottom there. So we're going to use JavaScript now to manipulate the HTML which is currently there. There's actually no text in the h1 heading at the moment. But you can use JavaScript to put some text in there. Just as before, we're going to target the full document to start with and then use the dot. Then we're going to narrow down the full document to the element that we want to change, which has the id of title. JavaScript has a way of doing this called getElementsById. Notice that all the words apart from the first one begins with a capital letter to make it more readable. This is fairly standard in a lot of programming languages. It's what's called camel case. The full document is being narrowed down to an element which we are going to slip by its id. In brackets and then quotations, we can add the id that we want to target, in our case here its title, and then nova dot. We want to select the inner HTML and then equals and then we can put in quotes the text that we want to replace. So we want to display on the screen the text. In my case, when I put displaying JavaScript in webpages and semicolon at the end of that statement. I hope that makes sense. We said in a HTML element which has no text another minute. Then we'll select in the full document or the full webpage. Then we narrow it down to the id of title. Then we set innerHTML, which is the section in between. We set in our value to be equal to this text here. Let's save that. If you refresh the web browser, we've now got the text that we set in h1 heading. So this method is lot more commonly used and can be a bit safer than using document.write. Now we'll looked at four different methods of, including JavaScript, into our webpages. When I head back over to the text editor and take a look at JavaScript comments. Comments are available in JavaScript, just like many other programming languages. If you want to add some notes. With JavaScript, we want these notes not to be read by the browser. We can add a double forward slash. This is for the single line comments. We can make some notes such as set innerHTML. Adding comments can be useful if you take a breakaway from coding and you come back after even just a week or two, that can really help you remember what you were doing. As well as adding notes for yourself, you can also comment out the actual code in just the same way. You can see it goes gray. This section of code now won't be read by the browser. It's useful if you just want to temporarily remove a section of code without actually deleting it. So the two forward slashes are used for single lines. If you have many different lines or a block of code you want to comment on, you can use a multi-line comment, which begins with a forward slash and then the star and then ends with the star and the forward slash. That's the end of this video on comments on display in JavaScript. Thank you for watching, and we'll see you in the next video. 5. Javascript variables & assignment: Welcome back to this new section called JavaScript basics. I'm going to get started by creating a new folder in our JavaScript section, I'm going to call this folder javascript-basics. You can save all the parts of the section inside there. So disables a lot of typing. If we go back to the last video that we done in understanding-javascript and then copy the comments and display in JavaScript folder and then paste that in the JavaScript basic section and rename it. I want to keep mine in order by doing number 1, I call this variables and assignments. Then put this into brackets. There we go. Now we've got the index page from the last video. I'm just going to get rid of these comments for now, but keep the code in place and then change the page title to variables and assignments. We can reuse the code that we done in the last video. This section of JavaScript, it takes the empty level 1 heading and replaces it with some text. In this video, we're going to take a look at variables and how we can use them in JavaScript. A variable is a container for information that we can give a name to and the contents of that variable, as the name suggests, can change. Let's take a look at how we can use variables. We declare a variable by using the var keyword and then we put in the name of the variable next. I want to call my variable pageTitle and then the equal sign and then between quotations we set the contents of the variable. I'm going to reuse this text. Cut that text there, and then if we paste it inside the variable and the semicolon at the end, so we're assigning the text over to a variable called pageTitle. Now we can go back over to our innerHTML and rather than set that equal to the text, we can put in place the variable name, which is pageTitle, and save that. Now when we go back over to the browser and refresh, we should get the same message. But this time the message is stored into a variable and you can change this to be anything that you want. We change it to variables and then take a look and when we refresh, there's a change. Let's take a look at some more examples. I'm just going to comment this section. In brackets you can press command on forward slash and it will comment on all the section. We looked at creating variables with text or strings. We can also create variables with different data types, such as numbers. Let's create a variable with a name of number1 and set this to a number such as 10. You know when we're dealing with numbers as opposed to strings, we don't need to put any quotations around the value. We can just leave it as it is and a second variable called number2, and the value this time of 20, and as well as certain values to variables. We can also create a variable which is made up of variables added together. In this case, we can create a total and set that total to be the sum of variable number1 plus variable number2, and the semicolon at the end and then to check if those are all working okay, we can create a alert and then we can simply alert the total. Let's see, that's working with the refresh. Great. We got the total 30 appear in there, which is the sum of the two variables added together. As we mentioned before and as the name suggests, a value of a variable can change. Once we've declared a variable with the var keyword, we don't need to use the var keyword again to change the value. If we wanted to change the value of number1, this time we just type number1, and we can change its value to be something such as five. Now number1 is equal to five and number2 is 20. We should now get the results of 25. When we're creating variables, we can actually declare the variable first without setting a initial value to it. If we just set the variable and give it a name, it doesn't have to have a initial value. Then a bit later on in the code, we can then assign a value to that variable just like that and this will still work just as before. We've now got number1 five and number2 set to 10. We should get the total of 15, and we get 15, that's good. Let's just go back to the original example. When we're creating variables, there's certain rules that we need to follow when creating a variable names. When we naming a variable, it needs to start with a letter, an underscore, or a dollar sign, and variable names are also case-sensitive. We had a variable with the name of number1 and then we had a variable with the name of Number1, to start with a capital. These are treated as different variables. We'll just change the example, start it with a capital, we should still get the sum of 5 plus 10. There we go. The last thing I wanted to talk about in this video is the assignment operator, which is this equals symbol. In JavaScript, the symbol assigns a value to the variable name and it doesn't actually check if it's equal to. In JavaScript if we want to check if something is equal, we use a double equals. For example, five is equal to five and this means equal to, and we can also use the three equal symbols. If five and three symbols equal to five, this way checks if the values are equal value and equal type. In this case, the five is equal to five in value and the type, because they're both numbers. But five, the three equal symbols and then the five in quotations. This should be false because they're equal value but they're not equal type, because the five on the left is a number and the five on the right, because it's in quotations, is a string and it's considered to be a text. We'll look at a lot more examples to these as we go through the course, but that's it for now. Thank you for listening, and will see you in the next video. 6. Numbers & arithmetic: Welcome back. In this video, we're going to take a look at JavaScript numbers on basic arithmetic. If you go into the JavaScript basics folder and duplicate the variables folder from the last video, I want to to call mine number 2, numbers and arithmetic, then open up this in Brackets. There we go. In JavaScript so far, we've already looked at how we can assign a number to a variable, but JavaScript can do so much more with numbers. When we create a variable, we'll just delete the last section there and also the heading, we don't need that anymore. So far we've looked at assigning a number to a variable, such as this, but as well as assigning number 10 to the value of x, we can also put a sum in there, so 10 plus 5, and then we can alert the variable of x and open on the browser, so we get the sum of 15. As well as addition, we can also take away, we should get the value of 5. We can also use division, multiplication, so we change the subtract to a forward slash for divide, and we should now get the value of 2. In JavaScript, when we do a multiplication, the value we need for that is the star, 10 multiply by 5 should be the value of 50. Another interesting one to look up is the percentage symbol. This actually provides the remainder, so 10 divided by 5 would be 2, and there would actually be no remainder, so that value will be 0. However, if we change the value to be 9 divided by 5, 5 would only go into 9 once and would leave a remainder of 4, so we get the value of 4 alert it there. As well as doing the calculations inside the variable, we can set a separate variable, and we can do the calculations inside the alert. The alert can be x multiplied by y, and we should still get the same outcome. Refresh, and we get 45. One thing that's really worth remembering when dealing with numbers and calculations is the order of the calculation is really important. Take a look at this as an example. Variable x we'll set to 10 plus 5, which is 15, multiply by 2. We will read this from left to right, thinking 10 plus 5 is 15, multiplied by 2 equals 30, but that's not actually the case, so let's just alert x and see what happens. We'll get 20. The reason we get 20 rather than 30 is because multiplication and division have a higher precedence or higher priority than addition and subtraction, so the multiplication gets performed first. 2 times five is 10, plus 10 is equal to 20, so that's why we are getting the value of 20 appearing in the alert. But if we wanted to have the value of 30, one way we can solve this is by adding the brackets around the first section. This will add 10 plus 5 to start with, so 15 and then multiply by 2, save that and then refresh, and now, we'll get the value of 30. The last thing I want to show you in this video is how to increment and decrement numbers. Let's take a look by assigning the variable x to 10. Currently, if we let the value of x, we'll get 10, but if wanted to increment x, we could use x plus plus, and this increments the value by one every time. Now, if we refresh our browser, we should get the value of 11. If we were to do it again and duplicate that line, x would now be 12. This is really useful for things such as increasing a player's score every time they get a point, we'd have a variable called score, and then every time they get a point, it would be score plus plus. As well as plus plus, we can also decrement the score by one, just like that. Now, we're taking one away from 10 and we should get 9. That'll be useful for situations such as a player losing their life in a game or reducing the player's score by one each time. Thanks for watching, and that's the end of this video on numbers and arithmetic. 7. Javascript strings: We're doing well now on this section called strings. If we go into the JavaScript folder that we created and then into the JavaScript basics. Just as before, duplicate the last video and then rename it mine is going to be number 3 JavaScript strings and then save that and open it up in your text editor. Then the title just as strings and then you can delete the section between the script tags. In the previous videos we've briefly looked at strings and a string is basically a section of text. It can be a character, it can be a word, or it can be a paragraph. Let's start with the first example and we'll create a variable. The first one is going to be firstName and assign firstName in my case it's Chris, the semicolon at the end. Then a second variable of second name and assign this to be my second name which is Dixon. We can use single or double quotes it doesn't matter and we can then join the strings. I want to display these to the console so console.log. We could join them by joining the variable names. So firstName and then the plus and then the second variable name with the semicolon at the end. Then open up in the browser and then go to the console and you can see the name is just there. It's printed both the first and the second name, so it doesn't matter about the single or double quotes. Quotations however start to become important if we include them actually inside the string. If we were to have a quote and the quote had texts such as "my name is Chris," and we wanted the name to be in quotations we couldn't actually do that. Then you change the variable name to quote and let's see what happens with that. Then go into the console and you can see that we get a syntax error. We can fix up by going over to the string and instead the double quotes we can use a different type of quotes. Change that to single and then refresh and there we go. Again, my name is Chris and it's actually printed the single quotes. You can also do the same if you had single quotes on the outside, you can set the inner quotes to be double. Save and refresh and there is a double quotes that all works fine, so let's just get rid of that. As well as joining strings we can also join strings with variables and things such as numbers. For example, if we had a name set to Chris, do we document.write this time. In this example, I'm going to join a variable with a string and then with a number and print out the words Chris is 31. I've already got the variable name so we can add that. Then we can use the plus to add or concatenate. We've got Chris and then we need to add "is" between quotations, so that is a string. Then a number plus to add the number so we can type in the age which is 31. Save and then hit refresh, we'll get the word Chrisis31 but there's no spaces in between and that's easy to fix. If we go into the string we can add a space before and after, and this will print out the space in the document so there you go. That's quite a simple way of form and a string but if we had a long string such as a paragraph. There's lots of different format and options and escaping that we can do to make that look better. If you go over to Google and search for Lorem Ipsum and we'll just get some sample text. In fact, I'll just copy the first paragraph that looks like enough text their. Change the variable and call my paragraph. Then between the quotations paste in the sample text, and then as you go down and we'll print this to the console, console.log. On the text we want to print is the paragraph, so head over to the browser and then go to the console. There's all the dummy text we have put in place. It's quite a big, unreadable chunk of text there. We may want to add some formatting to that text such as line breaks, quotations, or tabs. We can do that with some JavaScript, if we look for a section that we want to create a new line. I'm going to start mine there. If you do a backslash and then an, so we should get a new line after the word industry. Refresh and there we go. That's the first line which breaks after the word industry. We can just put one or two of those in just before it. There's one and save and take a look. Good, there's another line break just there. There is a couple of different things you can also do, we can also put double or single quotes within text, and we can also escape them by using the backslash, so use a backslash and then the quotes. Then we do just the same afterwards so backslash and a quote and then refresh. You can see if you look for the word that we just highlighted, we've got the quotes before and after. You can also do the same way to a single quote. If you actually wanted to include a backslash you just do that twice so include two back slashes. As the backslash appear in there and also the single quotes and we can also add a tab. If you wanted to add one at the start it's a backslash and a t and you've got the indent there. There's a few useful ways of escaping and formatting text using JavaScript and a small examples including the sheet provided at the start of the course. The last thing I want to show you in this video is how to find the length of a string using the length property. Let's get rid of the Lorem ipsum text and we can reuse this variable. I'm going to use the name example again, so name equal to Chris and then we'll create a new variable to store the length of the name. Variable called nameLength and the way we got the length for the name is by setting not to the name.length. Then finally we can log to the console the new variable name. Save that and then refresh. There we go so the length for my name is five characters long. That's the end of this video and if you join me in the next video, we will put this into practice in a mini challenge. 8. Mini Challenge: Display a users score: Welcome back. It's now time to take a little break from learning and put into practice what you've learned so far in your first mini-challenge. What I'd like you to do is to create a simple webpage, which displays a user's score. Create a couple of variables for the player's name, and also the score, and then display that score on a webpage in a string. It doesn't need to be anything fancy, all you need to do is display the user, and then add a string onto the end of it for score is, and then add on the variable for the number of points, and then finally add the string onto the end. Feel free to make this a little bit different than my example. But to give it a go, it's a good way to put into practice what we've learned so far. If you don't feel 100 percent confident in doing this yet, it's not a problem. Just follow along with the rest of this video, and I'll show you how I will do it. I hope you managed to do that by yourself, if not, don't worry, I'll show you how to do it now. If you just go into the JavaScript basics folder and then duplicate the last video. I'm going to call mine number 4 challenge-display-users-score. Then open your text editor, then you change the title, Displaying user score. I'm going to start from scratch in this. Between the script tags, I'm going to create a variable called player equals Chris, and then a variable to hold the score value. So score equals zero, just to begin with. Then one more variable to hold the display or the string, so displayScore. Just to make my display a little bit bigger, I'm going to start with some h3 tags. I've not actually looked at them in this course yet, but you can actually add HTML tags by surrounding in the quotations. We start with the h3 and then we'll add the player or the player variable. Then on the end of the player, I want to put the apostrophe and then the s. So it's Chris's score is. We can add that as a string. So the apostrophe and the s and then a number plus. So far, we've got Chris's. Then we want to put the string of score is, so open up the quotes. Remember to put a space before and after so the words aren't touching each other. So Chris's score is, and then we need to add on to the end the score variable. So Chris's score is zero, and then the word points, so space, and then points. Then at the very end when it's closed, the h3 tag, just like that with a semicolon on the end. Now we've got our variable sets of display score, let's just now print that to the page. We document write,and the variable name, and a semicolon, and let's take a look. So Chris's score is zero points. If we wanted to increase the score every time the user gets an extra point, we could add score++ if you remember that from earlier on. Then now if we refresh, we should get Chris's score is one points. You can do that as many times as you want and the points will go up accordingly. That's the end of the challenge. I hope you managed to do it and hope you enjoyed it. Thank you and I will see you in the next video. 9. String methods: So far in this course, we've looked at string basics, such as storing a string into a variable and also joining strings but there is so much more we can do with strings. Now we're going to take a look at some very useful string methods. If you go into your JavaScript folder and then into the JavaScript basics. I want to duplicate the last folder we created. I'm going to name this number 5 string methods, then open up in your text editor. I'll just make it a little bit bigger, and then change the title to string methods, and then go down. I'm just going to delete the code that we wrote in the last video. String methods allows us to do a lot more with strings. The first example I'm going to show you is converting a string to uppercase. Let's start by creating a variable called string and I'm just going to set that to learning JavaScript add a semicolon, and then I'm going to create a second variable. I'm going to call that new string. We're going to set the value of new string equal to the original string. That's the variable name, and then dot, and then two uppercase then the curly brackets and semicolon. Don't forget the couple of layers on every word after the first one. Now we've converted the string to be uppercase. Let's now alert the new string. We can check that's working okay. Alert, what do we need to alert? That's the value of the new string. Place that in the brackets, and then open up in your browser. There we go, great. There's our original string and it's all being changed to capital letters. We can do a similar thing, but we can convert to lowercase. You can probably guess how to do that, we just need to change string dot to lowercase, and then open that up and check it's working. There we go, so all the capitals have been changed to lowercase now. The next method I'm going to show you is what's called string replace. That is when we look for a certain section or a certain word in the string. We can replace that word. Let's just make a slightly longer string. I want to learn JavaScript to build websites. Again, we're taking the value of the original string, and the method we're going to use is string.replace, and then inside the brackets, we're going to put in two parameters. The first one is going to be the word that we want to replace. I'm going to change websites and then separate it by a comma. We put in the word that we want to put in its place, so I'm going to change that to games. Now when we take a look at the alert, we should see websites has been changed to games. So go to the browser and refresh, and that's exactly what we want. I want to learn JavaScript to build games. As well as replacing individual words, we can actually split the string up either into individual characters, or we can split up all the individual words. The way to do that is by using the split method. I'm just going to go back to the original string of learning JavaScript and then delete the contents inside the brackets. This time we're going to use string.split, and then what we'll put inside the brackets, determines exactly where the split is in the string. If you just put a empty string or quotations with nothing in it, the string will be split up into individual characters. Just refresh the page, and you can see with the comma, that the string has been split up, and it's all now individual characters. If we wanted to split it up into individual words rather than characters, we can put a space. The space in the string will be the marker for where to split that string. Now we should get two separate words. Refresh. Now we've got the word, learning and the word, JavaScript separated by a comma, so now they're individual strings. Now we've got two separate words there. We can access the individual words by the index number inside the square brackets. If we want to access the first word, that would be position 0. Save and then refresh. Now, we've got the word learning, and if we want the word JavaScript, change that to the second word, which is position 1. Now we get the word JavaScript. So now we've split the string into two separate words. We can join these back together by using the concat method. Now we've got two separate words. We're going to create a new variable. I'll just add this above the alert, so I'll call this joined string, and then to add the two strings together, we're going to select the first word. That was in the new string variable, and then just as we did with the alert, we're going to set that to position 0, which is the word learning and then dot and then concat, and then inside the brackets, we're going to add the second string that we want to join on. Hopefully you've worked out what that is. That is new string and then the square brackets, and position 1, and then now we need to alert the joined string. Let's just get rid of that and paste joined string in and then refresh. There we go. You can see the string has been joined into one string and there's no comma in-between them. That's good. The last method I'm going to show you is the string slice. Let's just get rid of the joined string variable. Again, we're going to manipulate the original string, but this time we want to use dot slice. Put the curly brackets again, and the slice method, it has a start and an end position. You can slice out a certain section of the string. The first value is required, and that is the start position. I'm going to start with number 2 and then separated by a comma, and the second value is optional, which is the end position. I'm going to use number 6 and then alert the new string. Let's take a look at that. We got the word arni there, which is this part of the string. That's position 2, so 0, 1, 2, and then all the way through to six. That's the end of this video. I hope you've now got a better idea of how you can manipulate strings using string methods. Do take a look at the cheat sheet, which was provided at the start of the course. There's one or two more string methods on there which you may find useful. Have a little play around with them. For now, thank you, and we'll see you in the next video. 10. Mini challenge: Correctly format users name: Welcome to another mini challenge. This is the exciting part of the course where you get to put into practice what you've been learning so far. In this mini challenge, we're going to format a user's name. We've all done it, we've all put the capital on accidentally or in the wrong place when typing. Sometimes got a couple of letters where they shouldn't be in our names. I'm just going to get started and then you can do that by yourself. Number 6 challenge-name-formatter, then open up this folder. I'm going to change the title to Name Formatter, and then delete this section. I'm just going to get you started. I'm going to create a variable called name, then you need to put your name inside the quotations. But with some misplaced capital letters, just like that. What I'd like you to do is use some of the string methods that we looked at in the last video and format your name. The first letter is a capital of your first second name and then all the rest to be lowercase. So pause the video and give it a go, trying it yourself is really the best way to learn. If you get stuck or have any problems, I'll go through exactly how I would have done it. This is what I would've done. As with many things in programming, there's various different ways you can approach this. But I'm going to break it down into some variables to start with. I'm going to start with a variable called split. I'm going to split the name into two separate words so it can work individually. To split the first and the second name, we want to use the split method that we looked at in the last video, so name.split. Hopefully, you remember how to do that. Just create a space and I'll recognize where the split is. Now we've got the two individual words stored in a variable called split. It's not going to create a variable for each one of these words. So variable name1 is equal to split on the position zero. So that's the first word. Name2 is equal to split, and then number one, which is the second position. Now we've got the first name into a variable. I'm now going to format that name, so I'm going to call this variable formattedName1, so that's equal to name1. Then we need to make the first character a capital. I'm going to slice the first letter. The two parameters we need to put in is position zero to start at the beginning, and then to end a position one. It's only going to slice the first character. Then to make this a capital, we're going to set it to uppercase, and don't forget the brackets. As it stands, this variable is only containing a capital C, so we need to add onto the end of it the rest of the characters in lowercase. After that name1.slice, we're going to slice the remaining section, but we're just going to put one parameter in there. It's going to start at position one and then be all the way to the end of the string,.toLowerCase. Let's just create alert, just to see if that's working okay. Once you alert formattedName1; great, that's all working. We can do the same with the second name. I'm just going to copy this section and then change it to formattedName2. This method will work exactly the same, but we just need to change name1 to name2 and check that's working again. Great. We've got the two individual names which are correctly formatted. We just need to join them together. I'm going to create a variable called newName. That's going to be equal to the formattedName1 plus formattedName2, and that's alert the new name. We needed that. We've got the formatted name appearing, we just need to put a space in-between. We can do that between formattedName1 and 2. Just add a space in there and another plus symbol. Hopefully, that should be it now. There we go. So that's a correctly formatted name. I hope you did give that a go and worked all by yourself. If not, don't worry. Hopefully, now you know how to do it. More mini challenges as we go on throughout the course. Thank you for watching, and we'll see you in the next video. 11. Javascript arrays: So far in this course, we have looked at variables and how they are used to store a value. However, if we need to store more than one value, we would need to use what is called an Array. Arrays can hold multiple values under a single name, and we can access these values by their position or their index number. Let's go over to our javascript folder and in a javascript-basics section, duplicate the last folder. This is going to be number 7.arrays and then let's open that folder up. Then change the title to Arrays. We can just delete this section. There's a couple of different ways we can create an Array. It starts off in a similar way to variables. We use the var keyword and then we assign a name to the Array. As an example, I'm going to create an Array for users and then we're going to create a new Array and then the brackets just afterwards. This creates a new Array called users and we can add different users or different values to this Array by using the Array name and then the square brackets. The first position on an Array is 0. I'm going to set the first position to be equal to Chris and then I'm just going to add a couple more, so users and then Position 1, I'm going to call this user Mike. Then users and then a third one, we'll insert Paul into there. Now our new Array should have three different values, so let's just check that's all working with a document.write and then inside the brackets we can put the name of the Array which is users. Let's take a look. Great, it says our three values that we've inserted into the Array. Another way we can create an Array, possibly a more popular way, is to use the literal method. Beginning the same way and instead of using the new keyword, we can put the value straight into the square brackets. Just as before, we can put the first user and then separate by a comma. We can add the rest of our values and just like variables when it pull strings between quotations but we're okay to put numbers just as they are. Now, you can save that and then refresh and we'll get the same three users that we had before. As well as displaying the full contents of the Array, we can just display individual values from an Array depending on their index position, so Chris is Position 0, Mike is 1 and Paul is 2. If you just go to document.write and then instead of displaying all the users between the square brackets we can put the index number. If we want it to display Mike, that would be 1, and we'll just get one value appearing and if we wanted Paul we could change that to 2. When dealing with Arrays, we can also use different data types. As well as strings, we can put in numbers, for example, and that will work exactly the same. If we just save that and then refresh, we'll get the number appearing at the end of the Array. One handy thing to know with Arrays is we can use the length property to find out how many values is inside the Array and the way to do that is with the.length property. Now it should display the length of the Array, so we should get the value of three. Let's take a look and refresh. There we go, so we get the value of three. We'll leave this out and in the next video we'll take a look at some really powerful and interesting ways to manipulate Arrays using Array methods. 12. Array methods: So as with strings we looked at a few videos ago, arrays also have various array methods and we can use, which can be really useful. So let's start with a new folder. And this is number eight, and this is array methods. So rename the folder array methods and open the open in brackets. Then let's rename this. So array methods, and then we can actually reuse this array that we created before. So, if you wanted to add an extra value into this array, we can use the push method. The way to do that, is we use the array's name, which is users dot push, with the brackets afterwards, and a semicolon. Then inside the brackets we put the value that we want to add. So, I'm going to create a new user called, Tom, and then just remove the length property there. So, let's save and open that up in the browser. So now you can see we've got four values now, and Tom has been placed onto the end of the array. But if we wanted to add Tom to the start of the array, we can use a method called unshift, and then save that, and refresh. Now Tom is added to the start of the array, and we can also remove values from the array in a similar kind of way. So instead of unshift, we can use the Shift method and this will remove the first element of an array. Just leave the brackets empty, and then refresh. Now you can see that the value of Chris, which is the first value, has been removed. We can also remove the last value of an array, with the pop method. So, users dot pop, and this should remove Paul, off the end of the array, and refresh, and now we're just left with Chris, and Mike. Okay, and we can also reverse the order of the values in the array, by using the reverse method. Now we should get Paul, Mike, and Chris appearing in that order. Okay, so before we looked at adding values, and removing values from the beginning, and the end of the array. We can also use the slice method, which will remove a value out of an array between a certain point. So we'll do that, will actually create a new variable. We'll call this Slice, and that's going to be equal to, users dot slice. Then inside the brackets we put in two values. So the first value that we want to enter is the start position. So if we wanted to remove Mike, that is our position one. If you remember, the first index is zero, and then separated by a comma, we put in the second value, which is the end position. So we want this to end just before a Paul, which is value two. Then document right, the slice variable, and save that. Now when we check that out in the browser, we should see that the value of Mike will display, so save, and refresh, and there we go. So we've got the value of Mike appearing on the screen. We can use the start, and end positions to pull out any value that we want inside the array. If you check out the cheat sheet provided, they're some more additional array methods that you can have a play around with. I'll see you in the next video, where we'll take a look at JavaScript functions. 13. Javascript functions: Welcome back guys. This video is all about JavaScript functions. So let's get started in usual way. So create a Functions folder, which is number 9. Then open up the Functions folder inside your text editor. Then change the title to functions, and then, just delete the sample code there. A function is basically a block of code which we can call when required. So rather than repeating the same code more than ones, we can write it once and place it inside a function. Then we can call a function by its name to run it. So a function looks a little bit like this. So use the function keyword, and then, give the function a name. I'm going to call it my function. Then we need to use the curly brackets afterwards. Then the code that we're going to put inside the function, goes between curly braces just like that. I'm going to start with a simple alert. So I'm just going to alert some text, function is working. So once we've created a function, we then need to invoke it, or call it by its function name. So in our case, it's myFunction. I'm going to need to write to the brackets afterwards, and a semicolon. Save that. So there's our function working. Pretty much any code we want between the curly braces, and it will run every time it's called. So if we create a couple of variables, so variable A can perform some calculations inside the function. Then variable B, and set that to 10. Then, we can access these variables inside the function. We're going to create a variable C, and that's going to be the sum of A, multiplied by B. So A, and then a star and B. Then display the value of C with a document.write. So now, every time we call myFunction, we should get the calculation being performed, and then the result of the calculation being printed to the screen. So save and refresh, and then we get the value appearing on the screen. So to help you understand functions a little bit better and exactly what they do, let's create a real life example of how we could use a function in a game. So we've had a game and we had a variable which sets the score. Then the variable called Lives, which sets the number of lives the player has, and then the variable of gameOver. This is set to a build on value, which is true or false. So while the game is running, want that to be false to start with. So in this case, a good use of a function may be to reduce the number of lives that the player has. So rather than write that code out every time the player lost a life, we could simply call the function. So create function, and we'll call this lifeLost. So every time the player loses a life, we would then reset the score back to zero. We'll could also decrement the number of lives by one. We would also set gameOver to be equal to true. Then once the game is over, we maybe want to send a message on the screen. So document.write. We'll put this between level 2 headings. So game over. Then we'll tell the user how many lives they have left. Then we'll display the number of lives. [inaudible] that sidebar to get them more room. So to print the number lives, we can add the lives variable. So after the number, we'll add the string, lives left, and then, close off the level 2 heading. I'll need to space that actually. So let's save that, then we'll call the function, lifeLost. Let's take a look. Great. So now we've got the message appearing, and the 10 lives that we started off with has now been reduced down to nine. We can do that again. It should reduce by one every time. Hope that example has given you a better idea of how we can use functions in JavaScript. In the next video, we'll continue on by taking a look at function parameters. 14. Function parameters: Welcome back. In the last video, we looked at how to define a function and how to invoke that function using the functions name and then the curly brackets. In this video, we're going to take that a little bit further. I'm going to take a look at passing parameters into these curly brackets. Let's start with the folder. Open up your JavaScript folder. In the basics, duplicate the functions. This is Number 10, function-parameters. Then open up the function parameters folder and change the name. Let's take a look at how this works. We can just delete the section from the last video. A new function, and we'll call this alertMessage. This time we're leaving the brackets empty. I'm going to pass in a message into there. Then the function is you're simply going to alert, the message you were passing. This acts in a similar way to a variable. Where do we get this message from? Well, we put that into the brackets when we the call function. AlertMessage. This time, instead of just leaving the brackets empty, we're going to pass in a message that we want to alert. I am learning Javascript. This message is whatever is in here. Then we just simply going to alert that message. Let's take a look. There is the message, I am learning Javascript. We can also pass in more than one parameter into the function. If we wanted to have a function, we just performed a calculation. I'll create a new function called multiplyNumbers. Then we can pass in two parameters; number1 and also number2. Then we can alert the calculation of number1 multiply by number2. Then just like before, when we invoke that function, we pass in the two numbers that we want to calculate. For example, five and four. Now we should get the calculation alerted, which is the result of 20. Okay, so that's all working. I hope that all makes sense and thank you for watching and I hope you now got better understanding of how to pass parameters into functions. I'll see you in the next video, where we'll take a look at JavaScript scope. 15. Javascript scope: Welcome back. In this video we are going to be taking a look at JavaScript scope. Scope basically defines which variables we have access to. Let's create a new folder, and we'll take a look at that. So duplicate the last video. This is video number 11, and we'll call it Scope. Open up as usual. Inside the text editor, and then change the title to Javascript Scope, and then you should remove this section. Let's start with a function. We're going to call this function multiply, and we don't need any parameters in there just for now. So inside this function, I want to create a couple of variables, so variable a and set that to two, and variable b, give a value of five, and then create a alert of a multiply by b. Let's now call this multiply function, and we should get the result of 10 appearing on the screen. So that's all working fine. So we created two variables inside this function, and this is what's call local scope. Meaning that these two variables can only be accessed within this function. So if we were trying to alert one of the variables, so we try to alert for example, variable b, which has been declared inside the function, and then if we go over to the browser, you can see that when we refresh that nothing actually happens. If we go into the developer tools, we get the error message saying, b is not defined. So only create a variable inside a function, if you only want to use inside that function. If you want to use that variable outside of the function, what I need to take them out, and put them outside the function. So now these two variables have global scope, so they can be accessed not only within the function, but also anywhere in the rest of the code. Now if we alert b, we have access to that variable, which is number five. Also if we use the multiply function, if we just remove the comments and then refresh the page, that the function also has access to the two variables too. So there we go. Start to look at the scope of variables, I hope that helps. Thanks for watching, and I'll see you in the next section. 16. Javascript objects: Hi guys, and welcome back. In this video, we're going to take a look at JavaScript objects. JavaScript objects are really important parts of JavaScript. So much so that nearly everything in JavaScript is classed as an object. Objects are a collection of name-value pairs. So let's take a look at how we use them. So let's create video number 12. This is called objects. Then let's open this up. So drag, enter brackets. Let's change this to JavaScript objects, and start with an empty script tag. There we go. So when we want to create an object, we start in a similar kind of way to a variable, which we looked at earlier on. So we use the var keyword, and then we want to give the object a name. I'm going to use a phone as a good example for our object. So let's give it a name of phone. One way of creating an object is by using the new keyword. So new object. When we create a new object, we need to use the brackets afterwards. This layout should look pretty familiar from the array section, where we created a new array and then we added certain values or properties to that array. So now we've got our phone object. We can start to add some different properties to it, such as the phone's manufacturer, the model, and the color. So to add properties to our phone object, we type in the name of the object. Then to add property to the phone object, we can use the square brackets. Then inside the quotations, we can add the name of the property. So manufacturer can be the first property. Let's set our example to Apple. Then a semicolon at the end. We can carry on in exactly the same way for more properties. So we can add the model, and that can be set to the iPhone. The phone color, so I'm going to set that to silver. So we set a new phone object. This is going to have the properties of manufacturer, set to Apple. The model, set to iPhone, and the phone's color to be set to silver. So these are the name-value pairs. So this is a name. This is the value assigned with the equals operator. Objects are ideal for anything which has a number of properties, such as a person object can have properties, such as a name, an age, address, and contact number. So really useful of keeping all our information contained on the one keyword. So now we've got our new phone object created, and we've added three different properties. We add all our values. We can now do a console log. So we can log to the console the phone object. So let's save that and take a look, and head to the developer tools. So there we go. So we can see our object is being created in the logs. If you open that up, we can see all the name-value pairs. We've got the color, the manufacturer and the model. So that's the contents of the full object. If we wanted to access just one of these properties, this works in a similar kind of way to an array. Instead of logging the phone object, we use a phone object and then the square brackets. Then inside the quotations, we just put the name of the property. So now we should get the model, which is the iPhone. Head over and refresh. So there we go. So there's the iPhone value. In our example that we just looked up, we've accessed and added properties to our object using the square brackets and usually a more popular and the simpler way to add properties to an object is to use the dot notation. It looks a little bit more simpler. So using the example that we've created above, let's do this again with the phone object. So let's set this to a new object, and let's just comment this section out. Now we want to add properties. We can start with the phone object. But this time, instead of the square brackets, we can use the dot. So a dot manufacturer equal to Apple. The phone.model is equal to your iPhone, and then lastly the phone.color. So we'll set that to silver. So this works exactly the same as the bracket notation that we used above, but I think this just looks a little bit simpler and it's just a little bit easier to type out. So just to check that it's working, we'll do a console, console log and that will display in the logs the phone object. So save and then refresh. So there's our object once more with the manufacturer, the model, and the color properties. So we get exactly the same results, but I think it just looks a little bit cleaner. So if you remember from when we created a array, we also done the literal version where we didn't need to use the new array keyword. We can do exactly the same way in creating objects. So rather than creating the object, like we've just done there, which is one way, we can use object literal. So it's a little bit simpler to create an object this way. So we'll begin with the var keyword and then again give it the name of the object, and then this time is to set a new object. We set the phone object to be equal to all the name-value pairs, which we put in between the curly braces. So we can set inside the brace the properties. So manufacturer and then use a colon. So Apple. The model, so it is going to be separated with a comma. The model, again, the iPhone. The color of silver. So one of the great things about using objects is because they are just collections of name-value pairs. We can also nest an object inside another object. For example, if our phone had many different features, we could also create a features object. Instead of adding a value, we can use the curly braces and then inside the braces, we can add more name-value pairs. So for example, if our phone had features such as Bluetooth. So we'll set that to a Boolean value of true and Wi-Fi. So that should be a comma again, and then Wi-Fi, which can also be true. GPS, we'll set that to be false, and you can nest as many of these properties inside as you want. So now if we wanted to access any of these properties which are nested, it's pretty simple to do. So we do a console log. So begin with our object name. The object name is phone and then use the dot to access the properties. You can see the brackets is already given us a list of the various properties. So with the color features, manufacturer, and model. If we wanted to go deeper, we can select the features and then use the dot again. Then you can see inside the features, we've got the three properties of Bluetooth, GPS and Wi-Fi. So let's save that and check that out. So we should get the value of Bluetooth, which is true. So refresh and there's our true value, and that changes to GPS and then we should get a value of false. There we go. So now we've got our phone object all setup. I'm just going to create a example using a function, which we looked at in this section. So create a function. We'll just display the features of your phone in a function. Let's just do an alert to the browser. Then inside the alert, we can display the phone manufacturer by grabbing the manufacturer property of the object. Let's start with a string. So a manufacturer and then a space. We can use the plus to add onto the end. Let's select our phone object and use the dot notation. So phone.manufacturer and then to display this when it's called the yourPhone function. So paste that in, and then save that, and then go to the browser and refresh. So there we go. There's our string of manufacturer, and then we've pulled in the object manufacturer, which is Apple. So there we go. That's how we create an object in JavaScript, and that's the end of this section. So thank you. I will see you in the next section. 17. Javascript math: Welcome back to this brand new section called JavaScript Math and dates. Hopefully, now we're starting to get a better understanding of what JavaScript is and what JavaScript can do. Things should be looking a lot more familiar now to you. We're going to get started by looking at JavaScript Math. JavaScript Math allow us to perform complex or simple mathematical tasks such as creating random numbers, finding the lowest or highest value in an array, for example, rounding numbers up and down, amongst others. Then, we'll take a look at JavaScript date. The JavaScript date object allows us to work with the current date. We can do that in a few different ways. We'll take a look at that as we go through this section. Let's get started as usual in our JavaScript folder. I'm going to create a new folder inside there and call this one math and dates. Then, I'm just going to copy a folder from the previous sections and paste it in there just to get us started. I'm going to call the first one JavaScript math. Then, let's open that in your text editor. Then, as usual, change the title to JavaScript Math. Then, delete any code from previous videos. There we go. We're going to get started with pi. Hopefully, you remember from school what pi is. If you don't, pi is 3.14. We can find that in JavaScript by using the Math object, and then dot, and then PI. We can display Math.PI in any of the usual methods. I'm going to create an alert and then put the math.PI inside the brackets with a semicolon at the end. We should make this a little bit bigger so you can see it. Then, open up the browser and let's see how that's looking. There's our alert. The value of pi is 3.141 and many more numbers after that we don't need to worry about for this video. If you're happy with that, just comment that out. Next, we're going to take a look at how to generate a random number in JavaScript. The way to do that is with the Math object once again, but this time use.random. But this time we need to put the brackets in there. Again, we can just alert that to the browser. Alert and then surround the Math.random inside the brackets with the semicolon. Then, let's take a look at what is displayed. Okay. Alert at the browser is 0.85. You may be wondering why this is a random number. Well, in JavaScript, a random number is generated between zero and one. Zero is actually included in this random number, but one isn't, so be careful of that. If we want to generate a random number, for example, between one and 10, we still need to do it in the same way, but then we just need to multiply the result, for example, by 10. So far in the two examples which we've just shown you, the numbers have a lot of decimal places such as this one there. But sometimes we want to round to the nearest whole number. With JavaScript, we can either round up or we can round down. The way to round up. We create an alert to start with. Then, inside the alert brackets, we need to use Math.ceil, which is short for ceiling. Then, inside the brackets after that, we need to put the number which we want to round up. If we created a number of 4.5, this should round this number up to the nearest whole number, which is five. Then refresh. We get the value of five in the alert box. That works with any number. We should still get five now. Rounding down is actually pretty similar. Instead of Math.ceil, we use Math.floor. Then, again, we pass in the number which we want to round down. For a number now of 7.6, we should now get the value of seven inside the alert box. Great. Again, this works with any number. It doesn't matter how high or how low the number is, you will still always round down to the nearest whole number. Let's comment that out and then continue on below that. That's a way of rounding a number up or rounding a number down. But if we just wanted to round to the nearest whole number instead of all rounding up or down, we can do that with Math.round. You create your alert box and then Math.round. Now, for example, a value of 7.2, this should be rounded to the nearest number of seven, which we get there. If it's above five, such as 7.6, that should round up to eight now. If the number that we passed in was in the middle, so it was 7.5, this value will always be rounded up. We should still get eight in the alert box. I'm just going to comment this one out and then move on to looking at minimum and maximum numbers. If we had more than one value and we wanted to check which is the lowest number or which is the highest number, we can use Math.min and Math.max. Let's alert this time Math.min. Then, inside the brackets this time, we can pass in more than one value. Let's put some numbers in there separated by commas. Eight, 15, 3, and 63. Now, we should be able to work out which is the lowest number. That's why with [inaudible] we should get the value of three inside the alert, which we do. Then, all we need to do to find the highest value is just change.min to.max, and now we should get the value of 63. There we go. Says 63 inside the alert box. There's one or two more examples to look on your cheat sheet and they all work in a similar way to the examples which we've just been through there. Now we have a better understanding of how JavaScript Math works. In the next video, let's put this into practice in a mini challenge. 18. Mini challenge: Generate a random whole number between 1 and 100: Welcome back. I hope you got a chance to have a little play around with some of the JavaScript math that we looked at in the last video. So now we've got all the boring theory out of the way. Let's now put that all into practice and create another mini challenge. It's going to be quite simple, though you might need to think about one or two things along the way. All I wanted to do in this challenge is to generate a random number between one and 100. It's something should be capable of doing. It's something we've looked at in previous videos, and it's something which shouldn't cause any problems. Well, if it does, don't worry, just follow along with what I do at the end of this video and I'll show you exactly how to do that. So go into your JavaScript folder and then the math and date, section. Duplicate the last video, and call it what you want, but I'm going to call a random-number-challenge, and then get this open in your text editor. Lastly, change the title and remove the code from the last video, so Mini challenge: Generate a random number between 1-100. We don't need this anymore so we can remove that. If you don't feel like you need any help, stop the video now and give that a go. If you feel like you still need one or two more pointers, take a look at the last video again and have a look at the Math.random section in that video, and that should give you all the clues that you need to complete the challenge. So give that a go, and if you don't feel confident, don't worry. I'm going to go through how I would do it now. Let's just get started between the script tags. I'm going to begin by creating a variable to store the random number inside. I'm going to call this variable rounded number, and then this is going to be set to Math.random, which we looked at in the last video. Don't forget the brackets and then the semicolon. If you remember that the Math.random generated a random number between zero and one, but because we want the value to be between one and 100, we need to multiply the value by 100. So let's manipulate this variable. So copy that and paste in. So rounded number is now equal to rounded number, multiply by 100, and then let's print this to the screen. I'm going to use a document.write, and then pass inside the variable, which is rounded number. and let's just see how that is looking for now, and refresh that a few times. You should check that it's working okay. So we need to also round this number to the nearest whole number. I'm going to actually round the number down. Again, just go into the code and then change the rounded number variable, so Math.floor. Then inside the brackets this time, instead of just typing in a number which you just put in ourselves, we're going to pass in the rounded number variable, and then take a look at that. Hopefully, you managed to do that. But there is one little snag with this. If you remember that the random number that we generated started at zero but didn't actually include number 1, so therefore, the largest number that we can possibly go is going to be 99. To increase that, we're just going to use plus one. If you keep refreshing it should finally get the values of one and 100, but it may take a while. So now that's all working. There's just one more thing I want to show you before we finish this video. So the code that we've created in this challenge, it's pretty step-by-step and everything is all on separate lines. The way we can actually combine this to be a little bit more neater and all on one line, I'm just going to comment that out. If you're using brackets like me, you can highlight all the code and then command on forward slash. To put this all onto one line, we can start with the same variable. I'm just going to copy that and paste that in. But this time we're going to start with Math.floor, so the result is rounded down. Then inside the brackets, you can put in the Math.random, so paste that inside there. The random number that we generating, we want that to be multiplied by 100. So let's get rid of the sidebar so we can see all on one line there, example, multiply 100, and make sure that all of this section there is between the Math.floor brackets. Then outside the brackets we can add our plus one, just like we do on above there. Save that and we can still use the same document.writes, and then hopefully, if we go to the browser and refresh, we should still get the same outcome. But this time, it's just all on one line and it looks just a little bit neater. There we go. So hope you manage to achieve that by yourself. If not, don't worry. Follow along with the example I've just done and try to understand exactly what we're doing, and I'll see you in the next video. We'll take a look at JavaScript date and date methods. 19. Dates & date methods: In this video, we're going to take a look at JavaScript dates. Let's get started in the usual way and create a new folder. I'm just going to duplicate the mini-challenges from the last video and call it Dates. Then open up your text editor and then drag the dates folder in there. Now the title is going to be JavaScript dates. We can just delete the code from the last video between the script tags. Just to begin with, we're going to start with a simple way of creating a new dates object, and we're going to store that inside a variable. Start by creating a variable, and you can call it whatever you want. I'm going to call mine show date. Then we need to set that equal to a new date. You need to put brackets after that. Then we can use a document.write or any other method which you prefer to show the variable of show date, so put that in-between the brackets, and then a semicolon. There we go, so now we get the full date printed on the browser and you'll obviously get a different dates on there depending on what day you're watching this video, and your time zone. Using this day object, it gives us the current day, the month, the day of the month, the year, the current time, and then the time zone. This formula is pretty long and often we don't want all this information. I'm going to show you next, get and set methods. They're pretty much what they sound like, a get method is used for getting a certain path of the date. So we can get the individual hours, we can get the individual day, or the seconds, or the time. Then we can also use set methods which are used for setting a path of the date, such as set the current time or set the current date. Let's start by taking a look at the get methods. Each one of these get methods I'm going to show you, I'm going to store it inside a variable. To start with I'm going to set the variable called date, and then set that equal to a new date, starting with a capital D, and then the brackets. Now we've got the current date. We can split that up into the day of the month. Again, it doesn't matter what you call these variables, just make them descriptive. I'm going to set that equal to the date variable that we created, and then paste that in, and then use dot, and then get date. You can actually see of the autocomplete there. This will give you an idea of what we're about to do. Get dates and a semicolon at the end. We're creating a new dates object, and then we just get an individual property each time. I'm just going to duplicate that line. This time I'm going to call it the day of week, then this time its date.getDay. Then to get the month, let's create a new variable of month. You could probably guess what we're about to do here. It's date.getMonth. You can also get the current year. We need to get year. By the way, you can have to just copy and paste these, or I'm using command or control D to duplicate in brackets. If the text editor you are using doesn't duplicate, just copy and paste. After the year we can get the hours and then minutes, date.getMinutes. Then the last one I want to show you is the seconds, so date.getSeconds. We'll just comment out these two lines out, we don't need them. Now we've got all these variables created and we may want to just use certain parts of the date. For example, we may want to create a string, such as today's date is, and then input the day, the month, and the year. Let's give it a go. Let's do a document.write. Then between the quotations, I'm going to create a string of today's date is and then a colon. I'll put these on separate lines so it's a little bit more readable. We want to show the day and then the month, and then the year. We wanted to display this in the browser, just as it is. We can put some HTML break tags in there and then end the string on there, and then we need to concatenate to join the strings, just use the plus symbol. Because each one of these words is a string, surround them in the quotes. The same with the year. It's pretty simple to do this, so we've got the day string with a space and then plus. Then the day is the variable called day of week. We can join now onto the end of the month. We need to join on the variable name of month. Then the year, simply add the year. We can see our code is pretty readable now because we've used descriptive variable names. Make sure you do that when you can. Then lastly, we just need to add onto the end a break tag just so they are on separate lines and then another join at the end. The break tag needs to be displayed like that. Then do it on the next line too. Copy that, and that brings us up to our next line, as you can see by. We don't need that. Then finish that with a semicolon. We started with a string there, today's date is, we put break tagging to get onto the next line, and then we're going to have three separate lines which display the day, the month, and the current year. Let's save that and see if that works okay in the browser. Refresh that. So we've got the today's day is, the day number, the month number, and the year is 116, so we need to change that. We've done the year. We need to put the get full year into there. There we go. So it's 2016 now. I hope that makes sense. I'm just going to comment this section out now. These are the get methods, and I want to move now onto set methods which are used to set the date. Let's begin with a new variable called set date, and just as above, we're going to set that equal to a new date. Then now we can set some parts of the date. So if we wanted to set the column month, we could use the set name variable, then dot, and then we need to set the month and then place the month that you want to set inside the brackets. We can set that as 11, for example. Then if we wanted to set the year, again, use the set date variable and then dot set full year. You can set that to whatever you like. I'm going to put in 2020. You can see that these are pretty similar to the ones that we used above, we're just replacing get with set. Let's check if it's working with the document write. Then inside document write we're going to use the set date variable. So we take a closer look there, you can see that we've got the month of December. We put in the 11th month, which is actually the last value because the set month goes from 0-11, so 11 would be December. We set the full year to be 2020, and you can see that inside the browser there. We haven't touched the time, so that's the current timezone there. There we go. I hope that makes sense. Do have a little play around with what we've just looked at. Thanks for watching, and will see you in the next video. 20. If statements & comparison: Congratulations on getting this far. This is a new section called Control Flow and Loops. In this section, we'll be taking a look at some new methods such as if else statements and we'll be taking a look at operators, switch statements, and various types of loops. As usual, we'll throw in one or two many challenges into there, so we can put into practice what you've been learning and see how it works in real-life examples. The first video we're going to get started with is called if statements and comparison. In JavaScript, and many of our programming languages, we can often deal with a lot of data, such as numbers and values. We often need a way to compare more than one value to another and decide upon an outcome. JavaScript provides us with a way of comparing called comparison operators. Then if statement test to see if a condition is true. If that condition is true, then it runs some code. Let's take a look at some examples. Because we're in a new section, we want to create a new folder. I'll call this folder control flow and loops. Then we want to go into one of the previous videos and just copy any of those, and then paste in just so we got a starting point. Then rename this if statements and comparison. Then open up this in brackets, or your text editor. Just drag it into there and then change the title in the index page. My case is, if statements and comparison, and then remove the code between the script tags. There we go. We don't need that either. To get started, we're going to take a look at a simple comparison just to compare two variables. Variable a equal to 10 and also variable b equal to 20. We're going to start with a simple if statement just to check if the value of a and b is the same. To get started, we use the if keyword, and then a set of brackets, and then after that, a pair of curly braces. With an if statement between the brackets here, we put a condition to test. In our case we want to test if a is equal to b, so let's just put that in there, so a, and then three equals and then b. If you remember, the three equals check if the values are equal value and also equal type. Let's check if a is equal to b, and then if it is, we want to do a document write and then it prints them out to the browser just to let us know that the condition is true. I'm just going to write condition is true and just make it a little bit bigger. Let's put some level 2 heading tags in there. So h2 before and after, and then let's open the app in the browser and see what happens. Again, nothing is showing in the browser because the condition is not true, because a is not equal to b. If we just change both the values to be the same and then refresh, we should now get the message condition is true. The if statement is all working correctly. As well as the three equals, there's many different other comparisons we can use. We mentioned earlier on that using two equal symbols will check if a and b is equal value but not equal type. For example, one could be a string and one could be a number. If we want to check if the values are not equal, we use a exclamation mark and then an equal symbol. Let's just change that to be not equal and we should still get the condition is true, which we do there. This checks for the value. If you wanted to check for the value and type, we could use two equals and the exclamation mark. This means not equal value or type. We can also use less than or greater than. If a is greater than b, which it is, the condition is still true. If a was less than b, it should now be blank because the condition is false. Combining the less than and greater than with a equals symbol means if a is less than or equal to b, then run this code between the braces, and exactly the same with the greater than. If a is greater than or equal to b, the condition is true. Let's refresh that. This is true because a is greater than b. If b was also 20, so they were equal, we should also still get condition is true. Good. So I hope that makes sense. I'm just going to show you a quick example use of how this can be used in a real life program. I'm going to just check if a user is logged in and also check the user's name. An if statement could check if a user is logged in and then print to the browser a welcome message to that logged in user. With a variable such as logged in, I want to set this to a boolean value of true. This can be either true or false. Then a variable which stores the user's name. I want to set mine to Chris. Then just as before, we'll create a if statement. If you just want to check if a user is logged in, we can just check if logged in. We don't need to use any comparison operators such as equals, because this is already set to true. Open the variable. If the user is logged in, let's create a message for that user with a document write. This can be as simple, or as complicated as you want. I'm just going to create a welcome message to that user and then add onto the end of that welcome message the variable name of the user. This should say, welcome Chris. Then lets open the browser. There we go. We get the welcome message because the user is set to logged in. If you change this to be false and then refresh the browser again, we should lose the message because this condition is no longer met. I hope that all makes sense to you now. If it doesn't, just take a look at some of the examples that we just used and try and get your head around it before we move on to the next video, where we'll build on the if statements by taking a look at if else statements. 21. Else & else if statements: Welcome back, everybody. In the last video, we took a look at if statements. If statements check if a condition is met, and then if that condition is true, we then run some code. Though if we had more than one outcome, we need a way to deal with that. We can deal with that by using a else statement or a else-if statement. Let's put that in a new folder. Duplicate the last video, in fact, when I number this they're in order. Number 1, and then this is going to be number 2, this is else and else-if. Then open up your text editor, and then change the name at the top. This is going to be else statements, and else-if, just moving down between the script tags. Rather than delete, this we can actually do is build on the last video to start with. We check in if a user is logged in. If that user is logged in, we send a message to the user, but this provides no backup in case the user is not logged in. This is where a else statement can be used. Just after the curly brace, we can then type else and then provide a second set of curly braces, and this is for the condition if the user is not logged in. We can just copy the document, paste in between the braces. This time if the user is not logged in, we're just going to send a message to that user just to log them in. Please login to view page. We still got the variable of logged in set to false, so now we should get the login message. There we go. Please log in to view page, this is used as a fallback in case the original statement is not true. If-else statements are used quite regularly in programming languages. It's a really useful concept to get used to. [inaudible] if-else statement, and you may be wondering what to do if there is a third option or a third condition to meet, and this is pretty straightforward. We can just build on overall, and in between the if-statements and the else statements where you simply use a else-if. We'll create a new example. Just delete all that. I'm going to create a example just to show you how this is used. This is based on a car's speed. We're going to check a variable, which is the speed limit. For example, I'm going to set the speed limits to be 70, and then a second variable which is your speed, and also set this to 70 just to begin with. As an example, we're going to print a message to the car's display. Create an if-statement, and the if-statement want to check if your speed, put that variable inside there, is less than the speed limit. Paste inside there, so if your speed that you are doing is less than the current speed limits, we can create a message with a document rights, such as, thank you for driving safely. Just remove the sidebar to get a bit more space there, and then we can create a else-if and then the brackets and then the curly braces. If your speed is greater, we just copy this condition based on in the else-if, and it changes to greater than. If you go on over the speed limit, let's put an over document right inside there, and this time say, please slow down. Then we're just going to finish this with a else statements as the backup. You can put more than one else-if statements in there if you want, it just needs to go straight after the last curly brace, but make sure an else statement is at the end. As a fallback, if the speed is equal to the speed limit, just put a simple message into there such as, careful, you are driving at the speed limits. We don't need to put brackets inside there with a condition, just for this time because there is only one [inaudible] conditions to meet. We've covered if the speed is less than or greater than the speed limit, the only over possible outcome we can get is if the speeds are equal, and this is covered by the else statement there. Let's take a look. Currently you've got the speed limit to be equal to your speed, we should get the careful message at the very end there. Let's open this up. We'll get careful you are driving at the speed limits. Let's change the variables. We've put you're speed to be 60, we should get, thank you for driving safely. Refresh that, and there we go, says the thank you message. On the last one to check is if your speed is greater than the speed limit, which you get the please slow down message, which we do that, so that's great. Thank you for watching, and this is the end of the video on else statements and else-if statements. In the next video, we're going to put these into practice with a little mini challenge. 22. Mini challenge: Age checker: Welcome back. Now, it's your chance to give if else statements to go with a mini challenge. It's quite a simple challenge, if you understood the last few videos. However, it gives you the chance to type away on your own without watching me, and that way it should stick in your memory a bit better. Just duplicate the last video on else-if statements, and then this is number 3, and the mini challenge is going to be called age-checker. Then open the app in your text editor, drag in the folder, and then open up the index page, change the title to Age checker and delete this code of that, so we don't cheat. Okay, so this is fairly straightforward. All I want you to do is to create a few variables, one for a minimum age and one for your current age.Then create an if-else statement, just like we used in the last video.Then do a couple of checks. First of all, check if your age is below the minimum age, and then create a message to the browser. When we search us, please come back when you're 18. Then a couple more conditions such as if you're old enough or if your a certain age to check your identification. Give the Ago which just uses things that we've learned in the last video. There's nothing extra that you need to try to research or Google. Try that and see how it get on. If you do get stuck or if you don't feel confident enough to try this here, just follow along with me. I'm going to create a variable of minimum age. I want to set that to 18. Then a variable, which is your age and it's going to be 15, for example. Then create your if statement below. If you prefer to lay this all out empty first just to make sure you've got everything in the right place. Just like this, it can be useful just to make sure we don't miss any braces or brackets. Okay. So first of all, we want to check if you're under age. We check the variable, yourAge. If yourAge is less than the minAge, we'll create a message to the user with the document.write. Inside the brackets, "Sorry, please come back when you are 18". Then I'm going to create a else-if statement. I'm going to check if your age is 25 or under, and then create a message to supply some identification. If your current age is greater than or equal to 18, then the two ampersand symbols to also check the second condition. Then yourAge is less than or equal to 25. We want it to be a greater than symbol. So if you're over 18, but under 25, we'll create a new message to supply some identification. This time the message is "Please supply identification". We've got all conditions matter, [inaudible] use is equal to 25. The else statement at the end provides the fallback if the user is over 25. In that case we'll just create a document.write just allowing the user to enter. Please enter and then save that. Let's test this in the browser and see this all works. Currently the user is underage. We should get the sorry message from the If statement, which we do, "Sorry, please come back when you are 18." If the user now is between 18 and 25, we should get the please reply identification message. Then lastly, if the user is over 25, it should be allowed to enter the website. So refresh, and there we go. We get the final message of please enter. So well done if you manage to do that on your own, if it was something you did struggle with, don't worry.Now you followed along with me, may be do a skip a day or two and try that again yourself and see if you can work out next time. Both now, thank you. I'll see you in the next video. 23. Logical operators: So we've looked at using if else statements. We've comparison operators such as greater than, less than or equal to. In this video, we're going to take a look at logical operators. Logical operators are also often used with if else statements. Let's take a look at how we can use them. Let's get started with a folder. This is number 4. This is called logical-operators. Then open that folder up in brackets. Just drop that in there. So again, start in the same way as usual with a new title of logical operators, and then delete everything between the script tags that we don't need. So to start with, I'm going to create a couple of variables that we can work with. So just simply we're going to call this number 1 and set that to be 10, and then a second variable, number 2. I'm going to set this one to be 20. So what we're going to be looking at in this video is using the and which is the two ampersands. We will look in at all, which is the two vertical bars or the pipes, and looking at the exclamation mark, which means not. So we're going to get started with and. I'm going to combine this with a if statement. So let's create a simple if statement. Lets create document.write just saying condition is true, and actually we'll put some h2 tags around these, so just a little bit bigger. So let's get started with a condition which is true. So if number 1 is equal to 10, then that's right condition is true to the browser. There we go. So that is true. If we wanted to check if more than one condition was true, we can use the and logical operator. So we can test a second condition. So this is if number 1 is equals 10, and also if number 1 is less than 20, and both conditions are true. So if we hit refresh, we look at the condition is true statement. So that's a good way of checking if more than one value needs to be true to trigger an action. As well as and, if we wanted to just check if one of these statements was true, we can use the two vertical bars or the two pipes. Now only one of these sides needs to be true for it to trigger this document right. If number 1 is equal to 10, or number 2 is equal to 10. So now just number 1 is true and number 2 is false. So refresh, and there we go. So get condition is true. But if we'd change this to be two false conditions, that text disappears now. The next we're going to look at not. If you remember from earlier on the course, we looked at some of the operators you could use, such as less than and greater than. These can be combined with the exclamation mark, which does the exact opposite. So rather than the less than symbol, this would simply mean not less than. So let's just test this in our if statement and take a look. So let's just delete a little bit of this. So we'll start with a true statement. So if number 1 is less than number 2, which is, we should get the text there, but if we wanted to do the exact opposite, I'd make this condition false. We'll just simply combine that with the not symbol. So if number 1 is not less than 2. So now if we refresh, we should see that the text disappears, and it doesn't have to be the less than or greater than symbol. We can also use the equals symbol. So if number 1 is not equal to 20, then print this statement out. There we go. So that's just wanted two more operators to look up, which you may find useful, and I'll see you in the next video where we'll take a look at using switch statements, and we'll take a look at how we can use them in JavaScript to handle multiple outcomes or multiple cases. So thank you and I'll see you there. 24. Switch statements: In this video, we're going to take a look at switch statements. Switch statements work in a similar way to if else statements, which we looked at earlier in the section. In switched statement, we provide multiple outcomes or cases. Then when an expression matches one of these cases, an action is performed. Let's take a look at how switch statements work in JavaScript. Let's create a new folder, and it's number 5, and it's called switch-statements. Then it got opened up in our text editor, and then drag inside the switch-statement folder, and then open up the index page. I'll make it a little bit bigger so you can see it. Then we'll change the title again to switch statements. Then remove all this between the script tags. With switch statement when we're comparing a statements, or in our case, we're going to create a variable. I'm going to call this variable the month, and then when I set this to January, and then to create a switch statements, we use the switch keyword and then open up some brackets, and then the curly braces. Basically it looks a little bit like an if statements out the stage. Like the if statements, we pass in inside the brackets, the condition we want to check. In our case we want to check the variable of month. Then we're going to provide multiple cases that we want to check against, and we use the case key word. Then we start to give it some outcomes that we want to check. If we check if the value a January, and then use a colon, and if it is January, we can provide a outcome. I'll around some code. I'm just going to do a document. write, and now it is passing a message in there, such as happy new year. Then afterwards you want to use the break keyword, and when an expression is matched to the particular case, in this example, January matches the case, because this is matched, we then use the break keyword, and we'll put this after each case, and as soon as the condition is met, it then breaks the switch statements. But we said earlier that switch statements are useful for checking many different outcomes. We simply just do this with more cases. Let's put some more months we add in there. Let's put in July in there and then a document.write. This time I should put an halfway through the year. Then the break keyword again, just after the document.write, just in case this condition is matched, make sure all the cases in between the two curly braces of why start to run into problems. We can keep going with as many as you like. I'm going to create one for December, and then a colon, in fact, we'll just copy this document.write, and then paste that in. This time for December, we're going to put in, nearly the new year and then the break, just after it. This is essentially how a switch statement works. It will go through the individual cases until the statement is matched, and then it will break out of the switch statement. But, if an outcome can't be found, we need to provide a default case. This is a default code to run, it's known of the cases are matched. Defaults and a colon, and then it's putting the default code in there. I'm just going to put in the month is, and then I'll just put the month variable into there. If we count much one of the statements up, and if can't prints out the message, will just get the default, the month is, and then in our case in January. So save that, and then it's opened up in the browser. Because we got the month as January, we set the case to be happy new year, which is just the first one there. If we change the month to July, we should get the half way through the air message. Refresh that, and halfway through the year appears. Let's just try December. How much get the third case of nearly the new year and refresh. They look great, and if we put in a month, which is not one of these cases, so we'll try March. Hopefully, we should get the default case, which is the month is, and then March. There we go. We can also put in as many cases as you like, and you can even provide more than one case with the same piece of code to run. For example, if you want it, another case on there, and we want it to say nearly the new year for November and December, that's not a problem. We can just do our cases like this, and then this document.write, will be run if the case is either November or December. Let's just try that. So change the variable to November. Nearly the new year, and that should work the same for December too. Still nearly the new year, we'll just try one more. So October, we don't have a case for October, so we should get the default, which is down at the bottom, refresh, and there we go. So the month is October. I hope that makes sense and I hope you understand that switch statements are really useful for when we want to check a condition against many possible different outcomes. In the next video, we'll move away from the theory. I will move on to a mini challenge where you can start by your skills you've learned, in the section into practice. 25. Mini challenge: Higher or lower game: Welcome back. In this video, we're going to be taking a break from the theory and creating a mini challenge, which is going to be a simple, higher or lower game, and it's basically going to consist of a computer generated random number between one and 10. Then we need to guess if the number that the computer will generate it is higher or lower than five. We're going to create a simple webpage with a couple of buttons on which is higher or lower and then we need to create a display which shows if the guess is correct or not. Most of the things that you need for this challenge has already been covered in this section. The only thing that we haven't looked at yet is onclick events and that is basically when a user clicks on the button on the webpage and that triggers a function or an event. This function will contain the code which compares our guess with the computer's generated number. So if you'd like to give the a go yourself, feel free to do that. Or I'm going to get started and start with the HTML and show you the onclick events. So if you prefer, you can follow along with me, open SoloLearn, and then give the JavaScript to go at the end or follow along with me right to the very end if you prefer. So let's get started with its own folder. In the control flow and loop section, we can duplicate the last video and it's number 6. So higher, lower game. Then open your text editor and then change its title, higher or lower game. We don't need the switch statement from the last video. So just delete that and get back to a basic HTML index page. I'm going to start by creating the webpage of the user interface. I'm going to start it with a div. I'm going to get this class, well, this is a Bootstrap class which will hold all the divs that we're working on. It will make it stand out with a background color. Also, I want to use the class of text-center, and this will pull all the text into the middle of the page. I'm just going to put some instructions on the page you start with. So it's title first, higher or lower and then a level 2 heading, which is the instructions on how to play. So is my number 5 or less or higher than five. Then some p tags below. This is just going to show the range. The range for the random number is 1-10. Then below that we need a empty div. So I'm just going to put a level 3 heading in there. Initially there will been no content in between these tags because we're going to put that in using the JavaScript. This would be where the text is displayed to say if you won or lost. Let's give it an ID so we can tag that with the JavaScript later. So I'm going to call mine textField. Let's just take a look at that and see how it's looking. We've got the name on the instructions. Now we need to create a couple of buttons below. One with higher, and one with lower. Let's put that in a input. So the input type is button. Let's add some Bootstrap classes to that just to make it look a little nicer. So btn and btn-info, and that's going to create a nice blue button for us. The value that we need, this is going to be the text which appears inside one. Let's put this one as higher. Then we mentioned at the start of this video that we're going to take a look at onclick events. We'll look at these in a little more detail later on in this course. But for now we just need to know if we add the attributes or onclick. Then we can pass in the name of a function. When this button is pressed, it then triggers the function. Let's put the function name. Although we haven't created the function yet, we can still put it in. Then because it's a function, put the curly brackets afterwards, just in the same way as we would normally call or invoke a function. We'll create our function soon. That's the higher button. Copy and paste or duplicate our inputs and that will make the lower button and change the function this time to lower. Then let's take a look. Great. There's our higher and lower buttons. Just the last thing I want to put in for the user interface is a third button, which is just a Play Again button. After each case we can press ''Play Again'' and the page will be reloaded. I'll put this in its own div, so appears below. The div, we'll also give this the class of well text-center, just like this div above and then a input with a type of button and then some Bootstrap classes of btn btn-info. The value is Play Again. Then the onclick events and then we'll call this one reset with the brackets afterwards. Let's refresh the browser and take a look. That's looking better now. Now we've got to the stage where the HTML or the user interface is complete. If you like to give that a go and finish off yourself, feel free to do that. All you need to do is create a random number and then create some functions which are triggered every time these buttons are pressed and then to check against the randomly generated number. So give it a go, if not, just follow along with me. Let's go back over to the text editor. I'm going to start working between the script tags because we just need to do the JavaScript now. To begin with, we'll get the randomly generated number. So we'll put that inside a variable called computerGuess and this is going to be a math.random. If you remember from a couple of videos ago, math.random generates a random number between zero and one. Because we want 10, let's multiply this value by 10. Then we need to round that number up. So let's change the computerGuess now to be equal to math.ceil. This will round up and then pass inside the brackets, the variable that we want to round up, which is computerGuess. Now let's just print this to the console and check that it's all working correctly with a console log, and I'll put inside the computerGuess, and hopefully we should get a random number between one and 10. So go into the Developer Tools and there we go. We've got the value of seven inside the console and then refresh and as a 4, 9, 9, 9 again and a 1, a 2. That seems to be working okay. Let's just get rid of the Developer Tools and we can move on. We can remove the console log now we don't need that. Inside the HTML we created the onclick events. I'm going to start with the higher function because we called the function, but we haven't declared it yet. Back between the script tags. Hopefully you can remember how to create a function using the function keyword, then the function name with the brackets. What do we want this function to do? Well, we want it to check if the computer's guess is higher than five. Let's create an if statement in there, if the computer's guess is greater than five. Now we want to display a message. If you remember, we created a empty h3 tag with an ID of textField. So we can use JavaScript to grab this empty div or empty heading and then insert some text into there. So document.getElementByid, and the ID that we want is textField and then we want to use the innerHTML. So select innerHTML, I'm going to set that to be equal to You Win. If the user clicks higher and the guess is greater than five, the user wins. So else, let us copy this document.getElementByid, else and then the curly braces. So if the guess is lower than five or five itself, we can then grab the textField heading and this time print a text, You Lose. That will also create the higher function and now we need to create the function if the lower button is pressed. Because this is going to be fairly similar, we can copy the function that we just created and then we'll change this to lower. This time, if the computer's guess is lower than or equal to five, then the user wins. If not, the user loses and the message will be displayed. Now we've got the functionality if the guess is higher or lower. Now we just need to work with the reset button just to clear the screen or to refresh the screen every time the user wants to play again. This is going to be a simple function, but it's something we've not quite looked at yet in this course. So function reset, and then to reload the webpage, we crop the window.location.reload, and then the brackets afterwards. Every time this reset button is pressed, the webpage will be refreshed with this line of code. Let's save that and take a look and refresh the browser. Let's start with higher, so you win, play again, lower, you lose. Let's try a few more times so you lose. You win, you win, you lose. That seems to be working okay. That's the basic functionality or working for the game. If you'd like to take it that little bit further, when the user's guess is incorrect and you lose, you can then put some text in there, which displays the random number generated by the computer, just so you can check what that was. But for now, I'm trying to leave this game there, and thank you. I hope you managed to do at least some more yourself and join me in the next video where we'll take a look at loops and how they're used in JavaScript. 26. While loop: Loops are really popular in lots of programmer languages, and JavaScript is no exception. In these next few videos, we'll be looking at For loops, While loops, and Do While loops. Don't worry if this is unfamiliar. We'll take a look at exactly how each one works, starting with the While loop in this video. Loops can be really useful and it can save us a lot of repetitive typing. Let's get started with its own folder, and this is number 7. I will call this one, while loops. Let's open it up in brackets and drag it in and rename these While loops. Let me get rid of all these from the last video, and also all the HTML below. Let's start with a basic While loop. We use the while keyword, and then the brackets, and then the curly braces. This might start to look a bit familiar to you. This is basically the same layout as the switch statements and the if/else statements that we looked at previously. Hopefully, it shouldn't be too unfamiliar. The brackets afterwards also work in the same way as if-statements as in we pass a condition into the brackets, and while this condition is true, and then we run some code in between, and this code keeps looping or repeating until this condition is no longer met. While this is true, we need to do this or whatever is in between the braces. Let's put a basic example inside this While loop and begin. We're going to need to create a variable. This variable, I'm going to call i, which is a pretty common variable name for using with the loop. But you can call it anything you want. I'm going to set the initial value of i to be equal to one. While i is less than 10, we want to do something inside the braces. Let's just keep it simple with a document write. We want to write to the browser the value of i every time we loop, and then just so the value of i appears on its own line, I'm going to put a break tag inside there, and then i++. This might look a little bit strange but what were you doing? Is we're setting the value of i to be one, and then while i is less than the value of 10, which it currently is, we're then going to print to the screen the value of i. To begin with, number 1 will be printed and then every time we loop through this code, it will be i++. The next time the loop goes round, because we're doing a i++, i will be then set to two and then we'll loop round again and print two. Then this will be incremented again to three and this will keep happening until i is less than 10, or in our case we'll get number 9. So we should see on the screen printed number 1 through to number 9. Let's take a look in the browser. Okay, there we go. We got the value of 1-9, and because it will break target line as well, each one of these values is on their own line. But just one little word of warning when using While loops, is it can be quite easy to crash the browser if we don't do them correctly. If we take the i++ out of there, so every time this While loop runs, the value of i will always be one. So then we'll create a infinite loop which will never end because i will always be less than 10 and this will cause the browser or your program to crash. Be really careful that we increment on each loop. Another popular way of using loops is to loop through an array and then print all the values of the array. Let's show an example of that now. Create a array called foods and we'll set that in the literal way. Just add some foods inside the array, separated by commas, so pasta, pizza, and fish. Because the index of arrays starts at position zero, I'm just going to change the variable of i to be zero. If you remember from the array section, we can print the array's value. Let's do a quick document write and then we pass in the name of the array. If we wanted to print an individual item inside the array, we could select the number bytes index. If we wanted to print pasta, that is index zero. I will just comment this out and then print. That's how we get the value of an array. But if we wanted to print all the values of the array onto the screen, let's just uncomment this for now. Because we're using a loop, we want to pass into the loop the index number, so let's just take that out of there. Paste that in the brackets. We don't just want to select position zero, we want to set that to be i, because we want to loop through and increase this by one every pass of the loop. Instead of printing the value of i, we want to print the contents of the array. We want to print the foods and the foods number is the value of i. What will happen there is the loop will be run and the loop will begin with the value of zero, which is pasta. Then we'll print to the screen the value of pasta and then i will be incremented to one, so that changes to one, which is the second index, so that's the value of pizza. Then pizza will be printed to the screen and that will loop around again, and i will be incremented to number 2 which is fish, so 0, 1, 2 and then fish will be printed to the screen. Then the loop will end because that's all the values of the array. Let's start again with zero, save that, and refresh the browser. There we go, so there's our free values of the array, and that's how a While loop works. Thanks for watching, and we'll move on now to the next video. We'll take a look at a slight variant of the While loop, and this is called the Do While loop. 27. Do while loop: In the last video, we took a look at while loops. This video is all about a slight variant of the while loop, and this is called a do while loop. It works in a similar way, but with just a few subtle differences. Let's create a new folder. We duplicate while loops. This is number eight and it's called do while loops. Then open up any text editor and then create a new title. So do while loops. Just leave this code in for now, we can reuse some of these parts. Whereas, the while loop from the last video will always run while this condition is true, a do-while loop will always run at least once first and then check if the condition is true before it carries on. We have the do keyword and then inside the curly braces. The code inside here is always, run once at the start, before we check if any conditions are true. Do with this code and then we check the condition using the while loop. Then if this condition is true, the code will continue to run and if it's false this code will only be run once and it will stop after that. Let's delete the code from the last video. We're going to create an example. We'll start with a variable, so we'll use the variable name of i again. Variable i is equal to one. Then let's do a document. Don't write inside there, we'll just print the value of i. Again the break tags. Then just like the while loop, we'll increment by one. Then inside the while section, inside the brackets we'll put the condition. While i is less than 10, we'll continue to loop through and print the value of i. Let's save that. This condition is true, so this will keep printing the values up to nine, which you get on the left-hand side there. Let's go back, if the condition is actually greater than 10, we should get the value of i printed, which is one, but it won't return a second value because the condition is false. Now let's just get one printed to the browser, because a do while loop always runs once. That's all there is to it. A do-while loop is quite simple to understand if you already get the concept of while loops. Thank you. In the next video we'll move on to another type of loops, which is the for loop. Thank you and will see you there. 28. For loop: Welcome back guys. This video is all about the JavaScript for loop, and this is the third and final type of loop which we'll be looking at in this section. If you understood how the while loop works and the do while loop works from previous videos, you shouldn't have any problems understanding how a for loop works. Let's begin with its own folder in the Control Flow section, and this is video number 9: for loops, and then let's open it up in Brackets, and then change the title to For loops and we can leave this loop for a reference. For loops are useful when we know how many times we want to repeat that loop. Whereas a while loop, will run until a condition is no longer true. In a for loop, we need to say how many times it will run. We'll begin a for loop with the for keyword, and then initial look fairly familiar from the rest of the videos. We use the brackets and then a set of curly braces. In a while loop or a do while loop, we set the variable and this is set outside of the loop. While using a for loop, we need to put in three different values in between the brackets. The first one is the initial value of the variable. I want to use, i once more and the three values need to be separated with a semicolon. The second value is a condition we want to test against. As an example, we want to run the loop while i is less than 10, and then a semicolon, and just like previous loops, we can use pretty much what's in here, we can use equals or any of the operators. The third value is going to be our incrementer. Again, I'm going to use i plus plus to increment the value by one in every loop. We can also use the same document write from the last video. So put that inside the curly braces. we can just delete this for now. That's how a for loop looks. We initially set the value to be one and the loop will keep running while the value of i is less than 10 and with every possible loop, i is incremented by one. So we should get the values of one right through to nine printed when we open this up in the browser. There we go. We've got one through to nine, such are working correctly. So just like while loops, we can also use a for loop to loop through the values of an array. Let's take a look at how we can do that in a for loop. Let's use our foods example that we looked that in the while loop. Again, I'm going to put in pasta, pizza and then fish, and then create the for loop just like we used above. Let's declare the value of i initially, so i is set to zero because the index of zero is the first value of an array. So once that starts at zero, and then the number of times we want to loop through is equal to the number of values inside the array. So while i is less than foods.length, and you may be wondering why we're using less than rather than equal to the length of the array, well that simply because the length property begins at one rather than zero, so that's why we need to do that, and then a semicolon and the third value is our incrementer, so i plus plus and then let's set document write and then we want to print out the value of the foods array, and then inside the square brackets one pass in i. Initially i is set to zero, which is the value of pasta, and then we'll loop through and i will be incremented and then be the value of one, which is pizza, and then the third and final loop, i will be set to two, which is the third value of fish. Let's just run that now with the break tag, so they're all on separate lines. Break tag in there and then let's refresh that in the browser, and there's our three values of pasta, pizza, and fish. There you go. That's how a for loop works in JavaScript. In the next video, we'll be taking a look at using these in a mini challenge. 29. Mini challenge: Phone book: Welcome back. In this video, we're going to take a look at a mini challenge, which is going to put into practice the for loops that we used in the previous video. On this mini challenge is going to be about creating a simple phone book. The phone book is going to print out the values of all your friends names in an array. It's going to sort them into alphabetical order. Again, I'd like if you could try it out yourself and see how far you go before you follow along with me. Just try and get that to work if possible without my help. But don't worry if it's something you struggle with. You can follow along with me at the end, and I'll show you a way of doing that. Let's create the folder for this project. This is number 10. I want to call it the phone book challenge. Then open this up in brackets. Then set the title, phone book challenge, and start with a blank script tag. In this challenge, I'm going to get started with creating an array. The array is going to hold the values of your friends. Because we want to use JavaScript to sort these out into alphabetical order. When you place the values inside the array, try not to put them in alphabetical order. Because we want JavaScript to do this follows. Start with an array. I'm going to start with Chris, I'll just put values of as many people inside that as you want. I'm going to start with five values. Just to get us started with. Just like that. Then I'm going to use a for loop, which we looked at in the last video to loop through all the values and then print them to the screen. Let's start with the for loop and then just simply print the values of the array to the browser. I is going to be initially set to zero, which is the first value of the array. Then we want the loop to keep going. While I is less than the names array.length. Then on each pass of the loop we want to increment I by one. Let's give this a go and see if it works. Let's do a document write to the browser. Then let's take a look at names, and then I. Let's see what we've got now. There we got, Chris, Paul, Mike, Andrew, and Dave. There's all the five values of our array, which is fine, but it doesn't look very good and we also want to sort these to be in alphabetical order. Let's begin by sorting them alphabetically. We've currently got all our names stored in the variable of names. We need to set these to be alphabetical. We do that with names. Then we use the sort method. It's now going to be using an alphabetical order when we refresh, there we go. That works okay. We've got Andrew, Chris, Dave, Mike, and Paul. That's all in alphabetical order. Just to give this project a little bit style, I'm going to add some pre tags. I going to add these just before and then also I want to add a just after. Don't forget the plus symbols in between we'll set the forward slash. Let's see how this looks now. That's now a little bit more readable. We've got all our names printed in alphabetical order and with a little bit of a background to each value. If you've got this far, well done. I just want to add one more thing just to finish this off. I just want to add a number next to each person's name. 1, 2, 3, 4, 5, so we know how many names we've got inside the phone book. Just after the pre tag, we can get that number with the value of i, because is going to be incremented with every loop. Then also a colon just to separate the name with the number. Refresh. Now we've got 0, 1, 2, 3, 4. Just because the first value is zero, I'm going to add i plus 1, so it begins at one rather than zero and refresh. That's better now. We start with the value of one and then we can see how many different names we've got in our array, or our phone book. Hope you managed to do that, or at least give it a go and see how far you got and that's the end of the mini challenge and the end of the section. I'll see you in the next section, which is called JavaScript and the DOM. 30. What is the DOM: Welcome back and welcome to this new section called JavaScript and the DOM. In this video, we're going to take a brief overview of exactly what the DOM is. The DOM is short for the Document Object Model and I'm just on the Wikipedia page for the Document Object Model, and you can find out small information just on there. It starts by saying the DOM is a cross-platform and language independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. You may be wondering exactly what that means. To keep it simple, all the sections or elements, or all the nodes in every documents or web page is organized into a tree-like structure. If we go over to the W3Schools section on the DOM, you can probably get a better idea of exactly what's going on. We can see a visual diagram of all the HTML DOM tree of objects. This is our basic webpage, which starts off with the documents right up at the top. We've used up before in this course when we've been selecting elements by ID. We started with document and then get element by ID. We've got document right at the top of the tree and then all the different elements on the webpage, a branch down from the document. We've got the head section and then we've got the body section, which are the main two elements inside the HTML root element, and this should all look fairly familiar from HTML webpage. Within the head section, we've got a title. Within the body section we've got the attributes, the elements, such as the headings, the anchors, and then all the text contained within those. You may be wondering what this has got to deal with JavaScript. Well, basically, JavaScript can make webpages dynamic because JavaScript can control or manipulate all of the elements in the DOM tree. We can grab any one of these elements and we can override it, we can manipulate it, we can add to, we can add certain attributes or elements, we can change CSS styles or even remove any of these elements. In the next few videos, we'll be taking a deeper look at how we can access these elements and how we can manipulate these elements. But before we do that, I just wanted to give you a brief overview of exactly how we can do that and why the DOM is important to JavaScript. But for now the main thing to understand is how a HTML document is laid out and also understand that JavaScript can access or manipulate all of the elements in the DOM tree. We'll now move on to the next video and we'll take a look at how we can access all of the elements inside this DOM tree. 31. Accessing elements: Now we know that JavaScript can interact with DOM. In this video, I'm going to show you some methods of selecting elements on a web page. Let's get started with a new folder for the new section and then call this section the DOM. We need to get a folder from any of the previous videos. Just the starter template. Copy any one of those and paste them in. This is number 1, and this is called accessing elements. Then open it up in your text editor. Drag it in like that. We need to get started with a new title; accessing elements. Then we can delete all the code from below between the script tags. In previous videos, we've looked at document.GetElementById, and then we can select an element of the web page. If we add a level 1 heading and insert an ID, for example, of title. We can then grab this level 1 heading by its ID of title, and then we can do various things such as setting the inner HTML to be equal to anything you want. So let's set this to displaying JavaScript's in web pages. When this is opened up in the browser, the empty level 1 heading should have the text which you've placed at the bottom there. So let's open up. There we go, there's our level 1 heading. There's also other methods we can use to select elements on a web page. The next method I want to show you of grabbing elements on web pages by using the querySelector. As well as selecting elements by their ID, we can also select elements in the same way as it would in the CSS by using the CSS selector. Let's create an example with some text. So let's create three P tags with some class names. This one can be first and then the content can be the first line, and you have to copy that twice. With second and the class of third. Just leave this third one blank for now. Now we know how to access a element by its ID. Next, I want to move on to accessing an element by its CSS selector. We can do that with document.querySelector. Let's take a look at that. Document.querySelector. Inside the brackets, we want to pass in the CSS selector. In our case, we're going to put in the class. So let's put the class of second inside there. Then we can make some changes. We're going to add style.backgroundColor and then we set that to be equal to any value we want. Let's set that to be red. Now the second line should have a background color of red. Let's save that. In fact, we can just comment this section out and then refresh inside the browser. Now we've selected the second line by its ID and replaced the background color. If we were to change this to be first, we could just change it over by its class name and that would select the first line. That can be really handy for selecting elements on a web page. So as well as selecting elements by their CSS name, we can also select elements by their class name. Let's just delete this example. We can use the paragraph text from before. Let's create a variable called selector. This is going to be set to documents.getElementsByClassName. Just be wary that, this has got a S on the end of elements where getElementById doesn't have the S on the end because we're only selecting one particular ID. Whereas getElementsByClassName will return all of the elements on that page with a particular class name. Then we want to select the class name to target. So let's add a class to the level 1 heading of heading and then we just put this inside the brackets, and then a semicolon at the end. This would select all the elements with a class name of heading. If there was more than one, we would then need to declare which element we want to target by its index number. In our case, we want to go one in class of heading. So that will be index number 0. If we had a second line with the same class, this would be index number 1. Let's change the inner HTML and set that to some text. Class name selected. Let's run that inside the browser. There we go. That's our level 1 heading with class name selected. Another one which you may find really useful is document.getElementsByTagName. It works in a pretty similar way to the last example. The tag name is either the H1 or the P, or it could be any one of the elements on the web page. It can even be a GIF or a image. This time the selector is going to be equal to document.getElementsByTagName. Let's select the P tags. Then just the same as before, we can then put an index number. So 0, 1, and 2. Number 1 is the second line of text on there. This time so we know it's working, we'll simply print out tag name selected. Save. There you go. Now line 2 has changed to tag name selected. If it changes to zero, tag name selected should now be the first line. There you go. The last example I'm going to show you in this video is to select the number of images inside the documents with document.images. To do that, we need to create some images inside the web page. You don't actually have to have any images physically there, we can just make up some image names. So image 1, image 2, image 3, and then image 4. Then if we want to know how many images are on that web page, we could create a variable called number of images. The number of images is going to be equal to document.images.length, and then we can print to the screen the number of images in a string. So let's create a empty element to display these in. A H1 tag with ID of example. Then let's do a document.getElementById, and then select the example. Then paste that in. We can set the text with the inner HTML. Let's set this to this page has and then a space, plus the variable, which is going to contain the number of images on the page, then plus, and then we want the word images inside a string. Okay, if that works well, we should get the text displayed of this page has, and then four images. Let's save that and take a look. Great. That's working fine. If we were to delete one of these images, that should now be changed to you three. There we go. There's lots of different methods you can use to access elements on a web page. I recommend you to take a look at the Mozilla website, which I'll provide a link to. There's many more examples on there. Hopefully, now we understand that we can access pretty much any part of a document or of a web page that we want. In the next video, we'll move on to how we can manipulate or change these elements. Thanks for watching, and I'll see you in the next video. Thanks for watching and I'll see you there. 32. Manipulating elements: Welcome back. This video is called Manipulating Elements. As usual, let's start with our own folder, so this is number two, Manipulating Elements. Then let's open this up. Then let it started with its own title and an empty script tag, so this time manipulating elements, then just clear all this up. We start with our blank index page. We know from the last video how to access elements, so now let's take a look at how we can change these elements using JavaScript. So let's create a level one heading as an example, and let's give it a ID of title and then some text between the level one heading of changing HTML elements. We've looked at manipulating a value by using the in HTML. That was document.getelementByID. Then we know we need to grab the ID of the element you want to change, which is title. Then we've used inner HTML to change the contents of the elements to anything that we want to. We're going to put any text in there that we want. So as well as the inner HTML, we can also change the CSS or the styles of a particular element, and we'll do that with.style. Then once we've selected the style, we can go further into the CSS by using the dot. You can see using brackets that as soon as we use a dot, we then get a list of all the available CSS properties that we can select. So I'm going to start it by selecting the color. Then we're going to set that equal to, I'm just going to start with red. Let's now open this up in the browser and take a look. We've got the level one heading of changing HTML elements. Then well add in a CSS style, and then we'll set in the color of the text to be red. So let's that up. It's now about the text all red on the page there. We can add many different CSS properties on there, we can change the font size, and let's make this text really big so we can check its working. For 100 pixels, so have a little play around with that and try and select some of the different CSS values and see what you can achieve with them. But I'm not going to move on to getting and setting the class names or the ID's of HTML elements. Let's start with getting the class name or the ID. So to do this, we need to add a class to our level one heading. So let's just add a class of red and then we can find out what this class name of this particular element is. Let's select the document.getElementByID, so let's let the title id and then.class name, with the semicolon at the end. So because we are grabbing a className. I want to store this inside a variable so we can access easily. So variable of class name is equal to document.getElementByID. We'll grab in a title, and then we'll select in the class name, let's now do a document right and then check. We've got the class name correctly stored inside the variable. Let's just put this inside the brackets and then refresh. You can just about see that we've got the class name of red appearing at the bottom. This also works with ID. You just need to change className to.ID and then just display the results once again inside a variable, so ID name, save that. We've got the ID set to title in this case. That's how we can grab or how we can get the class name or the ID of an element. Sometimes you want to add an ID or other class or even an additional class to an element. Let's take a look at how we can add classes and elements. I want to add some styles and create a few new classes that we can to this element. Let's use our red class. Let's set the color to be red and make it a bit more readable, we'll set the font size to 2 ems. Then it's also create a second class of blue, and then we can add this to our elements and change the color to blue. Then let's add an additional ID that we can add the element two. I'm just going to set the font-family to be fantasy. Below we got the ID and also the class of the particular elements. But if we want to set the ID, we just simply use the.ID and then set that equal to the ID name that want to add, so in our case it's ID1. If this is added correctly, we should now get the font-family change to fantasy. So save that, and then head over to the browser and refresh, there we go. Great. We've got the different font-family, so the ID is being added to the element. Adding a class works in exactly the same way, so let's just duplicate this line, and then we'll set the className. Grab the element by ID of title and then.className. Then instead of the red class, let's add the class of blue that we've created, and then save that, and let's get rid of the ID name, so save that and then refresh, and now we'll get the blue color, so that's all working correctly. Now we know how to add IDs and classes to elements, we also know how to access the particular class or ID. Next, I'm going to show you how to create and to add new elements to a page. Let's start with a blank script tag, and I'm going to store these in variables. I'm going to create a variable called a new element. The new element we want to create is going to be equal to documents.createElement. Then inside the brackets we need to put the name of the element that we want to create. I'm going to create a new div. This will create a new div and store it inside the variable called New Elements. Inside this div, I want to create some text to put inside there, so let's create a new variable called addText. The way we can add text to a div or to a document is by using document.createTextNode. Then inside the bracket I'll put inside the string that we want to create, new text string. We got our texts, and we've also got our new div. So to add the text to the div, we select the new element variable, which is the div, and then.appendChild. The child which we want to append or add to is the addText variable. So just put that inside the brackets. Now we've added the new text to the new div. Let's now add this to the documents, so document.body.insert Before. In here we tell the browser exactly where we'd like the content to be added. InsertBefore takes two parameters. So the first one is required, and this is the content or the object that we want to add. We want to add the new element variable that we've just created, so that goes in first. The second value is optional, and this is the marker in HTML where the new element will be added just before. If we wanted to add new elements to just before our level one heading, let's create a new variable called new content, and then let's set content to be equal to this heading at the top. So document.getElementByID. We want to grab the ID of title, so just put that between the brackets, just like that we just want to make sure that that's a variable. So there's a bit going on there so we'll just take a little look at this again. We're creating a new element, or a new div. Will then add in a new text string to that div using appendChild. Now we've got this information stored in a variable called new element. We'll then add this to the document using insert before. The section of code we want to add is this new elements which contains the new div and new text string. Then the second value of new content is where we want to add this new element two, and we want to add it just before our level one heading and then go to the browser and refresh. There we go, there is our new text string. If you wanted to give that particular div and ID, you can do that with new elements or the newElement variable.Id. Like we used in the last example, we're going to set the ID to be equal to anything you want. I want to set mine to my ID, and then save that, and now when we refresh the page, if you go into the developer tools, and then if we select the new texturing. You can see the inside the body we've got a new div with an ID of my div, and the content is new text string. That's how you can add new elements to HTML by using JavaScripts. So thanks for watching and in the next video we'll move on to a mini challenge, which is create a temperature converter and it will put into practice what you've learned over the last few videos. Thank you and we'll see you in the next video. 33. Mini challenge: Temperature converter - Part 1: Welcome back. In this mini challenge, we're going to create a temperature-converter app. It can be a simple or as creative as you would like, but this is what I've come up with, just as an example. It is simple HTML form which takes the user's inputs, and then we can convert it to Celsius or to Fahrenheit using JavaScript, so do try it and see what you can come up with, otherwise, follow along with me and I'll show you how I created this. Let's get started by creating a folder for the project in the dom section. This is number 3 and this is the temperature-converter. Now let's open up in brackets and we can get started. The title is temperature converter, and let's lay all the sample code from the previous videos. I'm going to begin with the HTML section.1 So I'm just going to create a Bootstrap HTML form. Let's start outside the script tags. Let's create a container, which is the Bootstrap code, and then let's create a Bootstrap row, and then let's use the Bootstrap grid, so col-sm-6. If you're using the Emmet plugin like me, you should be able to get the this grid pretty fast, if not, you'll need to type this out with the classes and also to send this div, we'll add the col-sm-offset, which will offset the grid by three and place it in the center. The Bootstrap class of text-center which will keep everything nicely aligned in the middle and then lastly, I created a content class, and this you're going to be used to style it in the CSS. Let's begin with a level 2 heading, which is just the title of our app which is Temperature Converter, and then let's create our form. Because we're using Bootstrap, let's create a div with a class of form group and this will make sure everything is nicely laid out. Within the form group, let's create a input with the type of number and this is a section where the user can enter the number that they want to convert to Celsius or Fahrenheit. So the ID, I'm going to set to UserInput, and in fact we'll give this a label, so label 4, for the UserInputs ID, and let's close the sidebar. Let's save and let's check if that's working okay. There we go, there's our heading on the input. Let's just complete the label now. Let's put in Enter your number to convert. Just like that, and then refresh and there we go. There's the text from the label. Now I'm going to place two more buttons inside the form, which is for the Celsius or Fahrenheit. Let's put them inside now. I'm going to place these inside a new div or form-group and then the first input is the type of button, and then the text inside. We add that with the value of To Celsius, and then we want this button to actually do something when the user presses it. We want to create an onclick event which will trigger the function and we'll look at events more in the next video, but for now, just create a onclick events with the onclick keyword and then inside the quotations, we add the name of the function that we want to trigger once this button is pressed. I'm going to create a function called toCelsius, and then we need the brackets after that. So copy and paste or duplicate this. This one is To Farhenheit, and then the function is toFarenheit, and let's just take a look. It says there were two buttons on there. The last thing we need to do is to create a empty div, which you want to display the text of the temperature conversion. Just like the finished version, we're going to create text field at the bottom where the conversion appears. Outside the form, I'm just going to put this in an empty p tag with the id of results. Let's open if now in HTML. Let's now just move to the top and we'll add some styling to our form. Back open the head section. Let's create our own style tags. If you remember the down in the div which contains all the content, we add it a content class. Let's add that now inside the style tags, and then let's add some simple styles. Let's add a border, 1px solid. We'll add some rounded corners with a border-radius. I'm going to have minus 10px. Margin top just to keep it away from the top of the screen or 30px and then a background color or of the gray color, which is eee and then let's take a look. Then I just want to add the background color, which you can see on the final version there. Let's go back into the CSS and let's style the body section. To get the background, I'm just going to add a linear gradient to the background. So linear gradient and then inside the brackets, we can add two, and then let's add the two colors, to blend in. First of all, its red and then the second color is blue. It will start with red and then as it goes to the right, it will change to blue. Go into the browser and there's our gradient on the background. That looks better. Don't forget if this is a live production site. You may want to add some browser prefixes to the linear gradient just for cross-browser compatibility. Now, that's the HTML CSS all finished for the user interface. I'm just going to leave this video there and will finish itself in the next video where we'll add the JavaScript and make our temperature-converter fully functional. 34. Mini challenge: Temperature converter - Part 2: Welcome back. So we've now got the user interface completed for our temperature converter app. So in this video, we're going to finish it all off by adding the JavaScript functions to make sure that the user inputs is converted to Celsius or to Fahrenheit. So let's head back over to your text editor and then we'll work inside the script tags. So we create two functions. The first one was to Celsius and then one to Fahrenheit, which is going to take the input entered in the input field and then convert it to Celsius or to Fahrenheit. Then we're going to display the results inside this p tag there. So let's create the to Celsius function to begin with. So create the function, to Celsius. So to create this, I'm going to create a variable called Celsius and then inside this variable, I want to store the value of the user input. So document.getElementByID, and the ID that we want to grab is the user input from the form. So place that inside the brackets and then we want to grab the value of this user input. So now we've got the value of the user's input. We want to create a calculation to convert this to Celsius. So it begins with the value minus 32 and then because we're going to multiply this value, let's put this inside the brackets and then let's multiply this value by 5 and then we need to divide it by 9. This is the calculation that we need to convert to Celsius. So now we've got the value of the Celsius stored inside this variable. Let's now round it to the nearest whole number. So Celsius is now going to be equal to Math.round. The number that we want round is the Celsius variable. So put that inside the brackets. So now let's display the value of Celsius inside the results. So document.getElementbyID. So let's grab the results.innerHTML and then we want to set that to the Celsius variable. So let's save that and check that out in the browser. So let's put a number inside there. So let's put a value of 40. So 40 Fahrenheit, and then let's convert it to Celsius. So conversion is four. So let's make this label a little bit better by saying that 40 Fahrenheit is equal to four Celsius. So inside the inner HTML. So first of all, let's take the user input.value. So this is the value that the user enters in the field. Then plus then we'll add a string, say in a Fahrenheit is, and then let's add onto the end the Celsius variable. So for example, if the user put the value of five, this would say five Fahrenheit is, and then the correct conversion and then we'll want to add a string on the end to say Celsius. So let's save that and take a look. So five Fahrenheit and then click to Celsius. So that will equal to five Fahrenheit is minus 15 Celsius and let's give this a go with another value. So eight is minus 13, 30. Okay, so now that side is working, we can create the Fahrenheit function. So let's make life easier. Let's copy this function and then we can make some small changes. So this one wants to be two Fahrenheit. So the variable of Fahrenheit. So want to start by doing the same thing. So we want to create the document.getElementByID. So we still want to grab the user input and the user inputs value. But this time the calculation is slightly different, so lets multiply it by 9 divided by 5 plus 32. So let's just change the Celsius variable back to Fahrenheit and also in the Math.round. We still want to grab the result label and change the inner HTML. But this time, this needs to be Celsius and then this needs to be the Fahrenheit variable and the string again needs to be Fahrenheit. Okay, so let's save that and take a look. So let's put a value inside there and see if this works. So that's not working, so let's go back over and check why. So we got the Fahrenheit function. No it all looks okay so let's check the inputs, we got a spelling mistake. There needs to be H inside the, so save that and let's try again. So 30 Celsius should be equal to 86 Fahrenheit and let's just try one more. So 10 Celsius is 50 Fahrenheit. Okay great, so that's all working now and that's the end of this video. So I do hope you managed to achieve that by yourself and get it all working correctly, and I hope you enjoyed this challenge. I'll see you in the next video where we'll take a look at JavaScript events. 35. Javascript events: Welcome back. In this video, we're going to take a look at JavaScript events. Let's start with our own folder. Inside the dom section, let's create a new folder, which is number 4. I'm going to call this events, and then let's open. Let's open inside of Brackets. Then add a title, JavaScript events. Then we don't need the style tags for this one. Now we can also clear HTML, and also the script tags. There we go. JavaScript is heavily used in webpages to add interactivity, and we need a way for JavaScript to detect a user's actions in order to know how to react. This is where events or event handling comes in. You can also think of an event as a trigger. As an example, the browser can wait for an event to happen, such as a user clicking on a button, which you've looked at in previous videos, where the button click is triggered a function. So we briefly looked at the onclick event handler to trigger a function. JavaScript can also react to things such as when a page is finished loading, when keys are pressed on the keyboard, when a mouse hovers over an element, or even when you submit a form. Let's create a input to work with, the input type of button, and then let's give this an ID of button, and then let's add some bootstrap classes. We can change these using JavaScript events. Add a class, the bootstrap class of btn, and then btn success. Let's add a value to this button of hello, and then as we looked up previously, we can add the onclick event to trigger a function. I'm going to cite function name of change, and then down to the script tags, we can create this function inside of there, so the function of change. This should look pretty familiar now because we've used it a few times. So we want to do a document.getElementById. Now I'm going to grab the ID of button, and then once this button is pressed, I just want this to trigger a new class name. This can be equal to bootstrap classes again, or btn, btn-danger. We'll begin with the button success. Then once clicked, this will change to button danger. Let's open this up and check this is working okay. That's a button success which is the green background, and then once clicked, we get the class name of button or btn-danger added, which is the red background. That's the onclick event. We can also do a similar kind of thing when we hover over the button with the mouse rather than clicking on it. To do this, we just change onclick to be onmouseover. Now when we hover over the button, we should get the class change, just like that. So that occurs once the mouse goes over the button. If you want it to occur when the cursor leaves the button, we can change onmouseover to onmouseout, and there's a sole difference. Once we go over the button, the class doesn't change, but as soon as the mouse leaves the button, we then get the change to the red background. All of these events are going on behind the scenes on many webpages that you visit everyday. The next useful event I want to look at is onkeyup and onkeydown, and that's pretty much what it sounds like every time a button on the keyboard is pressed, or every time it's released. This can trigger an event. Let's create a example form to see this in action. Let's just comment out the input, and let's create a form. Then the input type of text, a ID to grab a JavaScript of input field, and then just like we've used with the onclick events, we can change this to onkeyup, and this can trigger a function too. We'll call the function keyPressed. So with this example, I'm going to create a simple function which is going to be triggered every time a keyboard button is pressed. I'm going to create a empty level 2 heading, and I want the function to display the text. So every time a button is pressed inside this form, I want the level 2 heading to contain the value of what was entered inside the inputs. So leave the contents empty for now, and let's add an ID of display. Then let's create our function of keyPressed. First of all, I want to grab the display with a document.getElementByID, which is the display ID. Then we want to set the inner HTML of the display to be equal to the value of this inputField. So I need inputField.value. So we'll go up in the empty level 2 heading, and then we set in the contents of the inner HTML to be equal to whatever the users types inside these input fields. This is going to be triggered every time a keyboard button is pressed. Let's take a look at this in action. There's the form in the top corner. Every time you press a key, this triggers a function, and then we'll get the contents populate inside the level 2 heading. So this function is triggered every time a key is released with onkeyup. We can also have onkeydown, and this is triggered as soon as the button is pressed down. So then two events are fairly similar, but just with a small subtle difference. Then next, I want to look at the onchange event. This is triggered when a change is detected. We can use the same form, but this time instead of onkeydown, we want to change it to onchange. Then let's create a function. So every time there is a change detected, I want to increase the font. Let's create this function down at the bottom. So when a change is detected, we want to grab the input field, which is this section, and then accept the CSS to be a little bit bigger. So document.getElementByID. Again, let's drop the inputField, and then.style.fontSize. Then so we can see it's working, let's set the font size to be a lot bigger, so 50 pixels, and then let's save that. Actually it's supposed to be fontSize. Save that, and then head over to the browser. Let's type something inside there. As soon as we have a click off it, I'll press a return key, and it should trigger the function. There we go. Now we've got the text changed to 50 pixels. So that's how the onchange event handler works. The last event handler I'm going to show you in this video is using onsubmit, which is triggered when a form is submitted. So let's create a example form or we can use the one from just before. For this to work, we need to put it inside the form elements, so onsubmit. Then again, we need to put a function to run, so runValidation, and then we're going to add a script inside this function to do some form validation when this is submitted. For this to work, we need to create a input which is the type of submit, and we get a value of Submit form. Save that and then go down to the script, and then create a function which is runValidation. We can put any form validation that you want in here. So just to check it's working, I'm going to create a alert and just create some text, just our form validation, and then refresh the browser. Now when we submit the form, this triggers the onsubmit function and there's our text to open before of form validation. That's really useful for doing some checks inside the browser to check that the user has filled in all the fields, or typed things out correctly. So that's the end of this video on JavaScript events. I'll see you in the next video where we'll take a look at a mini challenge, which involves reacting to onclick events to make a name animator. I'll see you there. 36. Mini challenge: Name animator: Welcome back. In this video we're going to take a look at another mini-challenge called the Name-animator. If you've understood how onclick Events work, particularly the way that we change an element once a button is clicked, you shouldn't have any problems completing this challenge. All I want you to do is to add your name to the top of the page and then create some buttons which then manipulates these elements. So in my case I've created one which makes the text big. We can change the color, we can say all the characters to be capital letters and then we can hide the name and then show it again. So it's just a good chance to put some things into practice, and get them into memory. You should be able to give that a go, and if not, just follow along with me as I create this. Back in the Dom section, let's create a new folder which is number five, and this is name animator. Open that up and change the title, and then let's begin with a blank page. In this video, I want to handle the clicks in a slightly different way. You can trigger a function if you want, but I'm going to show you a slightly different way to do that. Inside the body let's just create our name. I'm just going to put that in p tags, so the Id equal to name, and then put your name inside of that, and then let's create the five buttons which are all input types of button. You can create more buttons or less buttons if you prefer. So the type is button and then just to make it look a little nicer, let's add some Bootstrap classes, so, btn btn-info, the value which is just a text which appears inside the button of big, and then an onclick event. Onclick is equal to, and then this time, instead of triggering a function, I'm going to actually put the JavaScript inside the quotations. So document.getElementById, and then inside the brackets, we need to put the Id, which in our case is name. Place that inside of there and then hopefully you can remember how to add CSS styles from the manipulator in elements video, That was dot style and then dot font size equal to 100 pixels, and this in fact wants to be in single quotes, because we have the double quotes on the very outside there. This is just a slightly different way of laying this out, and it should work exactly the same, so, as you're saving, check inside the browser. So there's our name and then you've clicked big, we should get the text change to 100 pixels. Just before we move on, I'm going to add a couple of styles in the head section. Just to get this in the center, the body, let's set the width to be 100 percent and then text align in the center, and then just a couple of styles to our name. So add an Id of name, let's create the font size of 60 pixels, and then the color, I want mine to be blue. [inaudible] has pushed it all into the center, and just added some color to our name, and you can change that to whatever you want, so be as creative as you want to be. That's our first button, all working correctly, so, now it's just the case of creating more buttons with various CSS styles. We can either type this all out, or you can just copy and paste, or duplicate. So I'm just going to copy that, and then paste that below. I want my second button to change the color of the text, so, let's give this a value of change color, [inaudible] at the style dot color to be equal to red, or any color which you like, so mine is going to be red. If we refresh and click change color, there's the red styling. Now let's create a button to transform the text to be all uppercase. So the button value is capitals, and then this time the style dot text transform, and then this is going to be equal to uppercase, and then two more buttons. This one is to hide the button, and to hide the button we do the style dot visibility. So visibility is equal to hidden. The last one is to make the elements appear again, this is show, and then style dot visibility once again, then this is equal to visible. There's our five buttons, so save that. Okay. Let's try all the buttons and see they're all working, big's working, change color is, all changing to capitals, hide, and then show. There we go. I hope you manage to do that by yourself. It's quite a simple challenge but it does give you the chance to put into practice what you've been learning, so it's really useful to give that go yourself. Thank you, and we'll now move on to the final project. We will create a business card application. Thank you and I'll see you in the next section. 37. Creating the user interface: part 1: Congratulations on getting to the end of this course, and now we're going to go into a really fun part where we're going to get to create a business card application. This is an example of what I'd like you to build. It's something I've created to go through and show you how it's done. However, I've intentionally left it fairly basic, so I'd like you to really get creative and show off what you can do. So I'd suggest giving us ago as usual, and then getting all the basic layout created, and then getting all functionality working using JavaScript. In my version, I've created two sections. The left-hand side is a user's inputs where they can put in the name of their company, and they can also add various texts such as names, job titles, and contact information. They can also add a little bit of style into the business card using the background colors and also change the color of the text and the text alignment, and then there's a right-hand div which includes a sample business card, and all the changes which are placed inside the left div and then dynamically inserted into the business card. You can see as soon as you put in any information in the left-hand side, it's then replicated into the business card. You can change any of these values, and it's all changed straightaway. Have a go replicating this yourself and see what you can create, and then upload it at the end. I'd love to see what you can come up with, and hopefully, you can achieve all this by itself. If not, just follow along with me, and I'll show you how I created this. Let's start with its own folder. Let's just copy any of the videos which has the HTML skeleton, and then rename the folder, business-card-project, and drag it into brackets and change the title. That's now the clean page, so I'll get rid of the style tags and anything else is inside the HTML or the JavaScript. The example I've copied has the index page photos and we also need an external JavaScript file. I've already got the alert.js, so I'm just going to change this to custom.js and then also create a new page for the style sheet. This is a style.css, and then let's add these into the next page. Let's add the style sheet to start with, and this is just in the root directory. The link is your style.css, and then the script tag, I'm going to add right at the very bottom of the body. Then the source, again, it's in the root directory so we can just go to custom.js. Let's make some space there. To begin, I'm going to create some divs and I'm going to use the Bootstrap grid to help us out on that. Let's get started with the heading of the page. Let's create a div with a class of container-fluid, and we'll make this a responsive project. Then the div with the class of row, and then to make this the full width of the page, let's create a div with the col, a class of col-sm-12, and then the level 1 heading, which is Business Card Designer, and then a second container fluid, which is going to be the container for both the left div and the right div. A new div with the class of container-fluid, and let's make some space there. So there's going to be two sections to this part. There's going to be the input, which is where the user inputs the form information. Let's just create a comment of input section, and then let's create the grid for this. Let's create a div with the class, the Bootstrap class of col-sm-12. It's 12-column grid for width on the smaller devices. The medium sized devices will make it half the width of the page, so col-md-6. Then so we can style this ourselves, I'm going to add our own custom class of backgrounds, and we'll use that in just a bit in the CSS. Now, we need to create our HTML form for all the user inputs, and let's give this form an ID of cardInfo. You can call this whatever you want. It doesn't really matter. Then let's add some classes, so a Bootstrap class of form-horizontal. Then inside this form, let's create some Bootstrap form-groups. The first form-group in its own div. Inside this class of form-group, we're going to create some sections of the form. We're going to create the labels on the left-hand side and then the inputs on the right. We want the label on the left-hand side to use a Bootstrap grid. This is going to take up three columns, which will leave a remaining nine columns for the input. Let's create the label now. This label is for the input, which will give an ID of inputCompany. The way I'm going to arrange the IDs in this project is anything on the left-hand side, which is the user input is going to have an ID begin with input. The first one is inputCompany and level of input message for example, and then on the right-hand side in the business card, I'm going to create the ID, so this section, to begin with output. This will be outputCompany and outputMessage for example. Just so it's clear, once we get to the JavaScript section, which ID we're currently using. Now, we've got the label for inputCompany. Let's add the Bootstrap classes. This one is col-sm-3 and also control-label, and the text is Company Name, and then a colon, and then the input next. The input we want is just text, and then the class, again, a Bootstrap class of form-control, and then the ID. It's just the ID that we've put inside the label. The ID is equal to inputCompany, and then the last thing is the onkeyup. Every time a key is released, we want it to trigger the function of printCompany. So this will print the company name to the business card side. Let's save that and let's open the browser. It's a little bit messy now. I think we just need to put the input inside a div. Let's create a Bootstrap div with the class of col-sm-9, and then move the closing div to after the input. The label's got the three parts. The input has remained nine columns. That's looking a little bit better now. Let's move onto the company message.You can either type all this all over again or you can just copy this div section, and then just paste that below, and then just a simple case of changing some of the values. This one is inputMessage. The company name is now our Company Message, and then we need to change the ID and then also the function name to be printMessage, and that should be all we need for the message. Let's just refresh and there is the message. Now, we need to move onto the background on the text color. Let's go back over to the text editor and then we can paste in the form-group again. The inputs, I'm going to call mine inputBg for background, and then change the ID. Change the label to background color. Because of selecting a color, we want change the input type to be color. The ID is correct, and then we need to add a value, and this is going to be the initial value. I'm just going to add a value into that, a hex value or ffb74d. We're going to use a different event handle this time. This time I'm going to use onchange. Every time the color is changed, it will then trigger the function called changeBg, and we can also reuse this part because the next one is to change the text color. This also needs to have the input type of color, but we just need to change inputBg to inputText. Change the input id and then this time, we need to change it to Text color. I'm going to change the spelling mistake there. The text color, I've got the input type of color. The ID is correct. The value, I'm going to change mine to 262626. Then the function, onchange again. It's going to changeText. I'm going to save that and check out how that's all looking in the browser. Refresh, so now we've got it says our company name, company message, and then we've also got the color picker appearing once we select the background color, and also once we select the text color. We've also got the default color showing inside there. We'll leave this video there and we'll continue in the next video. We'll start adding the text alignments and we'll finish off the form section. Thank you and I'll see you in the next video. 38. Creating the user interface: part 2: Welcome back. We're going to continue from where we left off in the last video. We're going to move on from the text colors and then we're going to add all the rest of the form section, which includes the Text Align and also various names and contact information. Now, we're going to move on to the Text Align section. Let's go into the text editor and then just underneath the changeText section, let's just copy this section and paste that in below. This one's going to work slightly different to the last ones we looked at because they're going to be three different inputs. Every time one of these inputs is clicked, we want to grab the ID and then pass that JavaScript to determine whether the CSS should be aligned left, right, or center. We can reuse the label, and this time we just want to give it a label called Text Align. Then still within the col-sm-9 section, we're going to create three different inputs. The first one is going to be the type of button and then the class of btn btn-info. The value we'll pass in is going to be the text inside the button, so this is the left button. Then we're going to pass an id into the text- left. This is actually a bootstrap class, but I'll show you exactly what we're going to do in just a second. We're going to create a onclick event handler and when the button's pressed, it'll end trigger function called textAlign. Then inside the brackets, we're going to pass in a parameter of this.id. This part will make more sense when we move on to the JavaScript section. But basically what we're doing is every time the button is clicked, we'll then trigger the textAlign function and depending on which of the three buttons is pressed, it will then grab the id. In this case, it's text-left. Then using JavaScript, we'll add this text-left id and then we'll add it on as a class name. The moment it's pressed, the text inside the business card will then have the text-left alignment and the same for text center and text-right. But it should make more sense when we get to the JavaScript section. Just duplicate this button two more times and we're going to use exactly the same textAlign function. But we just need to change the id. The middle one is going to be text-center with the value of Center, and then the third button has value of Right and then the id of text-right. All three buttons trigger the same function but we just pass it in a different id depending on which button is pressed. Let's take a look at that and refresh. Says, I've three buttons. Now, we can move onto the user's name, the Job Title, Email, and Telephone Number so it's a pretty straightforward sections. We can just copy the form groups that we've already created, and then paste them below the buttons. The first one is the inputName, the label value of your name, change the id. I'm going to remove the value because we're not using the color. Let's remove the color type and change it back to text. Then we need this be onkeyup. When the key is pressed will then trigger a function called printName. Then let's do the same for the Job Title, so copy that and then paste. InputJob, the id is inputJob too and then the label is Job Title and then onkeyup printJob and then the e-mail section. Let's create a new form group, once again. Paste just below so this needs to be the inputEmail and then change the id. The label is simply Email and this time we need to change the input type to be email so JavaScript can do some validation on that. Then onkeyup printEmail function. Then the last one we need to do is for the contact number. Let's just copy this last form group for the telephone number, which is inputTelephone, change the id, the title of Telephone Number, and then the input type of tel, and then onkeyup printTelephone. Save that and check that out in the browser and that should be all of the input types all completed now. We just need to add the Submit button and then also a button to clear the form, so let's add them now. We can put these inside their own form group as well. Create a new div with the class of form-group. Then let's add the bootstrap grid so a div, let's give this a class of col-sm-3 so it takes up three columns and then also a offset-col-sm-offset-3. Then inside the div, we can put the input. The first one we need to add is the input type of button. This is for the Submit button and then onclick. We'll create the function formSubmit, and then the button value is equal to Submit. Then lastly, the button for the form reset or the Clear. I create this full div from the one above and just remove the offset this time. Again, we need the input type of button. Onclick will create function fromReset with the value of Clear. Let's take look at the browser and check if it's all working fine. So refresh that and there we go. There's our business card and all the forms, the Submit button, and also the Clear button at the bottom. Let's finish off the HTML, we just need to create the div on the right-hand side, which is for the business card. This is going to have all the information that the user inputs into the form. Let's create a comment just to make it a bit more readable. This is the output section. I just want to make sure we've got this in the right section so I'm going to click that. That's the end of all forms. Let's just tidy this up a little bit. Bringing form up to the top. Then this one should be the closing container for the container fluid. There we go. We can now keep all this within the container fluid, so make sure that the closing div is below the output section. Now, let's create the business card section. Let's create a bootstrap grid for this side. The class needs to be col-sm-12. Just like the left-hand section, it will be the full width of the screen on smaller devices. Then once you get to a larger device, we can add a col-md-6 and this will take up six parts or half the width of the screen. The left-hand section and the right-hand section will sit side-by-side. Then a new div, and this is going to have the id equal to card because this is the business card section. We use this id for the styling and also for the JavaScript intersection. Let's put the company name into a level three heading, so let's put Company Name. We'll just put that as a placeholder until the user add some information into the form, and then that will override the text of company name. We need to give it an id. Because we are now on the output section, we can add the id of outputCompany. Then next we need to do the output message, which is this section here. Below the level three heading, let's put this in p tags and then the id of outputMessage and this is going to have a bootstrap class of small, just so it's a little bit smaller than the rest of the text, and then the text of Company Message and then duplicate this section. This is going to be for your name or the user's name, so the text is Your Name. We can keep the bootstrap class of small, but this time change the output to have an id of outputName and duplicate this again. This is the outputJob. Again, the class is small and the name of Job Title. Let's take a look. It's done, it's come together now. After the job title, we need to also add the e-mail and telephone number. Let's duplicate this two more times so outputEmail and the text can be of Email:. Lastly, outputTelephone and the name of Tel: with a colon at the end. I should bring that up a little bit closer and save. That should be it, once you refresh. If you go over to the project, and there's all our information on the business card on the right-hand side. That's the user interface section all complete. In the next video, we'll move on to adding some CSS and also move on to the JavaScripts. 39. Adding the CSS and Javascript functions: Okay, so now the user interface section is all finished for our business card project. Let's now move on to the styling and also add a bit of JavaScript to get this working. So head back over to Brackets, and then we need to start in the style.css. The first thing I want to do is move the Level 1 Heading into the center and just make it a little bit more spaced out. So h1 and then add some text alignments to the center and also some padding. So 20 pixels on the top and bottom and zero on the left and right. Then let's add some styling to the business card. In the index page, we'll give the business card a ID of card, so we can use that in styles of the CSS. So let's give it some width of 400 pixels, a height of 250 pixels, and then a border to go around the business card of 1 pixel and a solid line, and then just little bit of padding of 10 pixels, and this will keep all the text within the outside edge. Now, it just looks a little bit more like a business card. In fact, we'll just put a horizontal rule just above your name. So back into the index page. Let's just put hr after the Company Message. So there's your [inaudible] faint horizontal rule, just to separate the company name with the person's information. Now let's add some styles to the background section of the form. So we'll give this form section a custom class of background. So let's use that in the style.css. So let's give it a background color of a light-gray color, which is eee, and a little bit of padding of 30 pixels, and then some margin on the bottom and this, you're going to be set to 30 pixels. This is just for the mobile view. So when the form is stacked on top of the business card, it will just keep a little bit of distance between the two. Then save that. So now we've got a slight background color to separate the form section from the business card. That's looking a little bit better now. We've got the user interface all completed, and we've added some styling to make it look a little bit nicer. So now let's move on to adding some JavaScript, to actually getting this to work. So we want the user's inputs from the left to then appear on the right-hand side, and then populate the business card so the user can see exactly what their card will look like. So let's go into the custom.js. We can create the functions that we created inside the index page. So the first one we need to do is printCompany. This is the first function to create. So just copy that and then go over to the custom.js, function printCompany. Okay, so what exactly do we want this function to do? Well, if we take a look at our index page, what we want the function to do is to grab the HTML elements on the right-hand side. So we need to do it with document.getElementByID. So this is outputCompany, and then we need to change the innerHTML to be the contents of the inputCompany on the left-hand side. So let's do that now. So document.getElementById. So we need to grab the outputCompany, and then we need to set the innerHTML to then be equal to the inputCompany.value. So let's save that and see if that's working okay. Refresh, so now we should be able to type a company name inside there and because we used on keyup as the event handler, we can now see the contents displayed on the right-hand side, and this triggers a function every time a key is pressed. So let's move on now to the Company Message. Just copy this function, and then we can paste it below. The function was called printMessage, and then the element that we wanted to grab was outputMessage. So we're setting the innerHTML of outputMessage to be inputMessage. Then next, instead of the innerHTML, we need to change the CSS to change the background color and also the text color. So function, and the function name was changeBg. Of course, if you use any different function names in the index page, just change them accordingly inside the JavaScript file. Okay, so to begin with, we need to grab the value or the user's input value, and I'm going to store that inside a variable called bgColor. So the bgColor is equal to document.getElementById and the ID we want to grab is the inputBg and then.value. So now we've got the user's input value stored inside a variable called bgColor. Now we can set the business-card side. So document.getElementById, and the ID we want to grab. So the background color we want to change is the full business card section, and this had the ID of card. So add card into there and then.style.color, and then we're going to set this equal to the user's input, which is stored inside this variable. So paste that in there with a semicolon. Let's check that's working okay. Go to the Background Color and select the background that you want. That's actually changing the color of the text, so we just need to change our style.background. So save that. Then now when we change the color, it should change the background color rather than the text, so there we go. That little mistake there should have gave you a clue on how we're going to do the text color next. So copy this function and then paste up. The function is changeText. Just like before, this can be a variable called textColor. Then input we want to grab is inputText. So this is grabbing the value that the user has selected. Again, document.getElementById, and we'll select the full business card, and then the style needs to have the color property. This is going to be equal to the variable of textColor. Let's just check that. The Background Color is working fine, and then the Text color, okay, good, that's all changing. So let's just refresh that. Okay, so now these colors are all working. We'll leave this video there before it gets too long and come back in the next video where we'll finish off all the rest of the JavaScript for the project. 40. Finishing off the project: Welcome back. This is the last video of the Business Card Designer project. We're going to continue from where we left in the last video. We're going to start by setting the "Text Align" property. If you remember, inside the index page, if we look for the "Text Align" section, which is just there, we pasted in some values and onclick we created a function or we're going to create a function called "textAlign." This is going to take in a parameter and the parameter which we are going to use is the id of this button. We set the id to be the same as the Bootstrap class of "text-left", "text-center", and "text-right". Every time the button is clicked, the id will be changed to one of these three values, and then we can grab this id and then change it to be a "class" and then that will apply the Bootstrap styles and align the text accordingly. I'll show you how to do that now inside the JavaScript file. Let's create a function. This function was called textAlign. I'm going to give the parameter a name of selected_id. Then inside the function, we'll do a document.getElementById. Then we want to select the card once again, but then we want to add a class name equal to the selected_id. I hope that makes sense. Selected_id will pull in the id from the bond and then once it's got the id, such as text-right, you will then use the id and set it as a class name. Effectively, it will look like this. className equals text-right. That is a Bootstrap class, which will make all the text appear on the right-hand side, and the same for text-left and text-center. Let's save that and check it's working okay. Text Align center, right, and left. Now we need to move on to your name, and your name had a function called printName. Then let's create that now in the custom.js. A new function, printName. We could do this in the same way as earlier with document.getElementById. The Id that we want to grab is in the output section. We need to grab output name and then set the inner HTML to be the same as the input section. InputName. Then when you scrub the value and save that. Now in the print name section, let's just add something into that. You can see as we're typing it's being printed to the business card side. printJob is pretty much exactly the same too. Let's copy the function. This time printJob. The output name is outputJob and input name change to inputJob. Then email and telephone section. printEmail, grab the outputEmail and then inputEmail.value. But instead of just printing the email, we want the string of e-mail to appear just before it. Just add that in with a colon and a space, and then add on the input that the user has entered inside the form. Then the same for the telephone number. Copy that function. This function is printTelephone. The element we want to grab is outputTelephone. The innerHTML is inputTelephone. Then change email in the string to be Tel and then save that. Then let's refresh the browser and then we can add some values into the rest of the form and check it's all working. Company 1. I'll just add some text into these and check it's all working. Change the background color. That's working and the tax is also changing. The Text Align, that's all working correctly. Your name, the job title, the email is working correctly. There is a string that we'll put in front of of email and we should get the same for the telephone number. I'm going to add that in there. We got the string of tell in front of the number. Great. That's all working. There's just one more thing to do and that is the buttons at the bottom. I'm going to start with the Submit Form. All I want to do with the formSubmit. All I want to do with the Submit button is to create an alert to alert the user if certain values have been left blank or in other words, we can put in the required fields and then create a function for the Clear button to reset all the sections of the form. Let's start with the Submit button. Let's create a function called formSubmit. This is the function name that we used inside the index page. If we scroll down to the bottom and then look for the Submit button, which is just here, and there's the formSubmit button, which I've spelled incorrectly, so formSubmit and then let's create that now, so it'll do an if statement. So "if" and an exclamation mark, which means not, so inputName.value. This is checking if there is not a value inside the input name. Then we need to create an alert to the user. "Please complete all required sections." Save that. Now we've put in the inputName and we've check if there's no value. Now if we don't put a name inside the input fields and we click, Submit, we'll get the alert box, which is, "Please complete all required sections." But if we were to have a name inside there and then click, Submit, we don't get the alert popping up. I've only used the name section as a required field. You can put as many as you want inside the "if" statement to test if there's any value or if it's being left blank. Well, I'm just going to leave it now as the name and then move on to create the formReset. A new function at the bottom and we'll call this formReset. The way I'm going to refresh the page is by selecting the window.location.reload and this will clear all the information inside the business card and also the form by doing a page refresh. We save that. Just to add some information into the business card and then click on the Clear button and that should reload page. Let's just check for any spelling mistakes, so formReset, then index page. That just needs to be formReset. So save that and that should fix our problem and refresh. Add some more information into there. Then now hopefully when we click, Clear, that clears the form. That's it. That's the end of this project. I really do hope you manage to get to the end by yourself or at least complete a section of it. Feel free to customize this as much as you want. But for now, thanks very much, and I hope you've enjoyed the project. 41. Thank you: So a big congratulations on getting to the end of this course. I really do hope you've enjoyed it and learned many things from it. You've covered quite a lot in this course. We began with JavaScript basics and understanding things which has variables, strings, and arrays. We also looked at other fundamentals such as JavaScript functions, scope and objects. Then we moved on to looking at math and dates and how they are used in JavaScript. We'll then step things up a little and we will took a look at control-flow and loops, which involved many statements such as switch statements and various different types of loops. We then introduce you to JavaScript and the DOM, and we took a look at how we can access elements on a web page and how we can manipulate the elements, and we completed various mini challenges along the way to test your skills and we really hope you manage to come up with something creative for the final project. So that's it. So that's the end of the course. Thank you very much. If you enjoyed it, please do leave a review. It would really help other students, and hopefully I'll see you soon in one of my other courses. 42. Follow me on Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare, and also follow me for any updates and also to be informed of any new classes as they become available. So thank you once again, good luck, and hopefully I'll see you again in a future class.