 Hello and welcome to this lecture. In this lecture, I'm going to show you the calculator that we will be creating for this project. So this is the calculator we will be creating for this project. It's a very basic calculator that you can do addition, subtraction, multiplication and division. So let's do a quick test. So if I do 12 plus five and do equals, give you 17 and the C here is to clear it. I do say 45, take away five. Gives me 40, clear. I do seven times four. That gives me 28, a clear. So I do say 42 divided by six gives me seven. So you can see it's actually working. So this is what we'll be creating for this project. A very basic functional calculator. To be honest, I'm quite used to this calculator now. I use it quite often. So this is on my desktop. So whenever I need to calculate something basic, this is what I actually use. So we'll be creating something like this for this project. Hello and welcome to this lecture. In this lecture, we will be creating the directory for our project and also creating a couple of files we'll use for the project. I am on a Windows machine. So I've already created my directory, which is this and I've got my files in there. So to create a directory, all you need is just right click on the desktop, go new folder and then name it whatever name you like. I have called my directory, my calculator. If you are on a Mac, you should just do the same, just create a folder. Okay, so I am using Sublime Text Editor for this project. It is free to download and use for a while but you are advised to pay for it if you enjoy using it. So this is my Sublime Text Editor. It comes up as unregistered because I'm still checking it out, trying it. I like it so far. So I will be purchasing it short, very soon. So this is the folder. You can, once you've created a folder or directory, you can always reference it file, go to file and then open folder and you can browse to the location of the folder. I've also created a couple of files inside this directory. If I expand the directory here, I've got an index.html file, which is the file that we will use to launch the application. And we've got the CSS file here, .css, which is what we'll use to apply styling to the calculator. So just to, if you are using Sublime Text to create a new file or folder is quite easy, you right click and go new file or you right click and go new folder, yep, yep. So you can create new folder and you can create new file. You can also delete them as well. So now we've got two files. Make sure your files are called index.html and you don't have to call it my style, but it has to be something .css. So it references the CSS file. Make sure it has a .css extension and a .html extension. So that's it for this lecture. We have got the directory in place and we have also got a couple of files. So make sure you've created these two files inside your directory. So these are my files. That's the index and that's the CSS file inside my directory here, this directory. That's it for this lecture. Thank you so much for watching. Bye for now. Hello and welcome to this lecture. In this lecture, we are going to be creating the structure for the calculator using HTML. So this is my text editor I'll be using to write the HTML code, which is a text editor called sublime text. The way I'm going to structure this lecture is to add chunks of code at a time and then I explain the code to you rather than you watch me type and take up too much time. I have added some basic tags. These are tags that you will find in every web page or every web application. They are standard tags that you will see. So let me explain each one very quickly. Online one, we've got the doc type. The doc type basically is there for information and purposes. What it does, it instructs the web browser or any browser that's trying to display the page. It just lets them know that the content of the page is HTML. That's the purpose of the doc type. And the HTML next to it just indicates it's an HTML document. So the actual HTML content is between this number two, line number two and line 14. So any of the content that's displayed on the web page, the content starts from the HTML there to this HTML tag here. So most tags have an opening and a closing tag. So they all come in pairs. The head, notice also it's indented properly. So you can tell that the head and the body are both children of the HTML element. And the title here tag is a child of the head tag. The in between the head tag is where you find things like the title, a link to any CSS or script or JavaScript. Most times you can include them in the head section. You can also include several meta tags. Meta tags are used to provide extra information about the document that you are trying to display. And the actual content of the page that visitors or anyone sees is between the body tags. So anything between the body tag is visible. I have added some more chunk of code. I've added from line four to line seven. So there's a few meta tags here. Line four basically is a meta tag and it's got an attribute of car set with a value of UTF-8. The car set attribute basically specifies the character encoding for the HTML document. Line five here against another meta tag with the attribute of name equals description. And also we've got another attribute here, content equals JavaScript calculator. So this is descriptive of the document. These information here, the meta tag, they are used to provide extra information which helps the search engines to display data, relevant data. Line six, the meta tag here with the name of attribute with this attribute here called name and the value of viewport. Notice most attributes have the values enclosed in quotes. So here on line six, the value for this name meta tag, this name attribute is viewport. And then we've also got the content here and the value is width equals device dash width. And it's also got an initial dash scale equals one. What the viewport is, the viewport refers to the screen that is going to view this calculator. So it will resize to whatever. So this one makes the web page or the web application display in this calculator makes it responsive. That means it will be responsive to any device regardless of the size. It will auto resize itself to fit that screen device. Regardless of the device type, it will fit the screen. And this initial scale here is just to zoom. Is the initial zoom. So if you want to zoom higher, you can zoom as you want in and out of the device. That's what the scale is, it's just a zoom. Line seven is a reference to the style sheet that I'll be using and be using this. This is the style sheet here I've defined on here. So this is just a link to the style sheet. Line nine, we spoke about line nine before, it's just a title for the calculator. So I've added some more code here. Line 14 and 15. Line 14 basically is a heading tag that we'll use to give a title to the application page. So that's just what it's a heading tag. And the BR here is a break tag, which means after this line, it will give a space underneath. That's basically what the break means. It means once you get to the end of this line, create a space. So anything else that needs to follow will come after this space has been created using the BR tag. I have added some more code on line 16 and 17. Line 16 is, I've created a form. The calculator is gonna be created inside the form. So all the inputs and everything will be enclosed in a form. So the form, I've given it an ID equals to my form. And I've also given it a name equals to Calc, C-A-L-C. So giving it an attribute. So this is an attribute, a name attribute given it with a name of Calc. All right, so it's got two attributes. One is an ID and then one is a name. I've also on line 17 created an input field. This is where the answers for the calculator will be displayed. So giving it a name attribute with a value of display. So actually let me save this and see if we can see if we can see the input. Okay, so this is the input we've just created and that is the heading tag. So we can see the input here. So the answers for the calculator will be displayed inside this input. On line 18, I've got another input tag but the type of input is a button. So the attribute type here equals the value of button and the value of that button will be zero. So this is where we'll be creating the actual keys for the calculator. So let me show you, let's see what it looks like. Because all we're gonna do is just copy and paste it and create the other keys. You can see we've just created a zero. So I'm gonna copy the same and change, just change a few things and we can get the rest of the keys popping up. So that's just how you create the individual keypads on the calculator using this input. Using this input tag with a type equal button, the value will be the key. So be zero followed by one and so on. Okay, I have now added more code to create all the keys we'll use for as keypad for the calculator. So basically this is how you create the keys. So the first one with the value of, this will be keypad zero, one, two, three and this will be this plus symbol. Notice this break here means after the plus symbol give a break and start a new line. So we've got three, four, five keys and then after that we've got the minus key and then a break. Next we've got six, seven, eight and then this is a multiplication symbol and then a break. This is number nine. To add a, this is an entity. This is what we use to create the division symbol. Okay, so it's used, notice here, we've got equals to, but for division you need to use this entity, HTML entity to create the symbol. So let me save that and then you can see how it looks. So this should give us the full structure of our app. I'll just refresh. As you can see, we've got all the keypads we need for the calculator. So we've got the structure, the HTML structure in place. In the next lecture, we'll be styling it to make it look prettier. That's it for this lecture. Thanks for watching. Bye for now. Hello and welcome to this lecture. In this lecture, we are going to be creating the styling for our calculator using CSS. So we'll be using a combination of external CSS and inline CSS. So this is what the calculator looks like at the moment. So by the time we're done with this lecture, it should look a little bit prettier. So this is my text editor and this is my style sheet where we will implement the external styling for the calculator. The way I'm going to structure this lecture is to add a chunk of code at a time and then explain it to you. Okay, I have added some code from line one to line 10. So let me run through this. Some of these you may already know. The line one here, I've got input. Input, this is known as the selector. So you must have something that you want to do something to, for example, if you're going to have a haircut, your hair will be the selector and then you have to tell the barber what to do to the hair. So CSS works in the same way. The input here is the selector and the items in blue here, this on the items on the left of the colon is known as the property. The property is what we want to apply to the selector and the values outside the colon here is what we want it to have. For example, I want the width, which is a property of the input to be 150 pixels wide. Okay, so you separate the property from the value with a colon and then you end with a semicolon. Without a semicolon, it will not work. So make sure you end with a semicolon once you finished. The height, I've set it to that. The font size, which is the size of the text, I've set it to this. The border radius, border radius is what gives it a bit of rounded corner. So this is the border radius property and I've set it to 10 pixels. These values, feel free to play around with them so that you can see how they work. The beauty of browser development is that you can see what the result of what you're developing straight away. Okay, the margin, I've given it 10 pixels. Margin refers to the space outside. Say for example, you've got a box so the space outside is known as a margin while the space inside is known as padding. So where you've got, with a margin, there's usually four corners. You've got the top, the right, the bottom and the left. That's how the styling is applied. The way I remember it is by using the word trouble and then taking out the vowels, which are the O's that leaves you with top, right, bottom, left. So when you have just the one value specified, it will use that value on all the four corners like top, right, bottom, left. The background color I've set it to this. I've used hex color, hexadecimal colors. You can also use the name of the color if you know it. For example, this means black so I could use black instead of that. And then this color here refers to the color of the text. So this is white in extra values and then border style is not. So I don't want any shadow or anything on the borders. So this is a styling for the input. The input basically is the, yeah, this is a styling for the input tag. I've added some more code here from line 12 to 24. Line 12 here, I've got my, I've got an ID here. You identify an ID with the hashtag. So ID here is my form. So this form here, these are the styling I have applied to it. I don't need that. This is just a comment. So if you want to write a comment on a CSS page, this is how you implement a comment. So anything that you've got a comment on will not reflect on the styling. Okay, so comments are quite good. You can use them for troubleshooting or trying things out. So this ID here, this is the styling I'm giving to the ID. I want the margin on the left to be 225 pixels. So what I'm saying is that from the left of the book, from the left, I want it to move 225 pixels. And then from the top, I want it to drop down 20 pixels. That's what that means. And then this here is the styling for the H1 tag, which is the heading tag. Again, the text align, I want the text to be centered. I've given it a font size of 80 pixels. That's how big I want it to be. And the margin, I've said from the right, I want it to move 150 pixels. And from the top, I want it to drop 20 pixels. So let's save that and see what it all looks like at the moment. So this is our calculator. If I refresh, this is what you can see is looking a little bit prettier. Okay, so this is what it looks like at the moment with the styling we have used. Next, we are going to use some inline styling. That means we're gonna go inside the HTML document and apply the styling inline with the actual tag. Okay, so I am on the actual HTML document, which is the index of HTML here. And on line 17, which is the actual input for the display, which is the screen that will display the results of the calculator, have attached some inline styling. So this is inside the actual tag itself. I have added a style tag. So you begin when you use the style as an attribute. So the actual style becomes an attribute and the value will become the property and the values for that input tag. So this input tag here, I've given it a width of six, seven, five pixels. I've given a height of that. The text aligned to be centered. That means any text that it displays, I want it to be centered. I've given it a background color of this and this break tag here basically creates a space underneath it. So if I save that and refresh, you should see the display should be blue now. You can see here, so it's now blue. So this is what we have just applied styling to. I have added some more inline styling inside the HTML document. So on line 21 here, I want the buttons for the operators. That means the plus, the minus, the equals, the times and the division. I want them to all have different colors. So that's the styling I've implemented. Line 21 here, I've noticed I've used the style here as an attribute. And then the value equals to the properties, the property, I want a style and then the value for the property. So the background color here basically I've set the background color for the plus. I've set the background color on line 25 for the minus and on line 29 for the times on line 31 for the C, which is a clear function that we clear the screen and on line 33 for the division. So I've set that to green. So I'll save that and if I launch the browser, you should see the difference. There you go. You can see all the operators have different background colors. And also I've made the C here, given a different background. So this is what will clear. You can use to clear the values. So if I press on the buttons, you can see nothing is happening at the moment. The JavaScript will create the functionality for that. So for this lecture, we are done. The styling of the calculator is ready. In the next lecture, we'll implement the JavaScript to make the buttons actually work and perform some calculation. Take care and bye for now. Hello and welcome to this lecture. In this lecture, we will be creating the functionality for our calculator using JavaScript. At the moment, the calculator looks beautiful, but none of the key pads work. So we'll do that using JavaScript. All right, just want to go through some of the things we'll be using for this JavaScript session to implement the functionality for the calculator. So we'll be using the display property. So the display property is used to set or return the elements display type. So we use the display property to display something. And next we'll be using the on click event. The on click event usually is used to execute a JavaScript function when a button is clicked. So a lot of the key pads for the calculator are gonna function as buttons. So when they are clicked, this on click event will be activated and then something, an event will happen. So the on click is used to respond to a click event. Next, we'll be using also the evaluation function. The eval function is used to evaluate or execute an argument. So we use that to evaluate values as well. So for example, one plus two, you evaluate that, it gives you three. We'll also be making use of the assignment operator, which is the plus or equals two. So the assignment operator, basically you will use that to add a value to a variable. Another way to express the assignment operator, which is x, which is plus equals two. You can also express this as this. So x plus equals to y is the same thing as x equals to x plus y. For example, if you have a variable called x equals to 10, then x plus equals to five will give you the result of that variable. So x to plus equals to operator is the same thing as x plus equals to y or x equals to x plus y. I hope it makes sense. If it doesn't, let me know. I will try and explain a bit more. So this is our calculator at the moment. If I click on any of the keys or the buttons, you can see nothing is displayed in the screen here. Okay, this is because we've not implemented any JavaScript. So we're gonna start doing that now. So we are going to implement the functionality inside our HTML document. So what I'm going to do to each of the buttons, I am going to attach an onclick event. So the onclick event, because it's a button, when it is click, will display the value on that button. So I'm gonna attach an onclick event in combination to using the display property. On line 18 of this HTML document, I have attached this onclick event here. And this, the value here is the name of the form, which is this name here on the form, on line 16. So when the button is click, using the display property, it will display the value, which is this zero here. It will display this value zero on the cac. This cac here is the form, that's what it means. It means when the button is click, use the display property to display the value, which is this one on the form. And the value is, you notice next to the value of what the operator plus or equals to zero. So I'm gonna save this, and then we're gonna test it out. If that works, I'm just gonna copy and do the same on the other buttons. So I've saved it, if I click on the zero now, it should display something on the screen. Let me refresh. You can see the zero is now being implemented. The other buttons don't work yet because I've not done that. So I'm gonna copy and change the values for the other keys. So I have now implemented the JavaScript inside the HTML document. So I have attached the onclick event to all the input tags. So next to the onclick, I've given the onclick this value the same properties, which is I've used the display property to display the value on the form using the plus or equals to operator. And if you notice, I've set the value of the plus to equals to operator to the value of the keys. So this is keypad zero, one, two, and then we've got the keypad plus, keypad three, four, five, keypad equals two, and then this is the keypad minus. And the same thing. So basically I've done the same for all of it. The process is the same for all of it. So when the button is click, this onclick event will trigger this action. It will use the display property to display the value that has been pressed onto the form display screen. On line 32, I have used the onclick event and given it a value of the calc, which is the calc is in the form, dot the display property, dot the value equals to the evaluation function. Because this normally when you add two values or take away two values and you use equals to sign, it means you are adding something, taking away, multiplying or dividing. This evaluation function is what is used to evaluate or execute what's inside that argument. So inside the argument, we have inside the argument, we have the form, which is a calc, dot the display property, dot the value. So these are the arguments that this equals to sign will evaluate compute and then display the result on the screen. So that's basically the form done. If I save that, all the buttons on the calculator should now work. So let's go refresh and test. So try simple addition, so we can try all the keys. So I do three plus two, give a six, I clear that, I do four, take away two, that's two, I clear that, I do six times seven, gives me 42, I clear that, I go 42 divide by four, give you that. Oh, okay, let's try something else. Let's try 12 divide by two, give you six. All right, so that is our calculator done. Just wanna highlight something, online 33 of the code, when we're using the on click event for the division, this is the symbol. So the backslash here is what JavaScript uses to perform a division, just to let you know. And it uses the, it uses Asterix to, that's the Asterix there online 29. It uses the Asterix for multiplication and the slash for performing division. So thank you so much for your time. I hope you have, hope you've had fun creating your own calculator, play around with the values and you know, apply your own touch to the calculator. Take care, all the best and bye for now. Hello and welcome. Let's have a look at the to-do list we will be building for this project. So this is the to-do list we will be creating and you should be able to add and remove list as required. Say for example, I pop in a message I just say give discounts and click add. It pops up there. If I refresh my browser, the message will still be there because it is saved locally inside the web browser. If I don't need it anymore, I can just go delete, refresh my browser and the message will be gone. So this is what we will be creating for this project. It's something that you can use by yourself or you can share with others. It's a very useful tool. So that's it for this introduction to our to-do list. Thanks for watching. Bye for now. Hello and welcome. In this lecture, we are going to create the project directory and the files we will use for the project. So you can either create a directory. If you're on a Windows, just right click on your desktop and go new folder and just call your directory or whatever. I just call mine to-do list. If you are on the Mac, you could use the command line and do MKDIR to create a directory. You could do the same on a Windows. If you use the command line, you could do MKDIR space and then the name of the directory. For Macs, you can do the same with the terminal. So now I've created the main project directory and inside this directory, we're gonna have three files, the index.html file, the CSS file and the JavaScript file. So I am using sublime text for my text editor. So I'm gonna open up this directory in sublime text and then create the files I need within sublime text. So I have opened the directory I created with sublime text. All you need to do if you are using sublime text, you just go file, open folder and then browse to the location and pick it up from there. Okay, you can do the same with brackets. If you're using brackets, you can also open up your project directory inside brackets. So now that we've got it listed, I can just create the files I need. So I just right click and go new file and this will be my index. I just label it index so that I know what it is and then when I save it, I'll be saving it as an index.html file inside the root of that directory. So I just do index.html. So I've saved that as an index.html file. The next will be my style sheet. I'll go style and do file, save all. And I do, I'll call it mystyle.css. Okay, finally, do a JavaScript file. I just call it script so that I know what it is and to save all and I call it myscript.js. All right, so we've got all my files created inside the directory. So if I open up the directory on my desktop, you should see the three files. So that's my directory, that's the index, that's the script and that's the style. They're empty at the moment, but we will be populating them or writing code for each of the files as the project progresses. So that's it for this lecture. Thanks for watching, bye for now. Hello and welcome to this lecture. In this lecture, we are going to be creating the structure for our app using HTML. So I have got my text editor open. I am inside the index.html file, which is what I've highlighted. So this is where we'll create the structure for the app. The way this is gonna work, what I'm gonna do rather than you watch me type the code, I will pre-write the code and then explain what I have done. Line one here, I have got a line of code here, which is known as the declaration. This basically is the first thing you do in an HTML document. And what this does, it notifies the web browser that the page they are about to view is an HTML5 document. Line two and line four, they are HTML tags. So that's where the actual HTML begins. So the content between these two tags here is what will be the HTML content. So in between this HTML tags, we will nest other tags that will together build up the HTML content. Line two here, just is the beginning of the HTML tag followed by the lang. This is an attribute and the value is en, which means English. So with attributes, you need to enclose the values in quotes. And every tag, most tags should have an opening and a closing. The closing tag you can tell by the forward slash before the tag is closed. I have added some more code, which is the head tag from line three here to line seven. You can see they are paired because you've got the dotted line under the closing and under the big opening tag. So this is the head tag. Most of the tags or information within the head tag is not visible within the browser. That means visitors can't see them. They're only there for information purposes and also to help with search engines. All right, so inside the head tag, we've got a few meta tags with attributes attached. So the first line on line four there, we've got the meta tag and we've got a meta car set. The car set is the attribute and the value is utf-8. It's basically the type of encoding that is used in most web browsers. So most characters are supported by the utf-8. It's an encoding type. Line five here, we've got a meta with an attribute of name. The name basically, it's the attribute and the value is viewport. Viewport basically refers to the screen size of any device. So what it's saying here is that this website or this app is adaptable to any screen size. So regardless of what device you're using to view, you'll be able to fit it to the screen size. That's basically what line five is saying. Okay, you can see the content here. So the content equals to the width equals to device minus width. So basically what it's saying here is that the content can be viewed regardless of the device width. So whether the screen is small or large, you can scale it and the initial scale here is 1.0. It says here, user scalable, yes. That means the user can scale or resize the screen to fit the app. Line six here is this is, if you have any reference to your style sheet, this is where you need to include it. So this style sheet here, that's the reference I've put here to the style sheet. So I have added the final chunk of code for the body tag. So from line eight to line 15. So the body tag starts from line eight and in between the body tag, I have also nested some other tag. I've missed out the closing body tag. Okay, so that's the closing body tag. I'll just save that. Okay, so in between the body tag, I have got other nested tags. So we've got the div. The div basically is used to divide a section of a page and I've given it an ID attribute equals to wrapper. The ID is useful because we use that to target that div during our CSS styling. Line 10 here basically is an H1 heading tag with a title to do list. 11 is the input. This is where we will actually type the task we want to do and I've given it an ID with a value of task. Again, we'll use this ID for styling purposes later. I've also attached a button next to the input and the button I have given the button an ID is equals to add. So this is where the button will click to add a task once we've done the input. Okay, and I've given the ID an attribute as well. We'll use that to style as well. And here, this is how you write a comment in HTML. If you don't want anything with a comment, the web browser will ignore. So you do a left angle bracket, exclamation dash dash and then double dash and then right angle bracket. So you can see it's almost grayed out. So anything with that, the web browser will not run that piece of code. All right, line 13, I've created another div here with div ID to do's. This div here is where the to do's will be listed. Once we've set it up properly, they'll be listed inside this div. All right, line 11, we've got a script tag. So this is where we will, this JavaScript file will create it here. We are making reference to it inside our HTML document. So any script we'll write, which will be in the script file will be referenced from here. All right, so that's it for our HTML document. If I just save that, I think I have already and let's run it so we can see what it looks like. So this is the project folder. I just open it up and double click to run the HTML. So we can see what the HTML looks like. Let's just minimize that a bit. All right, so this is what our page looks like at the moment. This is where we'll add a task and we'll input the task and this is where we'll add it. So that's it for the structure. In our next lecture, we'll be building or styling this content to make it look a bit prettier using CSS. That's it. Thanks for watching. Bye for now. Hello and welcome. In this lecture, we are going to be styling our HTML that we created for our app. So I'm inside my text editor and this is the CSS file. So this is where we're gonna define the styling for our app. So we're gonna use the IDs where we've got IDs to use. If not, we'll use the actual element to style the HTML. I have added some basic styling here for the body of the actual HTML. So this style will be applied to the body. When you're styling, you need to have a selector. In this case, the body is a selector and then in between the curly braces, this one and this one here, you specify the properties and the value. You want to apply to the selector. So in this case, I have got several properties here. The text align is a property and I want the text to be centered. I've got another property here called background color and I've given it a hex value background color. You don't have to use hex value. For example, if you know the actual color name, you could specify that in place of the hex value. Here again, the color, I specify white. This color here refers to the color of the text you use for the body, not the actual background, okay? If you want a background color, you need to specify background color. Font family refers to the font, the type of font that you can use. It's always good to specify more than one. So I'll just add area. Just in case the first font is not available on the machine that is viewing this page. So it can default to the other one. So what I'm saying here, this is my first choice. If that font is now available, default to that. So most computers should have either both or either. I've added a chunk more of styling from line eight here to line 18. Notice here, I've used the ID attribute. This ID here is derived from this ID inside here. We've got an ID here called add. That's the ID I am referring to here. All right, so that's the target. And these are the properties and these are the values. So you separate the property from the value with a colon. Okay, so again, this is the ID I'm styling. The background color, I've given it red. Border set to zero. I don't want no border. Color is white, which is a color of that. It's referring to color of the text. Padding, okay. Padding is a space inside the element while margin is a space outside it. So these are the values I specify for the padding. Cursor, the cursor property basically specifies the type of cursor to be displayed when pointing on an element. That's what that is. So I've just said pointer. Margin again refers to this space outside. So what I'm saying here from the top, I want there to be a space 35 pixels from the top. That's what that means. I have added some more styling from line 19 to 25. And this time I am styling a class. So if you've got a dot followed by a name, that is a class. So I'm styling a class. This class will be added automatically with our JavaScript, but I'm just preparing the styling for that beforehand. So again, the class here is the selector. We've got the property margin. I'm saying from the top, I want it to drop 13 pixels. Background color, I've set that to X value. Float, I mean float basically, if you've got, it means I want the element to move to the right, okay? When you have elements moving to the right, you need to also specify a clear. So when you use float, you need to use clear. Clear basically is used to clear any obstruction on either side. And then the background color. So we've got padding. Padding refers to the space inside. So I'm saying the space inside from the right, I want it to move 20 pixels. Border radius is what gives it a rounded corner. So if you've got a square, the border radius kind of makes it round a bit. So that's what the border radius property does. All right, I've added a couple more properties to this class here. Giving it a width of 60 pixels and a height of 20 pixels. Border style, I've set it to none so that there are no shadows or nothing on the borders. I've added some more styling to this ID called wrapper, which if we go into our HTML here, we'll see that we've got an ID here called wrapper, which is the main div. That's the one I'm targeting here. These are the styling I've applied to that ID. Again, the width, I've set a width of 450 pixels, a background color, I've given it a hex value. The margin, I've set it margin from the top. I've said I want it to drop 120 pixels. Margin from the left, I want it to move to 195 pixels. Padding from the bottom. Remember, padding is a space inside the element, while margin is a space outside the element. So padding from the bottom, 30 pixels, padding left, 50 pixels, padding top, 30, right, 65 border radius, 25 pixels. By all means, play around with these values. You don't necessarily have to stick to my values. Just play around and experiment and see what works for you. I have added a chunk more of styling from line 43 to 57. So I'll explain 43 to 48 first. That is the UL, which is the on-ordered list, which I will insert using JavaScript. Basically, these are the styling. The list style, I don't want it to have any styling on the list, and I've set the text a line to left. Line height is the space between each text. Okay, and then on line 49, the ID called task. So that's where we'll actually input the task we want to carry out. So the task ID here on line 49, giving it a width of 320 pixels, a height of 30 pixels, the margin from the left, I've told it to move, 17 pixels. And line 54 is the H1 tag, which I've given a margin from the top. I've said I want it to move 30 pixels from the top. That's what that means. Okay, so that's all our styling done. I'll just save that. And we can try and view our app and see what it looks like. All right, so this is what the app looks like before the styling. So I'll just refresh. And this is what it looks like now after the styling. So it looks much nicer or more presentable with the styling. So that's it for the styling for this project. In the next lecture, we'll be doing the actual JavaScript, writing JavaScript code that will make all this work. Thanks for watching. Bye for now. Hello and welcome. In this lecture, we are going to be creating the functionality for our to-do app using JavaScript. All right, so we are in our JavaScript file. So we are going to be creating several functions inside this JavaScript file that will perform various tasks. The first function I am gonna create here is going to fetch from the database the to-dos that have already been defined. All right, so we're gonna start there, create a function whose main task is to go to the database and retrieve the to-do lists that are in the database. And we're gonna implement this using local storage because we're gonna be storing the data inside our web browser. Okay, here is the function I have defined. This function is going to be used by all the other functions that will be created later. So what this function is going to do, as you can see, there's no parameters passed in. If not passed in any parameters, the main purpose of this function is to fetch the content of the to-do list which would be a key in the local storage. So it will be using the getItem method which is this method to retrieve the to-do list, the to-do items that are inside this local storage. So if this is the first time the function is called, the specific local storage entry will probably be empty. Okay, and the localStorage.getItem call will return null. That means it will return empty. So line form here, I've introduced an if statement. So basically what the if statement is saying that if the return value is not null, that is if it is not empty, then it must be the stringified data which has been stored, all right? So the JSON here, the JSON.pass is used to convert the JSON string back into JavaScript data that the browser can display. The return here on line seven is used to, when you create a function, you can also specify a return value. So if there's any data in the database, this return value here will return the data that's in the local storage. So the function here, you define a function by typing the name function followed by the name you wanna give the function. I've given it a name of get underscore to-dos and line two and three are basically variables I've created. Line two, the variables to-dos set it to equals to a new array. An array can combine multiple variables as one. Line three again, created another variable called to-dos underscore str which stands for string and I've set it to equals to local storage.getItem method and passed it the to-dos which is this variable here. I've explained line four. So if the to-dos, this variable here is strictly, this exclamation and double equals means strictly. If it is strictly not empty, then return, then you get this and convert it using this to JavaScript and pass it this variable here and return whatever you find in the database. That's what that's saying. So I've created another function from line 10 to 20. This function is called add, all right? So what the function will do, the function is, it will be called when the user or visitor clicks on the button. Okay, so when the button is clicked on, it will trigger this method here, document.getElementById and it is passed in task. The task which is the value here, it was defined in the HTML which is this task here. That's the ID it's talking about. It will get that and then add the value that has been inputted. So it will use that and retrieve the value that the user has typed in, all right? So then what it then does, it calls the getOnline13 there. It's called, I've got a variable called toDoes which is equals to getToDoes. So it calls the getToDoes, we retrieve the already existing toDoItems from the database, all right? And then it is appended to the array using the push method. So this push method is used to append to a list that is you add to a list using the push method. So it's saying for these variables add, touch this method and any task that's been listed, you add, if there's any more tasks you need to add, append it to the existing list. So the push is used to add or append. So once the new list is appended, it is saved to local storage using the local storage.setItems. The .setItem is what is used to store it inside the local storage. So to store that, what we need to do first, we use the stringify, we have to stringify the array, okay? So using the JSON.stringify method. And what that does, when we store, it enables us to store the returned string using the local storage.setItem method. I have called a function here show, but we've not implemented written that function yet. But this is where we will also call the function from. So later on we'll write a function called show, all right? Notice we've got a return value here called force. So what that does, it avoids any further actions generated by the click event. So even though the users click, it will avoid any further action. That's what that means. What I'm going to do is split this lecture in two for the JavaScript because it's gone on a bit long. So I'm going to stop this lecture here and we'll continue in part two. Thanks for watching. Bye for now. Hello and welcome to the part two of creating the app functionality using JavaScript. I have added two functions here. The first function is called clear default from line 22 to 25. What this function will do, it will clear it. For example, once you've typed in a task and it will check to make sure that the task is still not hanging around in the input box. So that's what this value is. Means that if any value is in there, it says if there's a value a.default value is strictly equals to a.thevalue, then clear the value and set the value which is a.value equals to make it blank. That's what it means. So it basically is to clear any input that is left hanging around after you've added a task. So that's what that function is there for. Okay, and the second function which is called the remove function from line 27 to 36. All right, so what the remove function will do, it is called when the user clicks on any of the task to remove them. So if they click on the remove button on a task they're no longer need, it will remove that. The remove button will trigger the function and the item will be removed. All right, so this function contains two variables. Got variable ID which is set equals to this.getattribute. This refers to the current DOM element which has been removed as of the time they use that clicks on the remove button. So we retrieve the value of its ID attribute using the getattribute method. This is the index of the specific to-do item among the to-do items in the database. So after retrieving the current list of to-do item we'll use this splice method to remove a specific element from the JavaScript array and then we store the new task back in the database. So you use push to append and you use splice to remove, okay? So once the item has been removed we use the splice method to remove that ID and then store what's left in local storage, okay? Not basically what this function done. I notice again we've called this show function here. We've not defined it here. Again, this show function, what I'll do it would, it will show what's in the database and we've set a return value so that nothing else is triggered after the show function has been called. The final function we are going to create is this one here called a show. We have been calling, we've called this function several times within other functions but here we, is where we actually define the function. The show function will display the current to-do list stored in the database, okay? So if you notice the first thing it does on line 39 with a variable here is it calls the get to-dos, okay? So it calls the get to-dos to get the list of array of array of the to-do items, regardless if you're empty or not. On line 41, we've got a variable called HTML and set it equals to the value of a tag which is an on-ordered list. So here we are manually creating snippet of some HTML tag from this variable using the variable to set the value, okay? So the UI element is an on-ordered list. We've also set it up with on-ordered list they need to have an ally item which is a list item. So this will be a list item for each of the to-do entry. In addition to the content of the to-dos array I've also added a button to each of the list items, okay? So you can see here added a button. This button will be, I've added as a class so it will be added to each of the list item. So as you add a task it will automatically insert a button that users can use to remove the task if they no longer require the task. So each of the button belongs to a class called remove and each button has an ID containing the index of the to-do item in the list retrieved from the database, okay? So the buttons will enable the user to remove the item they no longer require from the list. On line 47, the document.getElement by ID and inside the value of pasted to-dos what that will do it will insert the newly generated HTML snippet in the original load in the original document loaded from the server, all right? So it now inserted inside HTML. It actually replaces the content of the element with the ID to-dos. That's what that means, okay? This means in subsequent calls it will just show the new list regardless of what was there earlier. That's basically what it does. The inner.html enables it to do that. In the next couple of lines from line 49 all the way to 51. So the getElement by class name. This method is used to fetch all the buttons that are in the remove class. So these are the buttons we added previously, added to each of the to-do item above. So to each button we assign a event listener that will listen out for any click on the button. When that happens it will be triggered, okay? Once the user clicks it will be triggered and the connect when the user clicks on the button it triggers off the function. And once the click is done the event listener triggers off the function. The item is then removed. As you can see here we've passed it. The click is the event and the remove is the function. Okay, so this is the event. When you attach an event listener there must be parameters passed. One would be the first would be the event you're listening out for. And the second would be the function that will be triggered when that occurs. So when that occurs this remove function will come into play and the item will be removed via the button. Line 55 here is the document.getElementById. And we've passed it the id add which is the task when you add the task. It's got an event listener attached to it as well. So what happens when you add a task for example and you click, if you click on the task that I've added it it will trigger this function called add and then call this show function here. All right, so once that is done this show function here will be called and the list of items will be displayed. So that's it for all the JavaScript calls. So I'll save that and if we run our app we should get it working now. All right, so this is our app completed. Let's do some tests and see. Let's do hello student. Okay, there you go. Thanks. Okay, so save that if I refresh you can see the data is still persistent. All right, so we can just click to delete if we no longer need that and that will disappear. So now let's see where this data is actually saved. So that you know where to look if you need to. To check where the data is stored you click on F12 on your keyboard. So the F12 key should bring up a screen like this and make sure you've got a tab called resources. If you can't see just expand it and you should see a listed. I am using Google Chrome. So once you click on resources you should get this list items here. So these are the databases. So on the local storage you expand that and click on file. So you can see here the key because local storage stores data using the key and then a value. So the key here is to do. Okay, which is this our list and these are the values. You see the any more list I add on here we just get appended here. So you can see the value here is this one had. So if I add or not as a let me say discount and I click add and I refresh my browser you see the discount there is popped up there. All right, so you just stores them as an array. You can see the square brackets there. So it stores them as an array. So that's basically where your item are stored for the to-do list. So that's it for this project. Thanks for watching. I hope it's gonna be useful to you. This is a practical tool that you can use yourself or share with others. Thanks for watching. Bye for now. Hello, let's have a quick look at what we will create in this project. So in this project you'll learn to create something like this. It's a quiz. In this case I've created a quiz where we have to determine the answers for the baby names of animals. For example, it says here, what is the baby of a moth known as? I think that's known as a larva. You go next, what is the adult of a kid called? A goat. Next, what is the young of a buffalo called? I think that is a calf. Next, what is a baby alligator called? It's called a hatchling. Next, what is a baby goose called? I think it's called a gooseling, I think. And then what is the baby hamster called? So this is kind of like an interactive quiz that we will create. The questions and answers are my own but you can always modify this to suit you. So for example, you don't have to do a quiz based on the baby names of animals. You could do yours based on something completely different from mine but obviously the format will be the same. All right, so that's it. That's what we'll be creating for this project. Thanks for watching, bye for now. Hello and welcome to this lecture. In this lecture we are going to create the project directory and the files we will use for this project. There are a couple of ways you could create files and directory. You could do that using the terminal if you're on a Mac or you could do that using the command prompt if you're on a Windows. You can also do it manually. In this example, I am gonna be creating the directory and files manually. So I'm on the Windows. So to create the folder, all I need to do is right click on my desktop and go new and click on folder and just call it, say quiz. Okay, and that's my directory. If you're on a Mac and you wanna use the terminal to do that, just type in mkdir space and then the name of the directory and to create folders on a Mac use the touch command. If you are on a Windows, you could do mkdir space directory name. If you wanna create a folder in a file in command line by Windows, you type in type TYPE space null NUL and then right angle brackets followed by the name of the file. In this example, we'll be doing things manually. So now that I've created this directory, I'm gonna open it up in my text editor and then create the files from there. So I have opened up the project in my text editor. I am using sublime text, which you can download for free to try and then pay later if you are happy with it. So to browse my folder, all I had to do was go file, open folder and then browse to the location of the folder and pick the folder up. So this is the directory. So to create a file, all I have to do is right click and go new file. I just call this index so that I know what it is and do a file save. So I do save all and it gives me a location. The location is the directory. I just say index dot html. So that would be the name of the file. I do the same, create a couple more. This would be my CSS file. So I'll call it save all. I just call it my style dot CSS. And do the same for the JavaScript file. Right click, new file. I'll call it JS file. And save all and do my script dot JS. So that's it. So we've got my three files created and the directory for our project. So if I open up the directory on my desktop, you should see all three files. So this is the directory. That's my index, my JavaScript, and my CSS. So during the project, we'll be writing code for each of these files. So that's it for this lecture. Thanks for watching. Bye for now. Hello and welcome to this lecture. In this lecture, we are going to create the structure for our app using HTML. I am inside my HTML file from my text editor directory. So the very first line of code you need to specify in an HTML document is the doc. The doc type is not part of the HTML document. It's just a declaration to notify the web browsers that are trying to display this page that this content of the page is an HTML document. That's what the declaration is. I have introduced a couple of HTML tag line two and three. Line two there is where the beginning of the HTML document starts from. That's the opening tag. Line four is the closing tag. You can tell the tags match, but you can see the dotted line under the HTML and that. So to distinguish between the opening and closing, the closing normally has a slash before the tag name. All right. And if you have any attributes, it's usually included in the opening tag. I've introduced an attribute in line two called LNG. We stands for language and I've set the value to equals to English, which is EN for short. So with attributes, you enclose the values in quotes. Attributes are there to provide extra information about the element. So every other HTML tag or element we will write will be embedded or nested inside this HTML. So any content between the opening HTML and closing HTML is regarded as an HTML document. I have introduced the head tag of online three. So that's the opening head tag and that's the closing head tag on line eight. Within the head tag, you have several other tags. The head tags basically you can't see its content when the page is viewed. It's mainly there for informational purposes to the web browsers. So inside the head tag, I have got a title tag basically which displays the title of the web page. I've also on line five got a reference to my style sheet. And I've got a main style sheet and I've also got a link on line seven to Google. Okay, so Google this link here has some special fonts which I want to use for the project. So this is a link to that font I want to use. Line seven is a script for jQuery. We'll be using some jQuery code. jQuery is a JavaScript library. So we're gonna be using some of that code in our JavaScript. So in order to have reference to the jQuery library, you need to include it in the head section. That's what I've done in line seven. So this is a reference to the jQuery library. It saves me installing the library on my computer. I can just access it via that link here. I have introduced a couple tags in line four and five. These are meta tags and they have got attributes in them. The line four meta car set. The car set basically refers to the encoding type that is the type of characters that will be used that this page supports. So the standard for all web browsers is utf-8 or call the current one using utf-8 should be able to read most characters. Line five meta tag. I've got a attribute called name and the value is viewport. I've also got another one within that line of code called content and the value is width equals to device width comma and then it's got the initial dash scale equals one. What that means basically is that the online five is that this page can be viewed by any device regardless of the screen size. So you can view it with a small screen or large screen it will automatically resize and that initial scale means that you can zoom. That's the initial scale to zoom. So it allows you to zoom in and zoom out. All right, that's what that's for. I have introduced the body tag. The body tag is where the main content of the web page will be displayed, okay? So anything in the body tag is the content that people actually see when they view the web page. So inside the body tag, I have got some other tag nested. I've got an input tag, okay? And the type is text. So that's where people, we actually, you actually have to type something, okay? And I've given in a placeholder of name. I've also got another, notice the input tags I've given them ID attributes, which we will use later to, we use later to, all right, apologies. I've had to change the code. I actually inserted the wrong code. Which was input tag. We don't really need input tags here because we're doing a quiz. So apologies for that. So I've had to replace that code. Basically the body tag here, what, that's the opening body and this is the closing body tag. Okay, I'm using that a bit. Okay, so I've got a div here on line 15. This will be the main container. It's called quiz container. So this will wrap all the other divs. And you notice the div begins there and ends here, which means it's a wrapper for the other contents, all right? So I've got h1 tag, which is a heading tag. That's just a title on line 16. On line 18 to, let me just bring this up a bit. So from line 17 to 23. So we've got several div tags here. The div tag called class. Notice of giving them attribute of class. We'll be using the class names for styling purposes. So giving them all of them a class attribute with the values here specified. So line 17, we've got a class div with the name question. And we've got a UL, which is the on order list. This is where we'll have to make a selection of the choices for the quiz. Selection will be, line 19, the div will be actually, that will be the message for the quiz. Line 20 is the result, you know, that will pop up after the quiz. You know your answers. Line 21 is the next button. So you click next to show the next question. So all these classes we will use later in our CSS to style these divs, okay? To make them more pronounced. And then I've got a break tag here just to create some space underneath this button. And then finally, we've got a script tag. So it's good to attach your script tag at the very end of your HTML document. This script here refers to our JavaScript here, which we'll write later. The reason for inserting the script at the bottom and not in the head is that the script will only execute after the rest of the page has been loaded. If you insert it in the head, it will not work because it may prevent the page from loading. So it's always best to insert your script at the bottom of the page just before the closing body tag. All right, that way, the page will load completely before the script is executed. So I'll save this and then we can have a look and see what the document looks like at the... All right, so I'm in the directory. I just click to open and then we can see. Okay. So this is what the page looks like at the moment. It doesn't look much, but when we start writing our JavaScript code, we're gonna use that to make this page a bit more interactive. So that's it for this lecture. Thanks for watching. Bye for now. Hello and welcome to this lecture. In this lecture, we are going to create the styling for our quiz using CSS. So this is the HTML for the quiz. So we're gonna use some of the IDs and classes defined for this HTML document to style the quiz. So let me switch to my CSS. So this is the blank CSS. We don't need that. That was just a label so that I know what file this is. So this is where I will be creating the styling for the quiz. The way it's gonna work so that this lecture doesn't take too much time, I will rewrite the code, add the code and then explain it so you don't have to watch me type all the time. I have added some code here. Line one basically I'm using the import. Basically what this is, I am going to use the font. A font called Rocket, a font family called Rocket and I'm getting that from Google. All right, so that's where I'm saying here, get this font from Google. So you have to import it before you can use it. So that's what I've done in line one. Line two is the selector that I am going to be styling. So basically I'm saying the H1, which is the heading. These are the styling I am applying to it. The font family I'll be using the Rocket from Google and I've also got a substitute font called Serif. So if the Rocket is not available, it will default to the second option. Always good to specify more than one font when you are declaring a font family property. Line four is a text align property where I want the text to be centered. Line five is the color I've set and views the hex value there. Line six is basically the size of the font or the text for that H1 selector. I have added another chunk of code from line eight to line 21. Line eight is a UL selector, which means on ordered list. So the styling I'm giving it is that I don't want any style that is no bullets, nothing. That's what that means. List style property, I've set that to none. So there'll be no numbering or no bullets for that on ordered list items. Line 11 to 15 is the actual LI list, which is the, you use the LI to list the item. All right, so the LI selector specify the font family of Rocket and Serif font size of 2M. You can use M or you can use pixels. The color I've set that to a hex value. Line 16 to 20 is the input selector where the type is a radio. So when you select the questions, you need to select which of the radio buttons. So I've set that to set the properties on this one. The border I've set it to zero pixels. The width 20 pixels, the height. Again, I've used M's here. So you can use pixels if you like, but you can, if you, it depends on which ones you are comfortable with. M or pixels, you can use either. I have added some more styling here from line 23 to 35. So I'll start with line 23 to 25 first. So that the, I'm using the P selector here. The P selector is what was styling. And the styling I've applied to is the font family is gonna use Rocket and Serif will be the substitute font. Line 26 is a comment. That's how you specify a comment in CSS. So that line of code will be ignored because it is a comment. Line 27 is a class. So this is a class called quiz container. So the listed are the styling from 28 to 34, giving it a background color using the hex value. The border radius property I've set to eight pixels. Border radius is what gives it a kind of like a rounded corner. The width I've set to 75%. So it will be 75% of the parent container. So whatever container the quiz container is in, it will take 75% of the width of that container. That's what that means. Again, you could use pixels if you are more comfortable with pixels. Line 31 is a margin. I've set it to auto, which means it will automatically center the quiz container. Okay, auto means it will center it on the page. That's what it means. Margin from the top. That means from the top, I want it to move down 190 pixels. The padding. Margin is a space outside while padding is a space inside the element. So I've set them to 190 pixels and five pixels respectively. The position I've set the position to relative. I have added some more properties and their values. Line 38 added a class called next button. So the styling I have used for the next button class. Start with line 39, which is a border radius. I've set that to six pixels with 150 pixels, height 40 pixels. Text align, I've set it to center. I want the button to be center. Background color, I've set it to use the hex value. Again, you can use the color name if you know the color name, but hex values are okay as well. Here, line 44 is just a comment. So that code will be ignored. Line 45 is a color, which refers to the color of the actual text. 46 is the font family. Again, I'm using Rocket and Serif. 47, the font weight. It refers to how thick the font will be. So I've set that to bold. Position, I've set it to relative. Margin to auto. Padding from the top 20 pixels. Okay, I can get rid of 44. I was using that for to test a few things. So I can get rid of that, don't need that now. I have added another class, which is called question. That's from line 51 to 61. So I've already gone through some of these properties with previous styling on this file. So I'm not gonna go too deep because I'll just be repeating myself. So a lot of this styling we have used before. So it's just the same thing, height, width, and so on. So I'm not gonna run through that because I've done that with the other class. I have added another class here called quiz message. And these are the styling I've given that class. Again, I'm not gonna run through it because it's the same thing like I've done before with the other classes. So basic, the only difference here, here I've not used the hex value. I've used the actual color name. I have added a couple more classes. Line 72 to 75 is the choice list class. So that's obviously where you make your selection for the quiz answers. So again, similar thing, the only difference here, the font family is slightly different. I've used courier and serif. Color, I've set it to blue violet. Again, 77 to 86 is another class called result. And the values, properties and values have specified our self-explanatory. It's similar to what we've gone through before in this lecture for this file, okay? So again, ideally, weight, height, everything we've mentioned before. But if there's any part of this lecture you're not familiar with or if you're not sure about any of the styling, please feel free to let me know. I'll be more than happy to explain further. So I will just save this document and then we can review our page and see what the document looks like after the styling have been applied. So this is what the page looks like at the moment. But when we are doing our JavaScript series, we're gonna use JavaScript to make it more interactive. So that's it for this lecture. Thanks for watching. Bye for now. Hello and welcome to this lecture. In this lecture, we will be creating the functionality for our app using JavaScript. This is gonna be a two part lecture series. So this part one will start and we'll finish off in part two. So this is my JavaScript file. The way this lecture is gonna work, I am going to pre-write the code, add the code on and then explain it. So to start with, I'm going to create a variable that I will call questions. And inside this variable, we're going to have, we're gonna set the variable to equals to an array. And inside that array, we're gonna also have objects that will include the questions for the quiz, the choices you have to make, and then the correct answer. So we're gonna bundle all this up inside a variable and set that variable to equals to an array. And that array will contain objects and also array within that object as well. All right, I have added some code on a chunk of code. So line one here, I've created a variable called questions. Okay, and I've set that to equals to an array. So that's the beginning array there. If I scroll down and the array ends online to 53 here. So this is the closing array. Okay, and inside that array, you've also got objects. So where you see curly braces, you know that you're looking at an object, where you see square brackets, know that you are looking at an array. So inside this array and the object, we've got the question. So this is the question that the quiz will ask. And then this is the actual question. With an object, you need to have a property and then obviously the value. So the question would be the property and this question here, this reply here will be the value. So I'm asking a question and this is the question. And then on line three here, we've got another object property called choices. And the value is equals to an array. So inside that array is where the answers will be. So looking through that array, the correct answer will be three. An array, when you are accessing the elements in an array, an array is a zero base index. So the first one is known as a zero. So this will be baby. It says here the correct answer is three, which would be zero, one, two, three, which is lava. So just remember that when you're numbering in an array, it starts, it's a zero base index. The first one is usually a zero and so on. So the format for this here is the format for all the questions inside this array. So all these are values of this variable called question. Everything here belongs to this variable called questions. So the format is the same. I ask a question, which is the property and then the value, which is the actual question. The choices are enclosed inside an array and then we use the index base to pick up the correct answers. So all the format is the same all through, okay? And that's the very last question. So you don't have to use the same, I've used baby names of animals where you could do something you're completely interested in if you don't want to follow use baby names. So just as long as the format is the same, you should, the quiz should work as well. All right, for any parts of this, you don't understand, please feel free to let me know. Line 55, 56 and 57 are new variables I have added. The first variable is called here, current question. It's set, the value is set to zero and the correct answer, the value is set to zero. Variable quiz over is set to false. So all these variables are set to zero or false. False is a Boolean value. Boolean means it's either through, we say that the result is either one or the other. So it's either true or false. So with these are the values I've given the variables at the moment. I have added some more code here from line 59 all the way to line 91. All right, let me walk you through the code. Line 59, wherever you see a dollar sign, know that you are referencing a jQuery library. Line 59 basically says it's the document.ready function. What this function does, it checks to make sure that the page is fully loaded before it executes the code. The dot ready is what checks to make sure that the page is fully loaded so that the code is not executed prematurely before the page is fully loaded. And the function, whatever happens once the page is loaded is displayed within the function which is this curly braces here. Which starts on line 59 and ends on line 91. So let me run through the code with you. Line 60, display the current question. What that is, it will display the very first question. Okay, and then the 61, the dollar and then the disk inside the parameter. This refers to the current element. It's referring to. So it's saying this.find in parenthesis. So it will look for the next squeeze message, dot hide. Okay, so what that means is that it hides the others but finds the current one. All right, and then line 62, you then use the next button. You say dollar and then it's passed in disk. What this method does using the dot find, it will pick out the next question using the next button. Okay, and you notice you have attached a dot on method here and this method takes into parameter, it takes in the click which is the event and the function. So when there is a click on the button, it will, the click will be the event. It will trigger off this function here, which is the what happens between these curly braces and was here and this curly braces here. So everything in here will be triggered once the next button is clicked. So I've got an if statement on line 63 saying if, the question mark, the exclamation means that if the quiz is not over. Then the value equals to dollar, which is a jQuery input type radio button. If the radio button is checked and the value, if the value of the radio button is checked and the quiz is not over, and if the value is not undefined, that if the value is not unknown, do this. Go pick out the document of find, find, look for the quiz message, look for the text and then select the right answer. So it prompts you to select the right answer. Line 67 again, similar approach. It looks, picks out the quiz and then it uses the dot show method to display the quiz. If that is, if, with an if statement, there are two conditions the same, if the quiz is not over, do this. But if the quiz is over, do this. Find this document, yeah, dot find, using this find method, this quiz and then hide. If the value is equals to questions and it's passed in the current question and the answer is correct, then correct answer, you know, you add the correct answer, that's what that means. If the current question plus plus means if you're increasing the question, if the current question is less than the question length, length of the question, display the current question. Else, display the score, okay? So it's again using the jQuery library again. If the document of find, the next button, is not once in a, well, basically what it's saying, if you click on the next button, it should display the, it should give you a prompt to play the quiz again. So if the quiz is over, if the quiz is over, quiz is over means it's true, that means the game is over, you can start again. That's where this else statement here. Well, if quiz over is false, you know, that means the quiz is not over, then do this. Click on the next button, get the next question. If that's not the case, if the quiz is over, you can reset the quiz using this function, display the current question, and you can hide the score. So the score is hidden until the quiz, all the questions have been answered. So that is it. We're gonna stop here for this lecture because it's gone on a bit long. So we started off by defining a variable and setting the questions, the question choices, and the answers, okay? And then we moved on, these are all the questions, okay? And then we moved on to set three variables there. And we also have the document already method. And that's the rest of it. So that's it for this lecture. We'll complete it in part two. Thanks for watching. There's any aspects you do not understand. Please feel free to let me know. Bye for now. Hello and welcome to the part two of this functionality for the app using JavaScript. I have added a chunk of code here from line 92 to 112. This function here will display the current question and the choices. So line 94, I'm doing a console.log and I passed it in display current question. So when the current question is displayed, it will show it on the console, on the screen. Line 96 declared a variable here called question and set it to equals to questions and then passed it an array of current question.question. So that's the array. So you pick up the questions from that array. We remember we defined a variable at the very beginning called questions, okay? So, and we also defined some more variables here, line 55. We've got a variable called current question and we've got one called current answer. So those are the variables it's referring to, all right? So when it says variable question equals to questions, which is that variable and it's pasted current question.question. Variable question class, again, equals to when you see dollar sign jQuery equals to this method. Again, it picks up this. This is the container container that wraps it. Dot quiz container. If say if this quiz container is greater than the question then 98 was got choices, the variable called choices. Again, if that method dot quiz is greater than choice list, these are what the various variables have been defined and these are their values. Here, we're using this here to set the question class. Okay, this here is a comment I've just put here. Question class dot text dot question. This will remove all current li elements if there's any. Okay, that's what this means. Choice dot find li and then remove them. Here, variable one or seven variable choice got a loop here. Same for i, if the first value equals to zero and the i is less than number of choices then increase i. That increases the question by one. If the choice is equals to the questions, current question dot choices, you pass to the i, which is the represents the i as a counter. So it represents one. So here again, we're using the dollar sign and that's the li list. Using the li is list to input a radio button. Okay, so it will add a radio button each time the choice is made. And then it appends it to the list. Okay, once the choices is made, it appends it to the list. The final function I've added here is from line 112 to 125. It's a function called reset quiz. This function will reset the quiz and enable you to start again. So these are, this is what will happen when the quiz is reset. The current question, if the current question is equals to zero, current answer is equals to zero, it will hide the score. It will call this function. This function is called. Function on method called hide score. So it will hide the score. And then we go here. Another function called this function here will display the score. It's saying if the document of find the quiz container is greater than the result.text, then it displays this text to say you scored x amount plus correct. It will display that text that says you scored plus the correct answers you've answered plus out of question. For example, you will say you scored five out of, you scored, you scored, say for example, four questions out of eight. Okay, that's what that means. And then it does the same thing. And then it shows the result using this show method. It shows the result here after it displays that. Then we've got a function called hide score. This will use the document of find result and it will hide the result. So all these functions will be used at various parts of the code. So that's all the code for the functionality for the quiz app. If you have any questions, please let me know. So these are all the code. If there's any parts of it you don't understand, please let me know. So that's it. Thanks for watching. Bye for now. Hello, let's have a look at what we will create for this project. So this is what we will create. A simple countdown clock that you can use to countdown to any event. It could be a birthday. It could be an exciting holiday or any relevant event that you wanna countdown to. So this is what we will create from scratch. Thanks for watching. Bye for now. Hello and welcome in this lecture, we are going to create the project directory and the files we will require for the project. I have already created my directory, which is this here. And the way I did that was just to right click on the desktop, go new, folder, and then just name the folder whatever name you like. Okay, so that's how I created my directory on a Windows based machine. If you are on a Mac, you could do that on the terminal by using the make directory command, which is mkdir and then the name of the directory. And then to create the files inside that directory, you change directory CD to the directory you've created and then use the touch command to create the files. For me, I'm going to open up this directory in my text editor. I'm using sublime text. I'm using a trial version. So while, okay, so this is my directory. I've opened it up in my text editor by going file, open folder and then browsing to that location. So now I'm here, I need to create three files that we'll need. I need to create the index.html, the JavaScript file and the CSS file. So I'm going to create them inside this directory. So to create the files I need, I just right click on this directory here and go new file. And the first one will be my index. So what I'll do, I'll just save it. I'll just save as and I'll call it. Notice it's defaulted to the directory. So it knows where I want to save it. I just name it index.html. So this would be my index.html file. I need to do that in lower case. Okay, and then I'll save that. And next file I want to create is my style. So I'll go new and I'll save that as my style sheet. I'm going to call it my style. Dot CSS. Okay, finally I'm going to create my JavaScript file. And I'll call it. So I'll save this as my JavaScript. And I'm going to call this my script dot JS. It's the extension that matters. So it doesn't matter what you call it. As long as it's got, they've got the right extension. They need to be like dot HTML, dot JS, and a dot CSS. As long as you've got the relevant extensions, that should be fine. So they're all saved. And that's it for this lecture. We have created the directory and we have created the files we would need for our project. Bye for now. Hello, in this lecture we are going to create the structure for our app, the countdown timer, using HTML. This is our HTML file. Just to save time, I've already pre-written and added the code. So I'm just going to run through the code with you. Some of the tags you may be familiar with already. So I do apologize if I'm repeating myself. Line one is basically refers to the document type. So this is a declaration so that the web browsers and the search engines will know that the document that this page contains is a HTML5 document. So the actual HTML5 document begins from line two or the way to line 33. So anything between line two and line 33 is referred to as a HTML document. So also if you notice, there's some indentation here so that you can differentiate between the parent and the child. The HTML tag is the main parent element and you can see the head is the child of the HTML and the body is the child of the HTML. You can tell that the tags inside the head are child elements of the head and the tags inside the body are child elements of the body tag. So let's start with the head. The head, the content of the head tag basically is for informational purposes. You don't really see them when the page is loaded. The web browsers and the search engines use the information contained in the head section. They use that for informational purposes. Okay so on line four here we've got a meta tag and inside that tag there is an attribute called car set. That has a value of utf-8. Basically this refers to the encoding type, the type of encoding or characters used for the page. Line five is the title for the page. Line seven is another meta tag. Meta by the way means more information. Meta tag are used to provide extra information. So line seven refers to a meta tag with an attribute called name and value description. Basically that's again to provide information to the search engines. It's got another variable, another attribute called content with a value of holiday countdown calculator. Again this is for informational purposes. So if someone types into Google and types is in holiday countdown calculator, Google will, this is where Google will go and look for the head section of any web browser or any web page that has that value and try and render them to display. So that's what those information are there for. Line seven, I've got another meta tag called name equals viewport. It's got an attribute of name inside that meta tag. Value is viewport and also another attribute called content with a value equals width equals device minus width comma initial scale. What line seven is saying is that any device regardless of the screen size, viewport is referring to the view screen size, regardless of the screen size can view this page and also it can zoom in. You notice I've got initial scale here that refers to the zooming in and zooming out. Line eight refers to the style sheet, external style sheet we will reference which is the style sheet here. Line, yep, that's the end of the head section. It ends on line nine. So let's move over to the body. As you can see, the tags are always, make sure your tags are closed properly. You can see the closing tags with the forward slash before the tag. So very important. Okay, that's the, let's go to the body. So this is the body, body tag which starts on line 10 and ends on line 32. It's this, any content in the body tag is what you actually see when you visit a page. So the visible content is between the body tag. I've got an H1 there on line 11. This is a title tag. It will display a title called named countdown. I've defined a div. A div basically is a division in the page. Just divide the section of a page. Line 12, I've created a div. I've given it an ID of clock div. We'll use this ID later. We'll reference it in our JavaScript and also in our CSS. Line 14, I've created a span element. So the span basically used to add things together. So we've got a span element here. I've given it a class of days. The difference between a class and an ID attribute is that a class can be reused several times while an ID is unique. So I'm gonna use this, I've used this class several times. I've used it on line 14. Used it again on, I've created several classes for that. Notice I've used this class here. The class used on line 15. I've also used it here on line 19. And also on line 23 and line 27. So the difference between a class and an ID class is reusable several times within a page. So I've also created some other class here called hours, days and so on. So this content basically comprises of divs and span. The span element is used to join content together. So the span, basically the span tag is a way to group in line elements in a document together. Kind of like provides a hook. It hooks a part of the text or other parts of the document together. It's kind of like the sellotape that glues them together. So that's it for the HTML structure. In our next lecture, we'll be implementing our JavaScript and then we'll implement our CSS. Thanks for watching, bye for now. So this is what our page looks like at the moment with the HTML. So this is what the HTML has created. Once we've implemented the CSS, it will look much more better and then the JavaScript will provide the actual functionality for the clock. Hello and welcome. In this lecture, we are going to create the styling for our project using CSS. To save time, I've already added the CSS code to our style sheet. So let me just run through them with you. Every, in order to style an element, you need to define the selector, which is the item you're trying to style. Then you separate, then you have the curly braces. That's the opening and that's the closing. In between the curly braces is where you define the styling you want to use for that element. On line two here, the body is the selector, which is the element I want to style. And these are the values. The properties are on the left and the values are on the right. You separate the property from the value with a colon and then once you've defined the value, you need to end it with a semi or semi colon. If you don't do that, it will not apply the styling to the element. So line three there, I've got a text align property and I've set the value to center. What that means it will center any text for the body of that element. Line four is the background, which is the background color. I've set it to white. FFF is also the same thing as white in hexa value, hexadecimal values. Line five, I've defined a font family. Font family is actually the font type. I've defined sensorif as the first choice and if that's not available, it will default to aero. These are, this one or the other should be available on most computers. Line six is the font weight. Font weight property basically is used to set how thick or thin you want the characters in the text to be displayed. Okay, so there are several ways you can do this. You can set it to bold. Other values can include normal or you can actually set a number. If you are setting a number value, you can do that to define the thickness of the characters. If you are specifying a hundred, like I've done here on line 20, it defines the thickness of the characters. So the thickness from the 400, for example, is the same as normal. If I was to set this value from bold to normal, it's the same thing as saying instead of bold, I could set that to, instead of normal, I could set that to 400. So bold is equivalent to 700. Notice here in line 20, I've used just 100. So to make the text bold is equivalent to 700. Then anything above that increases the thickness of the characters. Line nine, I am styling the H1 selector, which is our title for the webpage, and giving it a color. I'm using a hexadecimal value for the color. Font weight, again, I'm using bold, which is equivalent to 700. Font size, which is the actual size of the font or text, I've set that to 50 pixels. I have set the margin on line 13 to one, three, five, zero, and 20 pixels. Margin basically refers to the space outside the element. And there's usually four values. You've got the top, the right, the bottom, and the left. So you apply it in that order. Top, right, bottom, left. The fact that I've only specified three values for online 13, those three values will apply. The first value goes to the top. Top, the second goes to the right, and the third goes to the bottom. All right? So the first value goes to the top. The second, sorry, will go to the right and the left margin. All right? And then the last value will go to the bottom, whereby I've specified only three values. The first goes to the top. The second value goes to the right and the left, and the last goes to the bottom. So that's how you specify the margin. Padding is the same way. You apply it in the same way, but padding refers to the space inside the element. Don't forget to end your values with a semicolon, and don't forget to separate the properties from the values with a colon, if not it will not apply properly. Line 16 to 23, I have got an ID. Now that I'm styling the ID here, I've got the ID as clock div, and I've applied the following properties and values. Some of them I've already gone through, so I'm not gonna run through them again. Line 19, display means I want the elements displayed as a block in line. So it will show the hours, the days, minutes, all in a block in line. Font weight I've already covered, text align I've covered, font size I've already covered. Line 25 is interesting. I have got the same div, but notice I've got a greater than sign after it. The greater than sign on line 25 means it's applying to the immediate children of that div. All right, so which means apply this style in here to the immediate children of this clock div called div. So if we go to HTML, this is the clock div. We've got a clock div here, okay? And this clock div has got other divs, and it's also got span elements. That's what it's referring to. Whereby you have say, for example, a three tier level of div. The styling, the styling will only affect the second level of div and not the third. However, if I was to use a space between the selectors instead of the greater than sign, then it will affect both the second and the third level divs. So the space usually means if you just create a space rather than the greater than sign, it will apply to all the levels of that element. Please note that the greater than selector is not supported in lower versions of Internet Explorer, okay? But it should work in other higher versions of it. Again here, line 32, I've used the div here and greater than sign. What that means, it will apply this styling to the child element of the div that is called span, okay? That's what that means. It will apply to the child element. Boda radios refers to the rounded corners. It makes the elements give it a rounded edge. Background, I've already discussed. This play line we've already mentioned. Padding refers to the space inside the element and it pretty much works the same way as the margin. So it has the four corners that I mentioned previously. Font size I've already discussed. So I'll just save this and then we can see what our page looks like. Excellent, so this is what the styling looks like, not too bad. Notice none of the days, hours, none of these is shown yet. We will implement that using JavaScript. So that's it for this lecture. Thank you for watching. Bye for now. Hello and welcome in this lecture. We are going to create the functionality for our project using JavaScript. We are going to create a few functions. I've created the first one here. I've called it get time remaining. When defining functions, you type in the word function followed by a space and then the name you call the function. Always name your functions to reflect what you want them to do. Every function will have a parenthesis and it can be empty or you can pass in values also known as arguments or parameters. Notice I've passed it a parameter or argument called end time. The end time is a property that returns the time that ends in second. It returns the ending time in seconds. Line two, I have created a variable. Line two, we've got a variable called I've named it just with a letter t and I've set it to equals to the date dot pass and then passed it an argument of end time which we spoke about from line one and the end time property. The end time property basically returns the time ending in seconds and I've set that to minus the date dot pass and then in there you will pass it in the new date function or method. The date dot pass method is used to pass a date or string and returns the number of milliseconds. Okay, so usually it's between the date string and the midnight of January 1, 1970. On line two, we've got the new date here, the new date object here. So what that does, we created and increase an instance of the date and which represents a single moment in time. The date objects are usually based on the time value. All right, that is usually the number of milliseconds since January 1, 1970. Line three, created a variable called seconds which have set to equals to the math dot flow method. The math dot flow function is a javascript function that is used to return the largest integer, less than or equal to a given number. So on line three there, the math dot flow function have passed it inside this parameter, have passed it the variable from line two, divided that by a thousand and then taken 60% of that. That will give us the seconds, the time in seconds. Line four, I've done a similar thing to achieve the time in minutes. Line five, done the same thing to achieve the time in hours. That's 24 hours, give me a 24 hours clock. All right, notice that line four, I've divided that by 60 then and the percentage. However, line five, done the same 1000 times 60, times 60 again, then the percentage is 24. Okay, that will give us the hours. Then to get the days, which is on line six, did similar thing, that you divide it, you have a thousand times 60, times 60, times 24. All right, that will give us the days. You divide the variable by the variable t, you divide that by these values. When you have values surrounding parenthesis, that means you do the, you achieve this first. What that means, the multiplication will take place first before the division. All right, and similar thing with that. You do the multiplication before the division. Anything in parenthesis takes a precedent order. Line seven, I've also specified a return. Not you can define returns with functions. Functions don't have to return anything, but if you want them to return something, you can always use a return. So I specified that here on line seven to return these values, okay? To return the total time, which is this total variable. Then it gives me days, hours, minutes, and seconds. So these are the values I've asked the function to return based on the values I have specified. I have added another function from line 15 to 37. This function I've called initialized clock. So this is a function that will initialize the clock, pasted two arguments or two parameters. First is the ID, the second is the end time. I've already mentioned the end time property, but the ID it will take, it would also have look for the ID value. So the two parameters here, ID and end time. Line 16 to 20, I've defined a few variables there. The variable names are self-explanatory. I've set it to them to equals to document.getElement by ID. Notice pasted the ID here. And basically the document.querySelector method is used to return the first element that matches a specified CSS selector or selectors in the document, all right? So the query method only returns the first element that matches the specified selector. So here these are the selectors. So we've got this variable here equals to clock.querySelector and pasted the days variables. Notice we created, if we go up here, we created these variables there. So we've got the returns, days, hours and so on. So that's what it's referring to. The hours here, the query selector will return that and that will return these. So these days, hours, minutes, these are, if we go in our HTML, which you see there here, we've got this ID. We've got, let's scroll up. We've got class hours. We've got minutes and we've got seconds. So if I go back to it, you see, notice the dot here represents a class. Anyway, if you've got an ID, it'll be a hashtag. So the dot represents a class. So this query dot selector method takes in the day class, hour class, minutes class and seconds class. These classes were all defined in the HTML. All right, that's what that means. Created another function here, online 22 called update clock. This would be used to update the clock. And given a variable of, it would take the variable we defined earlier, get time remaining past the end time. All right, and then these are various other properties. So the days dot span dot inner element, set that to the t variable dot days. And notice here, I've used a slice method. The slice method basically is used to extract parts of a string and it returns the extracted parts in a new string. So the first character usually has a position of zero. The second has a position of one and so on. However, you can also use negative numbers to select from the, if you use a negative number, it will make the selection from the end of the string. String is also known as text. We've got an if statement here saying if this value is less than or equals to this, then clear the time interval. And we've got, then here we've got the update clock. We've got the variable time interval equals to set intervals. So we're setting, we're updating the clock every milliseconds. That's what that means. All right, just to update the clock. Okay, line 38 and 39. Added a variable here called deadline. Seller equals to a new date object. And we passed it, used the date.pass method. And we've got some values here in this new date method object. So we've got, we add in a plot seven, so seven days of the week. And then times 24 hours of the day times the 60 seconds. 60, 60 seconds give you one minute and then 60 seconds again. They're multiplied by the interval, which is this interval here. Okay, and here we've, we call this function here, the initialize function, this clock here. We've, we're calling this function here. And we've passed it to variable. We've passed it the clock div, which is the actual clock div. And also we've passed it this variable called deadline. All right, so we're calling this function. We define the line 15, we're calling it here to initialize the clock to get the clock started. All right, so if there are any parts of this functions you don't understand, please do let me know. This here, the hours of span.init means it will replace what's in the div, this div here. This, we've got a span element here. If we go to our HTML, they are all defined here in the span. So that's what it's referring to. It will replace the content with these values. All right, zero plus this tier refers to the variables, dot the hours, minis refers to these values we've already defined. I've already mentioned what the slice method does. All right, so that's it. Just save the code. And if we open, all right, this is the clock. If I refresh it, it should, that function should kick in and initialize the clock. All right, there you go. So we've set the clock and it's ticking away. I'll show you how to change. If you wanted to change the days, I'll currently set it to the timeout for that day. If we go, this is where we actually set the timer. I've set it at the moment to seven days. So if you wanted to change, for example, set the timeout for an event that's happening in 30 days time, this is where you change it. Change this number to 30. These you can leave as standard because this will represent the hour. This will represent the minutes. This will represent the second and this will be the time interval. All right, so the only thing you really need to change if you want to change the days, this is where you would change it, all right? Just to let you know. So that's it. Our countdown clock is ticking away. I've currently set it at the moment for an event that will expire in six days time. So it's counting down to the event at the moment. Thanks for watching. Bye for now. Hello and welcome to this video. We will be downloading and installing MongoDB for Windows. The link to the MongoDB site is displayed on the screen. This is the MongoDB site. So to download, you click on the community server. And then just scroll down. Make sure you've got the Windows tab selected and in the version bit, it tells you what version it's got there. Windows Server 2008, release to 64 bit and later with SSL support. If I click on the dropdown, there are other options here for you to install. So if you download this MSI, it's going to download the version listed. If your version is not listed, you can use the binaries and there isn't instructions there for you to follow if you decide to use the binary version. I haven't got any of these, so I'm going to go for the versions that suits my operating system. So I'm going to click all binary. If you have matching, if your version matches what's listed, just click on the download MSI. The process of installation is the same. So don't worry, click all versions and here it will give you a list. So just select the version relevant to your operating system. I have got a 32 bit operating system, so I'm going to go for this one. However, it's a slightly lower version. The current version is 3.4, this is 3.2, but they work the same. So don't worry, make sure you download the latest if your operating system can accommodate that. So I'm going to go for this one and let's just download in there. Give it a few minutes to complete. So if your system can accommodate this 3.47, please go for that option. Once your download is completed, double click on the MSI installer to begin the installation. You get an option to run, click to run and just click next. You just have to accept all the default and make sure you select complete installation and click install. If you get a security prompt, just click yes to allow for the installation to continue. So that's it, the installation is now finished. So we have successfully installed MongoDB. We can take a quick look at where it was installed. So if you go to your computer, it will be on your C drive on the program files and this should be a MongoDB, there you go. So this is where it has installed it. So inside that directory, there's a folder called server, click on that. Inside that, you get your version. If yours is 3.4, it will say 3.4. So click to go into that folder. You should see another directory called bin, click to go in there. And this is where you find all the files for the MongoDB. So it contains both the server and the client. The two most important files are the second and the third, the mongo.exe and the mongo.d.exe. The mongo.d, this does for demon. This is what starts the server and the mongo.exe is kind of like the command line for interacting with Mongo. So in the next lecture, what we're going to do, we're going to set up the environment variable to make it easy for us to access the mongo files. So that's it for this lecture. Many thanks for watching. Bye for now. Hello and welcome. In this video, I'm going to show you how to modify your environment variable path. So to access your environment variables, you just go to start, right click on your computer icon and go properties and click on advanced system. And within the advanced system, click on environment variables. Okay, so this here, these are all the variable path. Earlier on, when we set up the environment variable, I created a new variable called mongo.db and in the value, I copied in the path to where our mongo.db files are. A lot of applications that automatically add the environment variables for you tend to do that within this here, where it's got the variable name as path. And what they do, for example, if I edit, click to edit this and to see the content, I'm just going to copy the whole line. What I've got there at the moment, go copy. And if I just open up a blank text editor. So this is what it's in my environment variable path at the moment. So you can see sometimes when you install applications, it automatically adds the path into this environment variable for you. However, there are some applications like mongo.db that you have to manually do it yourself. So these, most of these here have been done automatically by the applications. So if you notice, there's a comma after h1, a semicolon. So this one here, and this is one. You can see where there is a semicolon. That's the end of one. And then this is another application. This is Python as well. And then you've got one here called Ruby. You can tell where it ends. And there's another one here, this way ends. So if we want to add our path for mongo.db, we have to put a comma after the last one and then paste in the path to our bin directory for mongo.db. The advantage of doing it this way is that you don't have to type in the variable name each time in the command line console. You can access it from anywhere without keep typing in the percent sign. So that is one way of doing it. However, you gotta be careful and make sure you do it properly. If not, you can impact on the other variable path that have already been defined here. For example, if I come here, add it on, I don't put a semicolon to indicate the end of the other one, then I may cause problems and the other application may not work properly, okay? So if you're comfortable doing this, it will make your life a lot easier working with mongo.db. You don't have to call the variable with the percent sign each time. So let's do this. So the way we're gonna do this is I'm going to get the path I defined here or I just go to my mongo.db file. I go program files and click on mongo.db. Click on server and click on the folder, the bin directory, right click where it says bin. Click copy path and then inside, make sure you've got the path highlighted, click edit and scroll down to the end, very important. Once you get to the end, you can see the cursor flashing at the end and enter a semicolon. Very important to enter the semicolon so that it knows that you're about to enter a new path. If you don't enter the semicolon, it thinks this is part of the other application and it will cause problems. So click okay once you've done that and click okay again. Now let's test our application. So open up your command line. I'm just gonna open up my command prompt here. I click run and you see it doesn't matter where you are inside the command line. If I just type in mongo.db, it should start the server. You can see it started the server, no issues. If I open up another terminal and just type in mongo just to see if I can get some. You can see there's no problem. You can see it's waiting for instructions for commands. So I've got both the server running. I've got the mongo demon and I've also got the command line here to issue some commands. So this way is a lot easier to interact with mongo.db provided you can set up the environment variables properly. Okay, so if you're comfortable doing that, then this is the way to go. If you're gonna do that, I will recommend you copy what you've got in the environment path first, copy it into a separate file, a text file, just in case anything goes wrong and then you can put it back the way it was. Okay, very important, you do it right. If not, you may cause issues with the other applications. So that's it, thanks for watching. Bye for now. One quick note before I go, anytime you want to exit the mongo console, you just do control C, you can see it tells you by here and then you come here, the same thing, control C tells you console terminate. Okay, so you can just type in exit and that will exit the console. Okay, hello and welcome. In this video, we are going to create a storage directory that mongo will need to store all its data. Mongo's default directory path is usually data slash DB in the directory in which mongo was installed. So the drive, for example, if mongo was installed in program file C, so it will require a data slash DB directory on the C drive. If you don't want to create it there, you can create it anywhere you like, but when you run mongo DB, you have to tell mongo DB where it should look or what it should use for a storage file. If you don't tell it by default, it will look in this directory. So we're going to create a directory called data slash DB. So open up your command prompt. Normally you can access the command prompt via the accessories folder. So there is an accessory folder here. Just right click and go run as administrator and it should have administrator on the top followed by command prompt. So I want to navigate to the root of the C drive. So to navigate, you type in CD, CD means change directory and do a space and then dot dot means move back one, press enter. That will take you to the next level. You do CD again, space dot dot enter that takes us to the C drive. So if you want to go one level up, you type in CD and then you type the next directory. All right, so we're in the root of the C drive. This is where I want to create the storage directory. So type in the command MD space. MD means make direct space. You do a slash data slash. DB and press enter and that should create a directory. So if you will now go to your C drive, you should see a folder there called data. That's my folder and inside of got DB. So that's it for this lecture. We have created our storage directory for MongoDB. We've also created it where we expect MongoDB to look for it. If you decide you want to create it somewhere else, it's fine just that when you run MongoDB, you need to tell it to look in the location you specified. So that's it for this lecture. Thanks for watching. Bye for now. Hello and welcome. In this video, we are going to learn how to start and stop the MongoDB database and client. The client is also known as the shell. Open up two instances of your command prompt. Or if you're in a Mac, open up two instances of the terminal. The first instance will use that to start the Mongo server. To start the server, you type in MongoD. D stands for demon. Press enter and that will start the Mongo server. The second command prompt, we use that to start up the shell also known as the client. So to do that, all you need to do is just type in the word Mongo, enter. So the shell or the client is what you use to interact with the database. So if you want to add a new document into MongoDB, you do that using the Mongo shell or client. So to stop the server, you type in, you click, make sure you're in the command prompt for the server. You can see the cursor flashing and do a control C. If you're on a Mac, I think it'll be a command C. You can see it stopped because it tells you here console terminate. And if you're in the client, make sure the cursor is flashing in the client. You do a control C as well. You can see it tells you buy. So basically that's how you start and stop a MongoDB server and client. The client is also known as the shell. So any command you want to issue relating to MongoDB, you do that through the Mongo shell or client. So that's it for this lecture. Thanks for watching. Bye for now. Hello and welcome to this video. In this video, we are going to take a look at some of the common data types in MongoDB. So let's take a look at some basic data types used in MongoDB. So there is the string data type. This is most commonly used type of data type in MongoDB. It's basically used to store the data type that contains string. A string basically also refers to things like text or anything alphabetical is known as a string or text. Next we have integer. The integer data type basically refers to numerical value. So it's used to store numerical value. The integer can be 32 bit or 64 bit depending upon your server. Next we've got the Boolean data type. A Boolean basically stores two values, either true or false. Next we've got the arrays. The arrays data type is used to store multiple lists or multiple values into one key. Next we've got the timestamp. Sometimes it's also called the C timestamp. This can be used for recording when a document has been modified or when you add a new document. Also we've got things like the object. An object data type, this type of data type is used for embedded documents. We've got the null data type and null basically means it has no value. So it doesn't mean that it's empty, it just means it has no value. So this data type is used to store any value that contains nothing. The date data type is used to store current date or time. Okay, so but you can also specify your own date type by creating object of date and then you pass in the day, the month or the year into that object. We've got the binary data type. This is used to store binary data. We've got the code data type. This is used to store JavaScript code into the document. Next we've got the regular expression. This data type is used to store regular expression. So these are some of the basic data types that is used in MongoDB. Thank you for watching. Bye for now. Hello and welcome to this video. In this video, we are going to create a database in MongoDB. First thing you need to do is open up two instances of your command prompt. If you're on a Mac, you open two instances of your terminal. The first one we use that to start up the Mongo server and to start the server, you type in MongoD. The D is for the MongoDemon that starts up the server. So we start the server there and then the second screen here, second command prompt is where we initiate the client. So to initiate the client, we type in Mongo. So we now have both the server and the client up and running. It tells you here one connection now open. You can see it flashing here waiting for instructions. To create a database in MongoDB, you use the keyword use. All you need to do is type in the word use, space followed by the name you want to call the database. So for example, I want to call my database blue lime. That's it. You'll press enter and that has created a database called blue lime. There is a command you can type to show all the database that you have on your system in MongoDB. And the command is show, space, DBS, press enter. As you can see, we've only got two databases listed. It has not listed the database we've just created because the database is empty and hasn't got any data to display. If you want to check the current database you are using, you just type in the command DB and press enter. So it tells me the current database is blue lime. So I'm going to insert one document into my database. So it will come up when I request for a show list of the database in MongoDB. So MongoDB uses a JSON format. So the command I'm going to type, I'm going to create and do the DB dot fruits. So this will be kind of like the table equivalent dot insert is what you use to add into a database table or collection. So this, the fruits will be an equivalent of a database table in Mongo terms is called a collection. And then we have opening parentheses and then opening curly braces. Followed by a database table or collection should have fields and each of the fields will have a key and a value. So this field has a key called name and you separate the key from the value with a colon. And you also have to enclose it in quotes because this is text. The value of my key, I'm going to call it apples. Okay, and then once I've done that, I will close the curly braces and then close the parentheses and press enter. So if you look here, you can see right one, that means I've written something to the database. So it has now tells you here, right result, inserted one. So I've inserted one record into the database. Now if I type in the command show space DBS, it should list all the databases. You can see we've got blue line listed as well. In MongoDB, the default database is called test and we have a database here called test. So if you're inserting any document into MongoDB without creating a database, it will automatically store that collection inside the test database. So this here, what we've just done here, this is known as a collection, this db.fruits. So we're inserting, this is a collection which is kind of like a database table. So if you don't specify a database, it will add that to the test database. So that's it for this lecture. That's how you create a database in MongoDB. Thank you for watching. Bye. Hello and welcome to this video. In this video, we are going to learn how to insert a document into MongoDB. To begin, open up two instances of your command prompt or your terminal. The first will use to start the MongoDB server and the second will use to activate the shell or the client. So let's start the server first by typing in mongod and press Enter. So you can see the server has started. It's usually on the default port 27017. Now let's activate the shell or the client just by typing in mongod. That will activate it. It tells you one collection now open. We've got a flashing cursor, which means shell is waiting for instructions. First thing I like to do is display a list of the database and we have. So we do show, space, DBS, Enter. So currently we have two databases. One is test, which is the default database. So let's create another database. And the command you need is you type in the word use space followed by the name you want to call the database. I'm gonna call mine assets. And I have two data, I've now have a new database called assets. However, if I do a show again, show DBS, I will not see that database listed because it has no documents inside. So what we're going to do is insert some documents in a document into the database we've just created. So if you wanna check the current database you're on, you type in DB, Enter. So it tells me the database I'm currently on is called assets, which is the database I want to be in. So I need to issue a command for this database. So what I'm going to do, I'm going to create a collection and also insert at the same time. You can insert a single record or you can insert multiple records into one key by using an array. I will be using an array because I want to add or insert multiple records. So I have added an array of records here into my database called assets. So this is what I did. I did db.cars insert and the square bracket indicates I'm inserting an array. So I've inserted multiple values into one key just to save time. So you can either do that or you can manually insert one value at a time, one value and then the key each time. So we've got variance, we've got the key, we've got the value, the key, the value, the key, the value. So it tells you here also I've written four records or I've inserted four records into the database. So write basically means you're inserting or adding something. So this is all what I've just added. It tells you here I did a bulk write and this is the result. Write errors, no errors at all. So I've inserted five, it tells you the values. Okay. So that's how you insert into a MongoDB database. So you can either insert a single value, single row or you can insert multiple as one into one key using an array. The key thing to know when you are inserting multiple values is that if you have several fields or multiple values, you must separate each one with a comma. You notice here after the first one, the comma, comma, comma, you don't need to place a comma with the last value. And when you're using an array, don't forget after the parent opening parenthesis, you add the square brackets. And then after the here also you close the square brackets and then the closing parenthesis. So this is the JSON object or document that are used for the insertion into the MongoDB database. So started with command db.cars. So cars is the collection or the table in some in relational databases. So I'm inserting these values into cars. They are multiple values, but they're going into one key. So every in JSON, you have the key and then the value. So these are the key and these are the values, but they are all multiple lists or multiple value as one because I've used an array. I could have decided not to use an array and just insert one line at a time. Just insert one value, go back, insert another value. But doing it this way is a lot easier. It just inserts four records at once. So that's it for this lecture on inserting into MongoDB. Thanks for watching, bye. Hello and welcome to this video. In this video, I'll be walking you through how to query a document in MongoDB. So open up two instances of your command prompt or your terminal. In the first instance, just start the MongoDB server by typing in MongoD and enter, and that will start the server. In the second command prompt, which is also the shell, we're going to start the shell or the client. All you need to do is type in Mongo, enter, and that will start the shell or the client. It tells you one connection now open. Normally, the default for MongoDB is on port 27017. So we've got the cursor waiting for instructions. First thing I like to do is to see a list of our database. So I do show space DBS to list the databases. It tells me I've got three there. I've got one called Assets, Local, and Test. Test is the default database. So I want to issue my commands against the Assets database. So I do use Assets, and it tells me I'm switched to database Assets. If I want to be sure I'm in the right database, I just type in DB, Enter. It tells me I am in the Assets database. So the command, if I want to see all the records in the collection for this database, the command I need to type in DB dot, followed by the name of the collection. The collection is cars.find. And if the op parentheses is empty, just like that, it will return all the details from that collection. So I press Enter. This returns all the values from the collection called cars. So you can see there that I've got one, two, three, four, five records in there. I've got a range of four, Toyota Bugatti, and a Porsche. So that's a quick way of seeing what you've got in your collection. What if I just want one record inside the collection? If I want to view the first record, usually the records are, if I issue a command to display the first record, it will give me a value of a record in the order they were added on. For example, this was how I inserted the records into the documents. So if I am querying for a single value or field, it will return this. I expect it to return range of up first, because that was what I added first in that order. So let's give that a go. The way to do that, there is a command. So we type in DB dot, the name of the collection, which is calls dot find uppercase o one, and then in parenthesis. So this method or this command will return the first record that was added. So I expect it to return a value for range rover. So if I press Enter here, you see it tells me here, it gives me the ID, the object ID, and the value is the key, and tells me the make, and then range rover. All right, so that's how I expected the result. So whereby you use this command DB dot find one, that command basically will return one document that satisfies the specified query criteria on the collection or the view. However, if multiple documents meets that requirement or satisfies that query, this method will return the first document according to the natural order, which reflects the order in which the document were added to the MongoDB. So that is it for this basic lecture on how to query a document in MongoDB. Many thanks for watching, and bye for now. Hello, and welcome to this video. In this video, I will be showing you how to update a document in MongoDB. Please open up two instances of your command prompt or your terminal. In the first instance, we're going to start the MongoDB server by typing in MongoD. And then Enter. Always use this port 27017 by default. Now let's start the Mongo client or the Mongo shell by typing in Mongo and then Enter. So it tells you here, one collection are open. And here it's waiting for a command because it's got the flashing cursor. So we need to tell it what we want. MongoDB has an update method that you can use to update documents. First thing I want to do, I want to go into the right database. So if you want to check the current database you're on, just type in DB, Enter. And it will tell you, it's telling me I'm on the test database. That's my active database. The test database is the default database. So I don't want that. So let me do a list of all my databases by typing showdbs. Tells me I've got other databases. So I want to use the assets database. So to use my assets database, I will just need to type in the command, use space assets, ETS and press Enter. Tells me now I'm not switched to database asset. If I want to be sure, I just type in the command DB. Tells me my current database is asset. So I want to see all the collections I have in this database. So I'll type in show collections and press Enter. I've got two, one called cars, one called system.indexes. The system.indexes is automatically added. So I want to update data from my cars collection. First thing I want to do is see all the data in that collection. So to do that, I do DB dot, the name of the collection, which is cars.find1, not just dot find. And then in parentheses, press Enter, gives me a list of all the data. So this is all the data inside the collection called cars. All right, say I want to change, I want to update some records. I want, let's assume I now have a Maserati. And I want to give the Ford away. So I want to update the make from Ford to Maserati. So to update the record, you do DB dot, the name of the collection, which is cars.dotUpdate. And then you do an opening parentheses, and then opening curly braces. And we start with the first quotes, double quotes. So we'll start with what we have at the moment. So the make, start with the make, which is the key. And then we specify the value. In this case, it is Ford. And then we close the curly braces. We do a comma. And we open another curly brace. Inside our curly brace, a dollar sign. After the dollar sign, we type in the word set. Set is what we're going to use to change it. And then colon, curly braces again. Then we start with the make. And then colon. This is where we now specify the new value. So we need value is Maserati. So I then do closing curly braces. Another curly braces to match the other one. And then a closing parentheses. I'll press Enter. So it tells me here, right result, matched, update. So we'll do a find again to see if that worked. We do db.cause.find. Let's see if that update worked. If you take a close look at the query here, the update failed because the values did not match. Don't forget with JSON, the value of the key. The key has to have a value. So if they don't match, it will not do nothing. That's why my update failed. So let me tell you what went wrong here. So in case you make the same mistake here, I'm updating the value here db.cause.update. The make is forward. Notice I've got the F in lower case. And here it's telling me the F is in upper case. So they don't match. That's why the update failed. It's telling me here now, right result and match zero. It didn't match as nothing was updated. So when I run the db.cause.find, it gave me exactly what I had before. Here I've now fixed it. db.cause.update make is forward. The capital F matches the capital F. And this is what I'm setting it to. So now if I do db.cause.find, I expect the update to have taken place. So let's check that out. db.cause.find, and then I press enter. You can see the value has changed. It's now showing as meserati. So if the values don't match, just like the combination to a lock or a safe, if you don't have the right combination, the safe will not open. So here I've now got the right combination. It has updated the data. So that's how you update documents in MongoDB. Thanks for watching. Bye for now. Hello and welcome to this video. In this video, I will show you how to delete a document from a MongoDB collection. A document can also be an equivalent of a rule in a traditional database table. So to begin, let's start up our server. I've got two instances of the command prompt. So if you could open two instances or two instances of your terminal. The first instance, I'm gonna start the MongoDB server by typing in MongoD and press enter. Tells you it's started. You can see the default port is 27017. So now let's start up the shell. To start up the shell, you just type in mongol. And I'll take you into the shell. So let's see what database we are currently on by typing in db. It says I'm in the test database, which is a default database. I want to see a list of the database. So I type in show dbs. Okay, I want to use the assets database. So I type in use assets. So what I wanna do first, I wanna quickly create a document, I wanna insert a document into the collection for this database. If I type in show collections, it will tell me how many collections I have. Collections are like tables. So I've got two, one is a system and the other one is cars. I want to insert a document inside the cars collection. So I'm gonna do db.cars. Before I do that, let me see what's, I want to view everything inside the cars collection. So I do db.cars. Find, because this is a method we need to include in parenthesis. Okay, so these are the records. I've got five records or documents inside the cars collection. I want to insert another. So I'll do db.cars.insert. And in opening parenthesis and then opening curly braces, I type in the make, colon and then in opening, bright, squirm, opening quotes, let's make it a Nissan, our closed curly braces and closing parenthesis, press enter. That tells me I've inserted one record. So if I do db.cars.find and press enter, see I've got an extra record now called Nissan. So I want to remove or delete this document here. So to delete a document in MongoDB, if first of all start with db.followed by the name of the collection, which is cars.remove. So we're going to remove a document where the make matches Nissan. So inside that, you start with the opening parenthesis, opening curly braces, quotes, you type in make and then a colon. After the colon, you type in the name. Don't forget the value has to match exactly. And you can use single quotes or double quotes, but you can't mix them. You can't start with a single and end with a double. They must match. So once you've done that, close the curly braces and then close the parenthesis. So what they say, we're going to remove a document that matches the value of Nissan from this collection. So I press enter. It tells me here there's the right result, means I've removed one document. So to check, we do db.cars.find, which will display all the documents from that collection. You can see Nissan is no longer there. So that's how you remove a single document. If you want to remove all the documents from a collection, it's the same thing as truncating a table. When you truncate a table, that means you strip the table of all its data. So the same thing applies to a collection. You can strip the collection of all its data. So if you want to do that, the command you need to type is db.follow by the name of the collections.follow by the word remove. And then because it's a method, you need to put the parenthesis. If you execute this command, it will get rid of all the data, all the documents from this collection. I don't want to do that. I just wanted to show you how you do that. If you intend to flush out all the documents in a collection. That's how you would go about doing that. So that's it for this lecture on deleting a document. Many thanks for watching. Bye for now. Hello and welcome to this video. In this video, I'll be showing you how to drop a database in MongoDB. Dropping basically refers to deleting. So if you want to delete something, it's referred to as dropping. To begin, I have got two instances of my command prompt. I'm going to use one to start the Mongo server by typing in Mongo MongoD. The D stands for demon that will start it. I'm just okay. So we started on port 27017. That's the default. All right. So now let's start the Mongo shell. Mongo shell is where you actually type in the commands to interact with Mongo. All right. So I've got the shell before I drop the database. I want to quickly create a sample database and the commands you need to create a database. You just type in the word use space followed by the name you want to call the database. I'll call my my my DB for short. So you can see now it's now created a database called my DB. I need to switch by saying switch to DB. It means that the active database is using at the moment is my DB. So any command that issue where this cursor is flashing will be issued against the new database. So now that we've got a test database, let's go ahead and drop that database. Mongo has a command that you can use to drop an existing database. So the command is you type in DB, because I'm already in the active database, I want to drop. I'm not specifying the names. I just say DB dot drop. This is the Mongo command to drop the database database data base because it's a method. You need to enclose that in parenthesis. So DB dot drop database, press enter. You can tell this is the data it has been successful. So you have OK one meaning is dropped one data. If I type in a list to show all my databases, I don't expect to see the database called my DB there. So if I do show space dbs enter, you can see that my DB is not included in the list. So we have successfully dropped the database. So that's how you drop a database in MongoDB. Thanks for watching. Bye for now. Hello and welcome to this lecture. In this lecture, we will be downloading and installing node.js. We will be heading over to this link here, which is the node.js official website. This is the node.js official website. So once you are on the website, you see this option here to download for Windows. You could either click on this current one here or you could go to downloads. And in the downloads, there are different installers based on your operating system. If you are on a Mac, you'll be using the Macintosh installer. If you're on the Windows, you'll be using the Windows installer. And if you're on the Windows, you have to choose installer based on if you've got a 32-bit or a 64-bit. So if I click on Windows installer, it automatically downloads it and it can detect if you are on a 64 or on a 32-bit. The way to find out is if you go to start, right click on my computer, go properties. It tells you here on the system type, if you are running a 32-bit or a 64-bit operating system. So that's what it means by 32 or 64-bit. But if you just click on the installer, the installer can detect if you are running a 64 or 32. And based on that, it will download the relevant installer. So it has downloaded it. That's it here. So I'm just going to double click to begin the install. And I'll click run. And I'm just going to accept all the defaults for simplicity. Click I accept and click next. I'm going to accept the default location where it's going to install it to. I'll click next. I'm going to accept everything, the default here. Go next. I'm going to click install. I'll give it a few minutes for the installation to complete. The installation shouldn't take too long. It's fairly quick. Obviously, depending on your processing power on your computer. Once the installation is completed, you will get notification that it has completed. You get this box come up. So click on finish. So we have to now verify that node.js is on our computer or Mac. So to verify that node.js has been installed correctly on your Windows PC. Or if you're on a Mac, you can open up your terminal. Or if you're on the Linux as well. I'm on the windows. I'm going to open up my command line. I'm going to type in cmd. We'll bring up the cmd command. Or you can go via accessories. I'm going to click on that. And I will get the command line. If you're on a Mac, open up your terminal. It should give you the same results as well. So once you've got your windows, once you've got the command line open, you type in node in lowercase. You do a space dash dash version and press enter. If node is installed, it will tell you, you got node version six dot 10.2. So if you can see this come up, that means you have node.js successfully installed on your computer or Mac. So congratulations and well done. So that ends this lecture. Thanks for watching and bye for now. Hello and welcome to this lecture. In this lecture, we are going to create our first node.js application. We are going to follow a few steps to create the application. The first step, we are going to import the required module. In the second step, we are going to create the server. In the third step, we are going to implement the request and response. I'm going to be using the sublime text editor for this lecture and for the duration of the course. So if you have got sublime text as well, if you click on the sublime text three, that should launch it. If you are using the free edition, you should have it unregistered in square brackets squares in parentheses here. Don't worry about that. It will still work. It just means that you haven't paid for it yet. Next I want to do is save this file here. I'm going to save it as a js file. JavaScript is used to write node js applications. I'm going to click save as. I'm going to save it to my desktop. I'm going to save it as an index.index.js. So I'll click save. I'm saving as index.js because node.js files are written in JavaScript.js means JavaScript. Click save. And you can see this is the file here saved. So anything, any code we write inside this text editor will be saved as a JavaScript file. To save time, I've already written the code for our first application. So I'm just going to run through the code with you line by line. So on line one here is just a comment where you see the slash slash here is a comment when the code runs, the comments are ignored. So this is a comment telling you that requiring the HTTP interfaces in the node. So we are actually importing the required module here in line one. Line two is where we've declared the variable. We call the HTTP and we set it to equals to the require directive. So this required directive will load the HTTP module and store the returned HTTP instance into an HTTP variable. Here line four is a comment just explaining that we are creating an HTTP server to handle the request and response. So here on line five here we've used the created the HTTP instance and call the HTTP dot create server method. This is a method, this create server method here to create a server instance. And then we bind it to port 8080. So the binding is here. So this way it's got less in here. This create server here. This parenthesis to here here. These are all belong to this create server method. So this is all the code that will be executed for the create server method or function. So the create server method takes in two parameters here. A request and a response for short. I've just shorted into rick. So also you can also write it as request and then response. And then between these parents this curly braces here is the code that will be executed when this method is called. So here on line seven is a comment saying that I'm sending a response header of 200 okay. What that means is that if everything is okay if it's been interpreted okay by the server it will return this response 200. Response 200 means that everything is okay. Server or code message understood it interpreted it and sent it back. So line eight here. This is the response the right head. And we pass it a status code which is 200. That means it will return that code if everything is successful and checks out okay. And then the value here is going to be a content that type and it's going to be a text slash plain text. So this is the type of content that will be returned. It just tells you the type which is going to be a plain text. And then here on line 10 it's just a comment to say it's going to print out hello world. So this is the response. So the end response will be rest dot end and in parenthesis it will print out this text hello world on the web browser. So this port here basically is bounded to the server. So it gives the server what port to use to display the application or the output for the application. So the server will listen out for port 8080 on your local port. If that port is used it will tell you it's used. So if it's empty it will display this hello world for that port. And then in order to test your code once your code is completed on the console console mean we're going to run this either on the terminal or command prompt. When we run it it will tell you if you log the console dot log it will tell you the server is running. It will tell you the port on which the server is running. Once you've got that confirmed you can launch your browser as a local host and it will display this content hello world. So this is the code basically for your first web application. So once you've got your code in there just click on file and save all. Now if I exit this this is our code here in our node this is index.js. So this is a code we have written for our application. So how do we run this code because it's a console app we are going to run it in our console. So if you're on the Mac go to your terminal if you're in Windows click on the command prompt. CMD will launch the command prompt. So this is our application code here. To run the application you first of all need to navigate to the directory. So I'm going to do dir for directory and I'm going to go to the desktop because it's on my desktop. So I'm going to change directory to desktop. CD desktop and press enter. Now I'm in my desktop directory to run the application. All I need to do is type in node space and then the name of the application which is this of the file which is index.js. If I press enter it will tell me the console is running. If everything checks out okay. All right. Okay. I've got some error message here. The reason I am getting an error here. Notice the same here is listening out for port 8080 and it appears that port 8080 is in use because I've got other stuff running on my computer. So it looks like that port is engaged. So what I need to do I need to go back to my index.html file and modify that port to another port so that this application can run. So open up your application in the text editor. Just modify the port. If yours is fine then leave it as it is. 8080 is a popular port. If yours is free don't change anything. Only change it if you get an error that the port is in use. My port is in use. So I'm going to change this to 8081 and I change that to 8081. I'll go file and I'll go save also. I've now changed the port. I'll go back and run the application. All right. Now that I've changed the port it should work. So I'm just going to change directory to my desktop and I'm going to type in node space index.js. That's the name of the application here. You can see here server now running on port 8081 because I've changed it. Notice there's no error. Now if I open up my web browser and go to localhost. So if I type in localhost 8081 it should work. Because that's the port and you can see there is loaded hello world. So the application is not working correctly. And this is the text. It tells you the server running on what port it tells you. This is the response. So this is what I expected to display hello world and it is displaying that hello world. So our application is running pop properly on port 8081. If your port 8080 is free then you should say 8080. So 8080 is a preferable one unless it is engaged then you can use 8081. So that's basically it for this lecture. In this lecture we successfully created our first node.js console application. Many thanks for watching. Bye for now. Hello and welcome to this lecture. On the components of a node.js application. A node.js application consists of the following three important components. The first is called the import required module. A module basically encapsulates related code into a single unit of code. So when you are creating a module this can be interpreted as moving all related functions into a file. So when you create a node.js application the import required module basically you need that that is a directive. So we use the required directive to load the node.js module. So this import required module here is used to scan like it's a required directive to load the node.js module. I've given an example here for example created a variable called HTTP and we set that to equals to require. So this require this directive here is what is used to load the module. The next important component is the create server. Okay. So basically the create server what that does a server which allows you to listen to the client's request similar to an Apache HTTP server. So this is just a function you create that will listen out to the client's request. I've given an example here for example the way you create the server you use the HTTP dot create server is a function and then you pass it this parameter you pass it the request and you also pass it the response as parameters and whatever else goes in between this curly braces the other parts of the code goes in between these two curly braces but the key thing here is how you create a server and this is the command you use and you create it as a function and you pass it a request and also pass it a response. The third key component is called the read request and return response. The server created the server you created here. Okay. Basically will read the HTTP request made by the client which can be a web browser or a console and then return that response. So when the server was created there are two parameters a request and then a response. So the read request and return response. This is where all the action happens. So the read part of it will read the request and the response part of it will return the response. Other parts that go with the read request and return response include the send a response. So when you want the server to read a request or interpret a response you have to send a response header and this is how you write the response header. So you write the response, you do response the right head and then you pass it a value for the response head. So what happens after receiving and interpreting a request message a server response with an HTTP response message and there are various status to indicate how successful your command is. So the status code element is usually a three digit integer number where the first digit of the status code defines the class of the response and the last two digits do not have any categorization hole. So the key there are five values for the first stage. For example if your response is for example 1xx it means the request was received and the process is continuing. If it's a 2xx like we've got here we got 200 which is that means 2xx. If it's a 2xx that means the response it's a success. That means it means the action was successful, was successfully received, it was understood and it was accepted. So when you are sending a response header and if you're passing 200 it means that if the response is successful this 200 will be returned as okay. That means the response has been actioned, it's been received, understood and accepted. If this is a 300xx that means it's a redirection. It means further action must be taken in order to complete the request. If this is a 4xx that means it's a client error maybe 404 or 4 whatever. It means the request contains incorrect syntax or cannot be fulfilled. If it's a 5xx for example 500 and something it means the server failed to fulfill an apparent valid request. So the header, the response header here the status code is quite important. This here is known as the status code. It will determine if your request is successful or not. So if you've got a 1xx that means 100 or 101 whatever. It means it represents information. It means the request was received and it's still processing. If you get 200x or if it's a 200 blah blah blah it means action, successful, understood and accepted. You can also send a response body as part of the read request and return response. So if you send the response body, for example you can send a response body as for example hello world. The way you write it will be response.end hello world. So that means this is where this will be the end product of the text that will be returned. Another thing you need to specify is the port that your application will run. So the server needs to know what port to listen to. The standard port usually is 8080. So the port where the application will run is 8080. So if that port is used you can specify a different port where the application will run. So these are the key components of a Node.js application. Many thanks for watching. Bye for now. Hello and welcome to this lecture on modules and packages. Modules are basically libraries in Node.js. A package is one or more modules grouped or packaged together. Every Node.js application is also a package and consists of a package.json file. We are going to take a look at how modules work inside Node.js. And the best way to do this is by creating our own modules. The first thing I want to do is create a directory where I will store the files. So I'm going to right click on my desktop and go new folder. I'll just call these modules. And I'll open up my text editor. I'm using sublime text three. I'm going to open that up and I'm just going to save a blank file. File. I'm going to do file save as. And I'm going to locate that folder, which is this folder. And I'll call it my modules.js and save that there. I will also create another file. The other file I'm going to create will be using the module that we've just created. So I'm going to go file new. And I'm going to save this as saving the server folder. I'm going to call this module test. All right. Oops, I don't think I saved it as a .js file. I'm going to do that again. File new. File save as. I'm going to call it module test.js. All right. So now I have two files. I've got the modules and I've got the module test.js. The idea here is to get the code that will be inside my modules.js to be accessible inside module test.js. The concept of the power behind this is that, for example, this could be a library of math related issues or libraries that you can use for various math projects that we have written. And we, for example, may want to reuse the code inside it in different files or maybe even in different projects. So by setting it out this way, it enables code reuse. So by referencing code inside a module, it leverages the concept of code reuse. So let's get started and write some code. So click on the my module for this one here. And what we're going to do here, we're going to use the export object and we'll pass in data that the export object will use. So type in export dot, we call it my text. And we'll set this to equals to whatever text we want to write. I'll say I am a module. So in this line of code here, I've used the exports object. And I've also attached a property called my text. Okay. And I have set that to a placeholder value. And this is the value I'm giving it. So the objective here is to get this text inside our module test. This text I've got here, the objective is to get it to display inside module test.js. Node has a simple module loading system. In Node, files and modules are in one to one correspondence. And in order to access my module, our first need to set is reference to a variable. And I'll call that this my module and I'll use the require to bring it in. So let me go back to the module dot test and just implement what I've just spoken about. So create a variable first, a variable, and I'll call the variable my module. Okay. And I'll set this to equals to require. This requires what we use to bring in the text. So and then I'll slash followed by the name of my module, which is my modules.js, my modules.js. So this require here is what will bring in this. And once this is brought in, it will display this text inside there. Actually, let me save what I've done. So I don't lose it. I come here and I go save all. So in order to access this property here, this, my text property, I'll need to include it in my console.log in my module test.js. So let me flip over to this file here. So what I need to do is console.log it. I do console.log. And then we'll do text from module. Okay. And then a comma followed by the name, the name of the module. So be my remember I've created a variable here called my module, which is equals to this. So I'll call that variable, which is module dot my text, which is that property. All right. And I'll save that. So let's test this to see if we can access this text, this property, this text inside our module test.js. So let's open up our command line or terminal. So these files are in my desktop. So I just need to change directory to my desktop. And they are in a folder. They are in a folder called modules. So I need to change directory again, see the modules. Now I can call it. So I go node space module test dot j s press enter. Okay. I've got a quick error. The reason I was getting error, if you look at the console.log here, I've spelled the name of the module wrong. I've called it variable my module and I've called it my module. I just need to change that. And I should be able to run that. So let me just save that. Save all. So it's not correct. My module, my module, let me go back to the console. So now I can call the file or do node followed by the name, which is called module test dot j s. You can see it's got text from module. I am a module. So this module here module dot test is reading the text from here. It's referencing this text from inside this module. So this is a concept I was trying to explain. And this leverages the concept of code reuse. So I'm able to access the content of another module from another module. So I'm accessing the content of this module from this text module. So that's it for this lecture. Thanks for watching and bye for now. Hello and welcome. In this lecture, you learn how to install and use third party packages using nodes package manager also referred to as n p m. The package we are going to install is known as golf golf basically is a toolkit for automating repetitive and time consuming time. I've got a directory here called modules. This is a directory I created from the lecture on modules and packages. And I've got two files in there. They are dot j s files. I'm going to install the golf package inside this directory. So to install a package in it, open up your terminal or your command line prompt. So I'm on a window. So I'm going to open up my command line. So double click. And what I need to do is navigate to this folder called modules. Because this is where I want to install the golf package. So I need to change directory to this folder here. So I do CD desktop. And in desktop, I do CD again to module. So I'm now in the correct directory where I want to install the golf package. When you are installing packages, you can install the packages locally. Locally, meaning you're installing it into a project. For example, this I'll regard this as a project folder. So I'm installing it into so it will be available locally inside this directory. You can also install it globally. So but for now, let's do it locally inside the directory called modules. So to install, you type in NPM followed by the word install, followed by the word golf. And then you press enter. And that should start the installation. And once that's done, it will create a folder with the golf modules inside. So it's just trying to do that now. So it's searching for it and gathering the packages for install. So it has installed it. These there are some one in here. They're not that they're not show stoppers. They're just wanting just to give you so that you're aware of certain things. So if we click on this directory called modules, which you see there you go on that nodes underscore modules. We expand that we should see one module there for golf. So this is our golf package. So among other packages that the NPM has put in there. So we now have access to our golf package inside this directory called modules. Let's have a quick look at the modules directory again and look at the node underscore modules and look inside the golf directory. So we've got the golf direct. This is the golf directory. And we can see within that we have a package. All right. So this is a package here. And just like we did in our own module, we'll use the require to access this package. So before we do that, let's create a script that we use the golf. So I'm going to create a new file. I'm going to say new. And I will save this as a golf file. So I do file, save as I'll save it in the same directory. I'll call it golf file dot JS. And I'll click save to save time. I've added some code here to the golf file dot JS. So line one here, I've created a variable called golf. I set that to equals to require and I've passed it golf. And in this line here, I have defined a task that will access the golf. And I've called the task default task. So it will run by default when golf is executed. The second parameter here is a function and anonymous inline function that specifies our behavior. And to test, it works. On line four here, I've specified a console dot log. And I've passed it a text that will display that says hello from golf. This script doesn't actually demonstrate or show you how powerful golf is because it's just a simple script. But what the script does show is how to use a third party library. So to test this, let's open up our command line. The name of the file here is golf file dot JS. So I'll run it. I'll type in node space golf file dot JS and press enter. Notice nothing happens. Also no error message. The reason nothing happens is that golf is its own utility and expects that we execute a golf script just by typing golf. But if we try that, it wouldn't work because the way we've installed the package, we've installed it locally so we can't run it from the command line. So if I type in golf now and press enter, nothing will happen. It will not work because it can't access the access golf from the command line. To solve this, we need to install golf globally. So let me clear the console and then install golf globally. So I'll type in npm space install space golf space hyphen g. The g means globally. So it will be available globally. So now it's reinstalling the golf package. But this time it's installing it globally. So if I run just typing golf from the command line, it should work. If your package has a command line interface, that means you need to access it. You must install it globally. So if you want to access the package from the command line, you must install it globally with the dash g command. So now let's test our script. So rather than typing the name of this file rather than type it gopfile.js because the golf utility itself is a utility on its own. So you can run on its own. So if I type in golf now and press enter, it should work. You can see here it says it's very important to always save any changes you make or if you've written a code. What happened also here that the code I wrote here, I didn't actually save it. So when I run the golf command, it couldn't recognize the default task. So now if I type in golf again, it should pick that up. So you can see it's picked up the default task. It's picked up that and you can see here it's displaying this text hello from gop. So we know the application is working because the gop utility has found this text here. So that's basically how you implement third party packages. So this illustration will gop does not actually show you how powerful gop is. The idea here is just to show you the possibility of using third party packages in your project or application. Another thing to note here is that when you install packages, you can install packages locally which means it's available only to your current project and only packages inside that project can access it. You can also install packages globally which means you can reference it via the command line interface. So that's it for this lecture. Many thanks. Hello and welcome in this lecture we are going to install express.js using npm which stands for nodes package manager. When you're trying to install a package or a module, it's always best to install into a working directory. So what I'm going to do I'm going to create a new directory where I will install the express.js. So I've got my command line open. So if you're on a Mac, you could do the same on your terminal. So I'm going to change directory to my desktop because I want to create it on my desktop. So CD to change directory and then MKDIR to create the new directory. I'm going to call it my app and press enter and that should create a directory. So this is a directory that called my app. So I just need to change to that directory. I do CD my app. So I'm now in this directory. So I can install express.js into this directory. Before I actually go ahead and install the express, I need to create a package.json file. So to do that, I just type in npm space init. And this will ask me a few questions. So I just press enter. So this package.json file is basically kind of like a manifest file of all the application modules and dependencies for my app. So it's asking some questions here. See the name. What's the name? Is it called my app? Press enter to accept. I say yes it is. It's given a version of 1.0.0. Okay, description. You can write a description if you like. I'm going to skip that for now, but there's an option to do so if you wish and press enter. It goes to the next question is asking what will be the entry point for the application. So you can have the default is index.js. You can change that and enter app.js or whatever you or whatever name you want the file to be. This is going to be the main file, which is the main entry point into the application. If you're happy with the name, if you want it to be called index.js, just press enter. And it will just keep asking you questions. Just keep pressing enter. It will accept the default. Git repository is asking if you've got Git repository. Just enter any keywords. Enter author. Enter license. Enter. And then you ask you, is this okay? Press Y for yes. And it creates the package.json file. So if we open this app, my app directory, which you see a package.json file. This is what package.json file looks like. If I edit it, if I just click on edit, you see this is basically what the file looks like. So it just gives you the name of the app. It just gives you a manifest of what's in there. So that's what a typical package.json file. Now that we've got our package.json file sorted, let's go ahead and install express.js. I'm just going to clear the screen, type in CLS to clear the screen. So now I type in npm, space, install, space, express, dash dash, save. When you install nodes modules with a dash dash save option, what that means is that they are added to the dependencies list in the package.json file. All right. So after running the npm install in the app directory, it will automatically install the modules in the dependency list in the package.json file. There is a dependency list. So when you're installing, if you do a dash dash save, it will install it in the dependencies list of the package.json file. If you do not want it to be added to the dependencies list, then you don't need to add the dash dash save. All you need to do is just npm install express without the dash dash save. But if you want it to be added to the dependency list, you need to install it with the dash dash save option. So I'm going to leave that option and press enter and wait for it to install the package. So it's trying to install it now. So the package is now being installed. So it has now installed express.js. So if I go into this directory called my app, we should see the nodes underscore module. And if I click on the nodes underscore module, I should see one for express. So that's the express.js module. And this is the package.json file. Every node package installed should have a package.json. So this is a package.json for the express node express.js. All right. So that is it. So this is our package.json file for our application. So if I right click, we've had a look at this before. So just show you here we have. So this is what ours look like. This is the package.json we manually created. And you can see in the list of dependencies, we have express now listed as a dependency because we chose that option when we installed express.js. So that's it for this lecture. In this lecture, we installed express.js. Thank you for watching. Bye for now. Hello and welcome. In this lecture, we are going to create a very basic simple express.js application that will simply display hello world on the web browser. The first thing we need to do is create a file. A.js file. So we're going to call it app.js. So open up your text editor. I am using sublime text. So this is my text editor. So I'm just going to save this file empty file. I do files save as I will locate the my app directory, which is this one here. And I will save that file as app.js and save it into that directory. So this file now is now a JavaScript file. So I'll begin by defining a variable. And I will use the require to bring in the express module. So I start by VAR for variable. I'll call it express. And I'll set that to equals to require. This require will bring in the module. And the parentheses are specify express. Okay. The next line define another variable. We'll call this variable app and set it to equals to express. Okay. Next, we're going to attach a get method to the app variable. So we're going to say app.get. And inside that method, we are going to add a function. And for that function, we're going to pass it to parameters, a request and a response. So we'll make a request to the server. And we also get a response back from the server. All right. So to do that, we use that. And then we type in the word function. And function usually takes parameters. Inside that parameters are typing Req for request, comma, and then S4 response as well. I'm just going to tab that down. And then we need, and then here we need to specify what will happen. So in between this curly braces, this is the opening and this is the closing one. We need to specify some extra parameters. In between this curly braces is what will happen when we get a response back. So we'll type in res.response.send. So we need to type in the message that will be displayed in the web browser. That's a message that will come back. So I want it to output hello world. So this is the message I expect to be displayed on the web browser. The next thing I need to do is specify a port that the app will listen to. So to do that, you specify app and then you attach the method listen app.listen. And then I'm going to specify inside the parentheses. I will specify, of that method, I'll specify the port I want it to listen to. I'm going to use port 3000 and then also I'll pass it two values. The port is listening to which is 3000 and the function, which is this function here. So it will return the response from the function. So it will return this hello world there. And each time you are adding a function, don't forget the parentheses. Just in case it takes any parameters. So you need to include that. And in between this curly braces, this and this is what will happen when that function is called. So in between that, I'm going to add a console.log so that it will display a message to let me know that the server is actually running. So to do that, I'll do a console.log. That means it will display in the terminal or the command prompt the message I'm going to specify. So I'm going to specify I am up and running on port 3000. So this is the message that will display in the terminal that will give me an indication that the server is running, that the application can detect that this port is empty and it is using that port. So once I get that message, I can now open up my web browser and type in local host and reference this port. And this message hello world will be displayed. So with this here, the app will start a server and listen on port 3000 for any connections. So the app will then respond with hello world for a request to the root URL, which is this here means root this slash here. So it will respond to any request to the root of the URL, which is universal resource locator or the root. For every other path, it will respond with a 404 not found. So any other part, apart from the one I specify, it will return 404 or something like that. It can't find the part. So let me save what I've done. I click save all. So now to check that the app is working. I need to open up my terminal or command prompt in my case and make sure you're in the right directory of the app. You can see I'm in my correct directory. All I need to do is type in the name of app.js. So I'll go node then app.js and press enter. You may get an antivirus something come up. Just click allow access. And you see that it says I am up and running on port 3000. So it has started the server and is displaying the message I told it to this message here. I'm up and running on port 3000. That's this message here. So I know the server is running. So what I now need to do is open up my web browser, type in localhost and access this port 3000. So let me launch my web browser. Okay, my web browser is launched. I'll type in localhost followed by the port number, which is 3000. And I press enter. And you can see here is now displayed hello world. So simple express.js application is working. As you can see is displayed hello world. So that's basically it. In this lecture, we learned how to create a simple basic express.js application. Many thanks for watching and bye for now. Hello and welcome to this lecture. What is an express application generator? The express application generator is basically a tool that is used to generate the structure or skeleton of an application. So when you are developing application using express.js, if you use the application generator, it will generate the structure or the skeleton of the application for you. So let's see how to use the express application generator to do that. I want to create a new directory on my desktop. So I've got my command line open. So open up your command line or your terminal and let's create a new directory. I want to create it on my desktop. So I'm going to change directory with the cd command cd desktop. That takes me to the desktop directory. Now I can create my new directory. I'm going to call it so mkdir. That's the command you need to create a directory space. And then the name of the directory. I'm going to just call mine express. I'm just going to call mine express and I press enter. So it's created a directory here called express. So this is my new directory. So I want to change to that directory. So I do a cd and change to express. So I'm now in that directory. So any command I run here will be applied to this directory. So I want to install the express generator. So and I want it to be global. Global meaning I want to be able to access it also from the command line. So to begin I type in npm space followed by the word install. Followed by what I want to install. It's called express hyphen generator. And then space hyphen g. The hyphen g means I'm installing it globally. So I can access it from a variety of places. Especially the command line interface. Then I press enter. So the express generator has been installed. It tells you here these are all the things it's installed. So if I click on this directory called express. You should. So there shouldn't be anything in the directory because it tells you where it installs it to. So if you look at the path here telling you this is where it's installed it into app data roaming. So if I go to my C drive and go to my app data. I've got a file called app data roaming. You can see we've got npm there. And you can see express. Okay. And inside the npm you can see where it's got node underscore modules. Click on that. And you can see the express generator. So that's where it has installed it. When you are installing packages with npm there are two ways you can install. You can install it locally which means it's installed in the actual folder for your project and it's accessible locally to that project or you can install it with the dash g command which means it's available globally throughout the anywhere you want to use it from from your computer especially the command line. There are other options you can use with the express command. Notice here we use express to install the package. So we use express dash generator. So if you wanted to find out all the other stuff you can install with the express command all you need to do is type in express hyphen h space hyphen h and that will give you all the options available to use. So you can use dash h basically gives you help dash dash the version dash e or dash dash EJS. It adds EJS engine support. If you do a dash dash P U G it adds the Pog engine support. And so on dash dash H or dash H gives you option to use the hogan.js engine. So these are the various options you can use with the express command. So that's it for this lecture. In this lecture we installed the express application generator and we also understood or knew what it does in that it helps creates the structure for an application. Thanks for watching and bye for now. Hello and welcome to this lecture. In this lecture we are going to create the structure of an app using the express generator. Open up your command line or your terminal. I've got my command line open and make sure you are in the correct directory. My directory is this folder this directory is express. So I am pointing to this directory. So any code that execute here will reflect inside this directory. So I want to create a new app inside this directory and what the express generator would do is to also create the structure of the app by creating several files for the app to use. So let's begin to do that. You type in express express meaning express generator for short. You do a space and then dash dash view equals P U G. What this is is that I want to use the P U G or the Pog template engine. That's what it is. So any views that has been displayed by my app will be using the Pog template engine. That's what that means. And then space I need to give the app a name. I'm going to call it my app. All right. So this is the name of the app is called my app. This view here means it's going to use the Pog template engine to display any information in the front end of the app. So I press enter to begin. And you can see here it has created all these files here. All these files are the files that is created for the app to use. So if I go here now and also it's telling me a few things here saying I need to change directory to CD my app. So it's created a folder called my app. So if I open this directory, you can see it's created this folder called my app. So and inside that, you can see all these things, all these directories and files it has created as a package.json file. And there's an app.js file. So what is telling me here is I need to change directory to this and then install npm again. All right. And once I've done that, I need to set the debug to this and then start the server. If you are on a Mac, you should get a different setting. Okay. So you all if you're on a Mac, you probably will not get this. Yours will be debug, my app, Asterix and then npm start. But this this set here is for Windows based computer. If you are on a Mac, you won't get the set bit. You just need to do the debug. You get all this. You get from here without the set. Okay. So if you're on a Mac, your options you get will be different. So let's do what it says. Let's change directory to CD my app and then run the npm install. This is what it's asked us to do. So I do npm space install. All right. So it's installing npm in that directory. I've changed it to. Okay. Now I've installed the npm as it requested. Okay. So now what I need to do is set. So it's saying here, once I've installed my app and npm, once I've installed the dependencies by doing this, I need to run the app. And this is how it wants me to run the app. So navigate to the directory and type in set debug and then click on that npm start. And it will create this here. All right. If you are on a Mac, you don't need to use the set. Just the other bits. So now let me go and do this bit. So I just scroll down to where my cursor is. This here and type in set space debug equals to my app and then colon and then asterisks followed by the ampersand followed by npm followed by the word start and then press enter. So it's everything checks out. Okay. The server should start and is listening on port 3000. So we now have a server. So what I need to do now is just run the web browser on local host. So I go local host 3000. I should get there you go. Say express. Welcome to J welcome to express. So this here is displayed. This view we can see here is the Pog template engine. Okay. This view we can see here. So we've got our application working. So let's have a quick look at the generated structure, the application, the express.js did for us. So if we go into the express here, go into my app. This is the app and this is the structure. All right. So we've got the app.js here and then we've got the bin inside the bin. We've got this www. And then we've got the package.json file. And we've got the public directory inside the public directory. We've got things like images. If we've got any images for we want our app to use, this is where we will store the images. If we've got any JavaScript files, this is where we'll store them. Style sheet. We've got one. This is where we'll store the style sheet. And we've got the roots. Different roots here. We've got an index. We've got this is index dot JavaScript. I'll just right click so you can see what it looks like. So basically this is what a root looks like. Okay. And then this is another root for the users. Again, tells you the modules and basic stuff for the root. Let's look at something else. And then the views. This is what you actually see displayed. So you notice I'm saying we're using the Pog template engine. You can see the index dot Pug. So if I right click, go edit, you can see here H1. The title is H1 equals title paragraph equals welcome to and then the title. It grabs the title and inserts it. So let's have a look. What else? This is the app JS itself. So this is everything. Again, all these have been generated for us using the template engine. So it does save a lot of time. And this is our package dot JSON file. And you can see all the dependencies here. So you've got these are all the dependencies that have been installed for this app. All right. So that's basically how you generate an application structure, an app structure using the Express Generator. Your web, your application will continue to run as long as you've got the server here running. So if you don't want the server to run anymore, just cancel it, cancel out of it. If you go back to the application now and refresh, it should error because the server is no longer connected. So in this lecture, we created an application structure using Express Generator. Thanks for watching. Bye for now. Hello and welcome to this lecture. Package dot JSON file is usually included with all npm packages. So if I have a look in a package we have installed, you will see the package dot JSON file. So let's quickly go there. And this directory here, I installed a package, which is this nodes underscore modules. If I just click on the package I was referring to go, if I click on that, you notice there's a package dot JSON file. Let me just right click and edit so you can quickly see. So this is roughly what a package dot JSON file looks like. It's kind of like a manifest of application and everything you've got inside your package or project. A package dot JSON file also contains metadata about your app, module or package. So metadata basically means information about data. So it's data about data. The package dot JSON files also stores a list of the package dependencies you have in your project. That way, using the npm command, installs it will go through what lists what you have in your list and then install everything. So if you are running npm command, it goes through the manifest of the package dot JSON file and then install what you've got in that manifest or list. So a package dot JSON file in a way is like a manifest of your applications, your modules and other stuff you've got related to your project. A package dot JSON file is quite useful. Say for example, you wanted to distribute your app or your project or put it into a Git repository. It wouldn't make sense to include all the packages that the project depends on because they take up a lot of space. But what you could do instead is send them the package dot JSON. Because the package dot JSON file has a manifest of all the application modules, packages and dependencies. So if you're sharing your project with someone else or you're putting it in a repository, when you run the npm install, it will go through the package dot JSON file and then just install whatever you've got. If you've got any dependencies listed in the package dot JSON file, it will run through that and install it. The size of your package dot JSON file basically depends on the type of information it is stored. So if you've got lots of projects and you've got a lot going on, it will obviously store more inside the file. You can also create a package dot JSON file in an interactive way. So basically what you do you type in npm init and inside these square brackets, you've got options you can use with the npm init. If you use the f, which is forced, that means it will accept all the default questions and just apply the default. Or if you use y, dash y dash dash dash f or dash f is the same thing as f is the same thing as forced minus y is the same thing as yes. So if you use any of those options switches with your npm init, it will apply the default and skip asking you any questions. Because when you install it interactively, you are prompted each time to answer a question. So if you just apply yes to that switch, it will just apply default answers to all the questions that way you don't get prompted. So let's see how we can create a package dot JSON file. All right, let's create a package dot JSON file. I've got my command line open so you can have your or if you're on a Mac open your terminal and make sure you're in the correct directory. The directory I mean is this directory here this folder on my desktop. That's where I've got some files. So I'm going to create the file in there. So you type in init type in npm. Anytime you're doing an installation, you always use npm. So npm followed by init. If you don't use any of the switches like dash F or S, it will prompt you. So I press enter and it will ask different questions. So you'll be asked several questions. You can see here telling you to press that at any time to quit. So it's asking you the name and I've got modules. Just press enter. It'll ask you to sorry, the name can no longer contain capital letters because I've got capital letters in there. So I need to change that. So I'll change that to lower case. So it gives you the option to make the change. I press enter and version it's giving us is 1.0.0. Enter description. You can put anything if you want. If not, just skip it. Entry point is gop file. The gop file is a dependency. So gop file.js. I'll accept that. And then test command. Press enter. Git repository. I haven't got a link to that. Enter keywords. Enter author. Enter license. So you can press any options and you can also make amendments. So this bit here is actually your JSON file. It's telling you, is this okay? Say yes to that. Or why? And press enter. And it has created your package.json file. So if I go into this file here called modules, we'll see this is the package.json file. So let me open that. So this is the package.json file that we have created. So you can also amend whatever is in there. You can change the properties even after the file has been generated. You may also notice that the gop was automatically added to the dependency list. To the dependencies list. We've got the gop here. That was automatically added to that list. That's because the generator automatically went through the node underscore modules folder and added what it found inside that folder. The folder I'm referring to is this folder here. And it goes through this folder here because you notice this folder in the project. So it's gone through that and it has seen the gop here. It has added that as a dependency. So it has added what it found inside that folder. So if I was to send this project off to someone rather than install the modules myself, once they run npm, npm will look through the package.json file and see if there's any dependencies. It will then install the dependency. It tells you the version of the dependencies as well. So the gop is the dependency and it tells you the version of the dependency. So that's it for this lecture on package.json file. Thanks for watching. Hello and welcome to this lecture. In this lecture, I'm going to do my best to explain how the app.js file works. When we created our application structure using the express application generator, it also created an app.js file. The app.js file is kind of like the heart of your application. So let's open up the file so we can see a breakdown of what it contains. So let's locate our directory that contains the app.js file. Mine was created in this directory called express. And in this directory called my app. And this is the file here, the app.js. I'm going to open it with sublime text editor. And I'm going to go through the file as much as possible and explain as much as possible. So here we've got a bunch of basic JavaScript variables. Tied to certain package dependencies. So we've got a variable called express here. It's tied to this package express. And then we've got the parts, you know, so they're all tied to various dependencies. All these JavaScript variables from line one to six is our variables. Also, we've got more variables here as well. So the variables are linked or they are tied to certain packages, dependencies, node functionality and roots. A root basically is the view that is displayed when a request is made to an application. A root basically is kind of like a direct traffic and also contains some programming logic. All right. So in a way, if you make a request for a certain page in the website, a root we can like direct you to that page. So the root gets the request and presents the relevant page based on that request. So notice we've got a variable here called index. And we've got a root here called index and variable called users. And it's linked to a root here called users. So when an information request is made to the application that relates to user, this root will handle it and display the relevant view. If it's relating to the homepage, this root will take care of that traffic and directed to the relevant view or template that would display the information. We've got a variable here on line 11 called app and we've set it to equals to express. So basically what this is is that it instantiates express and assigns our app variable to it. All right. So it instantiate an instance of the express framework or express.js. And then it assigns our app to that instance. So let's move down to the next section here, which is this bit here view engine setup. So here we're using the variable here. The app variable to configure different things. The view engine tells the app where to find its views. All right. That's what this view engine is. It tells the app where to find this view. And this is the views and gives you the path. It tells you the view view engine. We're using the Pog as the templating engine for our view. Pog is a template engine. It specifies here that that's what we are using for our view. So what this bit basically does, it tells the app where to find its views, what engine to use to render those views. In this case, we're using Pog and also cause a few methods to get things up and running. So we've got a few methods here. All these are various methods to help things get up and running. So we've got the app.use, got logger, and all the others. These are all methods that make the application run. On this line here, notice that it's telling express to serve static objects from the public directory. Okay. But to make them actually seem like they're coming from the top level. It also does the same thing with the view directory here. All right. So it does the same thing there. For example, we've got an images directory that is located inside here. But if you are going to access that, you need to access it by local host, the pod number slash images. So that's what I mean. And then we've got the arrow handlers here. Let's be here. So here we are catching 404 and folding it to the arrow handler. So if there's any arrows in the application, it will display this 404 and pass it to an arrow handler. So these arrow handlers here, we've got this 404 here where it catches any 404 error. And then we've got the actual arrow handler. The arrow handlers are basically for development and production and also the 404 errors as well. If your app is in development mode, your arrows will give you more information. Because in a production environment, you really don't want to print out a stack trace. You don't want your arrows to be displayed on the production environment. Because if that happens, if you have an error, anyone can see what the problem is. And that information could be sensitive and people could see that. So all these are all to do with arrow from there, all this bit here, all to do with arrow handling. This here, line 46, module.export equals app is a core part of node. And that basically means all modules before you can use a module, all modules export an object, which can easily be called elsewhere in the code. All right, so our application, our master app exports is app as an object. So this app here is an object. So this is important to note that all modules export an object, which can easily be called elsewhere in the code. As we've done here, we have our master app, our app here exports its app as an object. Just one more thing before I wrap up here. So here we've got the app.use index and app.use users. This here, these are called directives. And they are telling express what route files to use. Okay, so when a request is made, they're telling express which route to take. That's basically what they are. They are directives. Some developers for simplicity tend to set up different routes for different aspects. So they might set up a different route file for different aspects or parts of your application. For example, anything relating to users, you might set up a different file to handle that user route. Or you might have something and that can include things for adding users, deleting users, updating users. You can keep that in one file. You can also set up another file called locations that can handle adding, editing, deleting and displaying location data and so on. So it is possible to have separate files to handle different type of routes or parts of your application. So that's it for this lecture. I hope it has made sense. If it's a bit daunting or you're not too sure, don't worry. Just give me some new message. I'll be happy to explain more. The idea is not for you to soak up everything. It's just for you to get a rough idea of what this file is all about. Thanks so much. Bye for now. Hello and welcome to this lecture. In this lecture, we are going to learn how to edit dependencies inside our package.json file. I've got directory here. I created code express. I'm going to click to open and inside that there is another directory called my app. So I've got a package.json file score here. Jason farm going to click to open it. So on that dependencies, these are all the dependencies listed for my application. I am going to edit this to include two more. So I'm going to add an application. I'm going to add MongoDB and also add Monk. This will enable me to later make calls for MongoDB and Monk if I need to. Monk is basically a tiny layer that provides simple usability improvement for MongoDB usage with NodeJS. So it makes it easier for you to use MongoDB and NodeJS. So I'm going to type Monk. What I'm going to do, I'm just going to copy that line and just edit it and do paste twice. Okay. This I will change to Monk. Okay. And so I'm going to just edit line 14, which is the Monk. So I'm going to change that to, I'm going to get rid of this tilde and insert that. And then insert the version, which is going to be version four point zero. That's the latest version of Monk point zero. So this is going to be the version that I want in my dependencies. So later when I make a call for using Monk, that is what it will reference. Then here I'm going to change this to MongoDB. MongoDB is a database. I'm going to make it lowercase MongoDB. And the version I want to go for is I'm going to go for version two point two point two five. Okay. So this is a version I want to go for notice when you're making changes to your dependencies always separate each one with a comma apart from the very last one. Okay. This is very important. Notice these two dependencies I've just added on the MongoDB online 15 and the Monk online 14. Notice that they haven't got the tilde. You see this is a tilde. They haven't got the tilde because those packages, these have naturally been installed here. They're just dependencies that I want to include so I can make a call to later. Now that I've made the changes, I'm going to run my NPM install again and see if there's any new updates. So with NPM, it will try and apply the latest updates. So I'm going to open up my command line. I'm just going to go. That's my command line. And I'm going to change directory to this. So I'll do CD desktop and then I'll change CD to this directory called express. And within express, there's another directory called my app. So I'm going to change to that. And this is where I will run my NPM. So I'll do NPM space install and press enter. And it should look for the latest packages. So what it's doing at the moment is reading the JSON file because we've made an edit to it. So it's trying to read it and it's installing all the stuff listed in the dependency object. It will also install express as well. Anything listed. So the NPM package has finished installing and everything highlighted here is what it has installed. And what it will do also, we should have a node underscore modules directory which contains all our dependencies. So if I click on this express directory here and click on this directory. And so this is the node underscore module. So this is all the modules it has installed for us. So that's it for this lecture. In this lecture we learned how to edit dependencies in a package.json file. Thanks for watching and bye for now. Hello and welcome to this lecture on using template engines with express.js. What are templates engine? Template engines basically allow you to use static files in your applications. At runtime, that means when the application runs, the actual template engines, they replace the variables in the template file with actual values and then transform the template into an HTML file that is then sent to the client. This approach makes it easier to design HTML web pages. Express uses some template engine. Some of the popular ones include Pog. Previously it was called Jade. It's now been renamed to Pog. And then you've got Mustache and you've got EGS. Hello and welcome to this lecture. In this lecture you will learn how to start a Node.js web server. The command you need to start a Node.js server is simply type in npm followed by the word start. So you have to be in the right directory, the directory that contains your application. Open up your terminal. I've got my command line open. If you're on the Mac, open up your terminal. So once you've got your command line or the terminal open, you need to make sure you're in the right directory that contains your application. So in my case, my application is nested inside this directory and it's inside my app. So these are all my folders and directories for my application. So I need to be in this directory here. So what I need to do is type in cd to change directory. I type in desktop. That would give me the desktop. And then I cd again to this directory called express, press enter. Then I cd again and then access this directory there. Do cd my app. And then I press enter. So now I am in the correct directory. So I can now type in my command to start the server. So type in npm space start. And I press enter. So give it a few minutes and it's found the www folder which is inside the bin. So if I click on this here in the bin here, there's a www folder. So that's the folder it has found. So now that I know the server started, I can now open up my web browser. And just type in localhost 3000. And it tells me welcome to express. So this is the web server. So this is a Node.js web server with the express engine. And also using a template engine called Pog Pug. So the template in here is by Pog. And the engine we've got the express engine. So this is a Node.js web server with the express engine and the Pog HTML pre-processor installed. So in this lecture, we have learned how to start our web server. You can see these are different things. This is the server running. And it's telling you here it's got that. It's applied the style sheet as well. Alright, so that's it for this lecture. Thank you for watching. Bye for now. Hello and welcome. In this lecture, we will learn how to stop the Node.js web server. If you want to stop the web server when it's running, the command you need is control and C if you're on a Windows machine. I've got my command line open. So I'm in the right directory where my app is. I'm just going to run the NPM start to start the web server. And then I press enter and that should start the server. Once the server has started, I just go to my web browser and type in localhost and that's my web server running. So now I want to stop the web server. So all I need to do are type in control and C on my keyboard. I'll be prompted. Do I want to terminate the batch job? I'll say yes and press enter. So now if I refresh my page, it should say not available. See, the site cannot be reached. So that is how you stop a Node.js server. Thanks for watching. Bye for now. Hello and welcome to this lecture on routine. We in the UK call it routine. I think some other countries, particularly the US call it routing. So I may be using both words interchangeably. So they mean the same thing. Well, routine basically is a process or refers to how a root is determined. When someone makes a request, for example, to a resource on a web page, there has to be a mechanism that will determine that will handle that request and determine what information to send back to the requester. The routine basically is the path it takes. So it basically refers to how an application responds to a client request. So when a request is received, the application has to find a way to fulfill that request. And most requests can be done in form of a URL link. So when the URL is clicked on, there should be a particular routing file that will grab that and search and try and look for a match. Say for example, if someone goes to a website and they're searching for maybe an about page. So the routine, the routine request will grab that and look for a file in the view that has that request that matches that. If it matches it, it then fires it off and sends it back. So the routine determines which URL or path to take to fulfill the request. It also determines which specific HTTP request method to use. There are different HTTP request method. You've got the get, the post and so on. But the most the key important was the get and the post. Each route or route can have one or more handler functions which are executed when the route or the route is matched. Let's look at how a route or a route is defined. So this is how you define a route. You start with app.method. And then in parentheses, you have the path and then the handler. Right. So let me explain each one. So the app basically is an instance of express, which is express.js. The method basically refers to the HTTP request method that will handle that request. So could I get a post, which are the two most important one. And then the path, the path basically is the path on the server. And then we have the handler. The handler basically is the function that executes when the route or the route is matched. Hello and welcome. In this lecture, I'm going to try and explain how routing or routing works. First thing I want to do is have a look at our directory. This is my directory and they're going to my apps. So this is the app that was generated using the express application generator. So I'm going to click on that. And the application generator generates several directories. And one of them is the routes or routes directory. So if I click on that, it's and it's also defined to routes in there. So this is an index.js file. And this is a users.js file. So I'm going to open up the index.js so you can see how the routing is defined. So this is basically what the file looks like. So this here was actually defined by the express application generator. So it's defined the routes variables and pointed it at the index router or router. Okay. It's pointed it at the index router. All right. So what happens when a request is made, for example, if we go on to the web page for this site, this is going, this method here is going to get the index. The index is basically the home page. So let's see how that works. So what I'm going to do, I'm going to start the server and do MPM start. And that should start the server. Give it a few minutes. The server has started. So now you can see here is saying the node is being slash www. So that is the route. So if I go to the website now, type in localhost 3000, it gives me the page express. Welcome to express. Okay. So that's the route it took. When I launched this website, it because I didn't put any path is taking me to the index, which is the home page, which is this page here. And this is what it has displayed the title of the page, which is this, which is express. Okay. And also a text here that says welcome to express. Now this bit here is retrieved from the template engine, which is the Pog template. So let's see where that is stored. So the template is stored in views. So when a root request is made, the root looks at the parts and look for, see if there's a relevant template that matches that. Now here I've got an index dot Pog. The Pog is actually the templating engine. So if I right click and just open it with this editor here, you can see here this message welcome to this welcome to express is obtained. This is what you see here. It says the paragraph. This is a paragraph tag. Welcome to and then it grabs the title. Okay. And the title is express. That's what it means here. So that's where this is where it gets this part of the view from from the Pog template engine, which is this. So it is possible to have different views for different routes. So if you have a root name, for example, about me, and once the request comes in, it will, the root would check to see if there's a template engine or there's a view that matches that if there is, it displays it. So that's basically how the route or routine works. This page displayed by the website is actually the index. So if I go into my routes directory, there is another root here called users. So if I do a slash here and type in users, I will get a different page. So I got a different page here with the word response with a resource. So if I now click, go to my resource. So this text here that says respond with a resource, you can see that's the text here. And this is my users.js. This was generated using the Express Generator tool. And it generates the generated all these as you can see here, but got a response here. And this is response coming back from the server. It responds with a resource. This text you can see here is what's displayed here when we call on this page. You can see the slash users here, which means we are calling a, we are referencing a different route. And you notice only this bit was displayed here because it probably did not have a corresponding view called users. So if I go into the views here, I haven't got a view here called users. So it's only displaying what it sees in the route, which is this inside here. The text displayed in the route is what is displayed here. Just like when you make a request, for example, if you type in Google.com or BBC.com, it will give you the homepage. The homepage is basically the index page. And then when you want other resources, you click on the link, it takes you to another page. So routine works in the same way. So when you make a request to the server, the routing files will grab that request and search to see if there's a corresponding view or template. If there is, it will return that template as well as anything, any function that has been written to match that it will execute the function. So that's basically how routing works in a nutshell. Thanks for watching and bye. Hello and welcome to this lecture. In this lecture, we are going to learn how to clone a routine function. So let's open up our routing folder or routine folder. I'm going to click on Express. That's where mine is. And it's inside this directory called my app. And I've got a directory called routes or routes. So click on that. So I'm going to open my index.js. I'm going to right click and open with sublime text. So this is what my index.js file looks like, which is my one of my routing files. So what I want to do here, I want to clone this function here, this bit here. Okay. I want to clone that function. One of the advantages of cloning is that I want to clone it so I can use it for another page. And it makes things a lot quicker. I don't need to faff about for long. I just edit what I need to edit from the function. So the goal here, I want to try and create two different routes from this so that I can reference it. So what I'm going to do just underneath just above the module exports here. I'm just going to copy this and paste it here and just change a few bits and pieces. It's going to bring that up a bit. I'm going to change this to so what I'm actually cloning is this get function here. So I'm going to change this to get or say hello world or changes to hello world, hello world page. And I'm going to do that twice. I'm going to paste it again and get another page out of it. So I'm going to make this get. This is going to be a thank you page because I want to say thank you to my students who have encouraged and supported me. Thank you guys. So I've cloned this function here twice. So this is a felt be here. I'm going to create. I'm going to edit this bit. So this is not going to be a different page that will be reference. So I'm going to change this here rather than I don't want it to render as the index. I want it to render as a different page. I'm going to call this hello world page and I want to specify what it will display. I'm just going to replace that express with hello world. Okay. So I'm done with that. And then here my thank you page. I am going to change that. I don't want it to render as the index. I want it to render in its own page. So I'm going to create views for this. So I'm going to call this thank you. All right. So I'll call that thank you. And here I'm going to change the text to say thank you so much. For your support. And then I'm going to save that. I'm going to file. I'm going to save all. And then what I'm going to do now, I'm going to create a corresponding view for each of these functions I have just cloned. So I'm going to go back to my view page here in my directory. That's a folder called view. I'm going to click on that. I'm going to right click to open this file here. So in the views folder here, I've got the index.pog. Pog is the template engine. So I've dragged the content into this editor here, which is a sublime text. And what I'm going to do, I'm just going to change a few things. So the first thing I want to do is save this file. I'm going to save as and I'm going to save it as hello world. Hello world.pug. All right. So I've saved it as hello world.pug. So this templating engine here uses it extends to extend the file layout, which is a dot pug template. And then within the content block. Okay. This is a content block within the content block defined in the layout. It also sticks a header and a paragraph. This H1 here is a header tag and the P here is a paragraph. Note the use of the title variable. Okay. The title here is the variable and it's got a hashtag here. The title variable which was which we set above which was set in the index dot gs root. So what that means, we don't really have to change the text at all for this variable for it to display elsewhere. So this is the index.js root. As you can see, this is where the title variable was set. And it's given a title here called express. But we're changing it for each of the ones that we have cloned. So what I'm going to do, I'm going to amend this paragraph tag slightly. I'm just going to type in hello, hello world and save that. And I'm going to create another Pog file to handle my thank you root by thank you function. So what I'm going to do, I'm going to just copy all this, create a new file, paste. I'm going to save this as this will be thank you. Thank you dot Pug. It's a Pog file and I'll just make some changes here. I'm going to leave the title and I'm going to get rid of this title. I don't want the title variable. I'm just going to change a few things here. So I'm just adding some text here to say you are awesome. Thanks for signing up to the course. That's it. And I'll click to save. So now I have to, if I go back to my folders, I go to the views. I've got two extra views I created world called hello world Pog and thank you dot Pog. I also cloned the get function, this function here. I cloned it twice and I created a hello world and then I've got one here for thank you. So these two have also created corresponding templates for them. So now let's run the server so we can see the changes. So I'm in the right directory to run the server. So I'll type in npm start. Give it a few minutes. The server has started. I open up my web browser and typing local host 3000. You can see there it's got express. I know I have a page called thank you. I just need to type in thank you. And that will show that route will be matched and it will show the template. Oh, I got an error. Okay. Right. I know why I'm getting the errors now. I have not included the where it will search for. So if you look this one that I cloned here. I need to because I cloned it. That's one thing when you clone you sometimes may forget to include certain stuff. So here I need to attach. I need to type in hello world type that in there. And here I need to type in thank you. And that should hopefully do it. So I'll click on save all. And I'll try and run the server again. Do npm start. Hopefully there should be no errors. Okay. The server has started. Let me run the page again. Okay. So this is the index. This is the home page. Now I want to navigate to the other pages. So I do a slash and type in hello world because I didn't include I forgot to include it in the root. So we couldn't find that you can see now he finds it is saying hello world hello world. So this is what I included. This bit here is from the template. This here is from the root from the route file. So let me do the same. I'll come here and do thank you. So the route file has to match. There you go. So everything's working. So thank you so much for support. This bit here is from the view or the template, the Pog file. And this bit here is from the actual file, the routing file. So this here, see that says title. Thank you so much for your support. This is got from the routing file, which is the index.js file. So that's it for this lecture on cloning functions. Thanks for watching.