Transcript for:
Fullstack Web Development Course Summary

welcome to this fullstack web development course for beginners first you'll learn how to use HTML CSS and JavaScript and then you'll learn how to use those skills to make a fullstack web app I'm Bo KS and I'll be teaching part of this course and I'm Tommy too and I'll also be teaching part of this course I'll be teaching the JavaScript section and the backend web development section and I'll be teaching the HTML CSS and fronted web development sections before we get to the details let let me tell you more about some of the concepts in this course first let's talk about HTML CSS and JavaScript every website on the internet uses HTML and CSS most also use JavaScript in a website HTML is the structure CSS is the style and JavaScript is the functionality here's a great interactive diagram from code analogies. comom you can see we have the page the structure styling and functionality and if we move this slider so it's like the house the page is like the house so the structure or the HTML is like how many bedrooms there are or how many rooms the CSS The Styling is like the color the color of the brick here and then the functionality what you're doing like eating is the JavaScript you can actually see the HTML that makes up any element on a web page by WR clicking an element and then going to inspect and this all this right here is the HTML now I'll explain the difference between front-end and backend development the front end of a website is the part that users can see and interact with it's the part that all happens on the user's computer or device the backend is the part of the website that runs on the server and Powers the front end the back end includes the database application logic and API some static websites only need a front end but if a website interacts with a database or involves a lot of dynamic content then there needs to be a backend server away from the user's device to do some processing before sending data back to the user full stack development is just a combination of front-end and backend development by the end of this course you'll have a better understanding of front-end and backend development now it's time for you to start learning how to use HTML and CSS Tomy will teach this section and before I pass it over to him I want to thank repet for giving freec camp.org a grant to make this course possible we'll do all the development using repet which allows you to write HTML CSS and JavaScript all in your web browser welcome to this section of this course in this section I'm going to be teaching you everything you need to know to get started building your own web pages using HTML I'm going to be showing you what HTML is why we use HTML and how you can build web pages using HTML now in this course we're going to be using rep for our coding and I'm going to show you how to set that up and how to do everything all from reple so the first thing we need to do is to go to reply.com so once you go to rep.com you're going to have to create an account and log in so once you log into reply.com it's going to bring you to this dashboard right here once you're in this dashboard you're just going to come to this corner right here and click on this create button or you can go to the top right corner and click on the new rep button so what I'm just going to do is to click on Create and it's going to ask you to choose the language you want to use so for this section of this tutorial we're going to be choosing this HTML CSS and JavaScript but you don't need to worry about CSS and JavaScript for now we're just going going to be using the HTML part so let's name this HTML tutorial I'm going to create a new repli so that is going to take a few seconds to create all of that for us and once that is created I'm going to show you what this is so as you can see it's created this for us with like a boiler plate of code that automatically comes with this particular rep that we created so what I'm just going to do is to quickly show you around replay what it does and how we're going to use this so on this corner you can see that it shows all the files that has been created so because we chose HTML CSS and JavaScript it created three files for us one is stands for HTML one is for CSS and one is for JavaScript but as I said for now we're only going to be looking into the HTML part so I'm going to close that tab just to make sure that we have enough screen and in here it shows the code base so this is basically where we're going to be doing the main coding it's like our code editor and at this right side it shows the output of whatever we are coding in here so now that we have that out the way I want to quickly talk to you about HTML so before we actually go into coding I'm going to introduce you to what HTML is and why we even use it so HTML stands for iPad text markup language so it's basically a standard markup language used for creating website and web pages so HTML like describes how the structure of a website or a web page is going to look like so any website you'll see on the web or any web page you see on the web there's some HTML coding that has been done to build that so HTML basically consists of different elements to make it what is so for examp example if I come into this code you can see that we have some Hello World text being printed and if you come into the code you can see that that hello world text is right here so this L World text is under this element name body so don't worry about what all of this means for now I'm going to go through all of that but just know that HTML comprises of different elements and now I'm going to talk to you about what all these elements are the different type of elements that we have so first of all I'm going to remove some text because because we're not going to talk about them for now going to remove all of this script because all of that are JavaScript and we don't need that for now and I also going to remove this so this is just a basic HTML code right so as I said there are different elements so for example this doc type HTML is the Declaration that defines this document is an HTML document so this just tells us that whatever we're coding is an HTML document and we have another element which is just HTML right and it shows the root of the HTML page so this means that anything that we are going to be coding in this HTML file is going to go into this HTML element so we open it here and we close it here I'm also going to talk about the structure of how we code an element using tags so I'm going to talk about that in a bit but for now if you can see we have this HTML that is the root of the whole project right and then we also have Ed that contains some information specifically about that HTML page for example Under head we have the title now this title is whatever you see on the browser so on the browser right here where you see this index.html that is the title of that page so whatever we put here is what is going to be shown here so as you can see that basically is part of the structure of the whole web page and then everything that work is going to be in this section of this of the browser or of the web page goes into the body element so that is what the body element is for it's basically all the code that are going to do is going to be done inside the body element now let me tell you how we actually write this HTML element so we write HTML element by defining tags and the content and the ending tags so let me tell you what I mean by this now I'm just going to close all of this real quick because we're going to have to start from scratch so you understand it so for example let's say we have an H1 tag so this H1 is an element in HTML and is used to create like an heading text for example in here if I put I welcome and once I run that you're going to see that it prints I welcome like an heading so that is what this H1 element does but how did we write this H1 elements the first thing we do is to say we're going to to open an H1 tag so we're going to have two less than sign and greater than sign and in there we're going to have the name of that particular tag then after that we're going to have the content that is meant to be shown in that element after that we're going to close that tag so this is how we close a tag now let me show you another tag there is another tag that is used to define a new paragraph and this tag is called P so we have this sign less than sign we put P we close that automatically rep ends the tag for us but I'm going to delete that and show you how to close it so in here we're just going to put something like this is a new paragraph and then we're going to have to close it we close it by using the less than sign the slash sign we put p and we close it back so this is how to open a tag so it's something like this we're going to say tag once we close it so this is basically the opening tag and then in here the content and then to close the tag it's basically similar to this but instead we have a slash so what we can just do to do less than sign slash rep automatically close that for us so that is basically how to you know create uh tag and element in HTML now we're going to be talking more about the basics of HTML so basically the structure that you're meant to follow when you create a new HTML page so I'm going to get rid of all of this and let's start this from the beginning so whenever you create a new HTML page you must first Define a doc type declaration now this shows the type of document that this represents so it allows the browser to know how to display the web page correctly so what to do this we just need to use the less than sign because it is an element so we do it the same way and then we use the up this sign and then we say Doc type and then we're going to specify the type of you know file that we're actually coding in and this is HTML and we're just going to close that so this is the first thing you should do when you create a new HTML file right and then once you do this the next thing that you want to be doing is to create uh the HTML tag so this HTML tag as I said in the a while ago is is the root of all your of the whole HTML structure so everything that we're going to be coding should be inside this HTML tag we're going to write HTML and automatically rep closes that for us now inside this HTML there is something else that we need to have and this is the body so so the body basically takes any visible code or any visible thing that we want to show on our web page now for example this eye welcome should be under the body for example the the code used to create the HTML code used to create this rep plate all everything that we see right here should be stored under the body tag so right here we should have a body and as I said replat closes that for us automatically so anything that we're going to code should go go in the body right here so now I'm going to talk more about different types of tags what they are used for so we have the heading tags and they are mostly defined from their name to show headings so we have them in a list from H1 to H6 so in the a while ago I showed you how to create this eding using the H1 tag this eding that we see right here so we do H1 and then we close it can say first eding now if we run that you're going to see that it's just going to print for show out the first heading as you can see it says first heading now if we use another tag named H2 this is also an heading tag but it is smaller compared to H1 so if I say second heading and I run that you're going to see that it's going to show second heading but quite smaller to this and if I use another one H3 I can say third heading and once I run that you're going to see that it's going to be smaller so the size of the heading keeps descending right as the H1 H2 so as you ascend from H1 H2 H3 all the way to H6 the side skips descending so H1 is the biggest so you can use this whenever you see fit in your your code now the next one I want to talk to you about is the paragraph tags I talked about this briefly a while ago but let me talk more about this now so is a very basic and simple tag what it just does is it creates a new paragraph so for example in your code let's say you want there to be some spacing between different text or you just want to show like a new paragraph structure we use the P tag so once again we use the less than sign we put P we use the greater than sign and in between this opening and closing tags we have the content of that paragraph so we can say this is a test paragraph So if I run this you're going to see that first of all there's going to be spacing between it and this is a normal text it's not a heading it's not bold like this H1 tags so as you can see it just say this is a test paragraph right now the next one I want to talk to you about uh HTML links so for example let's say on this page if I click on invite and it takes me to another link or another page there's basically an HTML link tag that allows me to do this now let me show you what I mean so for example let's say I want the user to say something like click this link right and once the user click this link I want to take the user to you know fre Cod cam.com or or I want to take us out to google.com so what we can just do is to say I'm going to remove this real quick we open a new tag but this time around we are using an a tag right and then I'm going to close it so once I close it I'm going to have the content in here so I can say click this link right but now there's something different with this this is when I'm introducing you to what we call H HML attributes now if you don't understand this now you don't need to worry because I'm going to have a whole section dedicated to talking about HTML attributes so HTML attribute just shows me what parameters a tag needs to take for example this a tag is used for redirecting a user to another link or sending a user to another page but he needs to know what page he wants to send a user to so for example once a user click clicks on this click the link we need to specify the link that we want to take the user to so it needs to have an attribute and the name of this attribute is href now this is how we inut attribute in HTML tags in the opening tag we leave a space and we type the name of the attribute and we say equals to and we use this quote now in this quote we specify the value of the attribute so in this case the value of this attribute is the link I want to take the user to right so let's say I say google.com now now if I run this you're going to see that we have like a blue color with underline that is underlined and if I drag this right here I'm just going to go back to that and let's say I drag this right here okay so um it gives us an error it says rep. co/ google.com now this is because I didn't Define that is an external link so it's thinking that is a link under this particular web page so what you need to do is just to say HT see PS so basically specify it as a new link on his own so once I run that and it runs again if I take this if you look at the left bottom corner you can see that it's showing me that I'm going to go to https google.com if I take this and paste this here it opens google.com so this that is the basic way of creating a link right and don't worry about the attributes for now I'm going to talk more about that soon now we are going to talk more about HTML attributes so a while ago I showed you how we used a simple HTML attribute to show the link that we want the user to go to once they click on this click the link button or just click the link text but now I want to talk more about what this attribute actually is why we use it how do we use it and different tags where we can use this so as I said a while ago the attributes basically gives more information about the element or the tag so for example this a tag it needed an information and that information it needed is the link we want to send the user to so once the user clicks on click the link we want to send the user to google.com now there are other tags that actually need us to you know specify different things that's when we use the HTML attributes for example we have the IMG which is also known as the image tag and this needs an HTML attribute that specifies where or the source of that image that we want to show so before we go into that let me quickly go through again how we you how we specify how we create HTML attributes so as I said in the tag in the opening tag we write the name of the attribute and what the attribute contains so basically like the value of the attribute right so for us to do this now let's test it on another tag so let me show you how we can display an image on your HTML page so right here we want to display a simple image so what we can just do is to say IMG right and we're going to close this so this image tag is uh is a tag or is an element that doesn't need to close it so you know how we close the P tag by using this SL we don't need to do that right here for IMG and now the reason why is because the IMG tag or the image tag doesn't take a value right now what I mean by this is like it doesn't showcase the value the only thing it showcases is the image so it just needs the source of that image so we do all of this in here because we want that between those tags we want to show this text we want to show this text we want to show this text we want to show this text but in an image tag we don't want to show any text we just want to show the image so what we just need to specify is the source of that image so we can do this similar to how we specified the link to this um URL that we're redirecting we are going to say SRC so right now we want to specify the source or the link from where this image is coming from right so as I said this is the name and in here is going to be like the value of this source so we can just take a random image for example we can you know take let's see if we can take an image from this page um we can take an image so we can just go on Google and search random image and then in here we can take this dice image and once to click on this dice image we can say copy image address so now that we have that image address once we pay P this in here that is the source of where that image is coming from right if I run this you're going to see now that it shows that image right now obviously this is a tag used to show an image and the reason why I said we don't close this tag is just because we don't need to write any text that is why we don't like I have a closing tag and put a text within it so that is how we basically do that very easy very simple to do now we can a an HTML tag can have more than one attribute right now in here you can see that we have this SRC attribute but what if we want to do more to this image we need more attributes like what if we want to change the size or anything so for example we want to change the the width of this image I want to change the height of this image so let's say want to change the Z of this image right and let's say want to make it smaller or bigger to do this we're going to have to specify another image attribute and this attribute is called it so once again we specify attributes by writing the name we put the equals to sign and in here we put the quote now inside that quote is where we put the value of that particular attribute so let's say we want to make this 200 if I run this let's see what changes that makes to this particular image you can see now that the image is shorter and I can also do the same thing to the width what if I want to reduce the width on increase the width I'm just going to do width equals then we put the column the quote and then we also have the size let's say the size is also 200 and we run that so once we run that you can see that the width has also decreased so this is basically how we can do this so we can also have another attribute called alt now this Al attributes basically tells us like let's say more information about this image so let's say we just want to say the image contains a dice right you say alt equals we put quotes and we can see something like this image contains a dice now once we run this we're going to see that this has a description of this image contains a dice so we don't see this right but for example um if you go to the let's say you um get the source of this image or whatever once it's coming with a description it comes with this alt description which says this image contains a site a dice now this is not what is shown to a user right but this is basically part of the attribute of this image so there are also various attributes of different things we can use right and for example right in here where we have this paragraph so let me just just get rid of this image cuz we don't need it so right here where we have this paragraph let's say we want to show like I don't know maybe another information of this paragraph So something like um once a user clicks on this right or once the user overs over this we want to show that this is a new paragraph or something like that we use a title attribute now this is not really widely used but just an example of what attributes are let me say I say title equals this so and I'm just going to say test once I run this going to wait for that to show so if I come to this paragraph right here you can see that when I over over this you can see that there's a small button that comes up that says test so that's just another useful attribute now as I said there are various attributes and it's very easy to make mistake while defining attributes so you must make sure let me go through it again you must make sure that you have the name of the attribute you put the equal sign you put the double quotes and in there you put the value of that attribute if you do that you can't go wrong now let's talk more about HTML paragraphs so in here I briefly talked about what paragraphs are and how we can use them so first of all I'm going to get rid of this title attribute that I added to the paragraph So as I said we talked about this paragraph right here but now I want to go deeper into what what these are and you know how they actually show in your web page now for example let's say we have a paragraph right here and we write this like this is a paragraph and first of all let me just have this like this and put this here so just to make it a little bit more structured for me as the coder to see so I say this is a test paragraph and I say something like this is a new line now you expect that it should print it or it should show it here the way I typed it in here but no it's not going to do that so if I'm going to run this now and you're going to see that it just shows everything on the same line but most of the time or sometimes I might not want to do this now even if let's say I put let me see let's run this and then once you print it you can see that all the spaces are lived in from a to new didn't show so none of this shows and they are different solutions to this because most of the times we might want to create a new line we might want to you know do various stuffs so first of all let me show you the first solution that we can add to this so let's say we want to have a break right so for example in here we want a new line to be created so we want this text to come to a new line we can use uh another HTML element called break so it's short form for br but it's called break and what this means is just after that wherever we put it it's going to break to a new line so this is another HTML element that doesn't require uh closing tag and once again this is because we are not showing any content for it it's just there to perform its own function so once we specify this BR like this it's going to create a new line for us so I don't even need to you know make this in a new line once I just do break where wherever I put the break from a new line is going to be created so now once I run this you're going to see that it says this is a test paragraph and a new line is being created there now that is one solution to the problem but another solution or the solution I go with when I have this particular problem don't get me wrong break is very useful you're going to use it a lot when you're coding HTML but for this type of problem I use the P tag so it's basically similar to the paragraph tag but the difference is that the way we write our code our text in here is the way it's going to be shown on the web page so for example first of all let me change this to P I'm going to change this to P so I call it the pr tag you can call it the pre- tag or whatever you want to call it so let me just have this on a new line and let me create a new line and say another line yet another line and another line once I run this you're going to see that the way I wrote this here is how it shows here you can see that even with the spaces that I put in here is what is showing there if I get rid of the spaces let me get rid of all the spaces real quick going to see that the way we put it in there is how it's going to show for us that is a solution to that particular problem now let's see it run again so I'm going to run this real quick I'm going to wait for that to run as you can see everything has been fixed so that is a way to solve that problem in a paragraph tag now let me show you some other you know elements that are going to be very useful when writing B text like this for example let's say we want to have a line across this to let's say differentiate two different parts of a page just the way we add the BR tag we're going to have a tag named HR so this tag is an empty tag once I just do HR right it doesn't have a closing tag it's just an opening tag from wherever I did that HR there's going to be a line an horizontal line that is going to be ruled right here and let's run that and let's see what that gives us as you can see we have a line it leaves a space it continues I can have it everywhere and just say HR I can do the same here and say HR and I can do the same here and say HR so once I run this you're going to see that lines are going to be created everywhere exact same way the way we want it as you can see structured very well the way we want it now that's how to use an HR tag in your HTML code or whatever you want to use it let's say paragraph or another code now we're going to be talking about formatting text or formatting elements in HTML so we might want to show different text in different ways for example we might want a text to be bold we might want a text you know to be superscripted or subscripted or we might want a text to look like an italic text so for all of these we need to format them to look the way we want them to look so to format it we need to use HTML elements right so for example let's say we have a simple a simple text in here that says this is a text so once we have a text that says this is a text right here if I run this now make sure that everything is under the body element as I said from the beginning so it says this is a text but what if I want this to be bold now for me to do this I'm going to use an element named B and that b stands for B so it basically makes whatever content is within it bold so I'm going to cut this I'm going to do B I'm going to paste that in so now once I run this you're going to see that that text is bold so this is how you make a text board you open a tag normally the way we do you put B you close that you put the text in there and then you close the whole tag so once you have that done and you run it this should show this is a text now similarly you can also use another tag named strong so if I come here and I say strong right and I close it and I say this so strong and once I run this you're going to see that it looks exactly the same thing as this is another way for you to do that so let's actually have a br tag here and we've talked about what BR does it breaks the line just so we're going to have each text we're having on another line so let me run that and you're going to see that we have that on another line so that is how you can you know use the strong but what if let's say you want your text to show as an emphasized text so for example we're going to use a tag named em let me say em and let me just say emphasiz once I run this right you're going to see that that text looks emphasize it looks different from the normal text so this is kind of like an italic text so if you want your text to look italic you can use this emphasize or or you can use the I tag and this I tag stands for italic it makes that text italic so once I say italic and I run this italic text you're going to see that it looks italic right if you look closely you can see the little difference between it but they look very similar so instead of us having let's say a break you know a break element after every single text what we can just do is to cut all of this and then we can have a pre- tag and this pre- tag we can then paste all of that text in it and then when we paste all of that text in it the way we put it here is how going to be shown here so once I run that you can see it says this is this text and all of that so it leaves the space for us let me remove this and then in here we do this just to make it look better so once we that that should show the text how we want it right so once we've done with the intellic we can also Mark a text so let's say we want to do something like Mark this and then we want to have Mark and say marked going to show you what this does so as you can see it highlights that particular text for us right so it makes that text all lighted how we want it so we can say let's say we want to say this is an example or this is a important information and then we just want to mark that important information and important information run that it's going to show us that important information highlighted so that is what the mark element does now let's say we want a text to you know be canceled out for example you know where you see maybe on different web p PES and you see something like this is something you shouldn't do and then you see strike like a line stroking through it that is the delete element so let me show you what I mean so let's say we have a text that says don't do this and we say delete and in there we say do it right now once I run this you're going to see that that do it as a strike through it that is how that is done if you see this anywhere on the web it's done using or you can do it using this delete element now we can also have an inserted text so let me say inss right and say inserted if I run this it going to see that it has this text like underlined or basically highlighted but not in this way but it's underlined now let's say I want a text to be very small compared to what all of these are so I can say small going to use a small element and say this is quite small I run this you're going to see that the size of this is smaller compared to all of this text now the last two ones I'm going to talk about are subscripted and superscripted now you know in let's say chemical formulas where we have something like oxygen which is like O2 and we want o to show right here and then we want two to show but we want it to show like on the bottom or let's say we have something like 7 ra to^ 3 right instead of doing using this sign right here we actually want it to show ra to power 3 on there so it's very easy for us to do this so for us to do the chemical formula type we can say o and then where we have these two we're going to say sub so this subscripted means that it should be on the bottom I'm going to show you what that is O2 I'm going to run this real quick and you can see that it shows to subscripted compared to O now let's say I want to have 7 to^ 3 this time around I won't use sub I will use superscripted so I'm going to change B to p and once I run this you're going to see that it has 7 ra to the power of 3 we're going to quickly talk about colors in HTML so I want to go more into into like a little bit of styling of this text or of a particular element so for example what I mean is let's say I want this text to like have a background color or I don't want this text to be black I want it to be let's say white or you know blue or whatever now I can use the background color attribute now let me first show you what I'm going to do let's get rid of all of this under the body tag and back in the body tag what I'm going to do let's say I just have a basic H1 right and I say is is my heading so if I run that from now you should know that just going to print a basic this is my heading right so I'm going to have an attribute so you know what an attribute is it gives more information about that element so we can have an attribute named style now this style attribute basically gives us a way of Designing this particular you know element so let's say I want this particular element or this text to have a color of let's say red so I'm going to say style equals to and double quot right in there I can have different things I want you to do but we're not going to go in depth into that for now because that is more of like a CSS type of code which you don't need to know for now but what I'm going to show you is how we can you know make it have a different color so let's say I want the color right to be blue this is how I do it I just say color column blue now once I run this you're going to see that it changes that color to Blue now this is the simple way of doing this it's very easy very simple you know there are various different like I I will call it like a styling command that we can give it so this is a styling command in my words so it's like we saying that the color of this particular text should be blue now let's say we want to have another like another style to it let's say we want it to have a different background color on its own now what we're going to do is to stop this or no we won't say stop this we will end this by putting a semicolon so this means that after this we can have another styling done in there so what we want to do now is to just say background and then we're going to do I color and now we can change the background color to whatever we want let's say I want the background color to be red right so as you can see we say background color we use the colum and then we use the value right so the value is red and we put this semicolon to so that that is where it ends now once I run this you're going to see that only that text has a background color of red now that is the basic way of you know taking care of colors like that and there are various stuffs where you can use like CSS code to style this like we can make this be in the middle we can you know do more stuffs but we're not going to talk about that for now so that this is just basically how you you know use colors in HTML now that we've talked about colors the next thing I want to talk to you about is comments in HTML now this comment is not just only a concept in HTML alone is a concept used generally in programming so what comment does is that it basically makes a particular like block of code not display in you know when your code is run or something now let me explain what I mean better now what I mean is for example let's say we have a text that is p and we say a text so we we would don't want this to show because obviously when we run this this is going to show in here but we don't want this to show here right but we don't want to delete it also we don't want to remove it from there what you can do is to comment that block of code or that line of code now for you to comment what you need to do is to use this particular syntax now just follow as I do so what you're just going to do is to say less than going to use the sign and then two of this and then after the code that you want to comment you're going to close it by doing the same thing except with the the exclamation marks so as you can see what that is it it basically Grays this part out if I run this you're going to see that that part doesn't show now this is a very good use of when we want to use comment because we don't want this particular part of the code to be run when all our code is run right that is a very good use of comment that is most of the time why I use comments the other reason you might want to use comments is to actually drop a comment on the code that you are creating for example let's say we want to comment and say the code below displays a heading that has a blue color right we don't just want to write that here and say the code below this place and eding right we don't just want to write that there because if you write this there it's obviously going to show right here in our code so let's say we just want to put it in a comment so that whoever is reading our code we understand what we are doing so what we're going to do is to put this in a comment now just the same way we did here we're going to have the same syntax and close it so now whoever is reading our code knows that this code here just displays an heading if I run this it's not going to show with it no more that is because it's only in the source code right but it's not in the output so it basically hides that content now you can use it as I said to hide a code or to stop a code from being executed when you run it or you can use it to actually drop a comment on a code now we are going to look more into links in HTML now earlier in this course we talked briefly about links and now you can make a user click on a text on a button and it takes the user to a specific link but now I'm going to go deeper into what they actually do and more use cases of links so I'm going to get rid of this real quick remove that and then we can remove that and we are back to just the body so now obviously I showed you how to create a link and if you want to create a link we say a and in between that we say let's say go to site let's say go to site and then we have an attribute named F hre EF and let's say we want it to go to you know https goo.com now once I run this and if I just over over this on the bottom left corner left bottom corner you can see that the link shows that is redirecting us to google.com so this is a basic way of just creating a link in HTML so I'm going to talk more about like different things you can do with it for example if I click on this go to site it's probably going to take me to the google.com but then it's going to go away from this page page and take me to that page but what if I don't want to do this so you know for example on different blogs or different website where you click on a link and it automatically opens a new tab with that link so it doesn't close the tab that you are currently on you can do that using an attribute named Target so if I say Target right and I make the value underscore blank now this is going to create a new it's going to create a new tab for us so let's say I run this and then I say go to site you can see that it opens it on a new tab it doesn't like go to that site from here that is what that Target blank does this is very useful because sometimes you might let's say you're building an application that you want a user to let's say view something but you don't want them to go away from the site that they are in from your site because maybe there's some things that still need to be changed this is a good use case of this target attribute now there are two things called absolute URL and relative URL now if you remember in the beginning when I was trying to create a new link and I put google.com right when I run it and I clicked on go to site so let me just go to site it's going to open a new tab you can see what it's doing it's saying rep. google.com now this is because it sees this URL this link as a relative URL now a relative URL means that we are trying to link to somewhere else within this particular web page so it's it's basically seeing something like let's say I just say slash um slash go so it's basically going to go to rep.com too/ all of this slgo that is a relative URL is it's just going to this particular URL this link within the local you know the local application or the local website but let's say we want to go to an external website like the way I went to google.com now that is an absolute URL that is when we have to do the https right and then we have to specify the site that we are going to so now that is an absolute URL that is the difference between both of them so we can also link to different things like let's say we want to link to an email address so let's say we want to say something like let's have an a tag I'm going to say send me an email and one that once the US that clicks on this is going to like open a new tab that is sending an email to a particular you know a particular email address first to do this we're just going to say hre EF equals now where we're going to specify the link what we need to specify is mail to colum and then we're going to put the address so we can put sample at sample.com so for example I run this right this is going to show me send me an email and if I open it it's going to it says m. google.com refuse to connect but it basically open a Gmail and tries to you know send an email so this is just not showing because we're under like this reper but let's say you have your own website and you use this it's basically going to open a page where you can compose an email to that email site now we're going to talk about titles and favicons in HTML so a title is very simple and very straightforward so what is what it is is basically the text that is shown at the tab or at the top of the tab on a web page for example on this web page you can see that what is shown is this index. HTML HTML tutorial Replay that is the title of this page so for you to specify the title of a page right you need to have an ed element so right after the HTML tag we're going to have this Ed tag right here and we're going to close it now this Ed tag basically contains different you know information about the page some of it is information about the top corner like the icon that shows here which is the favicon the title and some other information but in this part we're going to be looking more into this title and this icon that shows here which is known as a faon so first let's look at the title so as I said the title is the information that been displayed in here so for us to set the title of our web page what we're going to do is to open a new tag and say title and this title tag must be in the Ed element so this is also another nested element just like the way I talked about previously so now this title element must be under this headed element so what I can just do is my page so I can see my page is the title of this particular you know web page now if I run this right well not actually going to see anything here because this is just like a you know a demo of this but let's say we have our website we have our HTML file and we run it on our browser here you're going to see that the text here is going to be that now I'm also going to show you how to you know create your HTML files on your local computer and actually run it on a browser so you can see like this type of examples but for now know that this title is what is being shown here now the next thing we're going to talk about as I said is the faon now this favicon is known as the logo or the image that is shown before the title on your page so right here you can see I have this tab and you can see this Google logo that is the favicon so to have the faon we're going to have the link tag right and then the way we close the link you just to do like that we don't close it because it's similar to an image tag we are not actually writing a text so in here I'm going to say real that is an attribute I'm going to give it and I'm going to say is an icon right and I'm just going to say hre EF which is the link of where I want to get that faon from and say equals this now let's actually get that link right here I just searched fre Cod cam favicon PMG I got this and I'm just going to copy the image address I'm going to come in here and paste it now if I run it once again this is not going to actually show here because this is a demo of this but when I show you how to you know run your HTML file on your browser you're going to see all of these details but that is how to use a favicon and the ti to in HTML now let's talk about tables in HTML so a table where you can just basically represent data I'm going to show you how to create that right now so as you might have guessed we're also going to use another element and the element we're going to use this time around is going to be called table so let me get rid of this right here and I'm going to get rid of this link right here so in the body what I just want to do is to create a new table so just a normal table right just a normal table where we have the heading and then we have the datas that this table contains so for us to do this we're going to say table and then we're just going to close it just like that and for us to now create like a new row in that table we're going to use another tag named TR so this stands for table row so in this table row I can say something like let's say I want to have let me visualize this so let's say table data let's look for images let's make that table good so now for example we have this right so this is going to be a row so what we just created right here this TR is a new row right here um let's say I want to create another row to store all of this data under here I'm going to create another TR right and I'm going to close that so this means we have two rows now so we can keep doing that for the amount of rows that we want so what we can now do is that under the first row we want to have the heading so we want to say name rank gender and year all of this heading so for us to do this we're going to use a tag named th which is also known as table heading so that table heading we're just going to do this real quick so this th is going to be the heading so let's say some something like name so this is going to stand for name we might want to have another table heading named age and then let's say we want to say something like class right and then if I run this you're going to see what we have so you see that we just have name age and class and let's say under this now I want to have a name like let's say Tomy and I might put age and I might put a class so what I'm just going to do is I'm going to create a new row as you can see I already did that here but now instead of doing th what I'm going to do is TD so this means we're adding a table data not a table heading right so you only use th when you have when you have specified the Ed of that class so of that table data but for the values we use TD so let's say something like Tommy and for the age you another TD and let's just say I don't know 18 19 let's just put a random age there and another TD let's get rid of that let's just small letters and it says class and we can say here I don't know yeah 20 12 and then once we run that you're going to see that we have this basic table that says name to9 year 12 now we can keep adding more roles what we just need to do is to do TR and under TR I'm going to have TD and I'm going to I can use another one and just say John I'm going to have another TD and let's say the age is 30 and let's say um is in year 15 or something like that now once I run this you're going to see that we basically have a simple table that shows that so as you can see it just shows the you know heading it shows the data which is tell me 19 here 12 it shows John 30 and all of that so that's basically what we need to build a table very simple and very easy we make sure we have the table class we make sure we have the TR and then we make sure we have data in between now let's talk about lists in HTML so let's say we want to have a simple list right here that just lists let's say a list of names a list of years or whatever first of all let's get rid of this table that we created we're not talking about that now so what we're talking about is list so there are two types of list they are unordered list and they are ordered list unordered list are the ones that just have like a simple bullet point mark between them I mean before them but an other list is listed from one to 2 three 4 basically numerically now let me show you what I mean now for example let's say we want to write an unordered list we need to use a tag named UL once we use the UL tag we need to open and close that tag I'm going to press enter and for us to now add list this UL stands for un other list so for us to now add elements in this list we're going to have to use the LI stands for list and we going to say something like name one and we can do the same thing to have a second name Li I we're going to say name two let's have a third name say l i I'm going to say name three as you can see we have three different names if I run it you're now going to see that we have name one name two name three now this is shown listed but it's not ordered it doesn't have 1 2 3 4 5 and so on if we want it to be ordered like to show in a sending order then what we just need to do is to Simply change this UL to O now this o means ordered list so if I change that right here and I run this you're now going to see that they have numer numbers before them if I keep adding and let me say another list and I say name for it's automatically going to add four as a number before that now there are also more to list like for example we can show a description of this name now for us to do this we need to change this other list to description list so this description list basically allows us to show more description on each list if we want to so what we're going to do now is we change that to description list and let's say on the first list we want this to be DT not Li that's the difference we're going to remove all of this real quick and under that let's say we want to have a description of this name one we're going to use DD so this just shows the description and let's say something like um let's have like an arteric and say this is the first name and once I run this you're going to see what it shows us so you see that it says name one and under here it leaves like a a space and it says the description of that name we can add another one and just say DT and just say name to and now to show the description of this we just say DD and we can have the AIC again and say this is the second name now if I run this you're now going to see that we have name one we have the description we have name two and we have the description now let's look into block element and inline element so the difference between block and inline elements is basically this so a block element always start on a new line and the browser automatically adds some space before and after the element but for an inline element the inline element doesn't start on a new line and it doesn't it just takes the space that it needs so it doesn't you know have a space before it and after it so there are examples of block elements and a div is one good example of block elements now let's quickly talk more about this div tag so div tag is is written like this the IV and it's closed so most of the time is a wrapper or is a tag where all other HTML elements are contained with so let's say we want to group like our whole application or our whole web page into different sections we can use a div tag to do that so for example we have this div tag and I can just say something like H1 first div and after this I can just say I can just have a b tag in here I can say this is B right and I can then have another D tag just to separate that now just this is wrapping all of these elements in it and this one we can have an H to and say another one and for B we can say I so if I run this is basically just a normal text that prints this but it wraps it into this div text now now we can use different things to you know know these div tags like for example I mean to recognize the div tag we can have an ID as an attribute that says that this old div tag has an ID of you know first div or we can represent it using a you know a class but we're not going to go into that for now we can also do more things like you know in the beginning when we made the background color of this first div of this H1 like red we can do that to this D and now everything inside the div tag will be affected once anything here is changed now let me tell you what I mean so we're going to use a style attributes we've talked about this before and let's say we use color and say that we want the color to be green now once I run this all the elements in here are going to have the green color right I can also change the background the background color let me say blue now once I run this all the element in here will have a background of blue and not the other one you can see now that we're able to actually like separate different sections of our code and give them different attributes so I can do something similar here and say that style and I want the color to be red and I can see I want the background color and I want this to be something like purple now let me run this and see what it gives me you can see that this are two different sections this has a different color and a different background color this also has a color of red and a totally different background color now that is what a div class is and you can see that there's a space between and after that particular div class space between and after that particular D tag so now there is an example of an inline element as I said it doesn't take us as much space as a d tag and it doesn't start on a new line so an inline element an example of that is something like an a tag for example or a B tag this B tag now is an inline element this means that I can basically let's say just have a normal P right and say this is the text and in there I can just have a b tag and say bold one so it can stay within a text it can stay wherever you put it it doesn't really need to be separated on its own compared to a div tag so that's the difference between a block element and an inline element so there are various examples of block elements like a few that I can see on top of my head are like you know HR like div as I said you know like P um UL you know section and there other elements like that and for inline element we have the a tag which we just which we used earlier we have the board tag uh we have image tag and various small so this is basically the difference between those two now let's look into I frame in HTML so an if frame is used to show a web page inside a web page so what I mean by IDE is is using an i frame we can have like a box that shows another web page in our own web page so let me show you how to do this it's very easy and very simple all we just need to do is to use the syntax so we're just going to come here we're going to get rid of all this div I just want to say if frame we're going to close it now it's going to take some attributes the first attribute is going to take is the source once it takes the source attribute this Source attribute is the link that we want to show in here so let's say I want to show google.com so this is going to show google.com in here for me so that it is that easy to do and once I run this you're going to see what it shows you can see that it creates a box it says refuse to connect that is probably because of this replay um page but normally once you use this ey frame as you can see it's trying to connect to google.com so there are more you can do to this ey frame more things like you can you know specify the height the width of what how big you want this to be so I'm going to give you more attribute and say height and let's say 100 if I run that you're going to see that it goes smaller and let's say I also give it a width of 100 and if I run that you're going to see that the WID also goes smaller so I can increase it however I like I can say this is 500 and I can say this is 500 so if I run that and I'm going to see that we have a big ey frame right here that's how to create a very basic eye frame for us now you can also remove the Border you know this line where you see we can do that so to do that we are going to use the style attribute we've talked about this style attribute before we us it to you know add some styling to that particular element so now what we're just going to do here is to say border now this border is basically the line that we see right here I'm going to say border equals none if I run this and now going to see that there is no lines there the lines that we showing before are gone let me just make this quite smaller so you can see that very well now if I run this going to see that it's just a square there's no lines on that so that's a very basic way of how to create if frames in HTML now let's look into symbols in HTML so let's say we want to display different symbols like let's say the pound sign or the hero sign or we want to display more symbols like the copyright sign you know Card Sign I'm going to explain what I mean in a bit so if you want to display all this stuff there is a particular you know syntax that you have to follow in HTML so for example let's say in this body I have uh P tag I'm just going to say this is hero sign so I now want to display the sign of the hero's currency for me to do this I'm going to say and so I'm going to use this and right here my keyboard and I'm going to say hero now if I run this you're going to see that it displays the hero sign for me um that didn't display the Euro sign and that's because we didn't have the semicolon so we must make sure we have a semicolon now you're going to see that it displays the hero sign now there's more and more that we can do and I'm going to go through most of them so for example let's say we want to have you know um something like the copyright sign so the copyright sign what we need to do is to do and and we're going to do hashtag and we're going to do 169 the note that you must end with this semicolon if though it's not going to work so once I run this you're going to see that we have the copyright sign now there's a lot like we can have the registered sign is similar to this but it is 174 and once I run this you're going to see that we have this r sign so we can also have like the you know the signs on a card like the Spade the art the diamond and all of that so for us to do this right here let's say I want to have the Spade sign I'm just going to have 98 24 and this is going to show the Spade sign on a card as you can see and if I want to have the clubs I'm going to do 9827 right that's going to show the club and let's say I want to have the art I'm going to do 9829 that's going to show the art and if I want to have the diamond I'm going to do 9 8 and 30 once I run that you're going to see that that shows that for us now there is a lot like let's do one more for example I could tradem Mark we're going to just change it to 84 82 so once we change this you're going to see that we have the Trademark Sign TM so this is just a basic way basic syntax of you know showing symbols in HTML now there's a lot of you know all of this and you don't have to know this off by heart you can just search on Google HTML symbol for displaying the you know the pound Stelling sign for displaying the pi sign anything you want to do you can just search on Google I don't advise actually knowing all of this off by heart so that is what that is how to you know create symbols or show symbols in HT now let's talk about forms in HTML so a forms is a way you can collect input from a user so when you collect the input from a user these forms are mostly sent to like the server for you know processing or whatever the data is needed for for example let's say you go to a website and you want to log into that website you're going to see that there is a simple form where you fill in your username and your password then you click on submit and that data is been sent to a server that checks whether your username and password are actually in the database of users so the basic reason why we have form in HTML is to collect data from user so let me show you how we can Implement a form in HTML so the first thing you need to know is the form tag so I'm going to remove this and I'm actually going to just start by saying form and when I close it it's going to close by itself so now this form tag is HTML knows that we're trying to create a new form so it's going to have like an input like an input bar where a user can input you know something but now they are more to just this form than only the the just the element so we need to have the input element also so the input element is used to display what type of form or what type of data we want to collect so for example let's say I have input this is how we type input and then we close it like this right and what we can just do is to it's going to collect various attributes but the most important one is the type as I said it shows or it specifies what type of data we are trying to collect so let's say I just want to collect a text I'm going to input text in here and I can run that so once I run this you're going to see that we just have this simple bar right here where I can input a text right I can also have an input that just you know collect numbers so let's say input type and we can say number if I close that and I save it I run this you can see now that we have these two buttons here which can help us increment and decrement the number so this only collects numbers so we this basically tells us like what we actually want to you know input what type of data we want to input in here so let's first of all look into this text field very well before we go into the other fields I mean this text type so for example whenever we have an input right we must always have a label beside it so right here where we have this bar if we don't have something saying input your name or name or username the user is not going to know what to input that is where the label comes in so we have a label and we close that label and here we can just say name so here where we have name we can now say input type text so I can run this and you see it just says name and it has the bar beside it so let's say I want to leave a space and I want this to be on the bottom I can just add a br tag and I can run this so you're going to see that it's now on the bottom but now the name the input needs more stuff than just you know the type like we need to know the ID and the name of that particular input so whenever a data is being sent from this HTML or from this HTML form right it's being sent using the name of that particular input if there's no name there is no way a data can actually be collected by the server so we need to specify the name right of this input and we can just say the name of this input is username right and we also need to specify like an ID now we use this ID just to be able to recognize or to be able to refer to this particular input within our HTML page so I can also say the ID is something like an username I can give it the same name now for this label I want this label to actually be linked to this particular input because for all I know right now they are just two different elements but what I want to do is that I want HTML this our you know code to know that this label is for this particular user input so for me to do that it's fairly easy I'm just need to going to need to have an attribute here that says four and we're going to say four username you see we set that by using the attribute that we already you know defined here so if we run this that is not going to make much of a difference but now we know that this label is for this input now let's do the same thing for let's have another form let me just have a br and let me have a label I'm going to close that label and let me say you know H now let me just say school right and I'm going to have a four but for now I'm just going to leave it blank so let's quickly create and input for that so let's say input and then we're going to have a type and the type of that input is also going to be text and let's give it a name of schw and also an ID of skew now I'm going to say this is for school now once I run this I'm going to see that I have another particular field right there so that is the basic way of doing that now let's look into another type of input like we've talked about text but what if we want to talk about like another type like let's say checkboxes right so let me come in here and I'm just going to remove this particular input so this input where it says type text I'm going to change that text to check box and I'm going to give it an ID of username same username and let me just say the value is something like um let's just say toy so I want the user to check if you know this is its value and I can just give it another one and say right here I can just remove all of this right and I can just have this and copy it so it's basically the same thing but with a different type so now I'm going to say name this is another username we can say username to username to and let's say team right now if I run this you're going to see what it gives us so you can see that it gives us name and it also gives us name so what I want to do actually is right here I want to have Tomy and I want to have Tim so once I run this I want the user to pick which one is your username is your username to me then tick it is it team or is it both of it you know then tick any of it right so that that is fixed right there and what you just need to know is that whenever the value is being sent for example if a user ticks toy or he tis both of it the value that is being sent is not this value that shows here is actually the you know the value that we specified as an attribute in here right so whenever a user clicks on submit we're also going to talk about the submit button soon when user clicks on submit that all the data is going to be taken from here and sent to whatever server we want it to be sent to but the value that is actually going to be sent is this value that we specified here now we can do exactly the same thing for like radio buttons so very similar to what we just did but what we're just going to do is instead of checkbox we're going to say radio instead of checkbox we say radio if I run this now you're going to see that it prints to me but this time around it used like a radio button so that is fairly easy to understand right so the next thing I want to talk about is actually submitting this data so let me remove this right here and let me remove this BR let's just make it look good it doesn't look confusing now once we run this this should just have it beside it so we can pick with the one one now that we have that I want that whenever user now clicks on submit actually want to submit a button this is the easiest what we just need to do let's first have our BR tag right here so it doesn't Collide we can just we're just going to have another input but this time around what we just need to do is to say type submit once we say type submit HTML knows that we want to have the submit button that means the that whenever a user clicks on this is sending all those data or those inputs somewhere but now we also need to have the value let me run this first and see what it shows you can see that automatically write submit there but what if I don't want this to be submit let's say I want it to be you know send then I can do value and I can say send if I run this you can now see that that submit button has been changed to send now that is how easy it is for you to do that but now where is this data actually being sent to like when we use send remember I said for this radio and checkbox it's not actually this toy that is being sent it's the value that we specified here that is been sent but when we click on send where is it being sent to now this is when we need to add an attribute to the initial form now this attribute is called action this action will tell us where the data is meant to be sent to so what going to say action equals now let's say we want to send this data to another page imagine we had another page like let's say something like um um form. HTML right we can create that and we want this to be sent to that form. HTML once we H send that is going to be sent to form. HTML basically so you can also like send it anywhere you want to send it to you let's say you have a web application You're Building and we can say we want to send it to like slash receive you know you can do anything you want to but this action basically specifies the place or the URL or whichever link is getting that particular form where you want to send that particular form too so that is fairly easy and that's how to easily do that the first thing we need to know let's go through what we just did so the first thing that we did was to create our form element and then we created different labels and inputs I showed you the types and I showed you how to use the submit button and once you have the submit button I also showed you how to add the action so that you actually know where it's going to but now that we know where it's going to right where we put in this action let's say form. HTML we also want to know what method is being used to send this data now you don't need to know the details of what I'm about to say but there are basically two methods that we can use to submit a data and it's called get and post so when submitting a data you can choose to either submit it using get and post you can learn more about that you know on YouTube anywhere if you want to know but for example we can just specify method equals post so let me just show you the the quick difference between get and post when you are sending a data using a get method all the details of the data that you sending is going to be shown in the URL bar for example if I search something on Google and I hit enter everything I searched the keyword I search is going to be shown in the URL bar right that's when you use a get method well if you use a post method is not going to be shown there also just a lot of differences between the two but that's just one difference that you know I can use to easily explain it so you're going to pick whatever method you want to use to send this data you can use post or we can use get if you don't use any method imagine you don't specify any attribute right here as default HTML is going to use get method to submit that data but for us let's just specify it let's say we can say get so is that easy you just need to you know sub you need to specify the method the action so that everything works perfectly so I hope you understand everything we did about this HTML forms is fairly easy and you know I hope you were able to follow along so earlier in this tutorial I said that I was going to show you how to actually create an HTML file and run it in your browser so I'm going to show you how to do it locally on your computer so what you need to do is to open a code editor right here I am in fusure Studio code but you can use any one you want you can use Sublime Text you can even use a notepad anything that can make you write code and you are comfortable with you can use it so once you have your code editor opened I'm just going to create a new file right here and let me name this file index.html now whenever you're creating an HTML file it must have this HTML extension at the end you can name this whatever you want to name it let's say test you know let's say website. HTML you can name it whatever you want but it must have this HTML at the end I'm going to create that file and I'm just going to create it in this particular folder now that I have this file created in here I can now code anything I want to code so let's say I'm just going to come here and copy all of this code that we did here and I'm going to paste it right so once I have this code in here I've coded all my HTML everything I want to do now what I can do is to now run this on my browser for me to do this I'm going to come into the folder we I created that and I'm just going to open index.html so automatically when you open that index.html file it's going to open you on your browser and show you the result of what you are coding so earlier I talked about the uh the title so we tried to create a title here but it wasn't showing just because we are using like this browser right here and not an you know an actual page but now that we have the page you can see that this my page title is showing now if I go back to this you know code and let's say I change this to test title now whatever I change in here once I refresh you can see that that title is now test title so that is an easy way of actually coding you know HTML files or doing a local then showing the result on your browser in this section of this course we're going to be looking into CSS CSS stands for cascading style sheets now what it does is that it allows you to add styling to your HTML page now I'm going to take you from a beginner's level to a level where you can confidently use CSS to style your HTML code now without wasting any time let's actually get straight into to this section so now we know that CSS is what we use to basically style everything we do in our HTML so but how do we actually even you know create a CSS file how do we let that CSS file be linked to this particular HTML file and I'm going to show you how to do that so first of all to create a CSS file you need to create a file named um style. CSS so first of all right we're using repl so rep automatically created these file these three files for us but right now we're going to be looking more into this style CSS I'm just going to drag it over here so style. CSS is basically a CSS file that we're going to be using on this HTML file right here so you can name it whatever you want you can name it you know main. CSS but whenever you creating a CSS file it must have this CSS extension to it so now that we know that we have that do we actually connect this CSS file to this particular HTML file right here now this is very easy we're going to use uh HTML element called link so right here we need to say link and we're going to close it like this that is how we close this side and it's going to take two different attributes the first one is going to be real and that is going to say that this is a style sheet that we're linking to we're going to say stylesheet and we also going to have to say the name of that sty sheet or the link to that stylesheet so right now we are just going to use the name of that particular CSS file because on this reply right all of these are Under the same folder so we can just simply say the name of the file instead of saying you know folder slash whatever because we have it in the current folder so I'm just going to say style CSS now once I say this anything I'm any CSS I code in here or anything I try to do in here is automatically going to be added to this particular you know page it's going to be effective now now that you know how to do that I'm going to start straight into the main CSS so I'm going to talk about you know the CSS syntax like how does it even work how do we even start coding in CSS so to write code in CSS we need to know two things and they are called the selector and the de declaration so as you can see right here automatically reply as this basic CSS code and what this does right so this HTML right here as you can see it is the selector so first of all I'm just going to let me just remove this HTML and just have body don't need to worry about that comma for now so we have this body right here and that is a selector and then all of this we saying the height of body should be 100% the weight of body should be 100% don't worry about the details of what this does for now but let me just introduce you to how we write code in CSS so this is the selector right and this is the Declaration now this means that this body we want whatever we are doing inside here to be affected on this body element so what this is going to do now is going to go into whatever HTML is linked to it and it's going to look for a body element so it's going to come here and it's going to look for this body element right once it sees this body element is going to say whatever we do inside this brackets we want to have it being affected on this body element without wasting any time let me show you how to do you know our first change so let me just get get rid of this and let's actually do something so I'm going to use the body again let me say body this is how we write a CSS code so we say the element right that we want to change and then we use this C braces and you press enter now anything you do in here is going to be affected with the HTML or whatever file is being linked to it so now we same body now there are different declarations the Declaration can be we want the color to be you know red we want the whatever font size in to be you know 15 we can do a lot of things I'm going to go through all of that in this section of this course so first of all let me just show you how you can change the background color of the body to be let's say blue or red so first of all you know that this body is where all the code goes into that means everything we're going to be coding in our HTML is going to be under this body the visible part of the web page so now we want the visible part of the web page to have a background color of let's say green let's make it green so what we're going to do now we're going to say body now whatever we do in here which you should know now is the Declaration we're going to say background this is how you change the background color background iph color and we want that to be green and then you must add this semicolon now the reason why we must add this semicolon is so that we can have another declaration right here let's say I want to change the font size I can write something else if you don't add that semicolon it's going to think that whatever you add here is still part of this first declaration so you must add a semicolon to end that declaration so this is how you do it background color which is what we want to change you put a column and then you put a value so think of this as a key and this is a value now let's run this and see so we're going to run this as you can see now the background color of this is green so it is effective immediately now let's check what if let's say I remove this right I'm just going to delete this that means this HTML page is not linked to this style. CSS now if we try to run it you're going to see now that it doesn't show us a background color of green no more but that's just to show you that no matter what you write in your CSS page if you don't connect it or link it to your HTML page it's not going to be effective so now let's remove bring that back and when we run this again we should have the background color as green now let's talk about comment in CSS so when we were looking into HTML earlier in this course I talked about comments in HTML and in there I talked about what why we use comment what it is and you know how we can actually code that in our file so in CSS is very similar to HTML the motive for using a comment is you might want to explain a bunch of code or you might want to just uh remove a part of a code that you don't want to be run when your file is run basically let's say I have this CSS file here so if I comment out all of this body the code is still going to be present in this file but is not actually going to be effective so it's not going to be run by the browser so let me show you how to add a comment right here in CSS so we talked about it in HTML but it's quite different here so let's say I want to explain what this you know code does I can add a comment and to have a comment I'm going to have to use the forward slash then I'm going to use the Asic sign and here I'm going to write my comment let me just say comment for now and then for me to close that comment because right here you can see that CSS still sees this as a normal code due to the colors I'm going to leave a space aeric mark and I'm going to use the for slash again now you can see that that part is grayed out you can see that the color is gray so this just shows that this is a comment right here and I can just write something in here like changes the background color of body right so that is explaining this code right here now that is a one use of you know comments you might also want to use a comments like let's say we have another thing that just you know let's say another declarative or something like that and it has a value right and I might just want to comment this out I can do exactly the same thing I'm just going to have the forward slash I'm going to have the Asic sign right here I have the Asic sign and the forward slash again so that part is still going to be in this code but the web browser is not going to run it when you actually run that file so that is those are the main two uses of comment but apart from just using it to you know adding it on top of like let's say a code you can add it somewhere else let's say we have different you know declarations right here let's say we have second declaration third declaration that's just an example and we want to explain each declaration by themsel so we can have a comment right beside this particular declaration so let me get rid of this so right here I can just have a comment here that says you know change to Green so for me to do this I have to add the forward slash sign and right here I have to do the same thing I'm just going to doer sign and forward slash so you can now see that that part is gred out let me just make this something like this so that is now a comment right so that's the easy way of you know using comment in CSS it's quite easy like when you're learning programming well you're going to notice that if you learn other programming language each programming language has a different way of writing comments but the motive behind using comment is the same in all the programming languages now you canot Al have multiple line comment for example instead of just having one straight line I can create a new comment right here and I can just say comment aha I can go to another line continue writing the comment here okay just something random and then I can close it right here so you can see that all of that has been commented out so it doesn't just have to be a straight line so that means I can even comment all of this code you know you can basically be very flexible with your comment you can do whatever you want to do so that is a very simple and basic way of using comments in CSS now let's talk more about selectors in CSS so earlier in this course I told you about how the syntax of CSS work um that this is the selector right here and this is the Declaration but now let's look more into how these selectors actually work how we we can pick different element from HTML and style it so C the CSS selector is divided into different categories but first of all I'm going to break down in I'm going to break everything down right now so once again CSS selectors they basically used to select HTML elements that you want to style right so it's very easy the first way to just have a selector is to come into your HTML and look at the let's say we have an H1 right here all we want to look at the element right and then we're going to come in here and just write the element right there we can just say for an H1 tag we want the background color to be green so we've basically selected that H1 tag very easy and very plain now we can select an element or we can decide to style a text or something else without selecting the actual element we can select the ID in that element so remember remember when we had when we did a form and then we had an ID as an attribute now you can have an ID not just only in a form input you can have it on any HTML element you want for example I can add this ID and say the ID is welcome message welcome so now that this has an idea of Welcome right I can come in here and then select this all this particular elements just by the ID so what I need to do to do this is to come in here instead of just writing it directly I need to write hashtag now once I put an hashtag CSS automatically knows it's trying to select an element by identifying its ID so what you just need to do now is to write the name of that ID now CSS is going to go into this HTML file and it's going to look for an element with the ID of welcome and then it's going to make the background color green now let's run this and let's see what it gives us boom you can now see that the background color of that whole element is green so that a very simple way of using an ID and this is also very you know very useful now let me explain a use case for example let's say we have two different H1s and this one says toy and if I run this you can now see that only I is as an ID of green I mean as the background color of green now imagine I didn't use an ID and I just use H1 this is going to affect every single H1 type that we have here so it's going to have all the H1 as green but what if I want just I to be green or just toy to be green that is a use case of using the ID to select it because the ID is unique to every single element so that is also very very useful so now that is one way of doing that let's run that again can see everything is working another way of selecting an element or a text or whatever you want to style is to selected by the class so there is something named classes in HTML and this class is also an attribute right it also identifies a particular element so once you have a class in an HTML element you can then use that to select that particular element and style it so just the way we have an ID we can have a class here just the normal way we write HTML attributes you write class and then you give it a value so let's say this class we want this class to be something like eding so that is the name of this class so now we can select just this class and say we want to style all of this for you to do that now let's actually just create another you know declaration selection and declaration so so for us to do this now we want to select this particular element using its class so we're going to do dot heading so this is the selector when you see dot something that means we are selecting an element based on its class so this means we're trying to select a class and this is the name of the class and now we can just say we want the color of whatever is there to be blue and we can use a semicolon to stop that now once I run this you should see that it has a color of blue just this one and that is because it has been seen or it has been selected just by the class now this is very helpful right so you can also do like more advanced stuff with this for example let's say there are two different let's say we there are two different elements that has a class of edging so let's say we we have p and this just say Tomy small or let's just say Tomy again and this also has a class of eding if I run this this is going to show a smaller toy but it also it is also affected because we selected it by The Heading so anyone that has a class of heading is going to have this blue color on it but let's say we just want to say just the H1 tag that has a class of heading should be blue so that means we don't just want to get every single element that has a class of heading just an H1 tag that has a class of heading now for us to do this what we're going to do right here beside the dot we're going to say H1 so now what this is going to do is that it's going to go into the H1 element and it's going to look for any H1 element that has a class of heading now if I run this you're going to see that that P is not affected no more this is just black but this is still blue that is a very good uh good example of how you can do this now there's also one more thing and this is the universal selector so the universal selector is basically a selector that affects every single element in the HTML page so let me show you what I mean so let's say I want every element on this page to just have a color of red every single element should be red for me to do this I'm going to use the aster sign if I use the arteric sign and have my col Braes normally like this this means that whatever I'm writing in here is going to be affected by every single element with no one left out so now I can just say color I can say purple so let me just get rid of this and now let me run this so you're going to see that every element on it has a color of purple that's because we use this arteric sign also known as the universal selector now this is you know a very good use case because you might just be building a page and you want that page to you know let's say all the text should be in the center you can use this to do it right so that is a very good one so the last one I'm actually going to talk about is the grouping selector remember when we first started this CSS video there was like uh HTML and body something that was written like this and I got rid of one because I said we're going to talk about that later so now what this is is called the grouping selector let me get rid of all of this right and let's say I have an H1 tag and H1 selector that says you know color and let's say green and then I have a P tag a p selector that says color green also right as you can see I'm just repeating the same thing if I run this it's going to have green all of this because these two are H1 and this is p now I'm repeating the same particular you know declaration for two different element now instead of having to write all of these because let's say I have lot of element and I want all of them to be green I and I have to start writing H1 color green P color green you know B color green strong color green we don't want to do that you can actually just come in here have a comma and say p so this means that for the H1 and P element do this now once I run this you're going to see that that has been affected on this so that is a more broader explanation on selectors what they are and how you can actually use them now we're going to look more into back backgrounds in CSS so we I briefly showed you how you can have this as a how you can let this have a background of like red or purple or whatever you want it to have but they actually more to talk about in backgrounds in CSS so like we can make a particular element have a background color we can make that element have even a background image so let's say we just want this part to have like a background image where an image will be the background or we can just make the whole page to have a background image so there are you know lot of other stuffs we can do and we're going to talk about them now so first of all let's just make this the body right and in here instead of just saying color green we actually want to say background color so similarly to what we've done before and once I just click on run the whole background is going to be green that is very easy and simple right but there are also more stuffs we can do than just this for example instead of just having let's say we want to have blue and instead of just having a normal blue we can say we want it to be light blue if I say light blue you can see that it's going to be light blue compared to the normal blue so there's a lot of stuff you can do and I like reply because it automatically just gives you lot of suggestions once you say blue you see all the blues that it has so you can also go online to search like what color of blue do we have you can see medium slate blue you can run that it's going to be that particular blue color so you can go online and search all CSS colors or all CSS acceptable colors you can see a list of it and you know you pick which one you want to pick now that is one right and there's another thing we can do by adding an opacity or making it more transparent basically so we there's a opacity declaration that we can add and it's going to make this you know a bit lighter or a bit more transparent for you to do this is very easy just going to say opacity and let's say we want it to be 0.4 so you can make it all the way from 0 to 1 that is the range so the lower the value the more transparent it's going to be if I say 0.4 you're going to see that it's quite transparent right but let me say 0.1 you're going to see that very transparent but what if I just say 0.9 you're going to see that is opaque very opaque so you can do that and you know that's how to just have a transparency on your background colors now let's just go straight into talking about background images so for example let's say I don't want this to be a background color and I want it to be an image so since we know that we've already selected the body now if we add anything it's going to affect the whole page now let's just do that real quick now for us to have a background image quite similar instead of writing background color we just change that color to image so I'm going to say background iph image and now we're going to have to specify the URL where we want this image to come from right the source URL so if I I have a link copied I'm going to paste that so that is the link right there and it just opens the an image of the free code Camp logo so I'm going to just copy that again and I'm going to close that so since we know we have the URL to that fre Camp logo what we just need to do now to tell CSS where to get that image from is to say URL and then we're just going to have brackets and we're going to have the codes and in that codes we're going to paste the link to that image so if I run this you're going to see that the background of this is actually that free code Camp image so as you can see the text don't show but they actually there they don't show just because the background is black and the text is black so now that we know CSS what we can just do is to say you know this is H 1 and P we can say H1 we can use group selector H1 p and then we can just say we want the color to be white now once I run this again the text should show exactly so you can see that that works this is just the background image this doesn't really have any effect on it but this is the text that is still showing the next thing that we want to talk about is the background position so for example let's say we just have a background image that you know is very small and it just stops here right we can have a background position and say we want it to be at the top right corner so we're going to do background I think position and we can just say we want the position of that to be at the top right so we can say right want it to be at the right and then we're going to leave a space and say top so this means that it's going to be at the right corner but the top of that right corner so that's what that does so now that we have all of that that's the very basic way of you know having background images in CSS now we're going to look into margins in CSS so margins are used to create spacings around elements so for example when I have this let me change the color of this to Black I'm going to run this so it should show the text let's say I want this P tag to have a margin of let's say or let's say I want this tag to be somewhere around here instead of just from the beginning I want it to be here that's when we use margin so we can specify the like space we want from the left side from the right side from the top I can also bring it down and I can also like take it up so that's what margins does it basically allows you to create like spaces around elements now there are different ways we can specify the margins so as I said we have the margin top we have the margin right we have the Marin bottom and the Marin left so each of that are just used to specify the spacing for wherever we want if we want it to be if you want there to be a space at the top we use the margin top you want them to be a space at the right we use the margin right for the bottom margin bottom and for left margin left so now let's just go straight into this so I'm going to remove this H1 and we're just going to have P so automatically it has a color of black we don't need to write that so what I can just do now is to say margin is how I write it I let's say left once I say margin left then now when I want to give it a value now there are different values we can give it we can specify how far we want it to be like in in actual numbers like I can say 20 PX now if I run this you're going to see that once I run it there's going to be a space on the left you can see that it moved a little bit so you can keep going like that with numbers right right I can say what 50 now if I say 50 and I run it you're going to see that it's going to move again a little bit so that means I've created a space of 50 PX from the left right I can do the same thing on the right the top and the bottom so that is one way of specifying a value another way I can specify a value is by using using a percentage so I can just specify it by saying 50% and once I run that you're going to see that it has it in the middle so what it what the percentage does is that it calculates the whole width of the you know element and it puts it in like from 50% so this side is 50% of this whole width so that is why we have it there so that is for the percentage what I can just do now is to actually show you what more I can do like I can say instead of having 50% I can say 50 PX so I can specify this was just for the left if I run it it's going to have space in here I can also say I want there to be margin on the top if I say margin top and I also say 50x now if I run this you're going to see now that they it came down a little bit there's not more space here now I can also do the same thing and say margin right I say 50 PX right so I'm saying the Marin right you have 50 PX it's not going to really show any difference because there's nothing is actually um like moving from relative to it like for the left is moving 50px relative to this border from the top is moving 50px relative to this you know this H1 tag but there's nothing in here so that's why it doesn't really move right but I can also say margin bottom and I can say 50px now once again it shouldn't move that's just because there's nothing is moving relative to this right so that's how is going to be and once we have that we basically know that we can specify what particular you know side we want it to move from so instead of writing all of this right here you can see that this is quite a lot of code just you know to make some spacing you can actually compress all of this into one so what I I mean is that let's say I get rid of all of this I can just actually make this one so I can say margin and I can say it's going to have a value of let's say 50 PX 50 PX 50 PX and 50 PX so what this does is that instead of having to right margin left margin right all of that it just uses this to say this first 50px is the top margin this second one is the right margin this third one is the bottom margin and this is the left margin so you can compress all of this into just one line of code but CSS automatically knows what this stand for so you should also know that the first one is the top second one is the right third one is the bottom and fourth one is the left so if I run this you're going to see that there is still some spacing the same spacing as the same margins as we set before now that is for you know if you want to specify four of it but let's say you just want to have three margins now what does this mean this just basically mean this represent the top this represents the right and this represents the button I'm going to run this and you see that we still have the same thing I can do exactly the same thing and just have two margins and you should have guessed by now this just basically represent but this is quite different right this represent the top and the bottom margin right and this represents the right and the left margin so that means it's basically the same thing as saying 50 PX four times because this 50 PX represents both the for the top and for and bottom and this is the right and left if I run this going to be the same obviously and you can also just have one margin if I have just one margin what this does is that this 50px represent all of the four margins so top right bottom left this 50px represent it and once I run this you're going to see that it basically has that the way it is so there's also one more way we can specify margins we can say inherit so let me explain what this iner does so if I come in here and let's say I have this P right under let's say a d tag if I have this P under a d tag right or let's just say something like a b tag so let's say this B this p is under this B tag and I come in here and I'm I actually you know style that b tag and let's say I say margin top is something like 50 PX let's say 60 PX 60 PX so since this P tag is under this B tag that means I can in eror right I can inherit this margin from that b tag so if I want to specify margin top and I don't want to actually like start writing I can just in input in erit and once I input init is going to have the same margin top as this B and when I say in erit what CSS is going to go into it's going to go into HTML and it's going to look for the tag that this is under so since it's under a b tag it's going to come back in here and see the margin top on that b tag and going to do the same thing for this now if I run this let's see what it gives us you can see that we only have a margin on the top so that is a simple way or a basic way of using margins in CSS now we're going to talk about borders in CSS now what I mean by borders is basically like a wrapper for a particular element so for example if you want there to be like a square on this element that's when we use a border so without wasting any time let me just just show you how we actually use bers so there are different styles of bers you can have uh or just a simple rectangle wrapped around this or you can make it dotted or just dashes I'm going to show you what we're going to do to do that so I'm going to get rid of this B and on this P tag what I'm just going to do right now is I'm going to say going to get rid of this I don't need this and I'm just going to say B style now once I say border style CSS now knows that I'm trying to put a border around this particular P tag so now there are various Styles I'm going to talk through every single one of them so let me first put dotted now once I put dotted and run it you're going to see that there's a border around this that is dotted now that's a simple way of doing that actually let me just change this to the H1 just so you can see it better so now we are talking about the H1 tags good so as you can see that is what it does very simple now there's a lot of different styles that we can use and I'm going to talk about all of them right now so the first one is dotted there's another one named solid so if I change this to solid and I run it you're just going to see that it's going to have a solid B around it a normal Square it's not dotted it's just a normal line so if I didn't explain this border style is just a way to to actually or B around this particular element and that b style this particular style says or asks for us to put the value of the style that we want so before we put dotted now we put solid so this is what this solid brings if I put let's say I put there's another one named Groove once I put Groove and run it you're going to see that it basically shows it but like more Slimmer just a normal line and is more fade compared to the solid now if I put dashed and I run dashed you're going to see that it's not dotted it's like a dash dash you know with spacing between it and I can also put double I'm just going through what you can use as your B so if I put double is similar to groove but let's say more thicker than that now I can also put reach if I put rid and run it you're going to see that is how that looks like there's another one named outset outset and inser and once I run this outset as you can see it basically gives you like this alter of this particular you know elements and once I say insert and I run insert you're going to see that it's just the opposite of that the top are thick and the other parts are not thick so what if let's say you don't want to have you don't want the Border you don't actually want to have a border that's you just use none if I run none you're not going to see any B it's just going to be there right andless say I want to have a border but I don't want it to show it's basically give the same result as none but this is hidden so it basically like has a border but it's not showing now once I run that you see that nothing changes then that's just simply because we use hiden now let's say you want to mix different types of bers like let's say you want the top to be dashed you want the bottom border to be solid you want this part to be double you know we can do that what you just need to do is to basically specify what you want so for example the right here where we have this value hidden what you're just going to do is to say say dashed double dotted and solid now if I run this you're going to see that each of these stands for different ones so I'm just going to expand this right here just so you can see it so you can see that the first one which is dashed is right here that's for the top and this um double as you can see is the one right here double is the one right on the right and when you say dotted that represents the bottom and you say solid represents the left so this is top right bottom left so that's just how you can mix different ones together if you want and once you know how to do that that's basically the basics of actually you know inputting a border in uh in CSS but there are more to that like what if we actually want to be more flexible with is what we want to be more Dynamic with this like we want this to be like our own design so for example let's say we want the width of this to be larger so first of all let me just change all of these to solid and now let's say I want this to have a width let me first run that so you can see the output of that let's say I want this to be quite bigger like I don't want it to be this small I can say B I think WID and I can say 10 PX now if I run that you're going to see that this is quite thicker I can change that to let's say 6px just to reduce the thickness as you can see it is less thicker so that is one way of giving a value to the width there are other ways we can also give values just the way when we were're dealing with margins we could give value with with numbers we could also give value with in and all of that but in this one we can give values with PX and and we can also give values with you know the rate like for example I can say medium now if I say medium this means it's going to be thick me you know medium and we can just also say thick if I say thick it's just going to be very thick that's what it is so you can use that to basically specify the you know the width of the border that you want it's very easy but what if we want to just specify different side width like let's say we just want only this part to be 5 PX then we want this part to be you know 10 PX then we want this part to be 11 PX we can do that now the first thing you need to do just the way we could mix different styles we can also mix different width so what we're going to do is we're going to specify for the top we can say the top should have 10 PX and then we're going to specify for the right we can say the right should have 5 PX we're going to specify for the bottom part can say the bottom part should have let's say 11 PX and then for the left part we can say it should have 22 PX now if I run this you're just going to see that is a mixture of different width in the Border Lines so that is how to do that but you can also split it evenly so for example you can imagine I have just two different you know PX two different sizes put here what this is going to do is that it's going to take this 10 PX and input it for the top and the bottom and it's going to take this 5 PX and input it for the left and right it's going to split it evenly so as you can see left and right has 5 PX top and bottom as 10 PX and that is a very simple and basic way of doing that now after specifying the width of what we want we can also add the color let's say we don't want this to be black we want this to be you know you know Green we want can want this to be purple what you just need to do as you I have guessed is to say border color and once you say B color you can just directly give it the color that you want you can just say purple and once we say purple we put our semicolon if we run that you can now see that it has purple now once again we can have a mixture of colors like we can want the top to be green we can want the spot to be purple we can want this part to be Violet we can want this part to be black now we're going to do that right now so we're going to say the top part should be purple and let's say the right part should be blue right side and then we're going to say the bottom side is going to be let's say green and let's say the left part should be red now if I run this you're going to see so each should have a mixture of different colors so okay um the reason why that gave us an error is because there shouldn't be comma in there so what you just need to do is when you're specifying different values you don't actually use a comma I'm going to remove get rid of this comma get rid of that get rid of that now once I run this you're going to see that there's a mixture of colors as you can see all the borders has different colors within them so you can see that uh is also you know very easy to do so instead of also just having like this sty for everything to be solid we can basically I'm going to remove all of this and we can just say something to style like only the top right so for example I can say I want border I top I style so for this you know instead of saying you know before we we basically compress everything into one when we say border style and we could say Dash we could say you know solid weate dotted and everything is just going to be split but let's say you just want to have each of them differently you can say this should be dashed and brother I think you know you can say right style can say dotted also say but I think Bottom St now you can just say you know you can can give you the same thing let's say dotted also and let's say B I left St we can just say dashed now if I run this you're going to see that it's basically going to have different you know ones like this is Dash and this is dotted this is Dash and this is dotted so this is a long way of doing it but the way I said already when we did style like this and then we specify different one by saying let's say dashed and then we can just say dotted you know so this is you know for the top to the top and bottom and this is for the left and right so this is the shorter way of doing it like see how compressed that is now so I also highly suggest that you do that instead of actually going to do every single thing you know one after the other so that is also a good one so for example also let's say you want to have a border but you don't want the border to be a square you might just want it to have a border on the left or on the bottom on the top now what you can just do very simple and straightforward you can just say border for that buttom and let's say dashed now once you run dashed it's just going to have a border on the bottom and it's going to have dashed we can change this to border left and it's just going to have a dash border on the left like this good now you know when we specify the Border button I mean when we specify the Border style the color you know the size and all of that we can just do everything at once like where I have border left instead of saying border left then I'm now going to say border color and B with what I can just do is to First say the width so I can say the width should be 10 PX then I'm going to say the style and then I'm going to say the color let's say purple now what this does is that it allows us to just comp compress all those code we're going to write into one line so instead of writing border width to have the width where you can just have it here and instead of writing border color we can just have it here so if I run this you're going to see now that we have a left you know border of all of this so if I don't want this to just be left I can just remove this you know and now the whole border is going to have all of this so that is very easy and straightforward now the last thing we're going to talk about is putting rounded borders so let me change this back to solid and when I change this to solid let's see cool now let me change this to something like three just want it to be smaller cool now what I want to do is to make this border rounded so if you look into this particular reped pit Plage you can see that this basically has a border that is rounded or as you can see on these edges they're not squared like the way this border is squared these edges are actually cved so that is a rounded border I'm going to show you how to do that on these edges very straightforward what you just need to do is to say B I in radius so now you're going to specify or you know write how curve you want it to be so let's go with 4 PX if want it to be that curve and I run it you're going to see that it is curve 4 PX let's say 10 PX going to be very curved as you can see it is very curved so the more you increase it the more it curves if I run it as 20 PX now you can see that is more curved so that's basically how to do that and I hope you understand everything now about borders in CSS now let's talk about CSS padding so padding is used to create like a space around uh an element or text inside any border so for example let's say we have this I right here and let's say we want to create a space like want there to be more spacing on top here and below here and also on the left that's when we use padding so for us to use padding is very easy for example we already have this border right here now let's say we want there to be space on the top what you just need to do is to say ping I top that easy and now we're going to specify how much we want the space to be can say 40px and then once we run this you're now going to see that there's going to be a space on the top of 40px we can do the same thing by saying padding left and let's just say 40px once you do that there's going to be a space of 40 PX on the left and then you can also say padding you can say bottom and then there's also going to be a space of 40 PX on the bottom so as you can see that works and you can also do the same thing you know for the right side we can just change this bottom right here to right but when you run that doesn't really make any difference because there's already a lot of space here now instead of having to write all of this you know top left bottom right you might have guessed just the way we did everything for border and for margins when we doing margins you can just say padding and then we can just specify let's say 40 PX 10 PX 20 PX and 30 PX so once you say all of that this basically the 40 PX is for the top the right is for 10 PX and 20 PX is for the bottom and 30 PX for the left now if I run this you're going to see that that is going to work perfectly now you can also do the same thing by you know removing one when you remove one this just simply means the top the right and the Bottom now if I remove the second one what is is going to is going to split it evenly so 40 is going to go to the top and the bottom and this is going to go to the left and the right if I run that you're going to see what that does so that works successfully now let's say I just have 40 in here and I run this what this is going to do is that it's going to left the left have a p of 40 top 40 bottom 40 and right 40 so just the way we've been doing for you know border for margins that's the exact same thing that happens here so I hope you understand what is Ping and why we even use padding now let's talk about height and WID in CSS now the height and WID is just used to set the height and WID of a particular element so let's get rid of this all the borders and let's just run this normally so let's say we want this this I to have like a not the actual element but you know around the element the space around the element to have a height of you know let's say 60 PX so what you need to do is just to come into H1 and say height so you can say I and say 60 PX so once you say that and you run it right obviously you might not see any change okay you can see a change now this is the reason why we see a change is because there is now an height of 60 PX around this so This starts from after that that's why you can see the space in this two so for us to actually see it visibly more let's set a background color so when we have a background color of purple and I run it you can see where is it this has of background color of purple now the height of this is 60 PX I can change this to 90 PX and when I changes to 90px you can see that it now has an a bigger height so this height is basically the height of you know everything around that particular element now we can also change the width and let's say I want the width to also be 90 PX now if this WID is 90px and we run it you're going to see that the width was reduced drastically but let's say I just want this we to go all the way from the beginning right from here to the end of the page for me to actually get the end of the page because obviously I I might not know how large anybody's screen is so like for this screen I don't know if the end of the page is 200 PX even if it's 200 PX for another screen it might be 500 PX so for me to get rid of that problem and let it just be all the way to the end of the screen what I just need to do is to use percentage so when I use 100 percentage 100% it's not going to be calculating it based on pixels or PX what is going to calculated based on is the percentage of that screen so now once I run it you're going to see that the WID goes all the way to the end of the screen so it calculates the 100% of that screen if I change this to 50% of that screen then you're going to see that it only stops at off of that screen right here so that is a basic you know thing about height and width now there's also something called Max width and the max width is just used to set the maximum WID of an element is that easy so what you can just do now is right here I can just say Max I width if I say Max WID and I run this it basically just said the maximum weight of that element doesn't really make any change that is noticeable but now we know that the maximum we of that element can have is 50% of the screen now we're going to talk about outlines in CSS so what outline does is that it draws a line outside a border in an element so for example we have this Border in this element right if we add an outline to it it basically just draws a line outside that particular border and what it does is just it just makes that element stand out that's basically the main reason of an outline so very very similar to how we Define uh borders that's how we also Define outlines so let's say we have this border right here actually we don't have a border this is just a normal background color stuff we can just get rid of this and I can say outline style so when I say outline Style just the way we say border style that's how we say outline style and I just want it to be normal solid now if I run this you're just going to see that it has a basic you know outline of solid so it's very basic you can change this to dashed once I run this it's going to be dashed you know you can change it to basically whatever you want to change it to so that is the basic you know concept of outline it's very easy we don't need to you know we don't need to have to put a border or whatever you can use an outline or a border or you can even use both for example let's say we have border right here we can say border and let's say we just say it's 2 PX we can say it is um let's say dashed and we can say it is green so if I run this you're going to see that we have our border normally but then we have an outline after it let me change this to solid instead of dashed so you can see that we have let me just make this a little big you can see that we have this Dash right here this dashb but outside that we have this outline so that's what an outline does it just makes that element stand out or it wraps around the particular element so it's very easy and you know very straightforward but you can also do something to get a space between the outline and the border and that is called the outline offset so what you just need to do is to come here and say outline iing offset so once you have an outline offset let's say 10 PX that means we want a space of 10 PX between the outline and the border so that is what it just does right here this is the outline and this is the Border there's a space of 10 PX so that's how straightforward outlines are it's very easy okay so this is the how we basically Define outlines in CSS now we're going to be diving deeper into texts in CSS so I'm going to show you everything you need to know on styling texts in CSS I'm going to get rid of all of this real quick let me just run that again so what we're going to do first of all is to talk about how to style the colors of a text so if you select an element and in that element you declare a color and give it a value of let's say blue that is going to give the value the color of blue to all the text in that element so that is the easy way of changing a text in an element now we've talked about this you know previously a lot and this is just emphasizing on that so whenever you just say color and you give it a value it's going to look for all the text in that particular element and change it to Blue now you can also you know talk about the background color of a property but that's basically the background color of that text but not of the text actually like we've also done this you can just say background I think color and then when you say background I think color you can just simply say you know red and it's going to give it a background color of red good that is easy and straight forward now the next thing I'm going to talk about is alignment so I'm going to get rid of all these colors don't really want to talk about the colors again now what I want to talk about is the alignment so what I mean by the alignment is to show how aligned the text is so for example if I want this text to be in the center or instead of being on the left I want it to be on the right that's when I use text alignment so for me to align a text what I need to do is to come into the element that contains that text and what I'm just going to do is to say text iph align once I do align I can say right so I can specify three different things left Center and right if I say right you're going to see that all the H1 tags the text in them goes to the right if I say Center you're going to see that they automatically align at the center right here now I can say left but that is just going to be default so as a default if you don't give it a text alignment it's just going to be at the left so if you also align it to left it's just going to be right there where you want it now if I say justify let me change this to justify and I run this now when you run it with justify it doesn't really make any change but if I come in here and let's say I change this to random text and I run this so what justify does is that justify basically stretches out each line so that everyone every line has like equal width and length so what this means is that if we have let's say we have a full text here and then we come in here and we say text align should be justify what this is means that it basically makes sure that this particular text wraps around the whole length of that screen so that is what justify does very easy and after talking about justify the next thing I'm going to talk about is text align last now what text align last does I'm going to change this to iph last what text align last does is that it basically aligns the last line of a text so for example if I say Center right so if I say Center and then I try to run this you can see that it aligns that because this is the last line of the text that is why it aligns this at you know the at the center so for example let's say I just have let me just copy this and just keep going like that and I run it so you're going to see that all of these start from the left but only the last line aligns at the center so that is what test align Center does I'm just going to remove all this and put it back the reason why this also that I also aligns at the center is because it is also the last line even if it's also the first line so that is what the test align last does you can make it right you can make it left you can make it whatever you want so we also going to talk about vertical align so when I say vertical iCal align I'm going to change this to Vertical I align so when I say vertical align what that does is that it basically aligns that vertically so for example let's say that we have this is toy is a guy and let's say that this guy has a P tag oh now let's make a b tag just so that doesn't start on a new line and then let's you know give it like an ID of or a class yeah we're going to give you an ID and let's just say this ID is something like um text so once we give that that ID what we just want to actually don't let us give an ID let's use a class attribute so that we can justas get that from there so once we give this a class what we can just do now we give that a class of text going to copy that text and I'm going to come in here so I'm just going to say H1 no I'm going to say b. text so right here now what I'm going to do is to come in here and I'm going to say B do text and then we can just say say b. text you have a vertical alignment of let me say top now if I run this you're going to see I'm going to wait for that to run so it says toy is a guy so that doesn't really make any change that's just because it's U the size is the same as the H1 but let's say this is actually like smaller like this P right here we it once we make the alignments go to the top is basically going to just shift all the way to the top right here but because this guy is the same size as all of this so when it tries to shift to the top it basically wraps around all the whole you know the whole margin of this particular text but for example let's say you have a smaller text or let's say this a is smaller then it's going to go up to the top a little bit so that is what that does so now that we know about the vertical text alignment the next thing I'm going to talk about is text decoration so I'm going to get rid of this OB it's going to run that again and I'm going to come back in here so right here where we have text decoration so what you can what text decoration does is that it it adds a line to a text very easy very simple so right here where we have H1 what I can just do is to say text decoration line I line I can give a value and say underline so if I say underline this is just going to have an underline under the it's just going to have a line under the text that's what that does now there are different ones and I'm going to try all of them now so we can say something like line through once you say line three is just going to strike a line across the text so you can see there's a line striking across the text if I say overline as you might have guessed there's going to be a line on top of that particular text now you can also add two different decorations together like I can have an overline and I can have an underline if I have both of them together it's basically going to have one on top and also one on the bottom as you can see right there now we can do more we can actually like you know say the color that we want for that decoration line so we can say text decoration color let's just say green once we say that and we run it you're going to see that just the color of that line is green and not the text as you can see it changed the color of that line to Green another thing we can also do is to specify the style of this line like what if we want this line to be you know dotted or dashed or solid what you just need to do is to say text decoration style and I can say dashed once I say dashed this line is going to be dashed so I can also you know change it to double and I can also change it to dotted you know I can use basically any style just similarly to what I use in the borders so that is dotted so what I can also do now is to specify the thickness of that particular line so I'm just going to say text decoration we going to say thickness now we're going to use pixels we can say 10 PX and that is just going to give it a thickness of 10 PX as you can see it's quite thick if I say 90px you're going to notice that very well so okay this should be SS so you should notice the thickness there that's a lot so if I say 10 let me just go back to 10 you can see that that is 10 PX so now instead of having to write all of this you might have guessed again we can just compress all of this and you know have on one line so I can have what decoration do I want let me say overline and the color I want should be purple and the next one you're going to have to say is a style so let's say we want the style to be solid and then the thickness let's say we want you know 6 PX so this is how the syntax goes you first specify you know the one that you want the line that you want the type of line and then you're going to specify the color then the style and then the thickness so once I run this now you're going to see that that works perfectly there's also something else that we can do we can just basically say text decoration we can say none now this text declaration known has come very handy especially when I'm building like pages with HTML and CSS for example let's say we have a link and I'm going to show you this right now so right in here we are going to have an a link and let's just say link and let's just say HF and that goes to hashtag if I run this you're going to see that it automatically has this underline right there right but what if I don't want that line or any decoration on this what you can just do is to come here and say an a tag every a tag should have a text decoration of none because as you know automatically it has this underline decor decoration but once I say no decoration you're going to see that it doesn't have that underline no more but the link still works perfectly so that's a you know very useful tip that I have used a lot and now we're going to talk about text transformation so text transformation is basically transforming the text you can make it upper case you know lower case capitalize you can do a lot of stops with the test transformation so what you can do now is you just say uh let's say text going to come here and type text iph transform so what do I want to transform to let's say I want everything to be lowercase so now you're going to see that all of these text are going to be transformed to lower case I can want it to be uppercase also and once I run that you're going to see that this is all uppercase now now I can also change this to capitalize now what capitalize does is that when we have a sentence every word in that sentence starts with uh an uppercase so if I come in here and let's say Tommy is a guy now every single word on it is going to start with an uppercase so okay this to is a guy belongs to the P tag so and okay what we can just do is to come here and add that P tag so that it affects it also so as you can see every single word in that P tag now basically as starts with a capital case now the next one I'm going to talk to you about is text indentation so I'm going to remove all of this and let's say we have a sentence like this and we want it to start with a paragraph or something like that what you just need to do is to say text indent and we're just going to say something like let's say 30px once I say that you're now going to see that all of this starts you know as a space before it so that's a very simple way of you know showing how to indent your text so and I hope you understand that one more thing the last thing we're going to talk about now is in this old text is the letter spacing so for example let's say you want there to be more space between each letter what you're just going to do is to say letter spacing once I run this letter spacing and now going to see that there's going to be a spacing of 30 PX within every single letter so that is how the later spacing works now I hope you understood everything with talked about concerning text now let's look into fonts in CSS so front just basically allows us to change how the text looks like let me get rid of this spacing letter spacing and just have it back to normal so I'm also going to get rid of a just want to affect H1 and P so what we can do now is to actually change the font of this text so for me to change the font of this text I need to use something called font family now there are there's a lot of like fonts you can use and you can easily search Google to get the list of CSS fonts that you can use but I'm just going to test a few ones now to show you the first one I'm going to test is areial so I can say to use it I'm going to say areial comma so it should give us like vertical and that is under the Sans Ser front so once I run this you're going to see that the font of this has changed to area you can notice that it is now a different font so I can also change this to you see the conso so that's a font and you don't need to know all of this on the top of your head everything is available for you on the internet so I can say new and then this is on Mon space if I run this you're going to see that that changes the font to that particular font so it is very easy to change the font and you know it's not that complicated all you just need to know is the name of the font so I'm just going to comment that out and the reason I commented that out is because now I want to talk about font styling so I can say font style and I can say that this style should be italic if I say this style should be italic it's just going to make the text a little bit slant so that's just an italic style so this is basically a font style named italic and I can also change it to something like oblique and once I change that to oblique you're going to see that that is oblique very similar to italic and now I can just have it as normal if I have it as normal it's not going to change change nothing the style is not going to change just going to be the same way that it is so the another thing I can do is to affect the font weight so I'm just going to say font I weight and if I say font weight should be let's say bold that font is going to be bold if I say font weight should be as you can see there's a P tag but it's now bold can say font weight should be normal and that is just just going to be normal so that is how easy it is as you can see this is was an H1 tag and an H1 tag is always bold but because I told you to be normal now as you can see is normal that board is just normal and the another thing the last thing I'm going to look into is talking about the font size so the font size is basically giving it like the text size if I say size size and let's say I say something like 50 PX and I click on run I'm going to see that this is going to be 50 PX so this is that huge so that's what it just does you don't need to over it what you just need to know is that it changes the size of that particular text now the way we change this size using PX we can also change the size using em so what we can just do now is to say let's say 50 em is actually a lot if I run this you're going to see that it is massive so actually that didn't show here you can see how massive it is so I think 16 pixels equals to 1 em so basically this is like 50 * 16 pixels which is going to be you know let's say 50 mtip by 16 so we're basically saying 800 pixels so that is why it is that huge so but let's say something like you know say 4 a.m and then if we run that you're going to see that it is that huge so that is how to deal with fonts in CSS now let's talk about icons in CSS so for example let's say I want to show like an icon let's say a cloud icon or you know a computer icon or any icon how do I actually show that now we are actually going to use like an external source so let me just get rid of this to make the text normal back and I'm going to come into HTML to actually do this so what you need to do is to go into your heading element and paste this in there now you don't need to know like where what this is what it is just it's that it basically linking a particular Styles sheet which is an external CSS file from a Google API so Google provided like a CSS that allows us to just make icons very very easily so what you just need to do is to paste or right type in this particular code in your heading element and once you type that in your head element what you can now do is to come into your body and when you come into the body wherever you want that icon to be now you need to type it or you need to write that you want the icon to be at this place so we're just going to say we're going to use an element named I and we're going to close it like that and that I is going to take a class of material so we're going to say equals to material I think icons and now we are now going to write the particular icon that we want to show so if we want the cloud icon to show we're going to say cloud we can do the same thing to have another icon so we can say I exactly the same thing we're going to say class and then we're going to say equals and then we're just going to say materials icons and when we say material icons now we can now say let's say we want the computer icon to show we're going to say computer so now we should be having the cloud and computer icon show now if I run this you're going to see that two different icons are going to show this is a cloud icon this is a computer icon that is a very easy way of doing it with Google Icons API that it provided for us now we can keep going let's just copy and paste this what we just need to do is to change this actual value so let's say we want traffic icon if I hit run you're going to see that it gives us the traffic icon now there's a list of icons you can see you can just also like you know go over to the Google Icons page and look at the list of icons that they provide so that is basically it about icons in CSS now we're going to talk more about designing or styling tables in CSS so right now the first thing I'm going to do is to just create a very basic table so right here I'm actually going to get rid of all of this we don't need all of this for now and also of this so right here I just want to create a very basic table we've done this in the HTML section of this course so now we're just going to have table and then we're going to have the TR and in this TR we're going to have the heading so let's just say name and let's say h so those are the headings and now I'm going to have another TR another table row and right here I'm going to have TD which is table data so let's have one name as John and let's say John is you know 15 and then we're going to have one more table row so TR and let let's have a TD and let's just say team and let's say team is 19 so now if I run this this is just going to show me that basic table that we have here name age and all of that as you can see this just looks like a list comprised together we actually want to make it look like an actual table so what we're going to do now the first thing that we want to do is to just make it have like you know some borders so like to have like the lines right here like like the way a normal table will so for me to do this what you just need to do is to select the table when need to select table we need to select this th which is the table heading and we also need to select the table data so I going to come in here and say table going to select the table heading and then the table data so once we select these three what we can now do is to say border we can specify and say like two pixels should be that thick and we want it to be solid now if I run this you're going to see that we have this border that is you know two pixel Stak and it is solid so that is basically how we can do that now the next thing I want to do is to have a width for it so I'm going to have width and let me say the width is 100% And when I run this and say that the width is 100% you're going to see that it extends all the way to the end of the partic table to particular screen so what I want to do now as you can see it looks weird and the reason why it looks weird is because each one has its own border like this has a square around it this has a rectangle around it a rectangle a rectangle I just want all of this to collapse into one line so all of this should just be one line and not double lines on that so what for me to do this what I just need to do is to say border I can say B collapse so once I Collapse this and I run it then you're going to see that everything basically has one line which is very good and this is what we want so that is you know the first step in actually designing this table so we can make this let's say we want this to be 50% so that is basically 50% so that is good that is what we want and now we can talk more about the you know actual size of this particular table for example I can say I want th let's say like I just want only this table to have a width of so what I can do now is I can come down and say t you have a height of let me say 50 pixels now if I run this you're going to see that the height of th is now more like broader so I can you know specify all of this by just uniquely using that as a selection like th then I say I and I give it a value of 50 PX so it is that easy to do and you know that's straight forward now the next thing I can do is to actually talk about this the alignment of you know this particular words like for example I might want this to be in the center just the way the heading is the heading as default is in the center but for the data I want this to be in Center on the right or wherever what I just need to do is I need to just say TD because this are the data right so I'm going to say TD I'm going to say text align and I if I say right you're going to see that all the text aligns to the right side of that particular table but for it to look good I'm going to say Center once I say Center you're going to see that that aligns perfectly so I can also you know change this th to align on the left so everything can align in the left so let's say I want this to be the left I can just you know copy this particular one and come into th and put that in the left so you're going to see now that every single thing is in the left now that is another way of basically doing that now let's say I want there to be spacing between like every one of these like as you can see this is quite congested what I can just do instead of having like increasing the width I can add a padding to it so I can say I can just get rid of this actually and I can say th and TD should have a padding of let me say 10 PX I'm going to get rid of this height now if I run this and now I'm going to see that they all have like an equal amount of space with it so that's basically what that does right and that is straightforward because you know it makes the table actually look very good and that is literally what we want so what we can just do now is to also add some like you know something that we can over over so for example if let's say I want to be able to over over this particular line right right what I need to do is to come here and say table row and what I mean by over is that when I bring my my mouse on this particular part I want let's say it should show a particular color so it can or it should highlight that particular row so it shows that I am over that so that all of this belongs to table row so what I'm just going to do is to say TR which is table row I'm going to use something different this time I'm going to say column over now when I use column over whatever I do here is only going to happen whenever my mouse is on top of that particular element that been selected so what this means now is that if I say I want the background color of this TR to be let's say blue now this is only going to happen it's only going to be true only going to happen when my mouse is on it now let me run this and show you what that is going to do so now when you see that my mouse is on it you can see that the background color changed to Blue now this is is only true when you know my mouse is over it so that is you know a very good one also because it allows you to easily look at or easily highlight what you want to do on the table so this is basically uh the basic way or the simple way of Designing tables using CSS now we're going to be looking at the display property in CSS now what this display property does is that it allows us to you know display a particular element or maybe even hide the element or even remove the element from the web page but the code is still present for example I can get rid of this table and say display shouldn't show or I can IDE it or I can do whatever I want to do let me show you what I mean now for example if I come into table right here and I say display should be none if I run this you're going to see that everything right here is not going to show no more and the reason why this doesn't show is just because we've said display should be known now there are also many other things I can do like I can set visibility to be hidden so if I say visibility should be hidden now instead of this not displaying it also doesn't display but it is still right there now what I mean by it is still right there is if I come in here and let's say I have an H1 one tag and I say I now if I run this you're going to see that this particular H1 tag starts from here and the reason why the H1 tag starts from here and not here is because we set the visibility of that table to be known that means it is still present there but is not showing that is why H1 stack starts from here but if I say display to be none display if I set it to be none this basically means remove that particular one from remove that particular table or whatever element from this particular web page so as you can now see I starts from the top so that's the major difference between display none and visibility hidden none allows us to remove that element entirely from the web page visibility still lets the element be present in the web page but not show now we're going to talk about combinators and CSS now a combinator is something that basically explains like or shows you the relationship between different selectors now there are different combinators and I'm going to explain everything right now so I want to get rid of all of this just going to get rid of all of that and also get rid of the old table now let's say for example we have this H1 tag and in this H1 tag we now have a let me just say I and within this H1 tag let's say I have another B tag that says a so this B is inside this H1 tag now what I can just do is to say I'm going to use something called a descendant selector so if I now say H1 and I leave a space and say B what this is going to do is that it's going to select all the B element inside an H1 tag and whatever we do here is going to be done to that so if I say color should be red now you're going to see that this a is going to be red now as you can see a is red now what this is is a descendant selector which means that it select all the elements that are inside this initial element so that mean select all the B element that inside H1 now if I create another B element let's say I just create another one like that if I run this because that b element is still there you can see that it says that and imagine I have a p element right and inside that P element and I have a b element that says what's up and once I run it because B element is still under this H1 element right is still a descendant of it is still going to affect it and it's going to be red but now if we use a child selector it's going to be different so what we just used now was a descendant selector but what we want to talk about now is a child selector now if I say H1 greater than b this means that it's going to select all the element that is a children or that is a child all the B element that is a child of H1 so if I run it you're going to see one difference and I'm going to explain why you can now see that this is no more red this is black now the reason why is because if I come in here he looking for only the B element that are children of H1 even though this B element inside this P let me just make this like this so you can see it better even though this B element that is within this p is still under this H1 but because it is not a direct child of this H1 it's not going to be seen as a child selector so if I have let's I have one B outside this P after a that b is going to be that b element is going to be red as you can see but because this B is not a child of H1 is a child of p and p is a child of H1 that's why this is still black now that's the main difference between a chart selector and a Depend and a descendant selector now the next one is an adjacent sibling selector now this just basically selects if I'm I'm going to use plus to note this but this select all the adjacent B after an H1 if I run this you're going to see that none of it is red now the reason is because all of this are children of B but they are not really after B so if I come in here now and I paste this so this is adjacent to H1 it's not a child of it but it is after H1 once I run it you're going to see that this one now is actually red now the next one I'm going to talk about is General sibling selector so this a sibling selector only selects the one that is adjacent to it so if I come here and paste another B and run it you're going to see that what shows on here is not going to be as you can see it is not red this is because it only takes the adjacent one to and this is the only adjacent one to H1 this one is adjacent to B it's not adjacent to H1 but if I use the general siming selector which is this right here so we're just going to get that particular one the there's a sign to select the adjacent C selector and it is this particular sign right here so once I use this sign this shows that any B that is you know that next that like siblings of H1 is going to be red now once I run it you're going to see that this second one is also red now this is because this second one also come as a sibling to this it's not just only looking for the one adjacent to R it's looking for the one that is close to H1 so those are the major four CSS combinators now we're going to look into building drop down menu so you know normally when you have like an option where you can like over over it and once you come over it you see something that drops down like a menu I'm going to show you how you can build that right now so this is fairly easy what we just need to do right here in the HTML body I'm first of all going to I remove everything in the body and what I just want to do is that I want to create a div class I'm going to create a new div class we talked about what diff class as well I'm going to create this de class and I'm going to just have it like that and I'm going to give it a class of of drop down menu so I gave you a class of drop down menu so this is what I actually want to be dropped down right but right here I want there to be like a button that we are going to over over and once we our mouse goes on it we want this drop down menu to show so here we want to have a button so there's a button element that just allows us to have a button basically and right here we can just say drop down menu or button so now we can have a class and we can make this class say drop down drop down button so I just given this class so we can identify it later in our CSS so now that we have this this is basically the drop down button if I run this let's see what we have you can see that we just have a drop down button normally and this div class we're going to have a basic link so let's just say a let's close it and let's say um I know menu or we can just say list and then we can say for now let's just make it go nowhere so we can just say link to hashtag so we have let's say four different list if I run this you're going to now see that we have that button with four different lists right but what I want to do now is I want first of all I want this list to not show and I want to style this button a little bit okay let's take it a step at a time let's first style this button a little bit so what I'm going to do is to come into styles. cxs and I'm going to come here and do this I'm going to get rid of this and this drop down button since I want to style it I'm going to take that drop down class and I'm going to say dot drop down button so I want to give you a background color let me say I give you a background color of blue so now if I run this it should have a background color of blue which is good and I want to give the text color so I want to give the text color white I want the color of the text should be white so let's see good and what I'm just going to do is to say padding just so there's going to be a little bit of space let me give the padding something like 13 PHX so let's have our colon right here and I'm going to run this so that is good and what I'm now going to do is to say let me just try to add some font size I'm going to say 16 pixels so I just gave that the font size so now it looks a little bit bigger and what I can just do now is to say B none now the reason why I'm saying border none is because as you can see on this particular button it has this border that wraps it around but I want to remove that so that's why I say B none if I run this we shouldn't see any border no more which is good and now to say Crosser and I want the Crosser to be pointer so we're going to run that curer pointer right good so that means when we come on this the curer is going to change to a pointer as you can see that and icon is showing when we come on this so we've done we've designed this the way we want it to be the next thing I'm going to do is to actually now come and this list I want it to First be a list and then I want it to not show until till my mouse comes over this particular button now let's go ahead and do that so what we just need to do is to let me copy this drop down menu class so yeah I'm going to say do drop down menu and first of all I'm going to say display since I don't want to display it I'm going to say display equals none but I'm going to leave that blank for now because I want to see the changes I'm making so let me say the position is absolute and once you say position absolute we can then let's run this first of all so let's make sure this is this and then let's say we give you a background color let's say something like blue but this time around let's give it light blue so if I run this you should see that that has a background color of light blue and what I also want to give it is a minimum weight we talked about this I'm going to say mean weight and when we give it the mean weight we're going to say something like 150 pixels and then what we are just going to do is to let's just run this okay great so what we can now do now is to say the for the list under this we're going to say do dropdown menu a want to say for the list under this the a tag we want the color to be black we're going to give you a padding of something like let's say 11 pixels and 15 PX let's give a text decoration of none because it is a link it's going to have this underline text decoration so let's make sure the text decoration is none once we say that we can say display so we can give the display value block now if we run this this should you know show the changes as you can see now it's been listed this way which is what we want and then we give a text decoration of none so now it's still a link that mean I can still click it and it's going to take me somewhere as you can see but it just doesn't show that underline no more which is what we want so now we want to have an over so what we want to do is to say that the drop down content right we're going to say a but what we want to do instead of just saying a directly we want to say a over I'm going to do this and say over and then I'm going to give it a background color so I giving this a particular background color when you know we over over every single list on it so I'm just going to give a background color of you know let's say white let's see how that looks like if I run this and I come over you can see that when I over over each of it now it turns white so what I'm now going to do is that I want is to only show so first of all let me make the display of this let me remove that comment and make the display of this none so now you can see that let's wait for it the list is not showing no more but I want this list to show only when we over on this so what I'm going to do is to say do this drop down right here which we already had from the beginning so what I'm just going to do is to say dot drop down we're going to say colon instead of saying this we're going to say over and then we're going to say dot this drop button what we want to do now is to just just basic okay so the first thing that we actually need to do is to say the drop down over we're going to say the drop down menu so this old menu we want the display to be block right so we're going to say display block now when we run this what we want is that when we over over this this should have a display of block but this doesn't have a dis display of block so the reason why this doesn't have a display of block is simply because when we come in here we want to have this diff class to be so we have this that has a class of drop down menu we actually want Let's see we want all of these to be wrapped in a diff class so let's say we cut all of this and say div right and then we say this is like class and then we just say equal was you know let's say drop down now since we know we have this drop down here we can just say from drop-down. over that means all of this colum over we want to show drop- down menu now let's see what this does so as you can see now when we over on this it basically shows that drop down menu this is literally what we want to happen now what we can do we can just add you know a little bit of Source on it and say the drop down and when we overun it we now want to even change the color of this drop down button to maybe something lighter so we can then say dot the button so the class of the button is drop down button we're going to say dot the button and we're going to say background color could be something like let's see gray let's try that out now when we run this you can now see that we have a when I overrun it the colors Chang to Gray and we have this basic list right here now that is literally what we want to happen and that is what has happened now we can also you know as you can see everything is basically done successfully but we can just come in here and under this drop down button let's say we just want to add some styling to this drop- down class I'm going to come here and just say do dropdown and I'm going to have it let's say the position should be relative and let's Ed the display in line so we talked about this when we were looking into all the different display and all of that in CSS so as you can see everything basically Works successfully right now we can also have this list come into the you know Center if you want that is you know optional but as you can see this is a basic drop down and once we come over this we can basically look at all of this and we can click on it and it takes us to a particular link so as you can see all of that works successfully that's how to build a simple drop down with CSS now let's look into attribut selectors in CSS so let's get rid of all of this and I'm also going to get rid of all of this and let's say I have let's see a div Class A div element that has a class of let's say test and in here we then have a p that says I so if I then run this we just have a basic diff class as a p that says I that's that so right here let's say we want to change something to this old div class instead of selecting it using its element name we can select it using his class name so what we can do is to come in here now and we can just simply say div so it's going to say any div that has an attribute name class then we want to change the color to Red so if I run this you're going to see that the color of this changes to Red now this is because we selected a div that has an attribute of class so that is a very basic way to actually select an attribute but an element by an attribute but let's say that you want to select with the exact value for example let's say I want to select the element that has a diff class no that have a diff element and it has an attribute right with a value of test what I need to do is to say div and then I'm going to say class equals I'm going to write the value so this is still going to be I right and it's going to have the red this is because it's going to look for a diff class with a diff element with a class named test so if you come in here you're going to see that we have a div element with a class name test imagine I just remove T and I say test now this is not going to be red no more it's just going to be black because that is not true for this particular condition so that is a basic way of you know selecting with the value so that's how to use attribute select to in CSS now that you know the basics of HTML and CSS I'm going to teach you how to code in JavaScript you're about to learn all the basics of JavaScript programming by coding an RPG game line by line this way of learning JavaScript will help you understand better how everything works together so if you're following along you'll be able to you'll be able to code each line right before I do based on my instructions there is some starter code so go to the link in the description and it should open up just like this and then you can Fork the repple this will give you my starter code so just click fork reppel and then you'll have to sign up or log in if you haven't already so this is the starter code for the RPG I've already provided the HTML and CSS and we're now going to create the JavaScript so let's look what the code lookss like so when it's loaded in the browser it looks like this so you can see it's a text based RPG and it will give you a description of what's happening right here and then you'll have a few different options in these buttons here and it's going to keep track of your experience Point your health and your Co your gold now right now none of these buttons do anything we still have to create that and all of this is just hardcoded right now so you can see in the HTML uh we've already learned about how set up an HTML page so a lot of this should look familiar to you so you can see we have a div full of the stats at this that's this top div and then we have a div for the controls those are these controls here and then we have um uh this special one called Monster stats and this is not showing up yet because we're using CSS to hide that uh for now and we we're also we're basically hiding this whole section the whole monster stats section and uh because that will only appear if you're fighting a monster and then we have our main text here and you can see um we have all these elements of the page but nothing is happening yet because we haven't created our JavaScript but let's look at the CSS really quick so this is also provided and it's basically just styling the page how you can see it and one thing to look at is the monster stats which I already talked about currently it's set as the display none it's only going to show the monster stats if you're fighting a monster but we're not yet fighting a monster we haven't even implemented that feature of the game yet so now we'll go over to our Javascript file so if you want to just kind of explore the HTML and CSS a little more to understand you can but we're now going to code this game from scratch and you are going to code the game step by step based on my instructions so I'm going to just close this section here I will zoom in just a little more so you can see the code a little better so the first thing I'm going to have you do is create a variable but first let me show you how to do that I'm going to do VAR XP equals z and we'll zoom in one more time and I can just put a semicolon here so to keep track of the player's experience points we've declared a variable called XP and then we've assigned it to the starting value of zero so I want you to follow this example and create another variable to keep track of health and start it at 100 so hopefully you're following along you're trying it before I show you so now I'm going to show you our health equals 100 and so you can see we follow the same pattern so this is so we say it's a variable with v then we say the variable name and then we assign it with the equal sign and then this is the value that we're assigning and then the semicolon here in JavaScript semicolons are optional so you can use a semicolon to signify that it's at the end of a line but you don't have to do it but for now we're going to use semicolons so now now that you have the pattern down see if you can create another variable called gold and set it to 50 okay now we're going to create another variable and this is going to be called current weapon and we're going to set to zero but when a name has two words the convention is to use what's called Lower camel case which is how you do is the first word is all lowercase and then the first letter of every preceding word is uppercased so we'll do current so we'll do VAR current weapon equals zero so we've been declaring laring all our variables with v however in modern JavaScript it's better to use let instead of VAR you can actually there's three ways to to declare a variable you can use VAR let or const it's better to use let instead of VAR because it fixes a number of unusual behaviors with VAR that make it difficult to reason about so let's change all the vars to let and one quick way to do that in repet is I can highlight the first VAR and either do command or control D to highlight the next and every time I press command or control D it highlights the next instance of VAR and now I'm actually using multiple cursors and I can just type in all at once so I change them all to let now let's declare a variable without initializing it so in every one of these examples we've initialized the variable that's this part where we set it to equal something but you can create a v if you just don't put the equal number equal value you can declare it without initializing it so using the let keyword let's declare a variable called fighting but not set it equal to anything so it's just like this let fighting now we'll do the same thing with variables for Monster Health and inventory it's common to just create all your variables up front toward the beginning of your program before you start using them you want to have them declared before you use them later in your program so we'll we'll do let Monster Health and let inventory now let's set the variable inventory to equal a string stick strings are a group of characters surrounded by a quotation marks so we'll do equal string or equal stick and we use double quotation marks but you can also use single quotation marks as long as the quotation mark are the same another thing you can also use back ticks but you just have to make sure the at the beginning and the end are both the same for now we'll just use double quotation marks now right now the inventory is just a single thing a stick but the inventory can store multiple items so we're going to change the value of inventory to be an array with the items stick dagger and sword and array is basically just a a list of different values you can store multiple values in an array and you you create array by putting brackets around the list of values so it's just going to be like this so the first item we're going to put the bracket here stick and then we will have dagger and sword and then we do an in bracket there so now we've created an array of three strings now putting three it in this list was just an example so for now let's just start the player with just the stick so we're going to keep this as an array but we only want one item so we're going to delete dagger and sword those items and then later will give the player an opportunity to add more items to the inventory but it has to start out as an array if we want to add elements to the array in order to update HTML elements on a web page on an H HML page you need to get references to them in your JavaScript code so here's an example this is not the one we're using I'm just giving you this as an example where we can this will get a reference to the HTML element with an ID of L because this is the CSS CSS selector for ID and it's going to have the ID of eel and we're going to store that that HTML element in a variable called l what I want you to do is update this to get a reference to the HTML the HTML element with the IDE of button one and assign it to a variable with the name button one so basically we are just going to do button one and button one let's just look over at our HTML really quick so you can see where that is if we go to the HTML and we can see here the button ID of button one that's this one where it says go go to store so now we're getting access to this element and we can do things to it like we can change the text in the element or basically do whatever we want using JavaScript once we have a reference to that element so we'll go back to our JavaScript and now what we're going to do is change this let to const so I already told you earlier that you can create a variable with VAR let or const so VAR allows the most changing basically so so you can basically do anything you want with a VAR later but you may but that could open yourself up to bugs and const it means that it is the least amount of changing once you declare a variable as a const you cannot update it so we do we are going to want to update the XP the health the gold but now once we get access to this button we're never going to want to update this variable we're not going to assign button one to button two it's always going to be button one so that's why we can use const uh you B you want to use const anytime you are creating a variable that should never change if the value is never going to change you declare the variable with const because it's a constant so now we want to we want to get access to a bunch of other elements on the website we're going to basically get access to elements with all of these different IDs I'm just going to about to paste it in here but you can give it a try yourself if you want first okay so we got these all pasted in so basically we have access to all the different elements on our website that we want to update using JavaScript so now instead of typing this whole thing in every time document. query selector and then the ID we can just refer to the variable okay now we're going to make a comment to describe what the next few lines of code will do comments can be written with either two forward slashes or with a multi-line sequence so if you're going to make comment on one line it can just be two forward slashes and you can do comment or if you want to make a multi-line comment you can do slash star at the beginning and star slash at the end and then you can say this is a comment and then you can see that the comment the code editor automatically makes comments gray and because this is a multi-line comment you can see it's all gray here so basically we just want a single comment that's going to say initialize buttons so now this indicates what the next part of code will do so let's designate what the first button in the HTML does by setting the onclick property of button one and we're going to set that property to the function name goto store so here's an example of how you would do it for a different button so this is just a generic button and if you want to make the button open a pro call the function open program you could do it like this but we're we're trying to make it so button one will call the go store function which is a function we'll create later so basically it's going to be button one and just go store and so we can see that the button one already says go to store so now when we click the button one it's going to call this function which is going to make our game go to the store in the game now we're just going to follow the same example to set the onclick property of button two and button three to be go cave and fight Dragon so I can just actually copy this line paste it in here so this will be button two button three and it'll be go cave and fight dragon now we're going to create a function so we already made it so these functions will be called when you click the buttons but let's now create uh these functions that are called now functions are are just a group of a a section of code that you can run over and over again every time you call that function so it's a way to repeat easily repeat code so every time that function is called it just runs all those lines of code in that function so let me show you how you would just create a generic function so see you always start with the word the keyword function and then you do a space and then you put the function name which can be anything and you're always going to have two brackets or two uh parentheses and then these curly brackets and inside the curly brackets are where you put the code that's going to run when you call the function so right now instead of creating the function called function name we're going to create a function called go store so that's pretty simple you just do go store that's what it's called now okay now let's make this function do something we're just going to basically do some example code really quick but we're going to make the go store function output the message going to store to the web cono so basically we do console.log and then in parentheses we put the string going to store just like this console.log so it's going to log it to the web console going to store and that's it now we have something that this function will do and now we've actually done enough to to test our program out so what now when we click goto store it's going to put going to store in the console now where is the console it's not this this isn't the console this is part of the website so to get to the console you can do it either from your browser's Dev tools or right in repet we can click this this um thing this uh this wrench here toggle developer tools and now down here we have our console so click the Run button and now we we do get the this go cave is not the because we haven't created yet but we still should it still should work I'll click go to store and it says going to store right in the console so let's create a go C function that will console that will log to the console going to cap so I can just copy this and just paste and put go cave going to cave and then we'll just create a fight Dragon function that will say fighting dragon so we'll just print uh paste in another one here and this will be called fight dragon and it'll say fighting dragon and now we should be able to run this and we don't have get an air down here because all the functions are defined so go to store go to cave and fight Dragon we can see in the console those are appearing okay well let's do some refactoring refactoring is when you change code to improve code or make it better that you've already created so we're going to change the go-to store function this was just kind of to demo it we're not actually going to um console going to store and we're not going to log that to the console because when people are playing the game they won't actually be seeing the console so when we when a player clicks the go to store button the buttons in text in the game should change so what's in these buttons should change and what's in this text up here it should tell you what's happening at the store right down here so we're going to remove the console.log we're going to remove this and we're going to add a new line of code inside the function that updates the text of button one so it says buy 10 health for 10 gold so I'm going to U delete that and then let me just show a quick example we're not going to use this one but this is how you would update the text of a button button. iner text and then s what it equals and we're going to make the button one say by 10 go by 10 health for 10 gold so we just change this to button one and then we just change the text in here the inner text is now going to be by 10 health and then we'll just put in parentheses 10 gold now we also want the text of button two to say buy weapon 30 gold and the the text of button three to say go to Town Square so basically you're going to go back to where you began so I can just copy this and then we'll do button two button three and then this will say buy weapon for 30 gold and go to Town Square so now that the text on these buttons have changed the onclick properties on the buttons should change so inside the ghost store function will update the onclick property of all three buttons the new function should be by Health by weapon and go town and you should already know enough right now to be able to do that all on your own but basically I can just copy the the initializing these buttons and then put it here now see how it's not indented the same amount um now indent indenting is actually optional in JavaScript is just to make sure your code is more readable but it's still good to do any time something's in a block of code in these curly braces you want to indent it the same amount even though it doesn't actually impact how your codee's working so I'm going to highlight everything and now I can just press Tab and will'll indent everything at once so the button one is now going to say by Health uh button two or is not going to go to not say um by weapon this is the function that's going to be called and then go town now we're changing the inner text of the buttons but we also want to change the inner text of this section here that's the the property this is the has the ID of text and we want to say you enter the store so I'm just going to copy this again and just say text you enter the store and now let's create three new empty functions called bu Health buy weapon and go town so to create a function you have to use the keyword function by health parentheses and that's just going to be an empty function and then we'll do another one and another one so by weapon and go town and at this point we can test it out so if I click go store I'm going to just move this here so you can the buttons still stay in a in a row here so you enter the store and and unfortunately we can't go back to the town yet but we were able to enter the store if I refresh this I can try it again go store you enter the store okay so every time you click a button it's basically going to do all these things it's going to update the button One update button two update button three and then change the functions for the buttons and it's going to put some new text here so we're going to um move this go town function to be the first function and then we're just going to copy all this and put it in that function so I'm going to just do command X or control X to cut it and then we'll put it right here Commander control+ V and this time I'll do controll or command C and then I'm just going to paste it and basically when you go to the town uh we want all this to be what we started off with all the text we started off with is what's in the town and all the click the on clicks we started off with was what we want the town to have so I'm just going to just hasten the updated the updated code with go to store go to Cave fight dragon and you can see these three are the same as these three but instead of the text being you enter the store now we're going to say you are in the Town Square you see a sign that says store you see a sign that says store well this should be actually in quotation marks because it's what it says so let's put quotation marks around the word store so now we can see based on what uh the color of the this that something's wrong um so usually strings are this brownish color but it's switching the black and we have these squiggler lines because you can't put quotation marks inside a string well actually you can't I'm going to show you how if we put a backslash before each one you can see now it all is the right color so putting this backlash this is called escaping and it it's signifying that the next character after that slash is not supposed to be it's not supposed to be the end of the string it's supposed to be literally rendered so there's quite a few different special characters that you can use that you can put in with escaping the character like that so you may have noticed that there's some repetition in our code so if we look at this all this code looks very similar to all this code and when you have repetition and code it's assign that you need a new function so above the go town function let's add another function we'll create an empty function called update this time the function should take a parameter named location so data can be passed into the function when it's called a parameter is a variable that you just put in the parentheses so let me show you what that looks like so we have the function called update and this is the parameter we can now pass in when we call the function we can pass in the location so let's create a new const here called locations and we're going to set it equal to an empty array this will be used to store all the data for the locations in the game now arrays can store any data type including objects objects are similar to arrays except that instead of using indexes to access and modify their data you access the data in objects through what are called properties so inside the locations array We'll add an empty object using curly braces uh so basically we just put these two cly braces in here so now inside the array in there's one item which is this empty object and the object is going to consist of key value pairs so let me just give you another example of an object so here is an an array that has an object there curly braces and there's one key value pair the name is the key the value is Quincy Larson so we're not going to use this this is just an example so here now now we're going to create a property called name or the property is also another name for a key so the property name called name with the value of town square so we'll just put these onto new lines like in the other example we saw and then I will do name Town Square so now after the name property we're going to put a comma and then on the next line we're going to add a property named button text that has a value of an empty array but since button text is two words instead of name is this one word we're going to need to put quotation marks around it so I hope you're following along and you've tried this so as just as a reminder you should be trying everything right before I show you and that will help you learn this on your own so we're going to do button text and then we're going to just set that to and empty array oh and like I said we do need a comma here so each element in the object each uh each key value pair in the object is separated by a comma so we have two two elements in this object okay so now this button text inside this array we're going to make it a a list of three strings we're there's going to be three elements inside the array and it's going to be the button text that we see in the go town function go to store go to cave and and fight Dragon so I'll just actually paste that in there just like that and now we're going to add another property in the object with the name button functions and the value should be an array containing the three onclick functions the GH store go k fight dragon and you see these aren't strings so they will not be strings in the array either so it should look just like that now we'll just add one final property called text and it will be the text from here you are in the town you see a sign that says store just like that the locations array currently has one element which is an object within the array and after the object's final curly brace We'll add a comma and on the next line within the array We'll add another object with all the same properties as the first object we'll keep the property names the same on the second object but change all the property values to the information from the go store function and we'll set the property name to store so I'll just go up here and I'll just paste it in to make it a little quicker here so now we have an element in this array that's an object containing all the information from the go store function now we can consolidate the code inside the go toown and go store functions so we'll copy the code inside the go toown function and paste it in the update function then we'll delete all the code code inside the go toown and go store functions so we're going to come down here so here's where we're going to copy that and put it right in the update function and then we don't need this code here now and then we don't need this code okay so instead of assigning the inner text and the the onclick like we're doing now the update function will now use data from the location that's passed into it First Data needs to be passed into the update function so inside the go toown function we'll call the update function so to call a function you just put the name and then parentheses after it so we now have called the update function so when you call the go toown function it will now call the update function and we're not just going to call the function when we call the function we need to pass in an argument see it accepts a location when we call the function we can pass in a location so here we're going to pass in the locations array just like that and so this is the locations array right up here so the locations array actually contains two locations the Town Square and the store currently the entire array with both locations is being passed in into the update function but we just want to pass in the first element of the locations array so we can do that by putting brackets at the end and putting a zero just like this so this is going to pass in the first element in the array because in programming counting starts as at zero so zero is the first element one is the second element two is the third element and so on so when you put the name of an array and then use these brackets and then put a number in those brackets that's how you specify a single element in the array so now that the go toown function calls the update function with the first element of the locations array it's time to use that location information to update the inner text and onclick properties inside the update function let's change the button one.in text this one right here to equal the the button text the the location button text so we can do it like this uh we'll get the we'll use location that's what was passed in and then we'll use brackets just like before but to specify a specific part of the of the object um we're going to do do it just like this see how we have button text we want that button text so that's what we're going to put I just copy that I'm going to paste it in here so the location with brackets buttton text that's how we access a specific element in an object and you can see this just happens to be an array and we already know how to access a certain element in an array which is the same way we we use brackets again and we put the index number in this case index zero so the location gets us this whole thing and then we put the bracket button text that gets us this and then we put bracket zero that gets us this so we've now accessed the go to store so now let's update this these next two items using this same pattern so I'll just paste these in and then we can just do element at index one element at index 2 so the first second and third element now we can just use the same pattern for the onclick of the buttons so I'm just going to past P this in but instead of button text it's going to be button functions so I'll just copy the word functions button functions and it's still going to be zero again because the first item here so let's update go the go cave fight Dragon 0 1 2 and then finally we'll update the text. inner text to also get from locations now there's there's two ways we can do this we've been using bracket location which is just like this location text so we could use this notation but we can also use do notation so to use do notation just two ways to do it we'll do dot text so we can do location Dot and then you just put the word here now this only works if it's a single word like this uh when your uh key is two words like button functions you have to use bracket notation but for the text we can just use the dot notation okay now we'll just update the go store function and so the code should look basically the same as the go toown function except the number zero should be change to one so let's just do that really quick and then it will be time to test our game so up to locations one and and now click run and we should be able to move between the store oh good see it has the information for the buttons we have you enter the store I can go back to the Town Square you are now in the Town Square you see a sign that says store so now we can move between the Town Square and the store if we press these other buttons nothing happens we haven't done that quite yet but this game is starting to work now I'm just going to shrink this a little bit and we're going to add a third object in the locations array and it's going to have the same properties as the other two objects the name will be cave and then the button text is going to be fight slime fight Fang beast and go to Town Square and then the button functions we're going to have some new functions fight slime fight beast and go town and then the text is just going to be you enter the cave you see some monsters so maybe you tried that on your own I'm just going to paste it in here see we have the cave with a new button text here and then new button functions a few of these we still have to create and you enter the cave you see some monsters so now we'll just update the goave function with using our calling our update function and let's create some more empty functions here it was for the fight slime and fight Beast so fight slime so now that the store and Cave locations are complete we'll code the actions at those locations so first we'll do the by Health function so inside the by Health function set gold to equal gold minus 10 so it's just like this gold equals gold minus 10 and you can see we're getting the gold from our variable that we've already said we start with 50 gold but when you buy Health we're going to subtract 10 from the gold and if we're subtracting 10 from the gold we need to give some health so let's add 10 to the health so that's pretty straightforward but let me tell you about a quicker way you can do something like this so there's a shorthand way to add or subtract from a variable called compound assignment the long way to add it is like this but there's a short way where you can do Gold Plus M or where you can do gold minus equals 10 so let me show you if we just do minus equals 10 that's just the shorthand of subtracting 10 from whatever that value is and assigning the new value to the value so this basically does the same thing as before so let's change this to also use the compound assignment so it's just going to be health plus equals 10 so the line that I change this from does the same thing as the line that I Chang it to okay now that the golden health value variables have been updated we need to update the values displayed on the screen so if we look at what's being displayed here we have health 100 gold 50 well we've changed the variables but it didn't actually change anything on the screen so how can we do that well we can use the we can set the inner text to Gold so for the gold text. inex let's set to gold and we'll use the same thing for health Tex so so gold text. inext equals gold Health text. interex equals health so we can update the text on the screen so what if the player doesn't have enough gold to buy Health well let's put the code in this buy Health function we're going to put all this code inside an if statement so let me just show you how to do that so I'm am going to add an extra line here and it's going to say if and we want to say if condition will update that later and then I'm going to put curly braces just like we have the Cur it's kind of looks similar to a function where we have something in parenthesis and then we have the curly braces I'm going to copy this or I'm going to cut it and then I'm going to put it here let me get the T tabs correct okay so this is an if statement so if something is true we haven't specifi what we want to be true though but if something is true then we do all these things right here if this is not true then all this code will be skipped this is called a conditional so it's code that you only want to run in a certain circumstance in this case the circumstance is we want to check if the amount of gold the player has is greater than or equal to 10 so we just have to do gold is greater than or equal to 10 so if this is true if the variable is equal to greater than or equal to 10 then we can buy Health if not all this will be skipped and we cannot buy health and you can also do um instead of just great than it can just be instead of greater than equal to it could be greater than it could be less than and so there's a a few different conditional operators that you can use but we're just using greater than or equal to so if you want code to run only if this is false then we can put an else statement so an else statement is just like this else and then we put curly braces so any code in these curly braces will run if this is false so if it's true we run this code if it's false we run this code so if the player doesn't have enough money to by Health we'll inform the player we'll set the text in text to you do not have enough gold to buy Health just like that okay so before we write the code for the buy weapon function we'll use const to create a weapons variable right above the locations array and set it to an empty array so going to co-a we got the locations array and then I'm going to do const weapons equals empty array and just like in the locations array all the elements in the weapons array will be objects so we'll add four objects to the weapons array each with two properties the properties are name and power so the first should be should be the name stick with power set to five then dagger with power set to 30 claw hammer with power of 50 and finally soared with power of 100 so if you do all that it will look like this so we can see we have all the different weapons and just so you know these don't all have to be on different lines this whole thing could actually just be one line of code but spacing things out this way just makes it more easily readable for humans so let's go back down to the buy weapons function and we'll we want to check if gold is greater than or equal to 30 so just like that and we're going to put some code in this if statement if that's true the first thing is we're going to set gold to equal 30 less than its current value so gold minus equal 30 and you can see every once in a while I forget the semicolons and it it is they they are optional it's just usually people just use always use semicolons or never use semicolons so if we go back up to the top we can see that the value of current weapon uh is going to correspond to an index in the weapons array you start with the weapon at index zero that's stick so let's go back down to BU weapon and the player starts with a stick but in The Bu weapons function we want to add one to current weapon since the user is buying the next weapon in the weapons aray so we just do current weapon plus equals 1 oh and I this was supposed to be an equal sign that you probably heard me say it and you probably notice but yeah minus equal 30 so just how there was a shortcut when we at first we did gold equals gold minus 30 and then we did a shortcut to do gold minus equals 30 since it's so common to want to increment by one or decrement by one so add one or subtract one there's a shortcut just for doing that so whenever you want to do current weapon plus equals 1 or current weapon equals current weapon plus one here's the shortcut just current weapon Plus+ so doing Plus+ just adds one to the current weapon and now we'll update the inex property of gold text and text text is going to equal you now have a new weapon so it should just look like this now let's tell the player what weapon they bought so in between the two lines that we just wrote in between these two we're going to add a new line we're going to use let to initialize a new variable called new weapon and set new weapon to equal weapons so new let new weapon equals weapons so right now we're just making equal the entire array but now we're going to add bracket so we can get to an individual weapon and we're going to set it to the current weapon so instead of just putting a number here we can put a VAR able and this is going to be the index of a certain weapon in the weapon array weapons array but we don't want just the entire weapon we just want the name so we can use do notation and do do name and now let's see how we can insert variables into a string we can do that with the con concatenation operator which is actually just a plus symbol so we're going to update this string to at the end of a string add a plus and then put the the new weapon so we want this to say you now have a and then put the new weapon so basically it's going to be like this you now have a and then I will do plus new weapon so this is outside of the string and we have to make sure we put the the space here so it's going to put in a space a new weapon but we also want a period at the end so we're going to have to concat a period at the end you now have it and then it's going to show the new weapon so way back at the beginning we made this Vari variable called inventory and the inventory it starts off with just a stick so what we want to do is add a add the new weapon onto the end of the inventory because you still keep the inventory what you already have will still keep the stick but if you buy a new weapon now you should have the next weapon in your inventory and you can do that by using push so we just do inventory push and then we put the the new weapon in parenthesis it's just like this we'll go back down here and then we will where is it inventory. push new weapon so we've added that to the inventory so so far anytime that inner text was updated the old text was completely erased but this time let's use the plus equal operator instead of the equal operator so we can add text to the the end of text.in text and we're going to add the text so we're going to still we're going to have this text but then the next line we are going to add a string in your inventory you have and then we are going to put what we have in our inventory so it's basically going to look like this text. inext plus equals and we're going to have a space because we want to have space after this period and in your inventory you have and then I can just put inventory now this is an array and whenever you print out an array it's just going to put every element in the array separated with a comma okay now we just want an else statement and the else if it's just going to say we're going to update in Tex to say you do not have enough gold to buy a weapon just like that once a player has the best weapon they can't buy another one so let's wrap all this code in The Bu weapon function inside another if statement so basically it will be a NE we'll have an if statement inside another if statement this is called nesa if statements so this outer if statement the condition should check if current weapon is less than three which is the index of the last weapon so I'm going to add this if statement here now let me tab everything over and then put another curly brace here if I move this over now we can see everything okay so if oh wait this has to be lined up right there okay so if current weapon is less than three then we'll do all that so at some point in the future you may want to add more weapons so instead of checking if current weapon is less than three like this let's check if current weapon is less than the length of the weapon's array so we just have to put the name of the arraylength so just like this weapons. length well not quite this is not quite what we need to do because we've now introduced an error the current weapon variable is the array index array indexing starts at zero so the index of the last element in the array is one less than the length of the array so in this if statement let's change weapons. length to weapons. length minus one and if the user can't buy a weapon we'll update the in tax to say you already have the most powerful weapon so here we go else inex sex inex you already have the most powerful weapon and once a player has the most powerful weapon we'll give them the ability to sell their older weapons back so in the else statement we'll set button two. interex to equal sell weapon for 15 gold and we'll set button two. onclick to the function named cell weapon so just like that so you already have the most powerful weapon and then the button is going to change and then you can if you click it it will do sell weapon so after the buy weapon function let's create an empty function called cell weapon so first of all players should not be able to sell their only weapon so inside the sell weapon function we add an if statement with a condition that checks if the length of the inventory array is greater than one okay and then inside this statement we'll set goal to equal 15 more than its current value and update gold.in text to the new value okay now let's set use the let keyword to create a variable named current weapon but we won't set it to anything yet and if you notice if you remember we already have a current weapon up here we've already have a current weapon that we've used in this in another function we've used in the by weapon function but since we've created since the Le keyword is used instead of VAR this new version of current weapon is scoped only to this if statement so at the close of the if statement once the if statement is over then the old version of current weapon will be used again so this will will can't come out of the if statement because we use let if we use VAR then it would be able to be used outside of the if statement we're going to remove the first element from the inventory array and put it into this current weapon variable we're going to use the shift method so it's going to be like this equals equals inventory do shift okay just like that so shift is now removing the first element from the array and returning it into this variable and now we'll just set the inner text to sold a and then put the current weapon so it's just going to look like this use sold a plus current weapon plus period now we can use the plus equal operator to add to the in Tex and add the string in your inventory you have and then add the inventory variable at the end of the string just like that so now let's add code so that if the length of the inventory is not more than one a text message appears that says don't sell your only weapon so we can just do that with an else so now we'll start working on fighting monsters let's organize The Code by moving the fight Dragon function to the bottom of the code near the other fight functions so just go to uh fight Dragon cut it and we'll just put it here so now we have all the the monster fighting functions all together now below where the weapons variable is declared so we have the weapons here we're going to create another array called monsters and in the monsters we are going to uh set the monsters with uh three different monsters that each have a name a level and a health now this time I'll just show you okay so see we have the monster slime at level two Health 15 the Fang Beast level eight health 60 and the dragon level 20 and health 300 and fighting each type of monster will be very similar so all three fighting functions we'll call function named go fight so at the end of the code let's add an empty function named go fight go down here I can just copy this function and this will be called go fight so inside the fight slime function we'll set fighting to equal zero which is the index of the slime in the monsters array and then we'll call the go fight function so just like this fighting equals zero go fight and then we'll do the same for fight beasts and fight dragons so this is going to be one and then we're going to we don't need the console. log and this is going to be two so 012 and now we need a new location in the locations array and uh it's going to have the same properties as the other objects in the array we'll set name to fight the button text is attack Dodge and run and the button functions are attack Dodge and go town and we'll set the text to you are fighting a monster so just like that and now we have an attack and a DOD we need two more functions let's so let's create those functions at the very end here so we have attack and Dodge so in the go fight function let's update and pass in the location of the the fighting location so just like that next in the goite fight function we'll set Monster Health to equal the health of the current monster you can try to figure that out first or you can just wait for me to show you how to do it so Monster Health equal monsters so that'll be from the list of monsters and then we have the index of what monster will we fighting like say it was two and then we're going to get the health so it's using the combination of bracket and Dot notation okay let's go look back at the HTML really quick if you remember from when we talked about this the HTML earlier we have this monster stats and the monster stat has a style of display none so it's hidden it's not showing up but when we're fighting a monster we want the monster stats to show up so we're going to display the monster stats HTM HTML element by updating its CSS display prop property to equal block so you just basically do the element. style. display equal block so it should just look like this see monster stats. style that display and this is if if we use an element. style this is how we can update CSS styles through JavaScript now let's set the inner text property the of the monster name text to equal the the name of the monster were fighting and the inex inext property of the Monster Health text to equal the monster health so it should look just like this so the name text is monsters the monster that we're fighting the name property and then the Monster Health we already got that from up here so we'll build out the attack function now for the first line in the attack function let's update the text message to say the monster attacks but use the actual monster name of what the monster of which monster is attacking so it's just going to be like this the monster that's how we get the name attacks okay now we'll use the plus equal operator to append more text to text that in text We'll add the text you attack it with your and then it'll say the weapon name so that's going to be just like this we have the plus equals we have the space here so have a space out of this period you attack it with your and then we use string concatenation to get the the weapon name here now now let's set the health equal Health minus the monster's level and you can get the monster's level um very similar to this but instead of name it's just going to be level so it's just like that now we'll set the Monster Health to Monster Health minus the power of the current weapon okay so when you attack you get damaged the monster gets damaged and then at the end of the line We'll add a random number between one and the value of XP that's the experience so so let me show you I'll just paste that in here so you can see what that looks like so we're subtracting from the Monster Health the power of the weapon plus just some random amount based on the EXP experience so uh math. random is going to create a random number between zero and one and then it will multiply by the experience points and then math. floor will round down round down to the nearest whole number so get this all rounded down to the nearest whole number and then add one so basically that's the formula for getting a random number between one and the value of XP and we'll just update the inner text of the health and Monster Health and then we'll check if health is less than or equal to zero if it is we'll call the lose function so then remember see if you can try to figure out this stuff before I show you but that's just like this if health is less than or equal to zero lose so we've talked about if an L statement an L statement can be conditional with an else if statement so at the end of the if statement let's add an else if statement to check if Monster Health is less than or equal to zero and if it is we'll call the defeat monster function so that just looks like this so normally was else and then we have a curly brace here but now we're doing else if and we can put another if statement and then defeat monster so if this else then we do do another if statement we'll only go to this if statement if this one is not true so if we haven't lost then we'll check if the monster has lost if the monster's health is lower we'll call it defeat monster so we'll just have to add those two empty functions for defeat monster and lose okay there we go and inside the Dodge function let's set Tex ENT text to you dodge the attack from and then put the monster's name so just like that you DOD detect from and then monsters then we get the monster who we're fighting the name and then the period and then we can update the defeat monsters function so inside this defeat monsters function we're we're going to set gold to equal the Monsters level times 6.7 but then we want to round that all down to the nearest whole number so just like this gold plus equals and so we're gonna add this this new amount of gold which is going to be the level time 6.7 and then round down to the nearest hold number then we'll set XP to equal XP plus the Monsters level and now we just have to update the inner text on the screen and finally we'll finish this function by calling the update function and pass in locations 4 so update locations four so that's obviously a brand new location that we're going to have to add to the location section because that's actually the fifth location uh index 4 and so we're going to add a new location what we're going to have the same properties as all the other objects the name is kill monster the button text is go to Town Square go to Town Square and go to Town Square because there's only one thing you can do after you kill a monster and then the button function go town go town go town in the text the monster screams AR as it dies you gain experience and find gold so we have all that updated for what happens after you kill a monster now where says the monster screams ARG here if you're saying something there should be quotes around it so let's add quotes around it we already learned about escaping quotes but there's another way you can include quote marks is if the outer quote are a different type than the inner quotes So if we want to have the inner quotes be double quotes we can make the outer quotes single quotes so let's do that so now you can see the color all looks correct so we're using the single quotes at the beginning and the end so we can use the double quotes in the middle and that now these will appear and we don't have to escape them they'll actually appear this text will appear as with the quotation marks and let's just add another location for when you lose name lose button text is just all three says replay question mark button functions are just restart and it's just going to say you die so it's going to look just like that so there's only three options that can happen the the buttons all say the same thing and the button functions are all the same so after a monster it's defeated the monster stat box should no longer display so on the first line of the update function let's add that the monster stat style display is none so every time it updates it's just going to make sure that the display box goes away the monster stats box goes away so this just here and I'll just put in there so whenever you go to a new location the monster stats will no longer show up okay now let's go use the the L we have the loose function at the bottom so let's make it go to the correct location update locations five and now at the end we're going to make a restart function so after you lose you may want a restart and we just want to set all the initial variables back to their initial settings and then we want to go to the town so let's go all the way back to the bottom and create that function so the we got restart and see we're setting all the variables back to how they were at the very beginning we're making sure the inext of all these things on the screen are the correct values and then we go to town okay now let's make an update to the attack function inside the attack function we're going to update the contents of the else if statement this is which is this statement right here so we're going to update the contents here instead of calling the defeat mon fun instead of calling the defeat monster function right away we'll create an if statement with an else statement if the player is fighting the dragon which is if fighting equals two then we'll call the win game function else we'll call the defeat monster function so let me show you what that looks like and we're going to talk about something new which is this oper so if fighting equals two when game else defeat monster so here you never just want to use a single equal sign because a single equal sign is an equality operator you either want to use the double equal sign or the triple equal sign I if if you want to compare two things if you want to see if one thing equals another thing as far as comparing you're going to want to use double or triple equal sign and so double equal sign that double equal operator will compare for equality after doing any necessary type conversions and the triple equal operator will not do the conversions so two values have to be the exact same type so it's often safer to use the triple equal sign because it's not going to do any conversions to test the equality and this is the perfect time to talk about the Turner operator or sometimes called the conditional operator it's basically can be used to do a oneline if else expression I'm just going to show you past in some example code which we're going to delete so the exam here's the example code so if AG is greater than or equal to 18 adult function else kid function we can simplify this using the Turner operator so basically you put the what's in the if statement right here and then we have a question mark and this would be the if true and you'll put a colon and this is else so this is going to be the if true this is the else so the key things that see here are the question mark and the colon so basically it's a oneline if else statement when you only need they're they're very helpful if you only need to do one thing in the if and one thing in the else which is exactly what we have up here so I'm going to delete this and we're going to update this code to use a Turner statement so it's just going to look like this so basically it simplifies things quite a bit if fighting equals equals equals two then if it's true whenn game if it's false defeat monster okay after the lose function we're going to create a new function called win game and inside that function we'll call the update function and pass in location six so you can see it's going to look very similar to the lose function we're just calling location six and that's a new location so let's create a new location everything should basically be the same as the lose location except the name's going to be win and instead of saying you die it will say you feat defeat the drag and you win the game just like that the replay and restart are going to be the same now the game could be complete now we're going to add a few extra features but let's test it out so I'm going to click run up here and we'll be able to see if we made any mistakes already so uh monster stats unexpected identifier so let's go to um line 109 and it looks like it's because we forgot this curly brace or I forgot it hopefully you got it right because um I'm probably put a little note at the time saying that I made a mistake there uh so this is why it's sometimes helpful to test out your code more frequently so you don't have a air a while back so let's try it again so click run and then we have another error here so let's check that 144 and again it's just an missing curly brace and hopefully we don't get any more of those missing curly braces okay and then we have a missing semicolon so at um 217 um one thing this helps you realize is that finding errors can actually be easy just by looking at the console and the aors you get right in there so it looks like we just need to have a semicolon here okay and no more errors I fix all my mistakes that hopefully you already had fixed in your code okay so let's test out the rest of this application here so welcome to Dragon repeller so we have all this uh information here go to store oh let's see if we can buy a weapon yep my gold went down and now I have an extra thing in my inventory I can buy some health and my gold went down my health went up let's go down to Town Square or go to the cave I'll fight the Slime name slime Health 15 you are fighting a monster I am going to attack and my health went down my experience went up and it tells right here what what happened so go to Town Square I'm going to go to the cave again fight the Slime attack and now I have more gold so I can go to the store and buy a better weapon now I have a claw hammer so I'm going to go to the cave and now I can fight the Fang beast and attack that a few times I defeated it now let's just I'm not going to check every single thing here but let's check what happens if I fight the dragon and die attack okay my health is going down quickly I don't have the most powerful weapon yet you die see my health went down so if I replay yep it starts back over you are on the Town Square you see a sign that says store great everything seems to be working so far okay let's do a few things to make the game even more interesting um first of all I'm going to close the console here we don't need that anymore GNA bring this over and now let's go to the attack function so in the attack function we're going to change this line right here to something that's going to be a little more complicated basically so instead of just subtracting the level of the monster we are going to um get an attack value based on the level of the monster so I'm going to um put in a I'm going to call a function here actually so get monster attack value and then I'm going to pass into the function the level of the monster so we're passing in the level of the monster to this function and this whole function is going to return a number that's going to be subtracted from the health so let's create that function so we're going to call that function is going to be right here and it's going to take a level so get monster attack value it takes in a level here and now the attack of the monster will be based on the monster's level and the player's XP so in this function we'll use let to create a variable called Hit and we'll set it to equal to an equation let me just show you instead of explaining it to you first so you can experiment with different equations to figure out what the attack value is going to be but in our case we're doing we're first we're multiplying the level of the monster times 5 and then we're subtracting well we're getting a random number times XP and then we are uh rounding it down so let's do a console.log we're we're going to log the value of this of hit to the console to use in debugging this is something we talked about at the beginning console.log so do console log and then pass in Hit and now we're going to do something we haven't done before in a function is to return a value we already talked about how we're going to get the returned value to pass into Health but we haven't created a function with the returned value yet so we're going to return we're just going to use the return keyword and then put hit so just like this return hit okay so now when we call this function it's going to return a value that we can then use in this health equation up here okay now we want to make it so a player can potentially miss when they go to attack they can miss so first of all there's an extra semicolon here uh so extra semicolons basically don't do anything they're not they're not going to make your um your code fail or anything so we want to put this whole line in an if statement so if and then the condition of the if statement is going to we're actually going to call a function to get the result to see if this is true or false so we're going to say if is Monster hit is Monster hit and we're going to check if the monster's hit and if so then we are going to subtract from the health and if the monster is not hit we have an else and we'll use the plus equal operator to add the text you miss onto the end of text.in text so it's just going to look like that so maybe I can even put some lines around here so we can see what happens so if the monster is hit will subtract this attack value if not you miss obviously we now have to create the is Monster hit function we're going to use the math. random function to make it so 20% of the time it's a miss and 80% of the time it's a hit so after the git monster attack value I'll make another fun other function and this is how we're going to do that is Monster hit we're going to return and then we're going to do a condition anytime you have a conditional like more than less than more than equal to or like the double equal sign the triple equal sign it's always going to return a true or false So math. Random if you remember I said it gives a number between zero and one so so 02 that's basically 20% of the time it's going to be 0.2 or less and then 80% of the time it's going to be above that so it's going to return When math if math. random is greater than 02 that's 8% of the time it's going to turn true otherwise false so 20 80% of the time there's going to be a hit now we want to actually the player should hit if either math that random is greater than point2 or if the player's health is less than 20 so basically it's always a hit if the player's health is less than 20 so let's look at how you can use an or in an if state so you can check for two conditions in an if statement so we actually want to return true under two conditions if math that random is greater than 02 or if the player's health is less than 20 so if the player has low Health there's always going to be a hit so at the end of the return statement we're going to add the logical or operator which is just two straight lines and we can check if health is less than 20 so let me show you what I mean so this is the two straight lines this is the or operator so we're checking for this or this so if either one of these is true then it's going to return true we could also use the and operator if you two do two Amper signs that would be saying both of these have to be true to return true and if either one is false then returns false but we're going to go back to the the or the or operator okay now let's add another thing so for the attack we're going to make it so on every attack there's a small chance that the player's weapon breaks so at the end of the attack function we're going to add an if expression with the condition math that random is greater than or equal to .1 so let's go down here okay now we'll use the plus equal operator to add your and then it's going to say the first item in inventory array your weapon breaks and it's going to add that to the end of enter. text and we can use inventory. pop to both remove the last element from the array and return the element let me you what I mean so right in here text enter text plus equals your and we're using um a string concatenation with the plus your and now we do inventory. pop this is both going to remove an item remove the final item in the array and return it so it appears in the string here breaks so it's not going to be in the inventory anymore and we get to see what the item is and now we can next decrement the value of current weapon so we'll just do that with current weapon minus minus but we never want the player's only weapon to break so so well let's use the logical and operator which I was talking about earlier to add a second condition to the if Express exess we just wrote If a player's weapon a player's weapon should only be able to break if inventory. length does not equal one so you can do does not equal with an with an exclamation point before the double equal sign so so let's see that so we're using the the and the Amper sign Amper sign for and and then this is the does not equal so there's two conditions both conditions have to be true math that ran to be less than or equal to .1 and also the inventory. length should not equal one so for not equal you can either this is the not equal that's equivalent to three equal signs and this is the not equal that's equivalent to two equal signs it's for the most part you should use the the one that's equivalent to the three equal signs so we're checking for both though it it can't just be one or the other both have to be true for the inventory item to break let's do a quick test and see if we can get our our inventory our item to break so if I just go to Cave I'm just going to keep um fighting the Slime until we hopefully well actually we we have to buy first we have to buy it go to the store I forgot we have to buy the weapon and then we can see if we can get it at the break so go to the cave um it we may have to do it quite a few times to get it to break your dagger breaks it happened well so what we kind of got lucky where I guess unlucky to get it to break so so our dagger breaks and now we only have a knife or a stick or whatever the first one was so so that's actually working correctly so uh everything's working basically how we want there's just one more thing to do which is to add a miname Easter egg basically a hidden feature of the game and really this is just a reason to be able to teach you one last part of JavaScript so at the end We'll add another function called Easter egg and it's going to call the update function and passes in locations seven so we'll add that at the very end Easter Egg location 7 and then we're going to have to add the new location for the Easter egg it's going to have a name of Easter egg and the button text is going to be 28 or go to Town Square and the functions are going to be pick two pick eight or go to town and then the text is going to be you find a secret game pick a number above 10 numbers will be randomly chosen between zero and 10 if the number you choose matches one of the random numbers you win so we'll just add that and you can see that text here basically you can only choose two or eight for for the numbers so now we just have to add the code that's going to randomly choose these numbers between 0 and 10 but first let's create the the pick two and pick eight functions and each function is going to call the pick function which we still have to create and pass either a two or an eight into the pick function depending on the function name so let's just go down and add those functions pick two which gonna pick two or pick a it's gonna pick eight and then the final thing is to create the pick function so let's create that function so function pick and obviously it's going to need a guess and then what's going to happen in this function well first let's create a a new variable called numbers and it's going to be an empty array so let's numbers and it's going to equal this empty array and we're going to push numbers onto this array using a while loop so we're going to talk about two different types of Loops in this section the first is a while loop and a while loop will keep doing something while a condition is true so a a while Lube it start it starts off looking kind of like a an if statement so we're going to do while and there's going to be a condition we'll fill that in in a second and then there's going to be some code in between these curly braces so the condition we want to put in is while numbers. length is less than 10 so numbers. length is less than 10 so it's going to it's the right now the length is zero so while it's less than 10 it's going to do something so we want to push an item onto this array so we'll do numbers. push so numbers. push and then we're going to put what item we want to put on and here we're going to create a random number between one and 11 or one and 10 so to CR number land number there's a basically a formula we've already kind of discussed we've already discussed the formula but we're going to do math. random to get a random number between 0o and one and we multiply it by 11 so now if we just round this down because it's going to it's it's going to have a decimal so we'll do math. floor this will give us a random number between 1 and 10 to put onto the numbers list so there there's definitely different ways we could have created this list but I wanted to demonstrate how to use a while loop so while this condition is true while there's less than 10 numbers we will run this code and then after this code pushes the 10th number onto the list the 10th random number it will go back to the condition again and it won't be true anymore so we'll pop out of the while loop and go to the next line of code and the next line of code is we are going to display using the text in text we're going to set to equal you picked and then put what they picked here are the random numbers one thing I just added to the end of this is an escape character so with this back slash in that that's the that's the how you say new line so if you want to add a new line right in the string you can use the the Escape character the back slash n and will it will add a new line to the into the string and let me just add a few semicolons here okay now we're going to talk about a new type of loop called a for loop again it's going to be set up just like the W loop at first so we're going to have the four that's the keyword there's going to be parentheses and then we're going to have the brackets or the curly braces so we're going to run this code in here based on what's in these parentheses so there's going to be three items in these parentheses each separate with a semicolon so first we're going to initialize a variable so first we're going to initialize a variable then we're going to put the condition that we're looking for for the variable to have before we before we're done with the for Loop and then we are going to be able to change the variable so uh let me show you what I mean we'll do let I equal 0 semicolon I less than 10 semicolon I ++ so let's go over this so first when this when we go into this for loop we're creating a new variable just for the for Loop say use let it's only going to apply in this block of code and we are going to Loop until I is less than 10 so once I is I is less than 10 we'll be out of the loop and this is something that's going to run at the end of each iteration of the loop i++ that just means I equal I + 1 so I is going to start at zero and then every at the end of each iteration of the loop it's going to go one and once I is and it's actually basically it's it's while while Li why I is less than 10 it's going to keep looping so while I is less than 10 it's going to keep looping and once I is no longer less than 10 the loop will be over we are just going to use this Loop to add a to add all the numbers from our list and we'll put a new line character after each number on the list so just like that so we'll do plus equal numbers and so when we do numbers I so first it's going to be uh so I is going to be updated each time we go through this Loop so the first time we go through the loop I is going to equal zero so this is going to be the number this is the number here at index zero which is the first number and then I will be updated and then it'll be index one index 2 index 3 until the loop is over with and after each number we will put a new line okay so now we have our final section we're going to put an if else statement we want to figure out if the number that was picked is in this list well there there's a kind of a fancy way we can do that so first let's create the if statement so if so we're going to put the condition here we are going to find the index of the guest number so we can do numbers. index of and we can pass in the guess so in this case it's going to either be two or eight but we can use this function for any for a guess of any type of number so we're trying to find the index of it of we're looking for that number in the numbers array and we're trying to find the index so the you know the index starts with 0 1 2 3 4 so what which part of the array which order in the array is that number but if the number so this is always going to return a number but if the number if is not in the array if it cannot find the index of that guess it's going to return negative one so we can use that so if the index of guess does not equal -1 that means it's in the list that means you guessed a correct number so we're going to do the does not equal and then put -1 so in that case we are going to set in text to right you win 20 gold we're going to add 20 gold and we're going to update the inner text of the gold just like that to plus equal wr0 gold we're going to add to the gold and then update the inext of the gold else it's going to say wrong you lose 10 Health we're going to subtract 10 health and we are going to set the inner text of the health so it's going to look uh just like that um let's put the other curly brace here and anytime you subtract health we have to check if the player has lost so that's what we'll do now see if you can figure out what code you should add to if the player has died well it's going to be just like this if health is less than or equal to zero lose okay we are done the only other thing we need to do is make it so you can get into this Easter egg so how we're going to make it so you can get into the Easter egg is we're going to go back up to the locations and during the the kill monster once you've killed the monster it's going to say go to Town Square go to Town Square go to Town Square but we're not going to use the same functions for each of these the final function we're going to do Easter egg so even though it says go to Town Square if you know the Easter egg you're going to go to the Easter egg function okay so now there's nothing more else to add so let's just try out the Easter egg I'm go to run and we know that if we go to the cave we know okay now let's just check out oh yeah we got obviously there's some sort of eror we have to fix here so let's go to line 100 and oh when we add when I add Easter egg I somehow deleted that curly brace okay so now I'm going to first I'll just go to the store buy weapon now I'm going to go to the cave fight the Slime attack okay now I'm going to click the third go to Town Square oh yeah and while we're doing you can see in the console it's putting uh the 10 here cuz if you remember we did do a console.log uh when there was an attack uh where was that here where we console.log the hit so but I'm going to click the third go to Town Square you find the secret game pick a number above 10 numbers will be randomly chosen between zero and 10 and the if you choose if the number you choose matches one of the random numbers you win so I'm going click eight you picked eight here are the random numbers let me just turn off this console right you win 20 gold because was in there and then if I choose the wrong cuz I can play again so you pick two right I got right that time right again oh man I'm on a roll here wrong you lose 10 health so I tried too many times uh so now I can go to Town Square the game is complete now that you know the basics of JavaScript Tommy will take over again for this next section he's going to teach teach you how to create a front-end web app with HTML CSS and JavaScript afterwards I'll teach you how to create a back-end web API using nodejs Express and mongodb then I'll teach you how to connect tomy's front-end web app to the backend web API in this section of this course we're going to be building this web application that you see right here so it's going to be a very basic app and what is going to do is that you're going to be able to just allow a user to search for any movies and it's going to show result of those movies for example if I search for smile you're going to see that I have results of the movie smile so I'm going to show you how to build this from scratch so we're going to design the HTML the CSS then once we're done with that we're going to use JavaScript to fetch this data from an API so let's get straight into it so I'm just going to close this tab and we're going to come back to replate so now we are just going to get rid of this this old style. CSS and let's just start with our index so I'm going to close this and what I'm actually going to do is that I'm going to open this on another tab so that we can just see how the application looks live rather than having it like in a small frame so that is also what you can do with replate so now I'm going to close that and we have all our you know code enough with enough screen for us to use so what we're going to do first of all I'm going to actually just have all the the HTML you know diff element everything I'm going to use then I'm going to start styling everything that we code in here then after styling it then I'm going to use JavaScript to you to fetch some data from an API so I'm going to show you how to do all of this if you don't know what these are don't worry I'm going to walk you through it so the first thing I want to do is to actually just get rid of all of this and right here I'm just going to leave this tile blank so to this point you know that this is just the basic HTML you know template this is how the B the normal HTML structure should look so we have this docet type HTML which tells us that we are using HTML 5 and then we have the root element which is HTML and this is where every other thing goes in and in there we have the Ed and as I said previously in this course in the Ed we have the title and then the CSS that we're going to be using which is this style. CSS we have it linked right here and then this body is where most of the visible stuff or basically all of the visible stuff of the web page is going to be so let's get straight into this so what I want to do now is I want to change this title to movie site so once I change that to movie site let's just come straight and the first thing I want to create is like a very basic nve bar right here so as you saw in the demo I showed you there was a nav bar that just shows movies and at this right corner there was like a search bar where a user could search for something so let's start with that so the first thing I want to do I'm going to create a new div element and that div element I want to give it let's say a class of topn so I'm just going to give all of them different attributes so I can use the attributes to actually style them later in the CSS so now that I have that the next thing I want to do is to just let's say have an a tag and this should just say movies site so this movie site now is you know what is going to be shown right here and let me say I'm going to give this a class also so we can style it so let me just say this is active and I'm going to say it should link to we don't actually want it to link to anywhere so we're just going to give it this value hashtag so it doesn't really go anywhere so that is what we need to do for the movies heading now the next thing I want to do is to actually create another div tag in here and I'm going to give this gift tag a class also so this should also close I'm going to close that div tag so now that I've closed the GI tag we just need to make sure everything is right and structured so this is the div that is ending here that's the AI and and this is uh D Ty so in here what I want to have is basically a form so I'm going to have a simple form right here I'm just going to say form going to create that form for us let me just bring this here now before we have this form let me give this div his own class so we can style every single thing if we want to and let me say this because this form is going to contain the search bar so let and this search bar is going to be part of this D class so let me say it's like a search container right and then this form I want to give it let's say a role of search and I'm going to give it his own ID now I'm I'm going to use this ID later in the JavaScript also so I need to name it form now it's just going to have one input and the input it's going to close that input and the type it's going to be search it's actually a type that is search and when I say ID let me just give it let's see let's say query and we can give it a name of just q and let's give it a place holder and let's just say search now this is what we've done to this point let's actually come here and see what that gives us so if we refresh this you can see that we just have this basic movie site and this search bar now let's come back in here and what I can just do is let me change it to search what I'm going to do now is after this diff tag of this diff class I just want to have another you know diff element that is going to take care of the whole film so you know when we search movies in that site when we search movies and we s Some Like Cards here that shows the image of the movie and the title that's what I want to do right now so I'm going to have one diff and I'm going to have this have a class of row it's going to be row and I'm actually going to have another div in there so now this is going to take care of the column class we're going to say class if equals column so just the way we have rows because you know that we're going to have a row and we're going to have different columns so we need to have that specified in the div tag and then let's create one more div tag and this one is going to have a class of card because this is going to be the one that contains the actual you know details of that particular movie so I want to have an image in here and that image is let's say going to have a source so for now let's leave the source as ashtag let's say that hashtag but I want to have a class and I want to name this class thumbnail so that's what I'm going to do to that and what I want to do is I want to put this in an element named Center so once I say Center I'm going to put that in there I'm I'm going to show you why I did this later when we are styling it now we're also going to have and let's see let's use an H3 tag to take care of the title of the image of the movie so let's say movie title right and that is basically what we need for this part so let's have if I save this and you just come here and itat refresh let's say so this is the image this is movie title everything is all over the place for now but don't worry about that let's actually give you like an image so if I open this up I put this image. jpg there and if I click on it it just shows this wakanda forever image so what I'm going to do is in here let me just say images jpeg I come here now and it refresh so that should show basically right there so we're going to style this later but let's keep going so what we cannot do now since we have all of this let's actually have a padding because as you can see just after that have but there is like the the movie card is right after it so we want to have some spacing inside it so we can just have like let's see we can start this in the CSS but let's take care of it right now and we can say div right and then what we can just do is to say style let's say Paddon let's see let's say left and we give it 16 PX just so it has pading from the left and automatically I'm going to explain something right now so this basically has a padding on the left so what we're going to do now is to make sure everything is correlated so we have that having a padding on the left but we also want it to have like some spacing on the top of it so what we can just do let's actually get rid of this and this is just going to give you some padding on the left for it to have some spacing on top of it that is automatic because we already have one diff like one diff tag here so once I save that that should be fine right now and let's see let's see what we've done to this point Okay cool so this that doesn't take care of the space in here but we're going to take care of that in the CSS but let's let's just move forward with you know the styling so let's go through what we just did did right here so we created a a div class for the top nav that's for the nav bar we had all the details of the Navar in there and then we just added this diff tag for some spacing and right here we have the row we have the column we have the card and in the card we have the image and the H3 tie so we have all of this done now the next thing we want to do is to actually go into the CSS and start styling all of this so right now we're going to come into the styles. CSS file and let's just get straight into it so first I'm going to use this aeric selector and I'm going to say the whole element in this should have a box sizing of Border box yeah let's give it that so as you know the arteric selector basically affects all the whole elements in the HTML file before we even get here we must make sure that this style. CSS is connected to this HTM if not it's not going to affect it so since we know that we've linked it right here using this link element we can go ahead and start you know coding right here so let's see let's say we want to have the body to have a background color I'm going to give it this background color so I'm going to show you the color code it's # 31720 yeah it should look like that then we're going to do that and let's give you a font family and let's say s now let's save this and let's just see we come here and need refresh good so you can see now that is looking like what I showed you in the beginning so we have the background color and this is we're going to take care of this later but let's just keep going so when you're using replate you actually don't need to save the file before you come here and eat refresh automatically it's like saves it for you that's also why I like rep so since we've taken care of the body let's just see so we can see that right here this is uh black but we want it to be white so it actually shows because of the background color and that is in uh let's see is in an H3 tag so we're going to come in here into our style. CSS and we're going to say for H3 tag you select that I want to give you a color of white so now if I H refresh we should see that that is white good and what we're going to do now is to just add some proper styling to this nav bar that we have right here we want this to be here we want this movie side to actually look good let's do that so we're going to say let's see the class we used for that topn so let's just copy that so now we're going to say do topn let's give it an overflow let's say that should be hidden and we're going to give that a background color let's give you the same background color as the normal background color of the body so we're going to say 131 720 and we want to have a padding of 10 PX so it's going to have a padding on the top on the bottom on the left and the right of 10 PX remember earlier in this course I thought about you know this padding when you have just one in CSS when you say padding and you have just one value it uses that value for the Left Right top and bottom so now let's come here and let's see what that has done so you can see that there's some padding up here and you can see that the space that we talked about earlier is you know it's not as close as it was before if we have a pattern of like 30 this this is going to come down a lot but let's just keep going so now what I'm going to do let's see we have in here we have Okay cool so let's style this movie site so this movie site is in an a tag that's what we're going to do right now so we're going to say for the topv I want to select the a tag in there the a element and we're going to say let's see let's float it to left we're going to say left and then let's have a display of block and let's give that a color also of white and we want to give it let's align the text to the center so we can say testt align Center and let's give you a padding of 14 PX and 16 PX so this is going to split it evenly between both top right and both left both top and bottom and left and right so let's also have a text decoration of none because it is a link right it's an a tag it's going to have this underline on it so when we say text decoration none then that should take care of that we are not going to have it's not going to look like a link basically and let's give a font size so instead of using let's instead of using PX let's just use RM so I can say 1 Point Let's see 2 RM and let's make it upper cage this is the title The text transform and we can say Upp case I think that's enough styling for this now let's see what that does so as you can see now it changes all of that it doesn't look like a link everything is upper case test decoration is done good so now the next thing that we want to do is to take care of this particular search it's not looking good so let's see what what that is so it's under the top na also and it's called search container right it's in this de class of search container so what we're going to do is to say do topn since we're using the class and not the actual element we're going to say dot search container and let's float let's float it to the right so let's save that let's it refresh you can now see that that is on the right that is good now the next thing we want to do is to take care of let's see let's come in here okay so we already taken care of that particular search bar and let's just take care of this whole form in general so what we can do since we took care of this particular you know input but we want to add more design to this form cuz it's not looking good right now so we're going to do that so what we're just going to do since this is already a form tag we can just come in here and say form we want the form to have a background color I want need to be different from the normal background color so it's noticeable let's say 151 f30 yeah that's how it looks like and then we should have let's see a width of 300 PX and let's also have an height of 43 PX and let's give a border radius so it's actually you know circular at the edges something like this border radius let's see let's say 11 PX and display let's make this display Flex now just so that looks better and let's align the I itms to the center let's come here and see what that makes good so this is what we want to see okay so this is how that looks what I want to do now is to you know give it more styling cuz I want this you can see that it still has like an edge but this has a border radius I want it to look you know better so I'm going to actually style the input cuz this is the old form but this input now is what I want to style so it's has an input tag let me just copy that and in here I'm going to say input let's say all should be onet I'm going to give you a font of let's say 15 PX and let's give it system UI let's give it a different color let's just say normal FFF and it now let's wrap it around everything that the whole you know height that it can take so 100% of that and the width should also be 100% of that let's make sure that we have our semicolon and let's give you a padding so the spacing around it let's give it 6 p and then we can say 9 PX let's see that should look good good so as you can see this looks a lot better now let's keep going and let's see what we can do so now that we have that done I think the next thing we should just talk about is this image it's not looking good right now so let's see what we use to identify that image I come in here so we give you a class of thumbnail going to copy that thumbnail I'm going to come into style. CSS and I'm just going to see since it's a class I'm going to use dot let me give you a it going to say it should be 350 and I'm going to give it a width going to say that width should be let's see 300 and let's give you a border radius so it's not just like showing like this as you can see the Border radius of let's say 19 let's see how that looks like so as you can see that is smaller okay that's good that's what we want to see now the next thing that I want to talk about is let me come in here and see so what we can do now is to sty this div tag that has this colon class so what I'm just going to do is to copy that colon class I'm going to come in here and I'm going to say do colon and let's look at what is wrong with this now as you can see it's in the right but we want it to float to the left so what we can do is to say float left and let's say width let's give it a width of 25% 25 and let's give you a padding so it's going to have some spacing around it let's say 10 PX and let's just say 10 PX also so that should you know give it a little bit of styling let's it refresh and let's see good so that this is how it looks like but now what do we want to do we want this to be in a card if we come in here you're going to see that we have this card class that is that belongs to a div element so I'm going to style this card and I'm going to say do card what I want to do now is to say Let me give the card its own a border radius so it's going to have like a border on its own I'm going to give you a border radius of like 19 PX and I'm going to give you a padding also so you're going to see the spacing around the card so you're going to see what is on top of the card basically let's say 15 X and let's align it to the center so anything that is with it should be any text wein it should be in the center and let's give it his own background color and let's say #h1 151 f30 just the one we used before so now I think this should be good with the styling let's see the result and see if we need to add anything so let me hit refresh good so you can see now that this is the card right it has his own border radius this is the image it has his own border radius and the text within that card is centered to the middle so this is actually what we want to do now that we've done all the styling that we need what I want us to do what we're going to do now is to just add our you know JavaScript to it so we're going to be getting some results from an API so let me just open page again so just drag this able to open that so right now what I want us to do is that once we search this let's say we search something like smile which is a movie it should bring out the results of that movie for us with you know the image and then the title so for now this is just a static you know data because right now it's just the data that we put right here in our HTM ml but we want let's just close this real quick but we want this data to be like Dynamic like whenever we search something that is what you show there so what we're going to do to what we're going to use to do this is an API so we're going to use this movie DB API so what you just need to do you don't need to read all of this you just need to make sure that you have an API key from this movie DB API to move forward now for you to have this API key you need to click you need to come to this page right here right and then you need to click on this API link so once you click on this API link it's going to take you to where you're going to create an account and log in once you do that make sure that you click on this API link and then it's going to take you to where you can create an API key so I have created my API key and this is the API key I have right here you need this API key to move forward in this tutorial so once you know that you have this done we can move forward so the first thing I actually want to do before I go into my JavaScript is that right here here I want to make all of this all this old D be inside like a section so I'm going to have a section element and I'm going to put all of that in there now this is just so that I can group all of this into one section and when I'm using the JavaScript you you're going to understand later when we are coding it in JavaScript so I want to give it an ID of let's say the ID should be section and I actually want to get rid of all of this so for now I'm going to comment it out now this might look weird for now but I'm going to explain why I'm doing this if we come back in here and hit refresh we're not going to see any data for now but what I'm going to do is that I'm going to use JavaScript to dynamically automatically create all of these tags right here I'm going to show you in a bit so if I open this up you're going to see that we have this script.js so I'm just going to drag that script.js right here cuz we need that now but before we can even use this script.js we need to link it from our HTML so to connect your HTML file to this script.js file you're going to have to use the script element and it's going to have an A source so you're going to give it a source and the source should just be script.js so that is that and now when any JavaScript you put here will be will have an effect on this right here so I'm going to walk you through everything that we're going to do right now the first thing we're going to do is to create like six different constants or variables so I'm going to have con I'm going to say API link and for now I'm going to leave this blank I'm going to come back to this and I'm going to have another constant and I'm going to say IMG path so this is the image path that is going to show that is going to you know specify the path or the link to the image of every movie and I'm going to have another constant and let's say search API now this are the API you know remember I say we using that API right so this is specifying the link of where we can access that API from and this is specifying you know how are we actually going to search for something and get some response from that API so now that I have all of that what I'm going to do is to give you some values so right here on API link I'm going to paste in this code this link actually and what you just need to do is to type out what I pasted and I'm going to explain it for you so right here I'm going to paste this in here so as you can see this is like the link to that the movie DB that I talked about but we accessing it through his API so just write everything out the way it is right here with the page and every single thing the only thing you need to change is your API key remember when I showed you how to create an API key from there make sure that this key right here is your API key so this is my API key but make sure you change to use and for the image part I'm also going to paste in an image link and I'm going to show you what this is so this image part is actually the root part to every single image of the movies so that is what this is and then for the search API I'm also going to paste in the query so what this does is that if I paste this it uses that the movie DB right to search for a movie and you must change this to your API key also that's the only thing you need to change and this query we are going to add our own query to it so what I mean by that is that the query that we use is what we're going to add like let's say for example if a user searches for like you know Black Adam or something else that is what is going to be put in this query right here so that is what you need to know so let's get rid of this let's make this double quote right so now that we know that we have all of that since this is Javascript you must add you should add the semicolon at the end of this and now the next thing I'm going to do is to actually get some elements in this HTML file so I want to get this whole section so what let me work you through what I'm going to do to actually make this work so what I'm going to do is that I'm going to when a user searches for something and click enter we're going to have a function that gets the result of what the user search then sends that query to this a API and the API is going to send up some response so let's say the user searches for like Barbie right it's going to send us let's say 10 or 20 different responses with the image and the name so when I get those image and the name I'm then going to create a d this all of this div tag right containing the data of that particular image and name right here you can see that we just have one div tag but what I want is that depending on how many results right that we get that is the amount of div tag I want to have so that's why we're going to have to create this div tag from JavaScript so there's a way JavaScript can create an element for us and it's basically going to create all of this I'm actually going to delete all of this later but for now I'm going to use it to reference when we are creating all this tag in JavaScript so let's move forward and let me explain so what we need to do now is to get this we're going to get this section right and then we're going to we have to get the form which is this form right here so we can get the from the form we can get the you know the query that the user search for so what I'm going to do now we need this section so I'm going to say let me name it main I'm going to say equals to document. get element by ID I'm going to name is section so by getting the element by the ID and the ID is section right we're going to do the same thing for the form and search so we're going to say form search so we want to get this old form right and by getting by the ID we need to use the ID of form and then for the search since we want to get the actual query we're going to use the ID of this input and we're going to say query so once we have that done the next thing that I want to do now we're going to have to create a fun function named return movies so let's just say let's see let's say function am I going to say return movies and we're going to give it a URL outside here want to have this and what we're just going to say is we're going to use the fetch so we're going to fetch from the URL so then going to say R equals greater than rest. Json cuz we're going to get Json response then we're also going to say do then function and here we're going to say data right and right here we're going to open under call braces and let's just say console let's print out the data in the console we can just say data do results we can use this to debug later let's just have that right there and now what we can just basically do is to say data results so I'm going to come down in here and I'm going to say right here we actually need to have the semicolon to show that that ends there I'm going to say the data that we get the results do for each so so we're basically looking through all the elements in the result so for each element I'm going to say let me have it here element and then what we want to do is to say I'm going to create some constants now so I'm going to show you all of this why I create all these constants but for now let me just say div equals to document do create element so I'm creating a new div tag right in this my HTML so as you can see when we say create element it's creating a new div element and we storing that in this constant name div so for now let's just you know go through all of this and what I want to do I'm going to show you why we use all of this later but for now let's make this here here I'm going to do this and what I need to do is to add this here just to have perfect and right here we need to have the closing bracket and we put that there so this is everything in this particular function for now which is working so what I want to do is up here I actually want to call these return movies so up copy I'm going to paste that function so I want to you know call that function up here and the URL that I'm going to give it is this API link right here so that's the link that you know we want you to fetch from so now I'm going to explain everything I'm going to do now briefly so what I want to do is I want to create you know a div tag for all of this so I'm going to create a div tag for the row I'm going to create a div a div element for the colum for the class yeah I'm also even going to create like an image element I'm going to create this Center element this H3 I'm going to create everything and once I create everything I'm going to show you how I'm going to put this image in the center I'm going to put this Center in this div that has a class of card so I'm going to show you how we can do that so what I'm going to do right here I have div right what I'm going to do is to say div card because that's the first one I want to create right here the first div div card and I'm going to say document. create element div so just creating a div card element and the next thing I want to do let me just actually copy this I want to create the div row which is also create element div and I'm going to create the div colum and the next thing I want to create is for the image so I'm going to create an image element so I'm going to create IMG and I'm going to create the tit so the title right here which is an H3 so we have to say tile and we're going to create an H3 element and I'm going to create the last one I'm going to create is let's see I think I need to create yeah this Center run right here now we're creating every single element just so it doesn't you know affect the styling so I'm going to say right here I'm just going to say Center the create element center right now that should work now that I've created all these element what I am going to do is that I am now going to start inputting them into each other so first of all before I even input anything what I'm going to do is to say this title since I know that this title right here is basically showing the movie title right and I know that this image I created right here is meant to show the image of that movie then what I can now do is to say title do inner HTML so using inner HTML I'm going to say so we're going to have to use this particular code the code is the one that we use when we are you know giving it a value in here in the in HTML so this code so in there I'm going to use the dollar sign and I'm going to say element do title so this element that we you know write here you know We're looping through every single result we're giving you this element so we're saying element. title and whenever we get a response from this particular API it saves it Returns the moving name as title right so that's why we're using element. tile and the next thing that we're going to do is to say image dot so this image now we don't when we say inner HTML it basically says this value so we're saying this value should be you know the title of the of the movie but for this image we are not giving it a value what we want to set is the attribute which is SRC we want to give that attribute a value so we're going to say image. SRC right and we're going to say equals to now remember this image part that we created this shows the path to that image so we're going to say image part plus now we're going to say element dot poster path now what this does is that you know remember when we did element. title I said that because it Returns the movie name as title and for poster part it Returns the link to that image as poster part but we need to add that particular link or that particular one that it returns to this so imagine it returns let's say it returns something like you know um six days SL whatever imagine that the poster part to that URL we adding it to this root URL that is why we do so I'm just going to get rid of that that is why we do image part. element. poster part so now that we know that we have that we basically already have what we need which is the moving name and the image of the movie so what I want to do now is I'm going to say this Center that we created I want to add this image tag under this Center since it is under the center right here to do this I'm going to say Center that we created do append child now when we say append child it allows us to add uh an element under another element so now if I say append image as a child of center that is true yeah because image is actually a child of Center so once I do that the next thing I want to append by coming here is I want to append this center now to this card and I want to append this H3 also to this card so I'm going to open the center element and the title element so now I'm going to say div card right here do append child and the child I want to append is the center that should be under that I'm going to do the same thing but this time around I also want to append this the title now the next thing I want to append is now this whole card div I want to append it to this colon div and after that I want to append this colon div to this row div so I just going to do that so I'm going to say div colon I want to append div card as a child and now I'm going to do for the last one and I'm going to say div row I want to append div colum as a child so now as you can see it says we first have div row which is what we have here and under it we have colon under it we have card you can see under D we have colon under colon we have card under card we have title and Center look under card we have title right and center and under Center we have the image as you can see right here on that Center we have the image but now all of this I want to add it to this section this section right here because if I just say add right is it's just going to add it like anywhere it wants or right now basically what I've done is I created this div and I said we should append all of this but I've not told you where all of this should actually go so if I say this div row right should go into this section that is already in here then what it's going to do is that it's going to take all of this and put it in this section so what I'm just going to do is to say I think we already got the section using main so this main right here I'm just going to say main do append child and once I append d r as a child that means all of this goes under this D is now a child and that is basically what we want so all of this should be good and yeah I think all of this should be working the next thing that we want to do is to actually create an event listener so this event listener is going to be like for the form so that when the form is submitted you know we know when it's submitted and we get the value of that form and then you know we call these return movies right here so what I can just do is to say form. add event event listener so I want to listen on submit so submit is the one for the form so whenever the form is submitted right say e and then what we can just do is to say let's remove all of this and just add this and say e do prevent default so right here we're going to stop that and then we're going to say main do inner HTML equals blank now the reason why we saying main inner HTML equals blank is because when someone searches for like a new query a new movie we want to remove all the other movies that were there and rep it with the new movie that they search for so this allows us to remove all the movies that we initially there and now we want to replace it so let's first say let's get the search item go to search the value right so this is the actual value that the user input and this search remember is what we got from here which is the query of this particular if you come here of this input so now that getting the value of that search then we can now use State a condition and say if there's actually a search item like if we actually get a search item then we want to say want to call this return movies and we're going to call return movies giving it the search API plus the search item plus this search item that we are passing in here and after that we just want to clear up that particular input so search the value equals clear so what this is doing is that whenever someone searches and H enter we just want to show the result and clear up what was in there you can add that you don't need to add that it's not that important so we put the semicolon to end that so as you can see all of this should be working now let's test here and see what we've done to this point if I eat refresh now you can see that nothing shows let me search let's say smile and it enter nothing shows still now what we need to do is right here we need to add let's say the particular attribute so what I'm going to do is because in here you can see that this div card where's the diff card if we come here you can see that for example the card this div has a card has a class of card so we actually need to set all these attributes for it so this div card we already know that it has a class of card so we can now say div card we need to set his attributes when we are creating here say do set attribute I going to say class I'm going to say card so this is what we need and we're going to keep doing that for basically all of them because all of them has one or two attributes so we're going to say colon and I think the image has two attributes and the title yes it has an attribute also this Center doesn't have an attribute so now let's check what attribute for row and column so row basically has a class of row and column as a class of column so we just let's copy colum so set a class of colum and for row set a class of row so diff card as a class of card div row as a class of row and div colum as a class of colum and for the image we have two different attributes and the attribute we have are this class so we need this class and we actually need an ID for this image also so let's see for image copy the class so let's say thumbnail we need an ID for this image and let's give it an ID of let's see let's say image let me give it an ID of image for the title the title just has a ID come in here so we didn't create an ID here but let's give it an ID of title now the reason why I giving all of this this ID is because we where we need to get the values of all of this right so let's see so we already have tile we have element. title we have image so we're already giving it these values and the reason why we're giving it all these ID and you know classes and all these attributes is basically because in our CSS when we styling it we you know use the attributes to style them so now that we have all of this done let's see if there's any changes so if we let's say so as you can see no result is showing there's probably some errors in here so let's see what that is um we scroll down to this function let's see okay right here we have two different two brackets that should just be one let's see if that make any difference let's hit refresh oh good so as you can see we have some you know results showing right so let me see if I search say smile that doesn't change the result so there is still some errors and this is not the styling that we want so let's go down and try to fix it so first of all for the styling okay so you see where we're setting attribute for here we're setting the attribute for diff card right here we should be setting the attribute for div row right here we should setting the attribute for div column but we are setting all the attribute for div card so that's where the error is coming from so if we just try to fix that image the set attribute and then title and that so now if we come back in here and let's just try to refresh this page great so as you can see the results are showing so if I search for smile let's see the result doesn't change that means there's an error somewhere the error can't be here because this this is not where you know that happens let's see form. add event okay so there is a error in the spelling of listener so there should be E before n and right here we should have a semicolon so after all this our app should be working perfectly if I come in here now let me hit refresh let me search for smile great so as you can see now we have results on smile we can scroll down to see different results as you can see everything is basically working perfectly gives us a bunch of results on the movie smile let's say I search back right it gives us lots of results on the movie barie so that is working very well and this is you know the basic app that we've built so let me go through everything that we did the first thing we did was to style the you know create all the element we need in the HTML then we came into the CSS and styled it and then we came into JavaScript and showed you how to you know get results from the API and use that and show those results on this page so as you can see that is working perfectly and right now we can even get rid of this particular you know row if we want so if I come in here and let's see I eat refresh everything is still showing and let me explain why we even without searching we just have some results so right here where I run so I'm just going to go back in here right here where I run this return movies URL and I just use the API link so what this is doing is that it's just getting all the images I mean sorry all the movies on the normal page of this the movie DB website so without searching for anything without filtering filtering any search it's just giving you like the latest movies on the site so that's why we see we have some results showing here but then when you search like I search smile it then show some results about what we search so that is working perfectly and everything is running so I hope you understood everything that we've done in this tutorial up to this point I'm about to show you how to create a backend API that can be used to create movie reviews an API is a way for two or more computer programs to communicate with each other in our case we'll use URL endpoints that can be used to interact with a database this is more advanced than the beginning JavaScript project but don't worry if you don't understand everything at first I recommend following Along on your own and you'll eventually see how everything comes together so let's create the backend API that we'll use to create read update and delete movie reviews I'm onet.com and I'm going to create a new repet and we're going to create a node.js repet to write JavaScript uh for the back end so I'll just do create reppel and now I'll just I could have created the name when I was creating it but I can also update the name here so we have the default name but I can just type in review backend okay that's a good name so one good thing about repet is that you don't really have to do mpm install anything because when you run your code anything that you've imported it will automatically install for you but uh one thing we're going to do we're actually going to be using import statements from es6 and with no JS that's not that's not done by default so we have to go into our package.json now if you um if you're doing this locally you could do the same thing uh once you uh initialize your your project with mpm and nit it will create a package at Json but we're doing it automatically is created on repet so what I'm going to do is right after main I'm going to add type input module this will allow us to use import statements which I will be talking about more later and I like how there's two see how there's two spaces here everything's indented twice well let's make that the default it's currently not the default so I'm going to go to indent size and go to two Okay now I am going to open my index.js and we're going to create the backend server we're going to separate our main server code from the code that is accessing the database and all the routes will be in separate files now we could do this all in one file especially since we're doing a pretty basic app but when you create a much larger application you really want to have separation of concerns between your different files so we're going to use some best practices for how to separate different parts of your code and that will allow you to see how you can access code from one file in another file and eventually we will be using index.js but actually we're going to first create another file called server.js so click new file server.js and I am going to make this a little smaller because we're going to be focusing on the code for now and in This Server file we're going to create an Express server attach the cores and express. Json middleware since we'll be sending and receiving Json and make the server listen on Port 5000 ,000 so let me explain a few of those things before I start uh typing some code here but we're going to be using Express which is a a fast and lightwe web framework for node.js and it makes it easier to make uh HTTP endpoints that we can use for our web server and then we're also going to be using cores that's the cross origin resource sharing which allows agx request to skip the same origin policy and access resources from remote hosts uh basically uh it will prevent some errors when we're trying to access our database from a different host as our server and the course package provides an Express middleware that can be used to enable cores with different options now I if a lot of this that doesn't make sense don't worry about it just follow along and a lot of things will start to make sense as we go so I I said we're going to be using Express so I'll do import Express from Express so uh normally if you're doing this locally you would have to do mpm you would have to go well let me just show you how you do that locally we in repet we have a shell and I can clear that and I could do mpm install Express and that's how you would in do it locally and I could do it on repet also but it's going to automatically install Express when we press this play button to run our program so we don't need to install it manually so what so it's going to be looking for the express that's been installed and it's going to install into our node modules directory uh that's one great thing about JavaScript is that there's tons of extra Frameworks and there's tons of Frameworks and code that has already been written and you can just import that code and then you don't have to write things from scratch and it makes it it makes it much easier to write programs in JavaScript to use code that someone else has already written so Express is just one of those popular JavaScript packages or or a set of JavaScript code that we can use to make creating our JavaScript program a lot easier and then we're also going to import cores like I said and we'll do from cores and this is something else that will be installed automatically into our node modules directory when we run a program like I said that helps with the the cross origin resource sharing if you've done other web development you'll probably be familiar with that and if you haven't you're going to get familiar with it soon and we're also going to now import a file that we are going to create so these first two things we're not creating it'll just be imported but now we're going to uh import a a file that we're going to create so we're going to import the file reviews from well that's not the name of the file that's the name of what we're going to export from this file and the file URL is just API reviews. route .js so we are going to have our URL routes separate from our main server file and now we have to get access to express app con app that's a variable that we're just going to load Express into and this is what we'll be using to create our web server now we can do app.use now this is how we can use middleware uh middleware are are just different basically programs that Express is going to use to change how things work so we're going to first do cores that we've already imported and then we're going to do app.use express. Json so what this one is this will allow our server to accept Json in the body of a request so if somebody sends a get request or post request to our server it'll be able to to read Json so requests are when you go to a website that there's a get request to get the information from the website or you can do a post request to send information to the reg to to the URL and now we'll be able to send and receive Json because we're using this middleware just add some extra features to our our uh web server that we're creating okay now let's specify some of the initial routes so the initial routes are basically the URL that that you access to get to send and receive information so we'll do app.use and then we'll pass in the basically the URL and so it's going to be we have a root URL and then it's going to be/ API slv1 SL reviews now this is just that we can use any URL here but this is best practice uh when we are creating an API it's of you often want to specify that it's an API and then often it's good to have ver versions of the API just in case in the future you create a new version now this is just like a a demo app so we know there's never going to be a version two but it's good to start learning the best practices now and we for this URL we are going to use the routes from this file so I'm just going to put a comma here and then I'll put reviews okay so now we're going to use the routes that we we s to create later but this is showing that for this URL we're using that route okay now we're going to create just the backup route if someone goes to a URL that's not included in what we create in that route file we'll do app.use and then if I put Aster that just means anything else and now instead of loading it from a different file we'll just put it right here and we're putting a little little function right in the line here so a up req re s so that's the request and uh result and this is something that's just part of Express the the information that it's requesting here and for the RS that's the response not result the response is going to be rs. status and it will send the 404 the 404 code and then it's going to send some Json and it'll say error not found now we'll eventually see this this appear in a web browser when we go to a specific URL that's not included here and finally we talked about how we are going to be connecting different files together well next we are going to export our app as a module just like this export default app so that app is this app that we created here that we added all these things to and this will allow us to import app in the file that accesses the database which will be the file will run to get the server running so when you want to use code between files you're usually going to have an export statement at the end to export the F something from that file to use to import into a different file so we want to separate our main server code from the database code so here here's our our our main server code so let's go back to the index.js this is where we're going to start making the database code uh but for the to start working with the database we need a database now there is a way to use a database that's included in repet it has a um where is it here the database here but this is this is a pretty a simplified database which probably would be okay for our purposes but it's not going to really work in a production environment so I'm going to show you how to set up mongodb as our database we're actually going to uh use a different we the mongodb atlas website to set up our database now you can run mongodb locally and we could even set up to run mongodb right in our our shell here but we're going to be using the online version of mongod B where it just stores everything in the cloud it actually simplifies things and they have a free plan that we can use okay so now I'm over on the mongodb atlas website and you can either create an account or sign in I'm just going to click sign in here now you may have to figure out some things when you're creating your account for the first time it's not going to go to this right away but at some point either during the account creation process or after the account creation project process you'll be in your projects page and you'll go to new project it may go directly into the create a project page when you're creating a new account so we'll just name the project I'm going to call this movie reviews okay next and then we can just go through we'll just use the default project owner which is me okay now I'm going to build a database now we have a few different options I'm going to go with the free option which will and be good enough for our purposes if you want to specify any of these things here I'm just going to leave this all default and click create cluster so this will create a free database here and now I can create a username and password so I will create a username and password here and then just click um create user okay so the username and password just so you know this is just for this database it the username you put here is completely separate from your mongodb username it's separate from your repet username you can basically use anything here it's only for the specific database we're creating right now and then we have to decide how we're going to connect to it well I'm going to do Cloud environment because we're connecting from repet which is a cloud environment and then we have to configure um enable access from specific IP addresses now since repet uses um it doesn't always have the same IP address it could be variable we have to make it accessible from any IP address to do that we'll just do 0.0.0.0 sl0 and now we'll be able to access from any IP address and I'll just click add entry there and then we'll keep going down and then finish and close and now we can say go to database I am gonna uh yeah I'll click keep that clicked so now it's uh creating our database which is going to take a few minutes to create here while this is creating oh I guess it just already created it did not take a few minutes if I I'll zoom out here so you can kind of see what this uh all this is what the page is more likely to look like to you so if I go to connect this is what we're going to we're going to get some information here to connect to our database from repet so I'm go to connect your application here and then I'm GNA make sure I'm on the nodejs it's the default here and we have this connection string now we're going to need this later I'm just going to click the copy button to connect I'm copying this connection string which is we're going to put into a certain spot on repet so it can connect to our database so now let me just go back over to repl it so before we start typing into anything into our index.js let's create some environment variables because if you remember we just created a password and you never want to store a pass password right in your Javascript file uh you want to store in a in an environment variables environment variables are things that are not often like are not saved they're harder to access uh any any special information like passwords or anything that could change regularly you may want to put in an environment V variable instead of write in your code and also with environment variables if you're going to ever up uh put things on a GitHub you never want to upload passwords or anything on the GitHub so you want to store that into an environment variable that's only stored in the environment and then you can still access that what that variable is from your program but you don't actually have to have the the hardcoded password right in your program so in repet there's a special way to deal with environment variables it would be a little slightly different if you're working on a local machine but if you're just doing it locally you can just kind of look up how you would deal with environment variables locally but on repet we're going to go to secrets and let me bring this out here so we're going to create a key so the key is like the variable name and then the value would be the the Val the value of the variable so we're going to create a one called uh mango user name and then I will put bow so this was just the username I created for our database add new secret now let's do password okay you have to promise not to tell tell anybody what this password is this is just between me and you it's a complete secret you cannot share this password with anybody but I use free code Camp okay so I'll add new secret and now we we can now access these in our code L just close that for now and let's start creating this file so first uh so in this file we're going to connect to the database and start the server so first we'll do import app from see uh server.js that was just the other file we created server.js and we exported the app down here and now we're importing it so now we can use that code in this file and we kind of have separation of concerns between what we're trying to do here so now we'll do import M mongod DB from M mongodb now this is just a JavaScript library that when we run our code it'll automatically be imported and then we can use these special functions that were created that the people who create mango be also created this JavaScript library to make it easier to interact with our Mong database from JavaScript and now we're going to import another thing some from a file that we we still have to create so this is going to be called reviews Dao now and this be called it's going to be from uh .do reviews dao. JS now Dao here that stands for data access object this is basically a common pattern for writing programs that work with databases so the data access object pattern separates a data resources client interface from its data access mechanisms it adapts a specific data resources access API to a generic client interface and so we're following that pattern in how we set up this this program and that's why it's called Dao here okay we've imported everything we need to import now we'll create some variables we're first going to create a client this is something that comes right from mongodb the mongodb JavaScript library um that was created by mongodb to make it easier to uh work with our database so be. client so I've created a variable called client that we get from this and now you'll see how we'll be able to use that to connect to our database now let's get access to our username and password that we stored in environment variables so we'll do const username equals and then we will do this is how we get an environment variable process. EnV now this is actually um basically what you would do to access an environment variable on the local machine too process. EnV and then we will do uncore username so remember that was the name of our our one now I'm just going to copy this line and then we'll do password and then password so now we have access to both of our environment variables in the in these JavaScript variables okay now this is the the last one this is important const and this is uh the URI now that's what we got here on the Mong website where we copy this right here this is the the the URI is the connection string so I'm going to go back over here and I'm going to put it in a string I'm going to use uh I could put the string I could use double quotes or single quotes I'm going to use the back tick and using a back tick allows us to do something special allows us to access JavaScript variables from inside the string so we have the username hard quoted right in the string here but I'm not going to use that variable here so X I'll just I'm going to copy that variable and now I'm going to um do do dollar sign and then curly braces and now I can just put that variable here now you can see since this is a different color it's black that's how we know that this isn't part of the string we're actually just inserting that variable into the string and we can do the same thing with the password so where it has the um angle brackets with the word password I'll do um curly braak brackets like that I'm going to copy this and then just paste it right in there so now we we're putting our username and password right in the string and that will allow us to connect to our database okay well actually we're making one more variable which is the port we we're we're basically running our server on a specific port and the port that we're going to be running on is going to be 8,000 so you can uh the port number isn't super important there's just different ones that are common to use for different things okay now we are going to connect to our database so we'll do client oh I meant to do client. connect and this is just something that comes with the the mongodb JavaScript library and I will do a parenthesis and we'll start by passing in the URI and now we're going to pass in some options now the these options are going to be a JavaScript object that's why have the curly braces here which is going to be a set of key value Pairs and these are just options that the mango client is built into to be able to accept we'll do a Max pool size which is the amount of people that can be connected to at one time we'll set at 50 and then we'll do a w timeout. Ms and we'll set that to 2500 that's that's 2500 milliseconds or 25 seconds that's how long a connection can be trying to connect before it time times out and the final thing we'll do is use new URL parser and set that to true now that's added because the Mong no. JS driver rewrote the tool that it uses to parse mongodb connection strings and it put the new pars are behind the flag so you basically always have to set that to true and so that will end the connection so so we've connected by passing in the URI and then the options but after we connect we want to do a uh dot catch so this will catch any errors that happened when you're connecting so whenever you're going to access an external resource like this database uh you want to deal with errors so going to do a DOT catch to catch any errors that could happen but they may not happen and I'm going to put in an ER Arrow function this is a special type of JavaScript function that that makes it easier that just simplifies what a function looks like and you can put it all in one line and you don't have to name the function so uh this is the ER R is what we're passing into the function and then I put an arrow just like that with the equal sign and angle bracket and this is the body of the function in these curly braces so what we'll do if there's an error we will console. error now console. err is similar to console.log but it just communicates that it's an errror it'll appear right it will be a message that'll appear in a console and it it just it's just like a special type of console.log and we'll log air. stack so the air that comes from connection if that there is an error will uh just log the error stack and then we will also do process. exit one that just means we're going to end this is just like a fancy way of ending the program we're exiting the process and the process would be the the program that we're running so after we as long when there's no error then we can go to the next part which is a then statement so first we're going to connect then we're going to do something well we're going to pass in a function into here so it's going going to be an an eror function and it's going to be a special type of function an async function an async function is just a function that can run asynchronously or it can run at the same time as other things so you don't have to wait for one thing to end before something else happens or you can use an async to make sure you wait for something in before something else happens which is what we're using it for so we are going to get the client so the client is what comes from We're connecting to the database and it's going to return a client so then it's the the the this client variable is coming from the connection to the database and we're making this into an arrow function okay we're not going to actually use the client just yet first we're just going to start the web server so we can just just kind of test everything out so I'm going to do app. listen so uh we got remember the app came from our server up here and app. listen is how you start the server so we are going to listen on a specific port number and so we pass there's two basically this is a function here and we're passing in two pieces of information the port and then an uh a we're passing in a function and we're going to use an arrow function so if you use parentheses here that means we're not passing any any data into the arrow function so or we're passing in nothing to this Arrow function and inside the body of the arrow function we are going to just log some information console.log and we will just log um listening on Port and then just the the the port number Port okay it's actually almost time to test out our server but we also need to get a route so um if you remember back over on our other file our server.js we have this reviews route so we need to create a route before we can test out the server now let's make it we're going to make it as simple as possible to test out and then we'll make it a little more complicated so I'm going to create a new directory now you don't have to but it helps to keep your code uh organ and this directory is called API so all the all the code for API will be in this directory first we will create the reviews. R.J uh so I can so reviews. route. JS um let me make this over a little bit here and so to to create our route uh we'll first import Express from Express then we will create our router const Router so this will when people go to our URL this will route the request to different different parts of our application so express. router is just part of the express that helps us make our our our web server and now we will do router. route and then we can pass in so slash just means the the base the base route and we'll do do get and then you always any creating a route you always have a the request and the result and this is going to be a little arrow function here and the result. send we're going to send this result to whoever is requesting that route and it's just going to say hello world let me close that so it can be all in one line there and then I will just do X Port default router so it can be we import the route in our other file okay I think it's time to test out let's try this so when we press run it's going to run index index.js where it's going to get access to our database but it we're not actually going to do anything to our database quite yet but when we do app. listen here after connecting to our database it's going to run this it it's going to run our app when we have uh we're using this route and so this is our kind of our base URL which I'm going to copy right there and then it's going to put this at the end of a base base route and then if you go to that URL it's going to do hello world so let's test that out I just press run and so the first time you run it's going to have to install everything so it's doing mpm install chors Express MDB MDB see we imported all of these libraries Kors Express and mongod B and cuz see so we're basically just waiting for it to finish uh but you can see we import Express here we import cores and let's see we already have an error it cannot find a module and because what this is one we haven't actually finished creating the the reviews Dao reviews Dow so if we go back over to our index.js um let's let's just we're not using it yet so let me just comment that out um with you know two slashes will comment or what I just did you can do command or control and then press slash it'll automatically make into a comment you can actually do that for multiple so if I highlight everything do Commander control slash and then I can kind of turn off it and on a comment so uh we are not creating that yet so let's try running this again and then here oh I somehow didn't end up with that still being a comment so comment that out now run it okay so it's opening up our web view error not found well that's coming directly from our server here if you go to a URL that hasn't been specified it's going to say air not found now let's see what happens if we go to a URL that is specified another thing I want to show you is that you don't have to use this little web view right here so this web view actually only lets you go to the the root URL but since I'm going to copy this now I'm just going to go open this up in a new tab and you can see it's saying uh a not found just like before but now I'm going to get this to add to the end here and I'm going to add that to the end of the UR URL and it says hello world so when we go to the URL it says hello world and it's coming right from our route the route that we created here it's sending hello world when we go to the we go to the root URL and there add slash at the end and it works so whenever you go to a URL on a in a web browser it's almost always doing a get request requ EST but as you may know there's other types of requests like post put and delete requests which we will be using as we continue here okay so let's update this so this is just a sample to see how you can go to a specific route and here we just put it right in that file but we are going to put what's returned in or what happens when you go to that route in a different file so right now what happens when you go to that get request route it shows right here but we're going to try to separate that out so we have our route file and we're going to have a control the our controller file and we're going to access our controller file to tell what we're going to do when we go to the different routes so I'm going to import another file here so import uh reviews controller from and we'll do review controller.js okay so we still so we have to create that file but before we create the file let's let's use it in this file so this time I'm just going to paste in some code here and we'll talk about it so this now we have a different type of Route so before we just had the slash as the route but now we have slov slid but it has a colon here so if you you have a colon in your route here that means uh this could be anything here and this becomes a variable called ID so now we can do movie and then put the movie ID like like 5678 or something like that and then in our in our review controller we can get access to whatever ID was put into the URL to do something with that ID so this is our this is a git request where we're trying to get information and see we can see we're all all these we're using the review we're calling functions in the reviews controller we're going to create all these functions to say what happens when we go to that route so this is the API get reviews uh uh function where it's going to return all the reviews that are attached to a specific movie and then here uh route SL new is when we want to create a new review so review controller. API do API post review we're going to be using a see it's a post request here and post requests are usually used when you're creating something new and then that we use a different format here where now all these routes are these are all different uh HTTP request uh keywords for the same route so it's slid so here it's the movie ID but here it's the the review ID it's a different type of ID and and we can get access to the ID and if it's a get request we'll call this function if it's a put request we'll call this function if it's a delete request we'll call this function so let's create our reviews. controller so I'm going to go over here and we'll do uh reviews. controller.js and you can kind of see what that looks like here um now close out we're in our reviews controller okay this time I'm just going to paste in some code to make it a lot faster then we'll review it now it's going to look pretty complicated uh we uh this it's more complicated than our last JavaScript project but just stay with me and I'll explain how it all works so let's go back to the top so first we are going to uh import our reviews down now this is is is what we're going to used to actually access the database to actually make changes to the database and we'll be creating that next so basically this file is all about getting information from the from from the that was sent to to the route and sending it to the reviews Dow so it we're all the controller is just getting information from the route and then doing something with that information and what it's doing with that information is sending it to the reviews Dow which will actually access the database and then it's going to get information back from from the database so let's let's look what we're doing here so we are going to first we're going to be exporting default class reviews controller so this just means uh we've had had exports on all of our files so far so since we're exporting the reviews controller that means we can import it in other places and this time we are creating a class so a class is something um it's a class is used in JavaScript to have multiple functions so we're going to create uh a few different functions in our review controller that we can then call uh in our in our routes file so here's the first function here it's a static function because uh you can call it directly from the reviews controller if it wasn't static we would have to create an instance of a reviews controller uh which we're not going to talk about right now in this section but since it's static we don't have to create an instance now since it's a sync we can then use a wait a wait to wait for things to happen and so the name of it is API post- review so if you if we go back over to our uh our routes file we can see it's this one right here reviews controller. API post review so we're creating that right here that's what we're creating so this information is actually just coming right from Express um the main things we need to look at are the the request information and the response so here we're going in the request the request is going to have a body so a body of the request that's going to be some Json that's that's submitted with the the URL request HTTP request and it's going to have some information it's going to have the movie ID that we're connecting the review to it's going to have the review the actual text of the review and the user so the user that's creating the review so uh and right now we can see that we're doing a try catch so we're going to try to do all these things and it's going to try to do all these things and if there's an air it will catch the air and it will respond so right now we're just trying all these things and if it's there's no error then it never does the it never catches the error so first we get access to these variables the movie ID the review and the user and now this is where we add the review so we're creating a variable called review response we're awaiting the result of this which we we have to create this so the reviews dow. add review we're throwing in all the different information and then we are responding the res. Json remember before we respond with hello world now we're responding with the Json that says static success and if we go down a lot of these things are pretty similar so there are some things different so now uh here was all that rec. body now we're doing rec. prams if you do rec. pams then let's go back to the route file that's where we get this right here this is a Pam so a body is actually some Json that you include but the pams you can get it right from the the URL there's just different ways of getting information so we got uh it's either we're going to either get the ID or it's just going to be an empty object and then we are going to get the review we're passing in the ID that we want the review and if there is no review uh then we respond with not found and then we just return from the function but if we haven't returned from the function then we'll respond with the review we'll give back Json of the review that we're trying to get based on the ID and then you can see we can also log in error and then here to update the review well first we have to get access to the review ID this is from rec. prams but the actual review and the user are from the body now when when we test this out you'll see exactly how this works how you can give data with the parameter and how you can give data in body in the body when we when we're testing this out later so then we're going to update the review rews out. update review this is a function we still have to create we pass in the information the review idea the user and the review and then um if there could be an error or there could be um oh B basically there just two ways there could be an error so this is one way there could be an error this is another way it can be an error basically if nothing was modified so there's going to be response here that's coming directly from mongodb there's going to be a response from mongodb and if the modified count equals zero that means nothing was changed and then we'll just we'll create an error throw new error this is creating a new error unable to update review so if there's not an airror then we come down here um where we do the we respond with the Json success and if there was if we did throw an air if if this air happened then that air it's going to get to this catch block here which is going to just respond saying what the error is okay then the next few are pretty similar delete review here we only need an ID we're getting the ID parameter and then we are awaiting uh calling reviews dow. delete review we're passing the ID and it's either going to be successful or there's going to be an error and then the final one get reviews so this is slightly different because we're getting a list of all reviews for a specific movie and so the ID here is not the review ID but is the movie ID and this we're going going to be calling the reviews out. get movies ID and if there's no reviews then we'll say not found or else uh we're going to respond with the reviews so or there could be another error that will then uh log here okay so now let's create our final file now we already referenced the file here and since since we referenced it let's let's use the file before so we put it in here but we haven't actually used it in our index.js so basically the reviews Dow is where we're actually interacting with the database but we connect to the database in index.js so we have to somehow send the database connection to the reviews Dow which we'll do down here so right before we um start listening we're going to basically connect this together so await uh reviews Dow uh do inject DB now this is a function we have to create that we'll see just a second so we're going to inject the client uh basically this is just a way to send our database connection to the reviews Dow that which then we can use to access the database so let's actually create that now we can see that SL Dow reviews. JS so um I'm going to create that now I will create a new folder called Dao and then I will create a new file called um you can see I just paste that in there oh there there it goes reviews dow. JS okay we're now going to see how to actually connect to the database we actually haven't yet connected to mongodb yet and this is where it all happens so again I'm going to paste in some code and then we're going to talk about it well first we're going to import mongodb that's important because we are using the mongodb JavaScript uh library to access mongodb now from mongodb we're going to get access to object ID uh basically uh we're going to be sending and receiving uh text and integers uh from our back end to our database but our our database can't for when we're actually searching for a record in our database by its ID we can't just search by a a integer or a string we have to actually search by a specific data type called object ID which is different than a string or integer so we're going to convert our our string or integer into an object ID when we send the ID to the database so the database will be able to correctly look up a record now we'll see how that works in just a minute here so first we're going to create reviews now it says let reviews that means we're creating a variable called reviews that we haven't uh put into where we've created the variable but we have not assigned the variable to anything but this is where we're going to assign uh our basically our connection to the database so remember we call the in inject DB function well first of all we can see that we're exporting this class reviews Dow so we can do reviews. inject DB because it's a static that means we don't have to inst instantiate the class before we call the function so we are getting a connection that's the connection that that we we got in the other file and if there's already it says if reviews return that means if there's already a database connection uh don't inject don't don't do anything but if there's not the database connection we're going to try this so it's a try catch block so first we're going to try this if there's an error we do it next so this is specifically right from the the mangu DB uh JavaScript uh Library so we're going to away for the database connection so the here's the connection that we got from the other file and then we're going to first get the uh DB the database called reviews and then we're going to get the collection called reviews now uh MB database um has like the on the top level you have your database and you can have multiple collections in the database now it's not you can we could name these anything we we want but since all this is just reviews I just named the database reviews and the collection reviews but you can just change this to be anything you want so of you may have um like this could be movies and then you could have multiple collections there could be a reviews collection you could have the movie information collection you could have the uh I don't know movie post posters collection so you could have a bunch of Collections and a collection is basically what you would think of as a database so it's like a bunch of smaller databases within the overall arching database uh you'll see what I mean later once we actually see what this looks like on mongodb Atlas so basically we're getting access to our database okay so now the rest of the functions here are all doing something with the database so we can add review and so all these um fun all these functions are functions that we already called in our other file so if we just go back over there really quick um so for instance we have our ad review where it just passed in the movie ID a user and a review so we go back here uh we are now going to receive the movie ID user and review so first we're going to create our document this is basically our uh database entry and it's going to be a JavaScript object with the movie ID uh uh so these are the key value key value key value now we are now going to return from this function what happens when we await this to happen so reviews that's our database insert one insert one is a mongodb command and it's how you insert a document into the database and we're inserting review doc uh so that's pretty simple and then we can catch if there's an error we'll see unable to post review or'll list the error and it's going to return the error okay now to get a review instead of inserting one we are going to find one and if you're going to find a document in a MB database you have to find it you have to say what you're going to be searching for the document by it's very common to search by the ID uh by default there's a single every ID is different so and these IDs are created automatically so when we when we created our document the movie ID is not the ID the ID was created automatically when we created the document so if we know the ID we can now search by the ID now review ID this is coming in as a as a uh basically a it's probably coming in as a string but we're using object ID that's from here to convert it to convert the string to an object ID that we can then use with find we can find the ID that has the object ID of the ID that we passed in and if there's an air we catch the air and then same with update review we pass in the review ID the user and the review and uh we don't need this console.log this is a test thing I was doing earlier so now we can update one so so we we basically have insert one find One update one and when you're updating one it's like a combination of a find and basically creating some them putting the information so so we're passing in two things so first is the object which get says what we're searching for so we're we're finding we're trying to find the document with that review ID that's the one we're going to update and this is how we're going to update it we are going to set so you're going to have to this is just something specific to mongodb you're going to have to set a user to be the user and set the review to be the review and then we can return the the response that we get and then we have the error and then finally delete review so this is just getting an ID uh delete one and this is we're searching by the object ID to uh the review ID to find what we're going to delete and then finally get movies by ID so this time we're we have a movie ID this isn't an object ID this is basically just an integer that we're passing in and where uh again we don't need this console.log so we're going to get a cursor so this is well basically when you find multiple items it's going to return a cursor and we're finding every item that has the ID and you can see we are having this we're passing the ID to this par int function so it's going to be a string but parse int this is from JavaScript parse int is a function from JavaScript to convert a string to an integer which we're then going to pass in to our fine command of Mong B and we're going to get a cursor which is basically just a list of all the documents but it's not in then it's not in the format that we want so we have to convert it to an array we're going to return cursor. to array and then it's going to catch an error okay let's try this out so I am going to bring here let's just press play here see if we have any errors no errors so far so what I'm going to go do is go into so with this here basically with a web browser you can only do get requests but if you're remember on a routes we have a bunch of other types of requests we have the um the post request put request delete request you need something special to be able to do those types of requests so we're going to use a common command called curl now a lot of uh computers come with curl builtin and uh repet does also so we can go to the Shell and we can now run some curl commands so the first thing we're going to try to do is to create a review before though let's go back to mongodb Atlas before we create a review I'm going to go to browse collection so we're going to browse all the documents in our database so we can see that for databases we have zero database bases zero collection so we don't have any information we don't have any records in our database but we're about to change that so I'm going to go back over here and in my console I'm going to paste in a curl command now there's a few different ways we could test this API um we you cannot really do with a a web browser very easily because web browsers are mainly dealing with get requests but if you there's some programs such as postmen or I think it's called ins insomnia you can use to do it more of a in a graphical way but most computers have curl and uh or at least or many computers have curl and repet has it built in so I'm going to paste in this curl command and we can see it's it spans a few different lines here so we have curl DX so this is how we're going to specify what HTTP type of request we're doing we're doing a post request and then we have the URL here so this URL is just coming from up here and then we have the um the API slv1 reviews that's our our key our um base URL and then Slash new that's right here our Slash new right here and we're doing a post request and now we are going to set the headers of the request so we're going to set the headers the content typee is going to be application Json and now we're going to set the body of the request so for the body we need to set the the movie ID we need to set the user and we need to set the review so the user is me Bo and the review is just good and the movie ID is just an integer here so you can go back we can actually go into the file where we use that information um in the post review we're getting the movie ID the review and the user and then we're going to create a movie so I'm just going to press PR return it says success okay there's a few different ways we can test that it actually works but one way is to go right back over here and now I'm going to click refresh you can see we it's now showing the information in our database and we have the movie id2 user bow and review good and we have it created an object ID so it automatically creates an object ID like I said every ID is is different well I'm going to actually um we're going to actually use the object ID but first let's go back over here so let me just clear this again and uh we'll make it so you can see more of the console so let's see if we can get that uh document that we just created oh let's create a few more documents and then we'll try to get them so I'm going to do a curl we'll do uh same movie ID we'll do movie ID 12 we'll do for the user we'll do Quincy for the review uh Quincy did not like that movie Bad movie that was his review okay let's add one more and this time we'll do a different movie ID we'll do movie ID 13 re I don't know how this Chang review wait name no user so movie ID 13 user this time we'll go back to Bow um sometimes the replic console does some weird things when you kind of move it back and forth to update um let's see movie id2 user Quincy oh yeah see this number kind of got in there okay user bow and review will be awesome okay let me just see if I messed every anything up with how everything was changing here I think that's what we want oh except I wanted a different movie ID okay okay now let's just check back in here what they look like so I'm refreshing in here and we got the first one movie the movie 12 movie 12 bow and Quincy and then we have another one movie 13 awesome okay now what I'm going to do is go back over here and now I'm going to make a get request so let me clear that and we'll do curl x get and I'll show you how we can actually just make this instead of just pasting all in I'm going to copy that and then I'm going to put slash oh what was it SL API slv1 SL reviews and this is just going to be a get request but I'm going to put the object ID of the review at the end of this so I'm going to go back over here I'm going to copy this idea I'm going to see if I can get access to this specific URL so I'm just going to copy that string and put that in there and return okay we got it look movie id2 user bow and the review is good okay now let's see if we can get the reviews for all the reviews for movie 12 so I'm going to clear that and I'm just going to this is going to be a get request but remember how you do that we're going to review SL movie SL 12 and now we've returned two reviews so we have uh user Bow review good user Quincy review bad movie so we just return all the reviews for movie 12 which was two different reviews okay now let's see how we can change a review so to change the revieww I'm going to do uh curl x putut and then I'm going to put the URL I'm actually going to um I'm going to copy most of this but we have to put the ID so I can get the ID from right here and now I'm going to create this header and I'm going to set the the user to Bow which already was but I could change the username but I'm going to leave it the same and then now the review is going to be horrible so it used to be good now it's going to be horrible okay now I'm going to go back to where we get all the reviews really quick and this is something with rep this is not the command somehow it knew the correct command but it didn't display the crit command the the it was supposed to look like this and it I just pressed up a few times to get back to the command but it still was able to it I pressed up the correct amount of times to get to that command and it did run that command but for some reason it didn't look like that command in the Shell that's okay it still gave us the correct information look B review is horrible uh and Quincy review is bad movie so it changed to horrible and we can verify by just going back going here I'm going to ref says good I'll click this uh where is I thought there was oh yeah here's the refresh button here and now it's horrible so we've been able to create it we've been able to create a review edit a review look get a single review get all the reviews for a movie now let's just check the test the delete one so for delete I can well let me just clear that out so we'll do curl x delete and then I'll put the the URL which is just that slash API slv1 slash reviews slash and then I have to get again I'm just going to go back and just copy this of the one I want to delete this object ID and then I put that object ID at the end and now it should delete let's go back over there and see if the first it says b horriable if I refresh that it shouldn't be one that says b horrible see it starts at Quincy bad movie and there's only two objects now there used there used to be three so it worked our entire our API all worked so the next step is connecting this API with the front end okay the first step in connecting the front end to the back end is to clone the front end so this is the front end that Tommy made and I'm just going to go to Fork repo and I'm going to call it HTML front end that's going to be my version and now let's let it load okay I'm just going to hit the play button right here to start so we can see what it looks like you you can see um if we spread out you can see a little more I can also open this in a new tab so let me copy that okay this is what it looks like I can do a searching search for things and just how Tommy had it so let's go back to the oh that's my back end which we are going to oh while I'm here while I'm on the back end I did make one change to the back end which was in the what is the routes or the controllers um the movie ID well we have to parse it as an INT because it comes it could come in as a string or an integer and we have to make sure it's an integer before it gets saved to the database okay let's go back to the front end so right now uh there is no way to um to see any reviews it's not made up for any reviews so what we want to do is make it so under each movie on here there'll be a link that goes to the page of reviews so um oh let's make two more pages here or two more files first I'll make a file called movie. HTML which will be the page the that that's just about the movie that has all the the the uh reviews and then I'll make another file called movie. JS which will be the Javascript file and let me just um move that over here and to start off with we're going to just go into the index.html I'm going to copy all this and then I'm just going to bring it right into the movies. HTML then I'm going to make some changes not going to have this sample code here but but we are going to end up um the review we're going to load the reviews kind of like the movie so there'll be a card for each review but I'll take that off we don't need this and what else are we not going to have okay we're not going to need the search because this is just the review and we want to make sure that when we click the word movie site it will go back to the index index.html that's the page that Tommy made and then we want to make sure that instead of script.js we're going to make it movie. JS so we'll be L linking to the other JV script file okay that looks pretty good now I'm going to go to the script.js I'm actually going to copy all that too and bring over to movie. JS we're going to have some things are going to be kind of similar uh some of the tabbing got messed up a little here so let me make sure we get the the tabbing how we wanted so if I select everything and if I press shift tab it goes back one or if I do shift or if I just do tab it goes for one so what we're going to do is change uh we don't need these two links but we still need an API link but now instead of using the movie DB API link we're using the API that we created on the back end so I'm going to go back to my backend code and we just need to get so this is the URL if you're following along it could be different depending on what your url is we go back here and I'll just paste in this URL and then remember we have the the other part of the URL which is just uh what is it API V1 SL reviews slash okay and we took off the search and the form so we don't need that and then we are going to delete this because we don't have that anymore and now we're we're going to make some some additional changes here but before we make the addition changes let's make it so a user can actually get to the the movie page so I'm going to go to the script.js remember this is for our our main root site the the one that Tomy made and I'm going to make some changes so we can add a link here so what we're going to do when on this section right here where we update the inner HTML of the title um we can since it's inner HTML we can just add a HTML it just doesn't just have to be a title we can use we can actually put any HTML in these backticks so what I'm going to do is add a link to the review page in this HTML so first of all I'm going to put a br which means means a break a line break so we'll go to the next line and then we'll do ahref uh you know that's that's an anchor tag or a link and we just had to put the URL so this case is just going to be movie. HTML but we're not just going to only put movie. HTML we're going to put some query parameters the we we want to pass some information from the index.html to movie. HTML and we there's a few different ways to pass information between pages but one of the easier ones is just to use Query parameters in the URL so you've probably seen this before qu you do the the movie HTML we put a question mark to say that we're just about to put some query parameters which are just basically key value pairs so first we're going to pass in the ID the movie ID of the movie that the person is clicking on so we we want to make sure it loads the the reviews for the right movie based on the movie ID so I'll do ID equals and then I have to get the movie ID basically we can use this exact same way that we got the title to get the ID so I'm just going to copy that and element. tile but instead of element. tile it's going to be element. ID and then we can just put an Amper sand or an and symbol to do another query parameter and it's going to follow the same format of the ID but instead of this time instead of ID it's going to be title we're going to just pass in the movie title and then we'll put title and then we have to so this is a we're still in this uh anchor tag or the link the link uh element so I'm going to put what the link is going to say is going to just say reviews and then I'll put the closing tag just like that okay so now I am going to just run that and let's just test that so far okay so I'm going to go back to the page I'll refresh here now we can see it says reviews now it is kind of hard to read with the blue like that and you could go into and change the CSS uh I'm not going to focus so much on changing the CSS uh and styling but uh something that you can do on your own if you want to make it look a little better so if I just go right into to this one um it doesn't show anything because we haven't loaded anything on the page yet but we can see it definitely did load the page and if we go back see the URL bar we can see that it's saying movie. HTML we have ID then we have the title and then it um it it because there's spaces to put a space in a URL you can't just put a space in url so it put the percent 20 to represent the space okay let let's go back over to our file and now we we're basically done with our updates to the the root the H the script.js and the index.html let's go back to movie. JS so I'm not going to type in everything here sometimes I'm going to paste some things in here and so this is going to get information from our URL so right here we when we do a const URL we're making a variable called URL and we're using new URL this is a way to basically make a URL object from the the actual URL so this is just something built into the browser built into JavaScript if you do location on href it'll be a string based on the URL that the person is at and we can create a URL object like that and once we have a UR URL object we can access different parts of the URL specifically we're trying to get the search parameter so the the the the query parameters we're getting the one that has the key of ID and putting the value into movie ID and then the key of title and putting the value into movie title so we got that we were able to pass that information into this next page since we have the title we're actually going to uh put in the movie title onto the page so we already have access to the main element I'm just going to copy that and paste that in and now we're going to get access to to the title element uh if you remember we actually don't even have a title element so we have to create that so let's go over to movie. HTML and then I am going to just uh put in some code here reviews for movie title now H1 if you remember has a dark background and right now H1s are colored black so let me go and style that CSS and I'm just going to in the body I'm just going to put color white uh so now all the text color is is refers to text color so we already have the h3s are white now we have all the texts being white which makes sense CU we have a dark background and now we don't even need that one anymore because everything's going to be white so let's just see what that looks like so far uh first of all let me just make sure everything is correct oh before we see what it looks like let's load the title into that title element that we just created so that's just going to be like this it's what you've already learned about title.in text is going to be title oh before you may have actually learned about inner HTML I think that's see inner HTML you can put basically any any HTML inner text is just going to focus only on changing the text it's generally safer to use inner text because uh you won't accidentally put some some uh HTML that's going to just mess up everything so if you can use inner text but then use in HTML if you need to so let's just play that or run that basically just reload it and then I'm going to just refresh over here and now look we're getting reviews for Jeepers Creepers reborn if I click movie site I can go to any of these so how about uh black Adam reviews for Black Adam it's kind of over onto the side here so we could go up and change the CSS so it's kind kind of centered I'm going to leave that as something for you to do on your own but you can see whatever we click on it's going to put the the movie title right in there let's go to Pinocchio reviews for Pinocchio so now let's make it so the reviews actually show up it doesn't actually show up as any reviews there so we're going to change uh change this so it says return movies we actually want this to be return uh reviews so I just did Commander control D to select multiple text pieces at the same time and then I can just say return reviews and I can change them both at the same time so then you only have to type it once and it types it we have multiple cursors to type those on so we're going to go to the URL so but we we are going to have to change something because if we go up here we see the URL is this uh which is uh SL reviews and if you remember from our back end here's our back end here the route we actually want to go to is has slm movies slid at the end so we're going to you keep the base URL but now I'm going to say plus movie slash and then plus plus and then I'm going to put movie ID which is what we got directly from the query parameter okay now we're going to go to this newer URL we're going to get the data and this time uh we don't need data. results uh different um different a apis work differently so in the API for the movie page we did have to do do results but with the API we created it just deliver it just gives the data directly so I'm going to do command control D to select every time it says uh data. results and just get rid of do results it's just going to be data and we can keep this console.log here to see if anything is important now here um there's with in programming there's just a bunch of ways to everything so you already learned this method um but I'm going to show you now another method so uh we already talked about how within HTML you can basically put a lot of HTML so that's what I'm going to do instead of creating a div uh the basically the the card div the row div the column div all like this I'm just going to create it as HTML now there's definitely there's there's definitely reasons to do it either way and it just depends on your use case so it's really good to know both ways of doing it so I just want to teach you a new way that you can do it so I'm going to this is going to be called div card I'm going to keep this the same but I'm actually going to delete all these things and you'll see soon what we're how we're going to change this and yeah all this actually see all this I'm going to show you a different way to do almost all all that we're not going to do all of it because we're not going to have the IM the there's not going to be an image um we're not going to have the basically that's the main thing we're not going to have we're not going to have this this Center element so I'm just going to delete all that and we can see that right now okay we're only going to append that card but first we have to update the card so right now we've created that element and then it gets appended here oh and actually no we we don't even need to do that because we're just going to append this on to main div card so I'm just going to do div card. inner HTML and now I'm just going to put in the actual direct HTML instead of making everything individually like that I'm just going to paste it in here and then we'll go over it so you can see it's the HTML format is very similar to before we create the div with class row we create the div with class column we create the did with class card and now it's going to be a little different because remember we're doing reviews now not movies so let me show you what we're going to do here if I close that here we can see that I'm going to add an an an ID that gets the review ID the review ID is coming directly from our API because oh actually this needs to be changed to review it's not element because we're getting the data from our API and the data is basically a an array of a lot of different review elements but since we're doing for each we're doing something for each review in The Returned data and each review is going to have an ID it's going to have a review property and a user property and we saw all that when we were talking about the backend so we're going to create an ID for this C element based on the review ID the main reason is because we want it to be a uh a basically a unique ID that we can then refer to later so we can get access to this specific element later and we know that the review ID is going to be unique so that's why we're setting that as the ID so now we are going to create a few paragraphs so we have three paragraph tags the first paragraph is going to contain the review so strong the strong element just makes it bold so this is going to be bold and you can see right here uh the the review we just put in the review that we got from the backend database and then we get the user that we get from the backend database and then now this is where it gets uh trickier here this part right here so there there's a few different components basically on the screen it's just going to look like two emojis is this going to look like a pencil emoji and a trash can Emoji but this is what we're doing we're creating it as a a link but it's not going to go anywhere that's what this um this pound sign or hash mark means we're not going to a specific URL because we're going to put an onclick property so when this element is clicked which in this case is just this pencil element it's going to call the edit review function which we still have to create and it's going to pass in three El three pieces of information to the edit review function first it's going to pass in the review I D then it's going to pass in the review and then it's going to pass in the user and you can see we have these single quotes around each one because it's going to pass in each of those pieces of information as a string okay so then that so then when say when you click on this little pencil it's going to call the Ed review function passing in the information or you can click on the trash can where it's going to call the delete review function only passing in the ID and so then it's going to append for so that for each review it's going to put this and it's going to then append it to the main element okay so let's just test it out so far I can press the button to load it and um let's I'm just refresh and now I think I already I already put some reviews in this one so let's click here and see if they show up okay you can see we have the reviews reviews for for Jeepers Creepers reborn so I did this off off camera basically I added some some reviews so they would show up right in there this is these are loading right from the database so if we go over to mongodb Atlas we can actually see uh there's 15 uh reviews so we can see some of the ones that I previously added and you can see some of them um some of them don't actually look correct like see it says null here when you watch a tutorial it looks like the person just has it all figured out and just does it really quick actually I went through and tried to figure everything out before I started recording and there were some things that uh took me a while to figure out it was uh saving for a while I had something wrong so it wouldn't save the the movie ID uh correctly wouldn't send it correctly and then I had it so it would save it as a string that's why it has the quotation marks on either side and that's why I showed you earlier about how I went back in to the backend code to make it do the parse in to switch it to an integer so if we go down here we can see now we're at uh an integer and you can see a lot of these uh reviews here are the reviews we just saw on the page so let's go back over to that okay so right now we can see these reviews and if I go here if I go to a one that doesn't have any reviews like here it's not going to show any reviews there's no reviews on that one most of the movies don't have reviews yet so if it doesn't have a review view it's just going to basically just show like that and right now nothing happens when I click these buttons so it's basically just going to have an error or if I open up the developer tools see um whenever I click here it's going to say edit review is not defined or if I click here delete review is not defined because we haven't actually created that yet okay speaking of creating the other functions I'm going to create the edit review function I'm just going to paste this in and we'll talk about it so if you remember when you call edit review it brings in these three pieces of information the review ID the review and the user so we have to accept in their function we have to accept the ID the review and the user and uh you don't need these but the console. logs for just to make sure everything uh working correctly we'll get rid of them just so we can see only the important information here so the first thing we're doing is getting access to the element so what element that is so it's get element by ID and that's the ID we've passed in and if you remember that's this element this whole div here uh we created with the ID which is the review ID so we're getting access to that whole div because we're going to replace what's in that div and so we're getting the review we're creating an ID that we can reuse in a few different places so we're we're creating a new ID that we're going to put into our elements in when we update the HTML so we are going to create a review ID and a user ID the reason why we're creating an ID by using a a word that's always the same plus this ID that's always different is because we want to make unique IDs for every single element that for basically for every single review element that's on the page and then we're just going to update the in HTML that means we're going to switch all the in HTML that's already there so this is HTML that's already there which we're now going to switch with all this so basically it's going to be very similar but there's so basically there are three paragraphs just like before except each paragraph is taking a few different lines but the paragraphs are a little different now we're using an input box so you already learned about input boxes even on the index.html there's an input box but uh this input box we are going to have the ID of the input box to be review input ID and now look what we're doing we're setting the value to be the review so when you click the edit button the review will just switch into an input box that you can then edit and it's going to start with the value that it already was so the review is going to be just how it was but now you can edit it we're doing the same thing for the user where we're uh creating the IDE of user input ID and then setting the value of the user now you'll see why soon why we have to create these IDs just like this because we're going to have to reference those specific elements with those specific IDs to get the value from the input box in order to send it over to our back end so we have this line here um where we're now going to before we had two buttons now it's just one button it's one emoji a dis icon which is the which just means save so once you click this little dis icon it's going to call the save review function it's going to pass in three things the review input ID the user input ID so basically these are just the IDS of these elements and then this ID is the review ID that's the the review ID that gets passed in here because we're going to if we're going to edit the review we need to have the review IDE we need to know the ID of the review that we're going to edit so let's see how that looks I'm going to uh run that or basically reload and now I'm going to refresh here and now if I click here let's see if it works so it actually just change into edit boxes now it it we can't really see that they're edit boxes mainly because of something in the CSS so let's go back over and make a just change to the CSS here uh I'm going to go into the style. CSS and I'm going to basically I'm going to take off this all unset this unset property B basically call causes this all the elements to inherit any inheritable values passed down from the parent element so that's why the the color is not exactly what we would like but we don't want to inherent anything we're just going to use the the the normal input box color which is a white background and if we're having a white background we want to make sure the foreground is black and not white so there we go uh so it's not going to look quite as cool as how Tomy had it but uh I think it'll be work for our purposes if you want to customize the colors even more you can so let me go back over here and I will refresh and there we go so we can see these text boxes I think this is my favorite movie ever user Tomy and you can click save which that's just going to do nothing the is in the console it show an error because we have not created the save function yet so I think you know what we're going to do we're going to create the save function fun okay here's the save review function that is called right here with the input ID the the the review input ID the user input ID and the ID so first we're going to get access to the values of those input boxes so we do document. El ID review input id. value so that's going to get whatever value is here the value that the person typed in for the review it may just be the value that was already there uh so we're also going to get the the user so we just have to get the element. value okay now we're going to use Fetch and so I think you've already learned about fetch fetch is basically a JavaScript command that allows us to send HTTP request to a URL and get information back so I guess yeah you of course we've done we've done F we've already have it up here but here it's using it doesn't say the the method the http method because it's just defaults to a get request everything basically defaults to get request if you don't specify but now we're going to pass in something else so first we're passing in the URL uh so just to clarify the URL is the the root URL and you can even see it like popping up on screen what the value of that URL is and see how it ends with SL review slash then we just put the ID at the end this is what we created the URL to be in our back end uh when we are going to be um editing a review so now we can then the second we're we're passing in two things first we're passing in this then we're passing in this so if I see if I put my mouse on here it highlights that it also highlights the ending uh curly brace so this is the second parameter that we're passing into the fetch function and you can see this is an object that has has a few different key value pairs including the method we're using put because that's how we created our API for editing a review we are using put and then we pass in the headers these probably look pretty familiar to when we were using curl to do this earlier and then we're passing in the body we have to do json.stringify this is a JavaScript command to make a string from an object and we're passing in this object and so we have the user and the review so this is the key this is the value which comes from a variable this is the key that's the value that comes from our variable this should look kind of familiar to what how we did it in curl then so when we are doing a fetch we can do dot then do then means after we get the data after we get the data then we're going to take the result and we're going to do result. Json we're basically converting it to Json then we're going to get the result of that and we're going to log the result and then finally we are going to this location. reload this is just the JavaScript command to reload the URL we want to reload the website because now there's the edited data and we wanted we want to reload everything with the new data that's been edited okay let's see if it works so I'm I'm going to uh run that and I'm going to manually reload with command or controlr now I will do this one good and horrible and test well this is good and horrible and also amazing and then I'll see if I can change this to a capital B if I click save it worked good and horrible and also amazing and if we go over here and refresh on Mong be Atlas let's see if we can find that one good and horrible and also amazing so we successfully edited or updated our review okay there's two more things we you be able to delete a review and create a new review let's do the create new review first and then finally We'll add the ability to H delete a review now there's a bunch of different ways that we could basically visualize the edit the delete the the create a new review we could create a whole new uh website where you create a new review but I'm just trying to keep things simple so see how we have these different cards I'm going to make it so the first card has the little form to create a new review it it may it's not the prettiest way to do it but it will get the point across and will show you how to how to do it and then you can ALS always refactor and change things later so we already have the code for what it's going to look like when you're editing while creating a new review it's going to look basically the same to editing a review except this time it won't start with any value in the value here because it'll be a blank value so what we're going to do see how we're basically we create all the cards for each review before we start adding all these review cards up here after we create the movie title let's create a card that will allow us to create a new review now this is something we could do right in the the HTML file because it's not going to have that much stuff specific to that we need JavaScript for but uh just to keep things simple let's do just all right in the JavaScript so you can see what I did here so we created a new element just like for just like uh this here now we're going to add the in HTML just like we did down here and then we're going to create all this HTML so like I said we could just add this to our HTML file but we'll just do it like this uh so it's it's all together here in this in the Javascript file but you can see we're not using any variables in here so this is what it looks like if we're using a variable since we're not using any variables that's the way we know that we could do it in the HTML so we have the row card column it's going to say new review that's something new and basically this is all exactly the same even this is exactly the same uh to the edit the only there's only thing different is that we're hardcoding the IDS we before we need to make sure we have different IDs because there could be basically an unlimited amount of reviews and every review needs a different ID but there's only going to be one box for the new reviews so we only need to we can hardcode the new the idea of new review new user and then when we save the review this is where it gets different so we're passing in the new review that's the ID of here the new user that's the ID of here but if you remember down here we pass in one more item we pass in the this ID this other ID and then the review ID that's the third parameter we passed into the save review function but now there is no review idea cuz we haven't created a review yet so we're not only going to pass in two parameters so since we're only passing in two parameters we're going to have to make an update to our save review function so uh there's a way because normally all these uh all these parameters all this information are required there will be an error if we don't pass in three things there will be an error but not for long because I'm going to show you how to make an an something optional if we put equals and then I'm just going to put what it equals we can put a default value and right now it's just going to default to an empty string so if you specify a default value like this then you can pass in an ID and it will take in that information that you passed in but you don't have to because now if you don't pass in an ID it will just set it to whatever the default value is which in this case is an empty string well since uh what you have to make things things should happen differently whether there's an ID or not because how you create a review is different than how you edit a review so the way we're going to make it different uh for creating a new review or editing review is with an if statement so if and then we're just going to do if ID and then I'll put the curly braces here so if ID basically just means if it exists this will evaluate to false an empty string evaluates to false but if there if something was passed in then it will evaluate to true if it evaluates a true we want to do all this so just cut that and I'll just paste it right into our if statement and let me do some tabbing so we can see that it's in this block of code so here's our if statement but now we will add an else so else is if there is no ID that was passed into this function that means we're creating a new review so let me just paste in the code here and it's going to look very similar to our edit so for edit we have the root URL and we have the ID at the end but for creating a new uh a new review we're going to have our URL and it's going to be just Slash new at the end which you may remember from creating the IP and instead of a put method put HTML method we're using a post method and then the only other thing that's different is now here we passed in the user and the review now we're passing in the user the review and the movie ID because uh we need to know what movie ID are we creating the review for if it's a brand new review and then uh this is all about the same as before so then we convert it to Json then we log out the results and then we do location. reload okay let's try this I'll load this and now I'm going to refresh and now we can see a new review here so I can say um this movie put me to sleep and then we can put as the user Quincy and if I hit save let's see if it works and it shows up at the end of our list of reviews so that works and let's see if we can edit that new review this movie kept me awake and then we'll save that and it it saves correctly so we can even go and add a review we can go to a whole new movie I'll put better than the original by 0.5 percent okay uh there we go and now we have a review for the the new movie so some are not going to have a a review some are going to have review but we still can't the leete a review so let's go and make it so we can the leete a review this is actually going to be one of the easiest Parts because the function to delete a review is not that long I'm just going to paste that and it just looks like that so we already have it so you can call the delete review function and it passes in the ID so we just go to the URL slid and then we use the delete method we don't have to put in any other information we just have to call the delete method and then everything else is basically the same so let me go here okay we know we have a lot of reviews here so let me tried to delete one how about this uh I'll hit the delete because we don't want the anyway this was supposed to be movie not move okay so that's a bad review let's just delete that it's gone the the review is gone so we can even even search for review let's go to um hackers and we have one review here uh before we try to leave let's try let's create a new review don't hack and then it appears don't hack which obviously is not in the spirit of this movie this called hacker so we're definitely deleting this review okay it deletes the review we did it we created the the we connected the front end of our website to our backend and it can save update read delete all the crud operations and it does it with our mongod database we've reached the end of the course thank you all for watching and good luck creating your own fullstack websites