Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: welcome to the ultimate javascript course where you're gonna master javascript in under 12 hours by building projects you're gonna start off with the basic fundamentals of javascript and then you're gonna move on to building smaller to bigger projects so for example you're going to start off first by doing lots of exercises so you can get good with how arrays work objects variables etc then you're going to build little projects like a tip calculator then i'll show you how to learn apis and make an app that gets a random dog every single time you click it you'll learn how to build your own superhero apps if you search up batman or thanos you can actually find your superhero and you can switch it up pretty cool pretty impressive and you can show it off to your friends i'll also show you how to deploy these apps so they're online anybody can use them at any time you'll learn how to build your own weather app with javascript i'll help you master concepts like promises and async and await some advanced concepts as well right don't worry this is for complete beginners okay so if you're a complete beginner you're in the right place and for even more intermediate there's going to be a couple of things for you to learn you're also going to build a fighting game which is going to be really cool it's going to be like street fighter but you get to build your own where your characters will have attack and heal and there's going to be sounds and graphics and you'll see how to build that with javascript and you'll be building the netflix app with javascript so how freaking exciting is that i hope that this is the most exciting javascript course that you've ever come across and i think you're gonna have a lot of fun so stick around this is gonna be a fun ride now before we just jump into it what i want you to do is smash that like button so this course goes out to as many people as possible and as a way to thank you here's a picture of a koala bear alright and a baby and a monkey there you go hopefully i earned that like now make sure to click the link that says join.replay.com cp dash javascript we're popping it up on the screen right now this is the most important part of this video so click that and make sure that you fork this rupple it's going to bring you to this screen right here and then what i want you to do is you should see javascript course by clever programmer right and then what i want you to do is make sure to hit fork this is very important okay hit fork rupple and once you do that you can actually get started working on this course but this is the most important step so click the link below in the youtube description or somewhere on the screen and then fork ruppel this is a rebel that you need to fork and then you'll be able to get started now once you fork it it should bring you to this screen over here now there's a bunch of code already here so that might intimidate you but don't let that intimidate you okay you can pretty much just ignore everything and when i'm gonna be coding along in the tutorial you can just follow along in this file your playground.js and you'll be completely fine you don't have to worry about anything that's happening in here right now these are only resources available for you as lessons notes exercises and projects that you could refer to later for now this is pretty much the your playground.js file is the one that you should be using in the video you'll see me use playground.js but that's mine so don't you you can go inside of it but don't use it okay only use your playground.js and write all of your code in here and you'll understand everything that's happening now just to explain to you what this is over here and what is happening is there's some in here we have the repo the github repo for this exact project so you can go ahead and you can fork that repo okay or not fork but like you can star it all right you could start that repo um just so on your github you could find it easily and plus it's nice for me to have stars right for these repos and go up and other developers can find it and helps them all right and then you have lessons so in lessons for example you can go to one of these lessons where maybe i have this little app that shows you how to click in with javascript and get these squares right and clear the game and you can go play it and then you can go and look at its code so for example for that red yellow green squares app that i have right here which you're going to build inside of this tutorial on the left hand side i'm going to have its code available for you so inside of dom i have this thing called red yellow green right and that's gonna be that's gonna have the code to this entire app so you're actually able to even click into it boom and see all of the code okay but again right now i wouldn't worry about looking at that right now just stay put all the project solutions are here so for example there's going to be project exercises and then you're going to see project solutions so what are these if you go into a project solution like let's say uh fighting game or weather app or create netflix these are the final completed versions of the app so if i type in las vegas and hit search boom my app shows up but if i go inside of project exercises weather app these are the uncompleted versions so when i hit them you'll notice that the javascript part is not working that's going to be your job to do and by the time you're going through this course you'll learn how to do all of this by yourself okay but for now don't try to do this yourself i'm just showing you kind of what's happening here what is all of this and how the course is structured but simply put for the rest of the video all you really need to do is just relax and follow along over here in your playground.js so whatever you see me do in the video just replicate it here and we'll start from the very first line of code hello world what i've decided to do is package all of this up into a course so you could binge this like netflix and it could actually keep track of your progress and everything will be much more organized and in one place in one course instead of you having to watch this on youtube so i've done this for your convenience to turn the ultimate javascript course for beginners into a packaged resource for you and it's also completely free and all you have to do is just go to the link below in the description that says cleverprogrammer.com slash js dash tutorial just go to that link click in the description below i'll take you directly to this completely free course all you have to do is just sign up okay it's gonna ask for your email or whatever to create an account so i could keep track of everything that you're doing and then boom you will have complete access to this course it'll be in your library you'll be able to go to cleverprogrammer.com and access it and it'll track your progress it'll track every single thing that you're doing so it's very important i highly recommend that you do that because it's going to enhance your experience of discourse with that said let's jump right into the video all right let's get started with the very basics of javascript so i'm gonna assume you're a complete beginner then we're gonna work our way up and make it more complex okay so let's start with something really really simple and we're just gonna start with the hello world and i know that's what everyone talks about but let's do it anyway okay so let's just do hello world and you can hit command s or control s if you're on windows and as soon as you save you'll notice that it runs right over here okay or you can just hit that play button at the top and as soon as you hit that you'll see hello world here will pop up so perfect that's exactly what we want now you can console log anything and they'll show up there okay so try console logging your name okay so try console logging that and if you do that correctly it should show up right over here and don't forget these apostrophes right here so let's give that a try i'm going to put my name here i'm going to hit run and boom at the bottom you see rafa kazi so good job so far you're making great progress and you most likely got this right as well so good job if you didn't that's okay don't worry we'll you'll have plenty of chances now let's do some programming and let's make it simple and get started with it okay so what can i do as a programmer right what are the things that i could do with it so let's say we have a variable and we start storing stuff in there okay so for example i can say name and i can say name is rafikaze and now if you hit run you'll notice that this won't really do anything this didn't do anything and i'm going to or actually let's say name is peter pan so this could my name can be different from the name that i gave here and you'll notice i don't see peter pan anywhere so what's going on why am i not seeing peter pan well what i need to do is remember i need to console log it so i can actually do this here and run it and boom all of a sudden notice that i'm seeing peter pan so that in javascript are called variables so you can store values in them and then you can refer to those values even if those values are really long so for example see i have a sentence here and my sentence is how are you doing today nice to see you hope you have a great day whatever my sentence is yeah and now if i do console.log and i do sentence and we run this look the entire sentence gets printed out but if i remove this console log boom you see that at the bottom right there no sentence shows up so this is something nice to kind of note and to pick up on what you just learned about are variables and if you ever see me doing these two slashes this just tells the computer hey this is for humans so don't actually try to run this because if i remove this and i try to run this i'm going to get some type of error that's going to say hey you haven't defined variables which just means i never told the computer what variables is i never did something like variables equal to 5 or whatever but this line wasn't meant for computer anyway it was meant for a human being so these are called comments okay comments and they are meant to just be read by human beings and the computer decides to completely ignore them now let's do something where we have numbers and other things okay so i want to show you other things that you could do with javascript so let's say we have food and i set food to you know let's say you paid maybe 20 for your food okay great well i'll give you a little exercise here i want you to go ahead and console lock that can you make food pop up here give that a try i'll give you five four three two one let's go so we're gonna do console log and i'm gonna say food just like this and now when we hit it you'll see at the bottom i see 20. okay hopefully you're seeing that on your screen now i'm going to remove this line let me show you how you can do other things with programming okay so for example there's certain things called operators so we want to tip let's just say 20 okay now with that food and that tip what we need to figure out is how much is the tip because yes this is 20 but what's the tip amount so let's calculate the tip amount and we're going to say it well that's simply food right multiplied by the tip so this maybe we can call it tip percentage so we should give better variable names and that way things are much more easy to read now before we run this remember this tip here we updated it to tip percent so make sure you copy paste that there so use food multiplied by tip percentage now you have your tip amount okay so let's now print that out so i'm going to say tip amount and let's try running this and we see that it was four dollars okay very good that's exactly what we wanted now let's say we want to make it a little bit more interactive and we want to make this a kind of like an app experience so right now i hope you're excited because you're going to be building your first app with javascript that's the power of javascript you can build things with it so freaking fast and you're going to be building an app right now so i'm going to teach you something called you know basically how to get inputs from user that's how you make apps because right now we've hard coded food to b20 but let's say that if the food is a different amount well you'll need to come to this app that you made and you're going to need to put 40 here and you're going to need to put a different percentage you need to calculate this differently every single time it's going to be kind of annoying now here's how you can use user input okay so instead of this food saying 20 here kind of hard coded here what i'm going to instead do is i'm going to say prompt okay and i'll show you actually how prompt works so let's go ahead and try that first so i'm just going to say we're going to create a variable called banana and we're just going to store something in there and i'm going to say prompt or let's say fruit okay and we're going to say what is your favorite fruit we need to console log this so i'm going to say console.log we'll say all right and i'll say my favorite fruit is mango this time right and boom you actually see mango at the bottom right that's exactly the experience we wanted for this app so just very simple but we need to make this happen and we need to make our food calculator thing that we made more um dynamic because right now it's hard coded so we need to make it where it takes an input from the user instead of saying 20 here all right and then it calculates the tip amount based on that so what can we do i want you to take about 30 seconds to a minute and see how do i make this food thing over here interactive if you haven't figured out so all good let's do this together so i'm going to say prompt and in this prompt i'm simply going to say how much was the food and we don't we don't want this fruit line to run so i'm going to comment this out by putting a slash slash here and i'm also going to comment this one out this console log by putting a slash slash here because i don't want those to run i just want this here to run so what's going to happen now is food is going to run it's going to ask for what how much was your food once you put in how much the food was it's going to store that inside of the food and then our tip percentage is going to run and then our tip amount is going to be calculated based on whatever you put in the food multiplied by 20 tip and then we will output the tip amount perfect so how much was the food we will say was let's say forty dollars i'll hit run let's try it again and let's say it was twenty dollars so twenty percent of twenty should be four let's try it boom so that was great and there we go so our food was calculated properly we do have four here very good now what if you wanted to make tip percentage user input as well where this is not hard coded this is the data the user puts in because the user can decide hey how much tip do i want to add do i want to give 10 tip 20 tip 1 tip 100 tip that should be up to the person and what we want to do is the user should be able to put in let's say they want to give a 20 tip so this should be able to put in 20. the user shouldn't have to say 0.2 right so they should be able to go 20. now what do we have to do to get 20 down to 0.2 well 20 divided by 100 gets that to 0.2 so it's whatever the user input is we divide that by 100 so let's replace this by user input let's say for example but in this case you know what we can do is we can just replace this with prompt okay and we can say let's just say tip percentage okay so that's all the prompt will say and then whatever tip that they put in we will divide that by 100. all right so here's one cool thing that we can do on the bottom right here click right in front of that arrow and it'll allow you to write code that will run right away so you could see what's happening so let's say that i have 20 and if i divide that by 100 and then i want you to hit execute at the bottom right and uh scroll all the way down and you can see 20 divided by 100 is 0.2 right so that's exactly what we want so that's how that division sign works and i know i haven't shown you division but there are a bunch of things that we could use in javascript so there's multiplication there's division there's exponents there are a bunch of other things but like plus minus right all the basic math stuff works so let's try and see if this is working this food thing that we're making here okay so whatever the tip is we're going to divide that by 100 and then we're going to multiply food with that tip percentage all right so let's give that a try over here i'm going to hit run and let's see what happens so how much was the food so let's say i paid a hundred bucks for the food the tip is going to calculate okay it's a tip percentage all right let's say we want to give 10 as a tip so that would be 10 and boom you can see that it actually says ten dollars right there now if you don't even want this to come in the console and you want this to come like where the user could see it you could even use alert and you could alert the user with what the tip amount is gonna be so let's try this whole thing again and watch what's gonna happen it was a hundred dollars um how much was the tip it was let's say 10 and boom it just says right there you're looking at 10. i'm just going to comment this out normally in a normal app you'll never use prompt to get user input you'll use something called forms in javascript or you know html forms you use forms and users like we'll put in the data there and then that'll populate in here but for now we're just going to stick to using prompt because it's the easiest way without having to do too much html and all this other crap all right so all right now what if we want to do something more because right now this is pretty good right but what if we want to show the tip amount and like the total amount right what do we want to show how much the food was how much the tip was and then what's the total amount what if we want to show all of those things so let's go ahead and do that as well so we're going to say total okay let's create a variable called total and total will be whatever food was plus the tip amount so let's go ahead and do that i want you to take a try and do that yourself and then console log it see if you nail it so take five to ten seconds to do that right now count down five four three two one and now let's go ahead and let's do it together all right i put myself up here so i'm nice and out of your way so let's go ahead and do this together now so total is gonna be food plus tip amount and then let's go ahead and let's make sure the console log and i'm gonna say total and then let's print it how much was the food okay so let's go the food was 100 how much you want to tip let's say 20 so that should be 20 so it should be 100 plus 20 tip that should put you at 120. so let's see and we got this weird thing so what's happening here is if you take a thing like this 100 and you try to add 20 to this this is not going to do what you think it's going to do okay because this is a different data type and we're going to talk about different data types so i'll write this here for now data types and there are different data types like strings and numbers and then other ones anything that has these quotes around it is a string and so if you try to add two strings watch what's going to happen when i hit execute it's going to add a hundred plus the word 20. so it's almost like you're adding words together okay it doesn't see these as numbers it's like looking at it like a word this is a word you're spelling 100 and when you try to add those two words together it makes them one word and so that's not what we want but if you take a number 100 and then you add 20 to it and if you hit execute you can see that that actually gives you 120 basically what you're looking for so what we need to do is we're getting this data from the users and it's coming back as a string you guys so for example i console log this food right here and let's just like run through this and let's just say 100 and we'll say 20 and run this that first 100 even though you can't see it it's actually a string so this is not a number it's actually a string so what we want to do is we want to force it to be kind of a number so let's say i have a 100 here right if i want to force it to become a number i can call this i can wrap this in something called number so number is a function and it will take this 100 and turn it into an a regular 100 without the quotes so we'll talk more about functions later so we'll make a note of this we'll talk more about functions later things like that and you know maybe even type casting but those are a little bit more advanced right now i don't want you to worry about any of that i just want you to focus on i'm just wrapping this thing in something called number and it automatically takes it from a word and turns it into a number and so i'm gonna take here and i'm going to just wrap this in a function called number like this so when you get food amount that should be a number and this tip percentage here that should be a number as well so i'm going to wrap this into a number as well just like this and we're going to move this here so you can see this very clearly so i've wrapped this inside of a number and i've wrapped this inside wrap this inside of a number as well make sure you have the right amount of parentheses going on so now we're not going to get that weird error anymore let's go ahead and run this again we're going to say the food was 100 tip is 20 percent and it calculates it correctly over here and you do see that it says 120 okay that's exactly what we were looking for perfect now one other thing that's kind of confusing when we're looking at our console log is like ah this says 20 here and it says 120 and i would want to label it right so i would want to want it to say tip amount here and then 20 and then total here and then 120. in other words like basically i wanted to say tip like that here and i would want this to have total here just like that right that's that's the the thing that i want so let's do that here so in console log i can actually say tip amount and then here i can say total so now watch what's going to happen when i run this and we say 100 and we said 20 is it tip amount 20 total 120. okay so now it's kind of nice our app is working in a better way a nicer way so everything looks cleaner and better and it's just showing you different things you could kind of do with the console log so i hope for now this was really good we're gonna keep on going there's a lot more to cover i hope you're excited i'm excited and i'll see you shortly alright let's get back to coding and now you're gonna learn about some really cool stuff and we're gonna build some more fun stuff okay so let's go ahead and do it together but one thing i want to tell you is if you want to code yourself you're going to be coding in a file called your playground.js okay so that's the file i want you to be using when you're coding right now because i'm coding in a file called playground.js okay so by the time you're seeing this video this file will have like all the code that i have written you know so far so this is going to have like pretty much everything that we have done together but in your playground it's like your scratch file and you're able to kind of code along with me all right let's keep going let's talk about a couple more things okay so one of the things i want to talk to you about are like different kind of data types that we have all right so we got numbers all right and the examples of them are like 1 5 10 100 you know whatever you could have decimal numbers too like 2.5 you have other things like what we call strings and these are anything that have quotes around them so it's like if i say hello or if i say what's what is up okay those are all strings and now strings could have single quotes around them or they could also actually have double quotes around them okay so like this you know as long as they're wrapped up and it's even on both sides okay single versus double they both work so those are strings so something we were talking about up here anything in quotes is going to kind of print out exactly like how you want it to okay other data types might include things like arrays and we'll talk about them later i'm just going to kind of leave a note here for now for this we also have objects a different completely different data type another data type is boolean so this is either something is true or false okay so true slash false this is an example of a boolean and why i'm talking about this and i know right now it might be like why are we talking about data types i mean this seems kind of boring but this is going to become really important because imagine if you're building an app where you know let's say that it's a simple app and it says hey if raining outside tell the person to get an umbrella or if it's not raining outside then tell a person to get a sunglasses well you're going to need to understand how boolean works otherwise you're not going to be able to make an app like that work taking it into real life well banks work off of booleans right because if you think about a bank can you take out if you have zero dollars left in the bank can you take out uh 10 000 or 1000 dollars you can't so the bank has a line of code that's sitting there that goes if user has this amount of money available so let's say you ask for five thousand dollars it says does the user have five thousand dollars available and if the user does then great let them transact it then basically if they do say true but if they don't say false okay and so using booleans you're able to do something we'll talk about later you can do conditionals and then you can do if else type of statements or if then and that's going to be important another thing i want you to learn about is well you know we have data types but one other thing we need to worry about is like basic math stuff okay and it's gonna be really simple like i'm gonna say like first grader level math stuff okay or third grader level like something really really simple so let's go and just talk about kind of math like operations that we have okay and you should know about these so for example we have multiplication so you can multiply using this you can divide using a slash you can uh do other ones like x exponents okay and these are like with two asterisks like this and then you know we have modulo which is like this or you know in other words is like a remainder okay so for example if you did five modulo two what would you get well that's a great question let's actually ask our javascript here so i'll do five modular two and hit execute okay and you can see that one is the remainder here right so you'd get back one if you did this so that's how modulo and remainders work and then of course you have add which is a plus sign which is pretty simple and i don't need to probably give you an example of that and then you have minus okay so these are kind of the majority of the math operations that you will do when you're coding so these are helpful for you to know because when we're we're going to be going along and we're going to be building things together and some of this stuff you're going to kind of need to know so we're going to just put it out there let's go ahead and call it math operators because they're like operators okay and then i'm just gonna show you a couple of like math methods okay that are gonna be helpful for you so and one of them we can actually even use right now so floor and seal the floor it just rounds down okay and this just you know if you can guess it by the name it rounds it up if you're getting a tip well that's that's going to be really weird right because like let's say you haven't placed an order and it was for 110.25 cents or something and then you're trying to calculate a tip on that 20 and then you get these like decimal numbers now sometimes that could be confusing and maybe you don't want it to a decimal number you want it to be an exact dollar amount okay let's just say well what you could do in that case is you could take a number like 22.5 or 110.25 cents and you could call floor on this okay so we're going to do math.floor and we're going to wrap this in and i'm going to hit execute and you can see that it just floored it so it just rounded it down that's all it does so if you did the same thing let's say seal and i said 110.25 and i hit execute it would round that up to 111 okay when we're actually building our we're going to be building some games in this tutorial as well so for example later when we go and let's say we build rock paper scissors or we build any of these games you're going to need to know some of these things okay so you can round down and round up um and you'll see why so you need to know this if you want to build those games later and then there's random okay all right so here's how random works okay this gives you a random number okay okay so this is how you actually use math.random okay so let's say i use math.random don't put anything inside of it and just run it so it'll always give you a number between 0 and 1. so if i keep pasting math.random you'll always get a number between 0 and 1. now if you want to try to get a number between 0 and 3 just multiply this by 3 like this and this will always make sure that you get a number between 0 and 3. and so if i keep running this you can see i got math.random multiplied by 3 and there you go i got a 2.4 let's try it again right i get a 0.42 and now you know when you're playing rock paper scissors you want rock to be zero you want paper to be one and let's say you want scissors to be two so if you want those numbers to map to them like that you need to pick between zero one and two okay that's what you need to do that's why you need to run this function and i'm gonna you're gonna learn later why that's the case okay but that's why you need to get between zero one and two so if we keep going with this well let me ask you this right right now you're doing this and you get this long number two point seven two blah blah but you just wanna get either zero one and two so in other words how could you turn this long number into just two okay take a couple of seconds it's one of the things i've already taught you okay hint hint it's one of the methods you have to use here okay so see if you can guess this i'll give you five seconds five four three two one all right let's call math.floor on this and wrap this in and hit execute and you'll see boom i just got two so then in other words what i have to do is i have to copy this math.random multiplied by three paste it here and call math.floor on this entire thing so now when i do that what will happen is this will eval run and evaluate and give me something like two point seven two point seven eight nine five five five four four four some long number right two point seven nine blah blah blah and then on that it'll call math.floor and it will turn this into just two and you'll end up with just two okay so let's try running this boom i got zero perfect let's run it again boom i got one let's run it again boom i got zero let's run it again boom i got two perfect so i'll always get between zero one and two those are the three different choices that'll map to my rock or paper or scissors later on when you're coding that up so that's just an example of how these methods work we'll practice more with them later but right now you should just know them and have them in your notes all right guys and let's do this thing right now so let's just go up and comment out like some of this stuff here so like we don't want to run this anymore so what i'm going to do is i'm just going to go ahead and highlight all of this okay because i don't care about running this anymore because otherwise every time you hit run it's going to keep prompting you and we don't want that anymore and just hold command and then hit slash or if you're on windows probably hit control and then hit slash okay so let's do that and it should comment out all of this okay with exactly how i did on my computer if it doesn't do that for you just turn it into a comment block but just make sure to close the comment block okay because if you don't close it then everything will turn green and that's not what you want either so i'm going to hit undo and i will just leave it as let's go back up here and i will just leave it as a common block like this okay and now let's go back down to where we were at all right so one of the things i'll do now is let's go over to our console here okay so let's go to boom let's go to this guy over here okay and i'm gonna drag hit settings and there's display size and i'll make the display size bigger let's go all the way back hit console perfect so now we have some more room to see everything here easier fantastic all right so we covered the math methods we covered math operators we covered some of this data type stuff right so let's go back up to our variables here okay so in our variables introduce to this so you have var const and let these are three very important things i want you to know and normally when you make a variable you never just make it naked like this you always either call it like you say let sentence equal blah blah blah let so you always just put a let here so right now i will just tell you never use var okay i'll make your life simple you can use const or let only use const if you know that thing that you made you're never gonna change it again but if you're gonna change it use let so most of the times for now at your level i will just say use let okay that way you won't run into any problems so for simplicity use let but if you want something to be constantly true then you're gonna use const so all our variables just put a let there and for more advanced users we're learning javascript what this does is it makes sure that you don't have a global scope for your variable names okay it gives you kind of get scopes it down so let's go down here now let's go ahead and like let's do something simple okay so i'm going to show you programming in a fun way as if you were sitting right next to me and we're just coding up something together okay and i'm like yo let's walk through this let's say we make like a tiny little weather app okay so let's go ahead and let's make a baby weather app and uh what we're going to do is we're going to say if there's rain then what we want to do is we want to say grab your umbrella or just print the umbrella emoji and if you don't have an emoji that's fine you don't need an emoji okay this is just for fun if it's not raining we're just gonna say wear your sunglasses okay so it's gonna be a simple app where the user is going to be asked if it's raining or what the weather is and if the user says it's rain right now then you tell them grab your umbrella and if the user says anything else like it's not raining or it's sunny outside then it says hey wear your sunglasses okay very very simplest overly simplistic baby level app but just to kind of gives you the ropes of programming okay so let's go ahead and build this out now and we're going to introduce you to a concept called conditionals they're your friend they're so freaking awesome and they allow you to build amazing apps and amazing things all right so i'm going to say let weather so i'm going to create a variable called weather so whether it could be rain it could be sunny whatever so we'll just say if weather weather rain then i want you to console.log grab your umbrella just like this i'm going to copy this and i'm going to paste it else we're going to console.log and then the sentence is going to be where your sunglasses and i'm going to paste that right here so make sure that you copy this correctly so here you have if weather is equal to rain with the two equal signs very important okay and i'll explain that to you later why as well okay so this is something called you have conditional operators and those include conditional operators include things like equal equal sign or equal equal equal sign or greater than sign or less than sign or less than equal to or greater than or equal to not equal to not equal equal to and those are the main ones that you're going to use okay i'm just leaving this here for you to know we're using this so if the weather is rain this is going to become true if this weather here is rain so this weather here is rain this is basically going to say hey is it rain equal to rain let's test it let's see what it says so is rain equal equal to rain and let's hit execute and let's watch what happens and boom look at that it says it's true now let's say is sun equal equal to rain it's going to say false okay let's try a couple of others 5 greater than 2 is that true or false all right hopefully you guessed it correct let's hit it and you can see it says true okay is 5 greater than or equal to 5 is this statement true greater than or equal to 5 yes it's true because 5 is equal to 5 okay greater than or equal to but if you do 5 is greater than 5 this will give you false because 5 is not greater than 5. so these are a couple of ones that you should know and learn about because this is going to be really important for any app that you're essentially building okay so if the weather is equal to rain so if this is rain because this weather here is rain if these two are equal what's really going to happen is this entire thing here is going to evaluate to a true statement so this entire thing is going to become true and if something becomes true an if then statement it will run this line right here but let's say that you put false here well then it's going to run this line right here and it's not going to run that line okay so that's how if else statements work just make sure you have the right squigglies so this squiggly opens here and closes here that's where your true statement goes the l squiggly opens here closes here and that's where your console log this is where your false statement goes so let's hit undo undo undo and go weather is equal to rain so now what i'm going to do is we're going to hit run and let's see if this runs how we want it to it says grab your umbrella beautiful so because weather is rain well what if the weather is sunny before i hit run do you think it's going to run line 57 or do you think it's going to run line 59 which one do you think it's going to be take a second and let's hit run and let's see what happens and boom it will run this line because this statement it found it was false because sunny is not equal to rain so this becomes false so then it won't run the true statement it will go ahead and run this false statement okay under the else so if we want to make it a app that a user can use this input here we will make it something the user puts in so remember how do we ask a user what they want to put in do you remember it starts with a p and then goes p r o hopefully you remember that was the word prompt and we're going to prompt the user and we we're going to going to ask how is the weather you know so if it runs boom how's the weather and if we say it's rain you're going to see that it says grab your umbrella if we say something else let's say it's sunny it's going to say wear your sunglasses so it's working exactly how we want now if the weather is equal to rain that doesn't really make sense right let's make let's put a y here so it checks for for weather is equal to rainy so let's run this again and now i'll have to put in rainy here so let's put rainy and now it will say rainy equals rainy this is true and then a little console log grab your umbrella so we just made a mini app that can you know fake help you with uh what you should do based on the weather okay if you wanted to make it a fancier app or a more real world app you'll be put at pulling the weather data from a real app so you'll be pulling it from some real app using an api and then you can detect what the weather is automatically and then if it's raining instead of console log grab your umbrella instead of this you could have it send you a text message on your phone saying hey it's going to rain today take your jacket with you so you could use twilio to send you literally a text message sms on your phone so that's freaking mind-blowing right so that's really the benefit of uh learning this and right now i know these are like baby applications we're making and you're look oh i just want to make something bigger please hold on we're going to get to it we're going to build a lot of amazing applications but let's start off and keep it simple and so far you've done a fantastic job let's keep this going all right welcome back so we're going to talk about functions now you we just got done making this baby app what we're gonna do now is i'm going to just essentially comment out this entire app okay because we don't need it all right now that it's commented out i do want to let you know that on the left hand side when you're using this rupple there will be something here and right now this folder is called notes it might change later but what you'll be able to do is you'll be able to go to this folder and pretty much everything that we cover in our playground will be kind of organized here as notes so even though it's like commented out here and kind of hard to see because this file is going to get really messy as we start to code and build more and more things here you can go here miniweatherapp.js which essentially has that exact app that we created and it's just kind of sitting here for your use okay so this code will always be there and available for you i'm gonna go back to my playground here but if you're trying to code along you'll be going to your playground okay this is going to be your playground so make sure that you go to this all right so let's talk about functions because functions are a pretty important part of any programming language and for javascript they are massive so let's go ahead and learn a little bit about functions how do they work well functions are designed to basically run a recipe so they can run multiple things for you at once and it also organizes your code in a nice little way okay and so functions make your life a lot easier so let's go back here so you see how when you create a variable like a variable it can only store like a name or something along those lines what's cool about a function is a function can store blocks of code so for example remember this food app that we made earlier i'm just going to go ahead and comment this out this app that we made earlier i mean this is a lot of lines of code and if i ever want to run this app i have to always uncomment these lines of code or basically write all of these lines of code every single time i want to run it whereas imagine that it was in a function well then in order to run this piece of code all i would have to say is i wouldn't have to uncomment all of those lines up there all i would have to say instead is i could just go run a function that you know says calculate tip amount and then i would just give it its tip because okay so let's say that there was a tip or you know maybe the amount of food was a hundred dollars i just gave it that and then the entire app automatically runs just by me typing in this instead of that entire chunk of code so that's where function comes in so let's go ahead comment out this entire block again with command slash or control slash and i'm going to go down here i'm gonna remove this line i'm gonna start writing our first function so i'll write a first function what this will do is it will make a greeting okay so or say my name so let's do a say my name function okay so let's do say my name and say my name function it will do console.log and it'll just say qazi because my name is qazi okay so that's all it's going to say well let's go down here and i'm going to call and i'm going to hit run and you're going to see that nothing really happened right it didn't actually do anything and to make things less confusing let's also comment out everything that we have here so we just have everything commented out i'll run perfect so we see nothing in our console nothing happened well why didn't it do this so even though i made this function i have to call this function like this and now when i hit run watch what happens boom you can see that it says qazi right over here awesome now let's go on and you know we've done a pretty good job with this function say my name and look at what it does though before we continue and move on this is how you call a function so unlike a variable when you call a function you put open and close parens in front of it okay now this function what it the name of it is say my name or the variable of this function right is say my name this is the name of it and when you call it it runs all the instructions that are inside of that block okay so for example what does that mean what if i had like console.log seller name and say brian and let's also have it say banana whatever right if i run this you're gonna notice that by just calling the function it is running all these four lines of code and it runs them all right see that and then watch what happens if i just comment this out and i run it boom nothing so now all we have to do to run our code is we don't have to comment or uncomment the entire thing we can actually just comment or uncomment that call of the function okay this is called calling your function so whenever i say call your function that basically means you write the name of the function with open close parens cool now let's say that we want this function to be more dynamic because right now it's just saying quasi-raphael brian banana so it will never actually say your name right so what how can we handle that how we can handle that is actually let's remove all of these lines right and we're gonna say hey we want you to say like a dynamic name that the user gives you okay well it's gonna go hey i don't know what name is in this case what we're gonna do is we're gonna also put that here so this function say my name okay has an argument called name and it's logging that that argument out okay so then if i say quasi here and i run this it's going to print out quasi it's going to log out quasi but what if i say lance here what is what is it going to do let's try it and boom lance because i call this function okay and here's how it works it goes here and it puts in the name lance and then it goes here and puts in the name lance and logs it out to the console that's how a function works okay this is a function with one argument so let's if i take you back to our older function that function has no arguments okay let's make let's copy this and let's paste this here okay and then let's make this the dynamic one all right say my name yeah so this is say my name with no arguments this is say my name with an argument okay let's give them different names maybe so this is say my name maybe let's just call it say my name two for now okay to call this function what are you gonna have to do so if you wanna call this function right here say my name to how will you call it okay take five seconds and see if you could call it okay and i'll give you a hint it's what you did on line seventy five four three two one all right let's do it so i'm gonna say say my name to and in this i'm actually going to give it a name i'm going to give it an argument and you can see that now it will print out kazur if i say kevin and run it you'll see that it'll actually say kevin right here okay and we'll comment outline 70 where it says say my name because we're just running the function that we wrote on line 72 and there's a nice little toggle that you could toggle to and it'll basically just collapse everything that you have inside of the function okay so that's kind of a nice way to do things so moving forward pretty much everything that we do will majority of the times do it in a function it keeps your code clean concise compact and it's just a better way to do things and we'll we're now going to step it up and make things that are a little bit more advanced and do them with the function okay so let's do that next so i'm gonna comment out this line here say my name two okay i'm gonna comment that out let's go down let's make another function and we'll call this function greeting okay so greeting will take in um your name okay it'll ask the user it'll basically need the name of the user and then what greeting will do is it will say well console.log it okay and it'll basically say hi name nice to meet you okay and if i run greeting so watch what's going to happen so let's say i run greeting and i give it my name and i say my name is quasi and let's run it and let's watch what happens okay it says hi nice to meet you hi name nice to meet you but that's weird it says name here and it says exactly name that's not what i wanted to say i wanted to say qazi so how do i do that um what we're going to say is hi plus name okay and watch what happens so that allows you to concatenate strings together the plus sign so watch if i have hi and then i put a plus sign here and i say kazi and if i hit execute you can see it says hi kazi but it's saying it right next to each other so we want to have a little space in there so i'm going to say hi space plus kazi like this okay so this is high and then one empty letter empty space here hit execute now it says high quasi with the space in the middle okay perfect so we're gonna go hi space plus name plus all of this stuff that we wrote here comma nice to meet you so let's put that there okay this will concatenate and get our greeting ready so we'll say greeting is equal to or we'll just say greet is equal to that okay and then in console log we'll just print out whatever greed is so let's hit run and you can say hi kazi nice to meet you well what if i change my name to lance it will go high lance nice to meet you so it's working as expected that's really good but it still doesn't look super nice how this is with the plus sign and it's kind of annoying you have to like put this space there and it just feels unnatural so this is why i want to show you template literals because they make your life a lot easier so instead of this code saying greedy is equal to blah blah let's write it in template template literals okay so let's go greet equals and when you do template literals you always have to do these backticks on your computer okay so you always start off with the backticks okay so let's put a backtick here so template literals now what i'm going to say is hi name comma nice to meet you and we can make this name dynamic and how we're going to do that we're going to say this name is a javascript part it's not a literal string so how we're going to do that is we're going to wrap it in the squigglies and we're going to put a dollar sign whatever is wrapped inside of the squigglies followed by a dollar sign it will understand as actual javascript okay meaning that now it's going to put this whole thing together kind of like how we were doing here but it this just does it in a much nicer way so now let's do console log great and watch what happens so i'm going to hit run hi lance nice to meet you what if i say amber heard haha you guys saw what has happened right the news is out or johnny depp okay let's go here by the way which side were you on were you on amber heard side or johnny depp site comment below let me know i'm curious to know your thoughts i think that she kind of deserved to lose and um you know it's nice that johnny got he was awarded 10 million dollars she was awarded 2 million so basically she owes johnny depp 8 million dollars which is more than her net worth so she's not gonna have a lot of fun paying that off uh but regardless that's neither here nor there let's get back to what you came here for so going back to this okay i got my greeting i can do johnny depp so it's like hi johnny depp nice to meet you so hopefully you understand how this function is working so let's go to the semi name function right this is a function called say my name and it has no arguments okay in other words it has zero arguments so i want you to also learn how to speak the lingo because you're gonna start hearing this a lot uh you know write a function call blah blah and it should have x arguments so this is it's a function called say my name and has zero arguments okay so i want you to write out the sentence here for this one say my name too so write out a sentence exactly in this format that talks about this and you could even take this a step further and say uh like what does this function do and you can say it prints out your name to the console or it logs out i'm just from the python world a lot of the a lot of my life and so you say print there a lot so it logs out your name to the console okay so that's it okay console.log quasi and so this is like what the function does okay so it does this is what it does and you could write for semi name two in the exact thing okay what it is and what does it do actually try to pause my video so you can write it in english what you think this does the lingo is important to understand okay so in chess you have to learn something called chest notation this is kind of like that but for coding so then we have a language that we can build upon and get better every single time so take about five to ten seconds i'll count down now or just pause the video five four three two one cool so here's what we're going to do here this is a function called okay the name of this function is say my name to it has one argument and if you want to be extra special and so you could say it has one argument called name and then what does it do it logs out your name to console so it's a good habit to get in in later in life this habit if you keep doing this right now will translate to you writing documentation for your code so one is gonna help you develop just a better skill and two it's gonna help you understand and develop the skill of documentation and reading and understanding the documentation which is gonna be really valuable when you get a job as a developer because you're gonna need to know these things and that makes you a lot more valuable that's what we did for greeting okay this is what we did for this greeting we introduced you to the concept of template literals and this is going to be very helpful for you especially when you're making a couple of games javascript games that we're going to show you later like for example rock paper scissors all right so let's go ahead and move forward now all right now we're going to create another function okay together so because i want you to constantly get a lot of practice with functions okay and this function is going to have multiple arguments so you can actually have more arguments than one okay so you can have one argument or two arguments um or 10 arguments or 20 however many you want but generally between one to five is like pretty you know reasonable and you don't really want to add more arguments just for the sake of it so let's go function and we're going to create a function called sum and i want you to try this out so it's like if i want to have a function sum and it will have two numbers that it'll take in as an input okay so it'll have two numbers that'll taken as an input a and b and what this function should do is return the sum of these two numbers so you'll also be introduced to the concept of the keyword called return okay there's a special keyword in javascript and generally with your functions you never you don't really want them to console log things you want them to return things so you can do something with them later so we're gonna start getting in the habit of return and then eventually you'll start seeing why returns are actually helpful and why they matter all right so let's have this return a and b the sum of them okay so we're gonna do return a plus b and i'll i'll show you why we're using the word return instead of something like console.log and let me do that with a simple example here so first let's just run this function so when i do sum and if i give it one and two it should take one and two so it should replace a with one b with two so it should do return one plus two that's effectively what happens so it should return can you guess three okay that's right so that's what it should return but watch what happens when i run this okay and let's um comment out this greeting because we don't need to run that anymore and let's run this function well nothing went to the console so it ran something happened but nothing ever went to the console interesting well it's not being shown so let's go ahead and show it so let's do console.log and run it and now you can see that it says three now watch what happens if i do num1 and i want to store this result somewhere so i want to do one comma two okay so i want to store the sum of one and two in a variable called num1 okay so let's delete this line now and let's run and it got stored and now we'll we'll log it out so the console.log and i'll say num1 okay let's run it and it got the sum three okay it stored three into this variable called num1 and then we console log it out and boom we see it right there now to prove my point if we hadn't done return a plus b instead imagine we just did console log a plus b watch what what's gonna happen let's run this and we get an error and this error says undefined so this prints out the console log right but when we run so this line goes and it goes 3 but then this over here says undefined because what's being stored in num1 is undefined we don't have a number like three that's actually being stored here we're console logging something and we're trying to store console.log here and you can't store that so that's why what you want to do here is return a plus b if you don't do a return then this function is essentially useless and it can't be used in other places and do actual helpful things okay so that's why what we need to do is actually change this to a return a plus b just like this okay now when we do num1 it actually does get used okay let's comment out both of these lines now and what we're going to do is we're going to go back all the way up to when we made that little baby tip calculator thing so i'm going to copy this entire thing and we're going to turn this into a function so i copied it okay from line 17 to line 24 and we're going to paste it here right there let's hit run so nothing should come out to the console so that's perfect that's exactly kind of where you should be right now now i'll go and uncomment this and um we won't be using these prompts anymore because that's kind of uh you know when you're using functions and prompts is like rarely ever used it's kind of an easy way to give a front end to the app you know just kind of for you to play around with but majority of the times you wouldn't really use prompt that much but first let's just focus on turning this into a function so we're going to say is going to be a function and we're gonna call it calculate uh tip and food amount something like that okay or let's just call it calculate total food total okay so this is gonna calculate the food total with the food amount plus however much the tip was okay we won't have the alert statement anymore so let's remove that and this function is dependent on two things how much you paid for the food and the second thing it's dependent on is how much you want to give as a tip so these two are going to be arguments that we're now going to pass and so i'm going to say food and tip percentage all right so basically here's what we're going to do right so tip whatever the user gives we're going to take that tip we're going to divide that by 100 okay so if the user says hits 20 then we're going to take that tip divided by 100 and turn it into an actual percentage which would be 0.2 and then we'll multiply this now we're going to do the same thing for food we're not gonna have this number prompting anymore okay we're gonna remove that we're gonna say whatever food is gonna be whatever food is here so in other words we actually don't even need food because the user is just passing that information down so food is going to be a given tip is going to be a given we're going to calculate the tip percentage based off of the given tip and then we're going to do the same thing so take the food multiply by the tip percentage that'll give us the tip amount and then the total will be the food plus the two amount and then we can console log it out if we want to and in this case since we're being adults now not a little children anymore we're going to do returns total let's go here and let's indent this so you can grab this and just hit tab and make sure that this function has a squiggly that opens it and a squiggly that closes it okay that's pretty important whenever you're writing functions so i'm just hitting back or you can just hit format at the top and they'll automatically format your code for you if you hit this and formatting just means it makes it look nice and pretty okay so i have calculate food total it takes in food and it takes in a tip so let's actually try this last console log and we'll call the function calculate food total and we'll say the food was 100 and the tip was let's say 20 let's go ahead and hit run now let's see what we get and we get back 120 so now you can start to see the power of functions that they can do a whole bunch of things very quickly and so you just call it in a very easy way give it two inputs and boom your function is up and running now let's take this a step even further so remember when we created a sum function c if you can replace this line 104 okay so you can leave the total here but see if we can replace this and this instead of using this plus sign here and see if you can use a sum function to calculate the total so i'll give you five seconds you can pause the video and try to do it yourself okay so let's go five four three two one all right let's give this a try so let's go here and instead of using a plus sign what i'm going to say is i'm going to say sum and we're going to give it food all right so it's going to be the food amount and then we're going to give it the tip amount so now we're using the function that we created ourselves earlier and then we're going to store the result of that in a variable called total and then we're going to return that total so let's go ahead and run this function and we should still get back 120. perfect very good let's change the price of this 300 let's try it again you can see that our our tip is 360 dollars now okay and it's working perfectly now i do have to show you the modern way of writing a function because you're gonna start seeing that in a lot of different places with javascript and so this is the es6 way and this is these are called arrow functions so um and also the variables let's let's uh change them okay so let's go ahead and do these variables in a way you know we you we're using the var let cons so i know that we didn't use it for a couple of these other things but that's again just so you can start understanding how all of this stuff works in an easy way but we're going to do const tip percentage all right we'll do const tip amount you could do cons or let either should be fine okay then we're gonna do const total three variables that we're declaring okay so constant let and you should you should be fine either way remember if you do something const that means you're not changing that variable later and if you do let that that's basically saying hey i know i'm making this variable that i know i'm going to change at a later point i'm going to change its definition there we go let's run this function again and let's just make sure that it works all right so now with arrow functions how they work is they kind of look like this okay so um i'll make we'll we'll make this function sum but we'll do it with an arrow function okay so let's do some i'm going to say const i'm going to say some arrow is equal to like that so it's equal to and then you put in the arguments all right so this is think of this like a variable and then you put the arguments here so here i'm going to say a comma b and then this arrow here so which is equal and greater than sign open close squigglies and then inside of there i'm just going to say return a plus b so that's how you can write an arrow function and basically write the same thing but an error function now here's the cool part about the error function okay because right now you're probably like wait what's the benefit of this why am i writing this uh when i can clearly write it this way and this looks like easier to kind of see and understand because it says function error functions can look really nice so here's what i mean by that they have a superpower called implicit returns where if you remove these squigglies you don't even have to write the keyword return it will automatically return that and so that sum function that you wrote can essentially be on the same line that's some function that you wrote so it's so nice and easy because your entire function just gets written out like this so you know it'll be like right i have a function called sum it takes in two arguments a and b and it returns their sum okay so this is an example of an implicit return so arrow function with implicit return okay that's an example of that and again i'll just call this function some arrow so it's clear for you and then this is arrow function with explicit return okay let's put it here important for implicit return remove squigglies okay so squigglies are these these curly braces or i can say curly braces all right there we go so that's important to do if you want to have implicit return where you don't want to say that return so let's try this some arrow function that we created and see if it works we'll do console.log and i'll say sum arrow and we'll give it 10 comma 40 50. and we should get back a 60. let's see if we get that back it says it's been declared because i'm defining it twice and remember i called it const so if i'm calling it a const here it's not going to let me redefine this function later with the same variable so i'll just call it some arrow 2 and call the function some arrow 2 here and we'll hit save command s or just hit run and boom you see the sum of these two numbers is indeed 60. so the sum function is working so it's a really nice way of creating your function so for bonus points and for being fancy i want you to always try to use the arrow function because that's the modern way of doing javascript and you'll see that in majority of the code basis so i'd rather you just get in the habit of doing that now to wrap this exercise up i'm going to leave you off with an exercise okay to wrap up really the sum functions and i want you to practice with functions now here's what i'm going to have you do so in files on the left hand side okay i want you to go inside of functions and go inside of something called sum and then there's going to be an exercise folder in here and a solution folder so don't go into the solution for this exercise yet make sure to go into the exercise if you're stuck and you can't make progress and you can't really you're stuck then and only then go in solution but don't go in there as the first thing and in this exercise i'll go and go to script.js okay in here you will see that you have these exercises like make a function called add which is the same as sum so you should have no problem making this function make a function called subtract make a function that divides two numbers and make a function that multiplies two numbers okay so all of these should take in two arguments sub add div and mul they should do what they say here and so we have some notes for you and what you got to do so the to-do's are written out for you here and this is the normal way of doing it and for bonus points if you want to be fancy use the es6 syntax for error functions to maybe even convert these into error functions if you want to be a real boss and then at the bottom make sure you also console log all of these so meaning you print out the result of all of these okay or do some kind of call now where you're going to have difficulty is running this file so you're going to be like how do i run this file let me show you okay so over here we have something for you can exercises and if you want to see this in full screen you can always hit this button open in a new tab that'll open this entire thing in a new tab that way you can like guaranteed see it right just in case some certain things are hidden and what's cool about repple is your code is already deployed on the internet meaning like this is not just on your local computer you could run this anywhere like you could send this link to your buddy and they could just run this at their place right like because it's online this is online so they can run it and like look at your code and so if you made something you could be really proud of it and show it to them so we have this project solutions folder right so this is where the solutions will be but for functions here's the sum right so you click the sum now if you do console.log hello from the sum file okay or some exercise or whatever let's just say that here and i'll hit save if you click sum it will say hello from the sum exercise so meaning anything you console log here will show up just make sure if you want to run this file again you're going to have to click this sum link over here and that will run your exercise okay and also another thing i want to show you is this is just html css javascript so what's nice about this is you could just download this folder as zip okay and let's go ahead and open it so i'm going to go ahead and open this and go inside of here and you could click this index.html and just run it and it will run on your computer locally so just so you understand that this is real world right just because we're doing it on online website doesn't mean you can't use it in real life you could just download that folder and run it and now it's on your local computer so that's just to kind of show you that all your options and everything that you need is available at your disposal all right so but we're just coding here for the sake of simplicity and replica just makes everything really really easy okay so that's it go ahead now and do this exercise and once you return from doing this exercise we're going to move on to starting to talk about different types of data data types like arrays objects things of that nature okay so good luck have fun and go and crush this and i'll see you in a minute all right so now let's jump in and start talking about arrays and right before we do that let's go ahead and comment out every single line that is still running so line 108 for me i'm going to comment out and i'm also going to comment out line 121 and so when i hit run nothing should be coming out to my console perfect my console is looking crispy clean that's exactly what we want so let's go ahead and start working on arrays i'm going to go here i'm going to say arrays okay and why do you need a raise well what if you want to hold multiple different things how are you going to do that so if you have groceries right in a variable you could only have one grocery like a fruit but arrays allow you to have multiple things so for example i could have an array that has a banana it also has apple okay i can also have orange okay we can also have a pair all right i could have groceries like this and you could write the words too so this is just a string and i decided to put an emoji in it but you could decide to put like the actual word pair here if you want but i just think that this looks prettier right so that's why i'm having it like this now if i'm doing all right and remember to just put a const here okay so we're just going to say const groceries and here we go we have all of these you know we got a banana we got an apple we got all this awesome stuff in our groceries right now let's console log groceries okay and let's hit save and let's see what happens i'm going to move this here and boom you can actually see that it printed out all of the groceries okay now how do i get just a banana if we if i want right so if you click it it shows you the zeroth element is a banana the first is the apple the second is orange and the third is pear okay and remember everything in coding when you start counting it usually starts from zero so it goes zero one two three and the length of this is four okay because there are four items in here four grocery items now how can we get just a banana if we want just a banana how do we do that well here's what we do we go console.log groceries we put this bracket and we do zero okay and let me hit save and let's see boom we just got the banana okay well what if i want an apple what do i do can you take a guess i'll give you five seconds see if you could write that yourself five four three two one all right let's do it so you would have to put in a one here okay so boom let's do that let's do a one let's hit save and boom you see we got an apple now how would i get not the orange but the pair so how would i get the pair make sure to count correctly zero one two three right how would i get the pair what do i need to put in these brackets to get that pair i'll give you five seconds here five four three two one all right let's do it we would do three okay and you can see that we got the pair okay so again this is zero this is one this is two and this is three okay if we want to get the orange we would simply pop in a two here okay let's give that a try make sure you're coding along with me and you're just exercising with me okay make sure you're not just passively watching this make sure you're coding along with me every single step of the way that's how you're going to get better so this is called indexing okay this is like you grab one of the indexes okay so here i'm getting grabbing grab the second or like the third index in this case okay um or second index okay grab the second index that's basically what we're doing here or grab the second item if you want to say it in a more human language but in programming this is a zeroth index this is the first second third so if you ever hear like hey it's in the first index or the third index that just means where its position is in an array okay and arrays are really really cool and i'll show you a lot more about them soon all right so take a look at that right at the bottom you can see that and let me remove let me cons let me comment out this line here okay and let's run it again and i'll move this up over here it's easier to see but take a look at this right over here before we add the cookie and we console log this out notice that there's no cookie in here right but after we do the push and we console log it out watch what happens now we have a cookie that's added that wasn't there before so that's what push does push adds things on to the end of the array okay so try adding something else try adding a chocolate try adding uh a blueberry try adding something and see what happens and see if you could do it yourself okay so add something more here let's you give this a try so i'll give you five seconds five four three two one all right now let's try adding something together so i'm gonna say groceries dot push okay and we're gonna say i'm gonna do let's do blueberries okay and then i'll console.log here paste it here hit save and run and check it out we got we got one the regular uh groceries array then we got this with the cookie this time okay and then we push the blueberry and you can see there's a blueberry at the end there so that's how the push method works okay great so let's um comment out all of these for now all the console logs so if you run your code you should see basically nothing okay it should be empty just like this perfect now what we want to do is we want to try grabbing like what if i only wanted the banana okay what if i only wanted the banana and the apple okay those are the only two things or the orange and the pear and that's all i wanted okay well for this there is a method called slice okay so we're going to do that so we're going to says groceries and i'm going to say slice and i'm going to say 0 to 2 and let's see what happens okay and let's make sure we do console wrap this in console.log because otherwise it won't show it to the screen let's hit command enter or ctrl enter and boom look at that we're getting banana and apple so it's starting from zero including zero okay so basically what we're saying is start from zero inclusive and up to two okay but but not including two okay so basically it's giving you the the index this is giving you is either zero or one that's the index it's giving you so it's either giving you this or that okay so if you want to get the first two elements you can do it like this okay up to two if you want to get three elements you do this okay so if i run this it's gonna give me three elements if i do four and run it watch what happens it's gonna give me pretty much all of the elements right if i hit five it's gonna give me the cookie as well that that we added and if i do six it's going to give me all the way up until the blueberries that we've added because we still have the push grocer's not pushed there boom so you can see the blueberries so when i do zero to six it's gonna go from zero to actually the fifth index and give me up to that point cool all right now question for you what if i wanted not from zero but if i want it from right here the pair until the blueberry so what if i wanted this part of the array can you splice that and get that out of the array for me please take a few seconds take five seconds five four three two one and let's work on it together okay so i'm going to try and i'm going to do okay let's do up to six one two three four five okay like that this is just an example so let's do console.log and we're going to do groceries dot slice and i'm going to say so let's actually count together okay so we have 0 1 thank you baby appreciate it 2 3 okay so basically we're going to say give us from 3 2 4 5 and 6 but it's going to go up until five okay perfect so let's go ahead and do that so i'm gonna go zero sorry three two six and let's see if this gives us what we want so i'm going to hit run and boom it gives us from a pear to a blueberry let's try another example okay keep doing this with me don't get lazy on this keep trying this with me while i take a sip of my water that my girlfriend brought me but try getting me apple to a pair okay try getting me this right over here okay take a second um and see if you can get me those three right here okay so take about five seconds all right five four or take take a little bit longer while i sip this water okay so let's give that a try i'm gonna go ahead and do i'm gonna change this to a one because one will get me the apple and it'll be zero one two three and four one ahead of the one that we need okay and let's go four let's hit run and i get apple to appear exactly like i wanted right it was that that's what i wanted and that's what we got perfect very very good very good okay let's keep making progress now all right so now before we graduate from uh slice and if you notice that i changed my shirt i just had to do an interview because they were because my girlfriend is a wow superhero she's candy crush and um they're doing a documentary on her so i had to go do the interview and i had to change my shirt because i wanted something black and my previous shirt was yellow and nice and poppy and so i don't know why i'm telling you that but i thought you should know let's go back all right um so here groceries slice so this is good but before we graduate i'm going to teach you about two different array methods okay so there's a couple of array methods that i want you to know so we went over slice we went over push i want you to learn index of and i want you to learn uh length okay this is probably the most like one of the most common ones length uh so let's just go through it together real quick so now i'm going to say console.log and we'll do groceries okay and i'm gonna do index of and what index of does it it will give me the index of these fruits okay so let me just comment out these i comment these uh slices out here so i'm going to hit run let's just do let's just run that one so we can see all of our groceries or fruits perfect and so index of what it's going to do is if i ask for the index of orange it's going to literally give me what the index of that is so can you tell me what the index of the orange is for example banana is zero apple is one so orange is you guessed it too so let's see what it says all right so let's uncomment these lines and let's go here and we're going to pop in orange here okay we're going to say hey what's the index of this orange let's run it and i just gave back 2. all right let's ask it about the pair and let's run it and it gave back three because this is three okay so that's what index of does helpful to kind of know you won't be using it too often i mean honestly when i'm coding majority of the times i don't use it but i just thought since this is the array section i cover these methods because they're going to be helpful for you all right i'll comment this out for now so index of and then the other method you need to know is dot length okay so that one is going to be important so let's go ahead and do console.log groceries and can you guess what length is going to tell you dot length length starts from 1 and so it will take the overall length of this so however many items are in here is going to give you that back so let's count one two three four five six so length is going to give you back six all right let's give it a try and let's run it boom there we go see that six right there that's it that's that's what uh that's what length does okay perfect so now we can basically say you've graduated from arrays yay good job there's a bunch more to it but this is just over simplified you know what arrays can do you'll learn a lot more about arrays a lot better once we get to the loops because there's a lot of cool things you could do with arrays they're like my favorite thing in coding i think arrays are literally my favorite thing and next up we're gonna start learning about objects okay so let's go ahead and start learning about them now all right now let's talk about objects so here's the first thing we're gonna do we're gonna comment out line 144 and 135 so there's nothing being printed okay let's go ahead and hit run and look at that we have nothing coming out to the console log that's perfect all right now let's go ahead and let's talk about objects objects are really really important and they're really awesome so in just one second we're gonna work on right when i snap my fingers we're gonna work on a new object all right this is the object we're gonna be working on so as you can see here we have mr leonardo dicaprio he is our he's our object in this case and he has a couple of properties so his properties are he has a name so if you do person.name you know that should we need to set that to leonardo and then his shirt here will be white okay because if you can actually see his shirt is white back there so we need to create an object that actually represents that so let's go ahead and do that now so i'm going to put him over here kind of in the corner so you can see him now let's create an object to represent this so we're going to say cons person and object is created by doing these squigglies okay so these squigglies represent an object so so far right here we have created essentially an empty object now what we're going to do is we're going to add some properties to that person object okay so we're going to add a name so the name of this person in this case will be leonardo and shirt will be white this is an object if i format this you see this is how an object looks if you want to make it look a little bit like prettier and kind of how you know pros write prose would probably make it look like that okay kind of how it looks like here so open squiggly close quickly it doesn't matter if you have it on the same line or you don't okay so it doesn't really matter which way you have it both ways will work all right now this here pretty fairly represents what we have over here you have a person object the name is leonardo shirt is white now let's go ahead and console.log and access some of the properties of this object that we created so we're going to do person.name and when i console this you're gonna see that the person name and i'm gonna move this up here okay when i when i run this you can see that the person name is indeed leonardo kind of just like what we wanted right and the start and can you guess what person that shirt is going to give me when i type that in and when i hit run take a guess exactly you're going to get white okay just like we had expected here because those are the properties and that's how you access them so that's how objects work so first let's learn different ways of accessing this object okay dot notation versus bracket notation these both of these you should know okay so how do you access objects so you're right now you're using a dot notation now here's an example of a bracket notation let's do console.log and we're going to say person and we're going to do name like this and let's run it and boom you also get leonardo right over here well give it a try try doing the shirt but with the bracket notation try accessing it i'll give you five seconds five four three two one all right let's see if you got it so i just triple clicked to copy and then i did command c to copy and then i went down and command v to paste you could do ctrl c or ctrl v to copy and paste and then double click the name inside here change that to shirt hit command s or ctrl s if you're on windows to save and automatically run apparently it's not automatically running so let's run click the button here or command enter and boom you can see that the shirt is coming out white right so we got different ways access an object that's really good now there are different ways to assign things to an object as well so for example i could give him a phone number okay so i could actually do person.phone so notice we don't actually have phone in here and i could do phone and we could give him a number like that okay person not phone and then we're going to go ahead and do console.log and we'll say person. let's go ahead and try it let's see what happens and boom you can see that we actually get that phone number right there but also you can actually console log the entire person as well so you can see what that looks like so let's go console log person let's go ahead let's hit run and you can see you can see this object right over here name shirt phone so now this object has all of the things and it didn't have that before so it's kind of like how in arrays we were almost doing like push it's kind of like that but like it's just you're creating a new key on the fly and giving it a property another way you could actually create that property is by putting this in bracket notations as well because you could go like this bracket notation and say hey person phone is actually equal to this hit run and watch what happens boom you got the same thing and that also works so both work okay the reason why we're putting the phone number in quotes by the way as in we're making it a string is because if you didn't do that it would try to subtract it will do 1 minus 2 2 2 minus 3 3 3 minus 4 4 4 and evaluate to a big negative number that's not what we want right so put that in quotes because we want the exact phone number and phone numbers or strings all right so now let's say you want to create another person okay so i'll give you an exercise for you to do and let's go ahead and do this right now so i'm going to give you a different person with different name and different shirt and i'm going to need you to create an object a person object that represents that okay so you can call that object person2 alright so let's go ahead and do that here you're going to call this object person2 all right so now instead of leonardo dicaprio you're going to get somebody better yours truly and you have the object right over here okay so this is the object that you have and these are the properties that this object have okay so try to see if you can make this object by yourself either pause my video or take a couple of seconds right now to do this but i'm gonna start doing this in five four three two one okay let's do it so i'm going to basically there's a cons person two and i'm going to say name is causey right and make sure to put a comma so after every property right so let's go through an object so we have squiggly bass squigglies in the start and closing okay instead of brackets object uh arrays have brackets and then you have a key and a value all right so objects are key value pairs all right so you have a key here and a value here a key here and a value here okay so a key you can also sometimes call it a property okay so here the key is name and the key is shirt okay and name and shirt is also the property so you could say kind of both ways so you put in the key right person name and you get back the value which is actually the name right you do the same thing here with the phone so you take your object you put in the key right and then that key unlocks and we set this value for that key again we do person.phone so we did the object and the key and then the key gives us the value all right kind of think of it like opening a lock all right so name here so this is the first key value the second key value we're gonna set is shirt is black okay and uh that's it that's the way you represent this object right so if we do console log person2 and run it boom you can actually see that it's showing you quasi uh and shirt is black okay that's super cool and uh if i change this to you know what if i want quasi's name what if i only want the name can you try that for me if i only want the name boom hopefully you got this correct okay let's run it and now we're getting the name well what if i want the shirt as well same idea right if i run this we're gonna also now get the shirt so shirt color and we got it as black let's turn this into a function that then says hi my name is kazee and my shirt is black okay so let's go ahead and create a function okay so remember how we create functions right there are different ways you could do function or you could do the fancy way like this we'll call this function introducer because it introduces you to other people okay and this is going to take in let's say we can give it a shirt and uh it will also take in a name so let's go name and shirt okay and if we want to turn this whole thing into oh sorry whoops and we're going to do if you want to do error functions this is how we're going to do them okay so we're going to go ahead and say name comma shirt and we're going to do arrows like this i'm going to go here all right now the final sentence that we're going to return right is going to basically be remember template literals all right so let's use the template literals again and we're gonna say hi my name is name okay and we're just gonna say name like this for now my name is name and the color of my shirt is whatever the color of your shirt is okay so in this case it should be like black so here let's say if we had it hard-coded it would be like this but we don't want it hardco um we don't want it hard-coded right so we're gonna do here is name we're going to make it dynamic we're going to send name and remember and see if you can make this shirt dynamic as well boom we're going to say sure and we're going to save this into a variable called intro the const intro is equal to that but we're going to make an object first so just so you can keep practicing an object okay so we're basically going to say we're going to create a cons person object and this object is going to have a key name and the value of that key is also going to be named because that's what we're passing it i'm just going to say name right here and it's also going to have a shirt and that's just going to be the shirt that we pass it okay so these are values that we're giving it these are the actual keys that are hard coded okay so these will stay the same these will be exactly name and exactly shirt and this part will be dynamic these are the values that we give it and so then we're gonna in order to get this person's name remember what we have to do right it's person dot name perfect and now how are we gonna get this shirt we're gonna do person dot what person dot shirt perfect good job if you kept up with that okay so we're creating an object right here and we're creating the intro and now we're just gonna say return the intro all right that's our function and let's give it a try so let's go console.log let's call our function introducer and let's give it a name qazi and let's give it a shirt color and we'll say black and let's run this and look at that right we're getting hi my name is kazi and the color of my shirt is black beautiful so we're using template little i mean this is advanced this is awesome if you're doing this good job for doing this this is using this is a es6 error function right this function has two arguments and you created an object in here and then you're using template literals so there are a lot of concepts in here that you're doing so great job on following along and doing this with me even if you didn't get it it's good that you're you know you just followed along and like did it and hopefully you got it working on your computer like that's what's really important so here i have this and if i if i show you right hi my name is kazi and the color of my shirt is black now let's go ahead and comment out all the other stuff that we had here right so i'm going to comment this out um you can leave this or comment it out i'll just comment it out you can comment out pretty much all of this okay and i'll comment out this person right here too and we'll just hit run and it should just say hi my name is kazi and the color of my shirt is black okay so the only console log that should be happening is the one coming from this function this function is super cool because this function is like creating an object and then doing the template literals accessing data from that object very nice okay this is a very very nice well-written function so good job if you got here so far now try see if you can now do this call the same function but see if you can call it on leonardo and with the shirt being white so give that a try i'll give you five seconds five four three two one all right let's do it together so i'm gonna say console.log we're gonna say introducer and we're gonna see leonardo here right and the shirt color is gonna be white these arguments have to match right so this matches that and then this matches that okay so these arguments the order here matters okay and uh let's run this and let's see if it does the leonardo one as well and it does hi my name is leonardo and the color of my shirt is shirt okay so we probably gotta say white here hi my name is leonardo and the color of my shirt is white beautiful this is doing exactly what we want we're going to go ahead and comment this out and so far you're doing absolutely fantastic all right now let's take this even a step further let's say that we want to have this person but we also want to calculate and have their net worth okay so i'm going to go ahead and refresh this page and let's just uncomment the quasi in black here perfect my name is kazi and the color my shirt is black blah blah perfect we want to say this person has certain assets okay so assets they have is like let's say a hundred thousand dollars all right and the debt they have is fifty thousand dollars so if you wanted to calculate the net worth is really easy just assets minus debt or assets minus you know you could say let's say liability all right so it's how much basically money do you have and then how much debt do you have it's very simple for an average person if you want to calculate your net worth you could do that right now like it's very easy you could have a negative net worth or a zero net worth and if you have a positive net worth that's incredible so here you would have a net worth of fifty thousand right hundred thousand minus fifty thousand we could do that right and so we could say and my net worth is and i could do this and i could basically say a person.assets minus person dot liability like abilities and paste that there okay so let's run this and let's see what we get hi my name is kazi and the color of my shirt is black and my net worth is fifty thousand dollars we could put a dollar sign here right and we could say we could say we you you don't need to say usd but you could if you want and says my name is blah blah my net worth is 50 000 usd so this dollar sign is uh pretty much to actually put a dollar sign and then the next dollar sign and squigglies are to basically say hey i'm writing javascript so let's make this even nicer i'm going to teach you how to create methods inside of an object okay and anytime you've seen dot met something that's usually a method okay when you're calling it so like math.floor remember when you saw math.floor this is a method if you didn't have this math part here and it was just like this this would be a function and if this open closed parenthesis weren't here this would be a property so i know it can be confusing but here's a great example all right you have an object right here properties are just with dot to car.name card.model those are all properties right but methods are car.start with the open close print card.drive open close print car.break open close paren so methods look like this all right so just kind of take a mental screenshot of this for now all right so here's what we're going to do here's a really cool thing in kind of advanced things you could do with objects so i can actually create a net worth field and what this will do is what i essentially want to do is want to say hey assets minus liabilities but if i do this i'm going to run into a problem okay so let's try that so let's remove all of this and let's paste just netperson.net worth and let's see what happens if we run this and it says assets that's not defined and and you're probably thinking wait assets is defined right here so why isn't it just using assets this is that's not how it works so in when you're defining an object because all of this is happening at the same exact time this isn't like created yet and so it doesn't know so what you want to be able to do is you want to be able to say person dot assets but it also won't really know that so here's a hack here's a way that we do this okay so we're going to create a function and yes you can actually store functions inside of objects which is kind of crazy open close paren all right we're just going to do this this is going to be your net worth function and what it's going to do is it's going to return and we're going to say this dot assets minus this dot liabilities this thing is kind of weird but what this is referring to is this specific person object that you've created so it's literally like imagine plugging in person.assets and person.liabilities okay but you're going to use this this whole thing here is going to become 100 000. and this entire thing is going to evaluate to 50 000 and then this thing is going to evaluate to 50 000 like this and then once you return this it's going to pop up in your console so let's go back boom this assets sold liabilities and net worth is a method so even though we've defined as a function it is a method and i'll show you why because now in order to call it if you do person.net worth watch what's gonna happen it's not gonna work let's run it and we just got hi my name is kazi and the color of my shirt is black and my net worth is function return assets so just like just like spit out this entire function that's not what we want we want the actual result so we need to call this method and this is how you call it okay boom you call it just like a function but because it has a dot here it's called a method so the person has a net worth method now let's run it and watch what happens boom right my name is causing the color of my shirt is black and my net worth is 50 000 and now to make this code even more dynamic assets and liabilities should be passed by the user okay so that could be like another thing that that might be nice right now it's hard coded but that's okay we can just kind of leave it as is just to kind of show you that you could do some more advanced stuff with objects all right so let's run this okay and if you change the name it'll also work change the assets liabilities you'll get different numbers all right so if you got this far great job uh we're gonna hit run on this to just make sure we we're gucci but if you got this far you're almost an object master so good job okay you probably don't know like everything there is to know about objects okay but like you know more than 98 of the population so you should be proud of yourself give yourself a pat on the back right about now go ahead and do that for me and and you're beautiful and you matter and i'm happy that you're here so thank you warms my heart all right with that said let's continue all right now we're going to be doing my favorite part without this part you pretty much don't have programming so this concept that you're going to learn right now is going to put everything together and it's going to make everything do you do so useful and it's not just going to be like why can't i just do this in excel why can't i just blah blah this is the most important thing let's get into it and this is called for loops loops are the heart blood and soul of computer programming and i'm just so excited that you get to learn it right here with me so if you're enjoying this so far smash that like button so this video goes out to more people helps more people become developer and it's free so do it right now and let's keep on rocking and rolling so we're going to use loops okay and let's go ahead and grab our array that we made earlier with groceries okay so i'm gonna just go ahead and copy it so let's go boom grab this const groceries okay i've defined it above so what i'm gonna do is i'm just gonna comment all of this out because if i've defined a const above i can't redefine it below so i'm gonna make sure it's commented out and then i'm gonna come down here and i'm gonna pay his groceries okay and let's call it fruits cause let's be let's be real that's what it is right so now i have fruits well what i wanna do is i wanna like print out every single one of them so how do i do that well here's a way you could do it right console log we'll do fruits of zero and then we'll just keep repeating that pattern right one two three and then what will happen essentially is this will get you this one one will get you that one two will get you that one three will get you that one right hopefully that makes sense so far so let's go ahead and run this and you get all four of these right that's perfect but what if there were like many many more like so if i just copy this and i just keep let's say i copy this and i just keep pasting it right well that's a lot how are you going to like print out all of those it's going to be a lot of work are you really going to do this right and then what if they're more than that because netflix has a what you know let's go to netflix right now so here's an example of an array this right here is an array all right that's how you see these five profiles one two three four five that's an array when i go inside of this everything that's showing up here is an array so here's an array of new releases here's the array of true crime documentaries here's an array of trending now these are just arrays all right so if i have this many movies i can't just like do them manually i need something that can automatically find out how many movies there are and then like print them out okay or show them so that's an example of you know why you need to learn something called looping okay or for loops so let's go ahead and do that now all right so here's how we're going to write our for loop we're going to say 4 and we're going to say let i equal 0 and then put a semicolon and we're going to say while i is less than and i know this is going to look super weird but just trust me hang in there with me okay fruit's not length and we're going to do i plus plus like everything here you're going to be like what the hell am i looking at and we're going to break it down in a second but first let's just run it and see if we can get it to do what we want it to do and i'm going to say fruits and get me the get me the iath fruit okay let's run it and let's actually console log this console log and let's comment out all of these four lines right here okay let's run this and you see it it printed out every single fruit that we had right all of these fruits every single one of them and how i can prove that too that i print every single one out what we could do is like put i there and then do this and i'll actually even count it for you so this is zeroth one first second third fourth fifth sixth all the way up to nineteenth okay so there's like 20 total items in this array so this loop is doing that this for loop right here it's looping through automatically auto magically figuring this out but let's break it down what is happening really so we're saying this loop we want an index why do we want an index well imagine if i instead of i imagine i put a zero here well it's gonna run but it's just gonna keep on getting the banana every single time but that's not what we want so what needs to happen is we're essentially trying to mimic this process we want fruits to be zero the first time fruits to be one the next time fruits to be two the third time fruits to be uh this the fourth time right so this is what what we're doing here so the start i is set to zero and all a loop does is it just repeats the same line of code again and again and again and again and again fruits.length all i'm saying here is hey run the same amount of times there are items in this array so meaning in other words we want you to run 20 times so while i is less than 20. so run 20 times that's what this means right here okay and as soon as it runs 20 times and it tries to run the 21st time it just stops and it doesn't run again and i plus plus means every single time you're done running just increment i by one so first time it runs i is zero okay so we put a zero here and there's a zero here and you will get your first item which is gonna be this item right here then it's going to run again and here's what's going to happen i is going to become 1 next time the loop is going to run let's start from the scratch right so it goes 0 less than 20 is that true or false i'm asking you that's true 0 is less than 20. so then this line of this line of code here runs and it prints this out pops it right there perfect then once we're done running it increments i by one so now i is one is 1 less than 20 yes or no yes it is okay 1 is less than 20. so then it runs but next time because there is an i here fruits becomes 1 because it's dynamic like that so then it gets you this guy right over here then it runs again and it does the same thing too so it goes to 2 less than 20 goes yes pops in a 2 gets you the orange because that's in position 2 right here then it increments i by one i becomes three is three less than twenty is that true or false yes it's true and it prints out fruit of three so then you get this pair then it goes again and increments this by one so this becomes what 4 good and then it prints it out all right i'm going to ask you this time what is i now if you guess 5 good job because after running this we increment i by 1 so i is 5 now it's 5 less than 20 okay this is 5 and this is 20 and this thing then becomes true and then once this becomes true this part of the loop runs all right so is this less than 20 yes it is then this becomes 5 and then this prints this out so on and so forth so this is why we just leave a i here okay so that's how loops work they're really awesome real really nice and uh they make our life easy now now now now now here's something exciting i'm going to show you you pretty much never ever ever have to use this ugly looking loop ever again this is really the only time you're going to be confused thanks to the new javascript ways of doing it and i'll show you them and after that pretty much never write this ugly loop i never write it i don't deal with these weird indexes and honestly i even forgot how to write this ugly looking loop should be eradicated from most of what you're doing in your day-to-day i'll show you a much easier way of writing all right so now let's go ahead and comment out this entire for loop that we wrote and instead what we're going to write is we're going to say 4 and watch this we're gonna set kant's fruit of fruits okay and we're just gonna say console log fruit and watch what happens i'm gonna run this and it does the exact same thing and you do not have to worry about indices at all so this is so nice so here's how this is working fruits this variable here fruits is important this is this right here this is the fruits array this variable here right here fruit i'm making it up on the fly i could call it whatever i want i can call it john but i just got to make sure that i put john here and john here and boom we run it the only point of this variable right here is fruits in this case will be the name of you know it refers to this which is this entire array right here this entire array right here okay that's what fruit says but fruit when you're looping the first time it's this banana and when you're looping the second time it's this apple and when you loop again is this orange and when you loop again it's this so you don't have to even worry about indices this is the fruit and then in the next loop this is the fruit and then in the next loop right this is the fruit this is the first loop and the second loop and the third loop the fourth loop and then you just print that out so like i don't know if you if you look at these two side by side right this looks like an eyesore and hurts your eyes and you will get eye aids by looking at this and then you have this one just this is beautiful this is pure gold i mean this is how this has meant to be right this is how it should things should look and feel this is very pythonic python you write loops like this this is really really nice so we like this one much more than this one okay so stick with this one and then i'll show you a couple of other things you can do as well all right so now let's do something else with arrays okay so we're going to say const numbers and we're going to create a array and it's going to keep our number so one two three four five six well what if we want to um so we'll do a couple of things right i'll show you how to sum up all numbers in an array because that will be something helpful for you and important for you to learn but we want to do now try this write both of these loops for this numbers and print out every single number how we're printing out our fruits okay and comment out everything related to the fruit okay so hit run and you should see empty and loop through so then all the numbers get printed out from one through six try that i'll give you five seconds five four three two one all right let's write it together so we're gonna say 4 let i equal 0 okay i is less than numbers dot length all right you kind of get used to writing this for loop once you write it a couple of times but again we're not even going to be using this one that much anymore so get ready to say goodbye to this one all right let's run this and let's see if it works boom one two three four five six so this one worked exactly how we expected it to fantastic okay let's go ahead and let's comment this out let's comment this out and now we're going to say we're going to write the other loop so we're going to say 4 const number of numbers and we're simply going to just say console log number and let's hit run and boom one two three four five six don't make the mistake of printing out numbers because what you're doing here you're just going to print out the array five five times you don't want to do that let's just say number boom there we go so that should that printed out everything hopefully you got this correct and if you didn't it's okay don't stress we'll have some additional exercises here in our files for you to do with arrays okay because arrays are very very important so we got this six now what if we wanted to double every single number right over okay so let's go ahead and try that how can we do that how can we print out 2 for this 4 for this 6 for this 8 for this 10 for this and 12 for this okay how do we do that so what we want to do here is you actually you could actually do it right here give that a try see if you could figure that out you have enough tools to be able to figure this one out right now and i will tell you this you don't even have to write an additional line of code that's the hint i'll give you you can fit that in on line 221 and basically have the answer to this problem so either take five seconds to do it or pause the video i'll give you five seconds now five four three two one all right so we're gonna go number times 2. that's it let's run and now we get 2 4 6 8 10 12. everything is doubled you guys that's awesome but what if we wanted to do it so that this numbers are right here is doubled so or like we get a new array that's like all of these numbers doubled how could we do that double numbers how could we double the numbers and basically at the end get back an array that says 2 4 6 8 10 12. how could we put this in and get this out so let's give that a try all right so here's what we're gonna do we're gonna pretty much have this same loop that we have here but we're gonna need to create an array that like stores that results right we're going to say let result is equal to and we'll just make it an array like this all right so we're just going to have this empty array it's going to be empty at the start and the trick that we're going to use is remember we did push so again you have enough to figure this out if you want to try but inside of this for loop you're gonna push to this results array double this amount so see if you could figure that out and then console.log result and get that by yourself you have enough to figure out it might be a little bit challenging though right now i'll give you five seconds you can pause the video five four three two one and now we're gonna solve it together so all we wanna do here is i'm gonna do result dot push number times two all right so i'm gonna loop through and then push so then i'm gonna have two then i'm gonna loop again and number is going to be two and we're gonna come down here 2 times 2 is going to become 4 right so we're going to result that pushed off 4 that's going to add a 4 right here and then we're just going to keep looping through this array and just keep doubling it every single time and then pushing the double result in here in that result array okay so let's remove that and then once that entire loop is done so make sure to put the console log of result outside of this for loop okay because we don't want that repeating again and again let's comment that line out or we can actually just even delete it here we don't need that anymore let's try running and watch what happens boom we have an array with 2 4 6 8 10 12. so that array doubles all of the numbers so this is an example of how you could do something like this all right now what we would want to do is turn it into a function okay so we're going to basically go const double okay we're going to call this function double and uh this function is gonna you can you could call it you could either call it function or you could use this arrow syntax to highlight that this is a function right it's the es6 function and what we're gonna do is what this function does is takes in numbers and we'll have the same loop so we'll say const number of numbers grab this result right here we're going to paste that in so it's going to create a temporary recall result it's going to loop through the numbers that you gave it it's going to keep pushing double of that result into result array and then at the end we're just going to return result just like that all right and we can get rid of all of this right here and let's try running double so let's do console.log we'll say double and let's give an array to double so one two three four five six and let's run this and let's see what it outputs two four six eight ten twelve that is perfect you guys that's exactly right that's exactly what we were looking for so that is beautiful nice job if you got this far question for you what if we wanted to turn this function into the square function meaning we square all these numbers how could we do that so think about that squaring means using exponentiation instead of multiplication okay so how could we turn this function into something that squares numbers so meaning 1 squared would be 1 2 squared would be 4 3 squared would be 9 4 squared would be 16 5 square would be 25 6 squared would be 36 right so how do we get that array back well it's simple just put another asterisk right here hit run and there you go it's all perfectly squared so let's go back boom i'm gonna just turn back into a double all right so that's how easy that is now imagine if the size of this array changes 7 8 9 20 40 and watch right when i run it boom it just works instantly right this is the crazy part about like when you write good code and i'm just gonna like fill it up with crazy numbers here right i'm gonna make this really really big you're getting a big data file in excel or something and watch it just it just works on the whole thing insane right and it says 177 more items this is the beautiful thing about code so when again when you go look at netflix right so let's go let's go to netflix again and let's take a look at this this is an array and what we're doing to that array every single time so like we have some data in that array and we style that data every single time we loop through so we we write a for loop and we loop through and we say take this data the billion dollar code text the image url that's how you're seeing the image and turn it into this card and then do that again with the next movie so almost imagine that there's a loop for right or const movie of movies and what you do here and we close the squiggly right there and we say you know return movie and let's call this function card and let's just say this function card turns it into this nice neat card okay we don't let's say we don't know the details of this function but what this card function does is if you give it a data of a movie like the name of the movie and the image of the movie it turns it into this nice little card over here then you loop again and then you do it again you loop again you do it again you loop again you do it again you loop again you do it again i mean god damn i should be called freaking senior loopy because that there's a ton of loops there that's the crazy part you guys this is real world stuff okay it's not just like me telling you random stuff it has a very real application even though we're doing like beginner exercises right now just so you could get better at it because if you don't know how arrays work then if i give you something more complicated with like cards and images in html and css you're going to be so confused so you have to learn these by themselves like a martial art you got to learn the rear naked choke by itself and you got to learn the kimura by itself and then you got to learn the positions and then you learn these esoteric positions in jiu jitsu and you're like what the heck is the point of this and then one day you just it to hit that triangle you like rotate your hip you angle your leg the right way you grab the neck the right way you twist the right way you pop your right leg and you pop the left leg and you get that triangle just boom everything and it all happens at once and it's so smooth and it's beautiful but when you're learning it you learn it like step by step and same thing with chess or anything else in life soccer so we're just learning the components and the pieces by themselves and then later you'll be able to put them together with more impressive stuff okay when we get to the project portion all right now let's keep having more fun with the arrays because the more practice you get with arrays and loops the better of a programmer you're going to become because honestly that's like 90 of what you're doing in programming you're usually getting max a lot of data and you're looping through it and you're doing something to it okay that's like super common and so let's just get a bunch of different practices in all right so we're going to go ahead and make another function and this function we're going to make is going to be called letter counter okay so let's go letter counter you can also call it counter whatever you want and we're going to use it making an error function all right and basically what this function is going to do is it's going to take a look and see how many letters are in a given phrase okay so if i gave it a phrase let's say khan's phrase is equal to uh hey can you go to grocery store okay whatever all right this will go through this whole thing and it will basically just just count how many letters there are okay let's call it how many letters and so you're just gonna go through and this is gonna be a one there's gonna be a two this is gonna be a three a four a five for the empty space six seven eight nine so you can do this you can count an empty space as a letter that's totally fine so think about how you're gonna write a function like this right think about what are you gonna need to do well you're gonna need to loop through this and the cool part is you can actually loop through these types of phrases you can loop through strings as well first let's comment out um anything we kind of have up here okay perfect and now in here i'm going to go ahead and i'm going to say let's let's write a loop okay i'm going to say 4 letter in phrase and let's see if this works and let's do console log and we'll say letter okay and let's hit run and let's see what happens okay it's running okay so what we need to do in order to make sure that this actually runs is we need to call this function that we just made right so let's go right here and i'm going to say console.log and we're going to say how many letters okay and let's just call that function and there we go okay one two three four five and then it ends with um undefined okay all good so this keeps looping through and then it just prints out the letter that's what we're looking for right and we actually don't even need to call console.log here because we're printing out from the function so let's try running this and now you see there's no undefined right and we we go from 0 to 40. but it needs to start from a one and if you think you're getting this or you know how to kind of solve this or if you even want to try i highly recommend you just pause my video right here and actually give this a try okay go ahead and try to like do this on your own and then you can come back to this but i want you to get a ton of practice with this stuff because that's how you're going to get better not just by watching me but by doing it with me that's how you're going to get better so if we want to count the the letters in here right or this this how many are in there we can't start counting from zero okay so what i'm going to do is we can just make it where if i'm getting uh a letter here right oh and if you were a little bit confused like wait how are we when we run this how are we getting the numbers with this four loop right so you can also say four cons letter and if you change this to of because remember i taught you like i taught you four of loops earlier so if you do letter of phrase you're actually gonna and you run this you're gonna get letters the actual letters all right if you run um letter in phrase it's gonna get you the index at each one of those right so if you want to get 41 well what we want to do is uh just do letter plus one okay so this will just increase it by one whatever it is and if and for whatever reason this letter thinks it's a string so it was doing that weird thing where it's attaching you know zero plus one is zero one and one plus one is one one it's attaching itself so it thinks letter is a string so just type cast it into a number so force it to be a number and then you get this okay so this is like one very silly way of doing this and you get oh i get 41 at the end so that's it that's how i'm getting my this is how i'm counting my letters but there are better ways i'm going to show you in just a second all right so now let's talk about better ways of doing this yeah so what we want to do is we want to have we want to set a variable here that let's say is so we're going to say let uh result equals zero okay let's go here and we're gonna go we're basically gonna say result is equal to number and we're going to call index and we're going to say plus 1. because all we're doing here is the loop already allows us to get up up to 41 right so we know that this is the correct answer all we want to do is store that correct 41 in result and then at the end of this loop we want to just return that result at the end [Music] that's all we're looking to do okay so because okay so i'll give you an example okay let's just do result is index and here let's just return result let's remove this line well we can keep that line so you can just see how the loop looks and we're gonna run this function but wrap it in console.log all right actually we can do a trick here to make this look really nice so here we have return result right in order to make it we want to make it look like this result is 40. so there's a nice trick we can do in our return and we can basically say we can return it as an object so when you print it out the object is going to look really nice like this right um and then there's a even nicer shortcut where if you just add in one thing and wrap it up in an object it's going to automatically set this as the key and use this as a variable for value so it's going to set the word result as the key and use the value 44 from this so it's a super cool little hack and you can use this pretty often so let's run this and boom you can see that result in this case is 40. so now you can see that result is returning pretty much the last value in this entire thing that we get right when we print out our uh indices so these are this is you know this is like basically saying this is zero this is one this is two but we just wanna start it off with the one so um let's go ahead and all we need to do here to index is we just need to add a 1 to it and also remember we need to wrap the index in a string just like this oh sorry not in a string i'm sorry wrap index in a number because it is a string okay so we need to typecast it let's run this and boom you get result is 41. right so now phrase we can change the phrase right and again how many letters is a function that takes in the phrase so let's make this let's extract this argument out now and instead we'll put phrase over here and we'll pass it in the phrase okay so the function itself shouldn't have to worry about the phrase it should just wait for what the user is going to give it as a phrase and it says result is 41. now imagine i change this and i go prompt the user for you know write your phrase okay and now let's run this and now this pop-up happened at the top so i'm going to write my phrase i am wearing a nice green shirt right so when we do that uh let's go ahead and run this and i hit okay and let's see what happens here let's hit okay and right when i hit okay boom we got 31. all right so that that phrase has 31 characters now here's something sad i'm gonna tell you you can actually replace there is a method for strings that allows you to calculate the total of uh you know see the length of a string and that is just dot length okay so for example if i well we don't open up a shell let's just stay here so say i have a string here okay let's zoom in so you can see that better all right so say i have a string here that is banana if i just call dot length on this and run this you notice it'll give me a six okay and uh let's call let's say banana wants to know your slogan dot length it'll give me back 32 so a dot length is a property um on anything that's of type string you can call anything that's a string you can call dot length on it okay and that returns the final answer so let me zoom out here which means which means i could actually remove my entire code right and basically just say the result is phrase dot length change this whole thing with one line of code hit run write your phrase it's going to say something crazy and let's see if it can calculate it fast and it did and it goes result is 107 okay but let's write it in our way because remember that's the way you learn how to do it and right now it's important for you to manually learn to do these things because i want you to develop and focus on your skill set then once you get better normally what you would do is you know a javascript string um length you will just like google this okay and see if that exists and you'll google this and you'll go somewhere and it will say that let's see w3schools is usually a really good resource and it's just showing you text make a text let it equal to hello world let length be text.length and it also allows you to try it yourself so you can always click that and you could hit run right and boom it says 12 here and what if i change this to something random and let's hit run and you can see it says 38 right over there yeah so uh this is how you would normally do it in real life you just google these things you have to memorize anything okay but right now i'm just kind of getting used to having you get used to exercises do them yourself okay now let's build it up and take it up a notch okay so let's let's make a function that sums things okay that's also going to require loops and arrays so i'm going to go ahead and we're gonna comment this out and we're gonna comment this out so we're gonna go const uh sum array it's gonna take in some numbers and we're going to have a result we're going to say let result equal zero okay and then we're going to have some kind of for loop action going on here and then we're gonna return the result and let's just do this trick like that we did last time and something is going to go in the for loop okay something is going to go inside of the for loop oh sorry we forgot to put the arrow functions not bad arrows there we go and what's going to go inside of this for loop is basically going to be imagine this right imagine how we would do this manually so say we have these numbers or let's say we have these numbers okay this we know that this should if we ever have 1 2 3 4 we know that this should equal to 10. now how are we going to actually sum this up in normal life what would our pattern be well i probably have some variable let's just call it result and i would set it to zero in the start or i might set it to whatever this number is right over here okay so you could you could do either or but let's just start it with being a zero okay so it starts off being a zero then what we do is we loop through and we make the result becomes one then we loop through again and we do one plus two and then result becomes two sorry three then we loop through again and we already have this 3 here so we add 3 to this 3 right here so we add this to that and we get result is equal to 6 and then we add 4 to that and we get 10. so that's how we would do it kind of as a human being if we were to do it like manually and do it with each step and that's how we're going to do it with our computer we're just going to have it loop through and keep adding these numbers so let's go ahead and now write that loop so again try to give this a try and see if you can do this yourself okay because what you've learned so far you should be able to come very close to solving this so take five seconds to do it and also pause your pause my video in these five seconds to try it yourself so five four three two one all right let's get back to it so here we go i'm gonna say for const number of numbers all right and let's just call console log number and uh let's call our function console sum array okay and let's give it an array so we're going to have we're going to give it this array of no it's going to be called nums okay let's remove let's comment out all of this because we don't need that and let's pass our summary nums and let's just run this okay so we get back one two three four because it's looping through and printing number out each time so if i give it an array of one two three four it goes okay number is one the first time print it out number is two the second time print it out numbers three the third time print it out so on and so forth all right so it's printing this out result is still saying zero so now what we need to do is we need to increment our result so let's go ahead and do that now okay so again try to give this a try and now we're gonna do this so all i'm gonna say is i'm gonna say result and i'm gonna say result plus and we're going to do whatever is the new number that i'm getting okay and let's just see if this works and i'm going to hit run and it says result is 10. interesting did that really work well let's try it with and let's add 5 to this array and let's see if that works and i'm going to hit run and we should get 15 and boom result is 15. beautiful okay so let's see um how this is happening what is going on all right so let's do something to visualize this code and see exactly how this works i'm going to copy this let's go over to pythontutor.com all right and then hit enter once you're in pythontutor.com you're going to go to related services where it says javascript tutor okay and click that this website is awesome so paste your code and uh just for simplicity sake i'm gonna remove any console log because we don't really need that it's gonna help us visualize so there's gonna be no need for that and we don't need any comments either it's unnecessary for you to remove it but i'm just gonna remove that for simple simplicity sake then hit this big button here that says visualize execution so let's click it okay perfect all right now on the left hand side is going to be our code on the right hand side is going to be visualizing exactly how this code is running very important to notice also this red arrow means the next line to execute so which is the next line of code is going to execute okay so it's already telling us that this is going to be when i hit run or when i hit next to step through this this is the line of code that the computer is going to run and we're just going to go through step by step and see exactly which line runs exactly when and green arrow will mean the line that was just previously executed cool so this is our function let's walk through this all right so let's go ahead and hit next okay so now it sees we have a function called summary and boom it's like okay i got you there it is there it is i see it let's hit next again now it's on const const nums as you can see right here right so this is a line that's about to execute next so let's hit next and it goes okay i see that there is a variable called nums and it's inside of this array okay or it's this array right here it refers to this array and this is a global frame because this is uh these are all variables that are outside of this function so these are accessible from anywhere and from everywhere okay and we'll talk more about scope in the upcoming videos now next line is going to execute is it's going to call this function summary with the argument nums okay and then our entire function is going to start running so let's hit next cool so now we're inside of our function and the first line of our function is just about to run so the first line is going to be what result is cool so let's uh right now result is undefined okay but once this line runs here result is going to have a value so let's hit next and boom result is now set to zero now okay so this green is just showing you the last line that ran now the red is showing you that we're about to start running our for loop and we're just gonna be teeter-tottering in between this line the for loop line line four and line five and line four and line five and line four and line five until the entire loop is done then we're gonna go to this line here and return the result at the end okay which and again remember uh you know we're gonna touch base on scope but if you put this if you put things in the wrong scope wrong things will happen for example if you put this result inside of this these squigglies here right this is just going to keep returning every single result but that's not what we want we want to return the results after this entire for loop is done right and then we want to return this result okay so let's run through this and see what happens okay so right now it doesn't know what number is either okay but it does know it results as zero and it also knows that numbers refers to this array right here okay let's hit next okay boom boom boom all right there we go and now it says number is one perfect that's exactly what we wanted right number is one because the first time we're going through the array right it's a one that's what that's where the number is coming from now let's see what it's going to do the result so watch what's going to happen it's going to do result is going to be 1 this time so it's going to do 1 plus or sorry result is 0 right now so we're going to do 0 plus the number 1. okay let's try that and now you can see result is one let's do it again now number is two so two plus one result is going to be three okay three plus three result is going to be six six plus four result is going to be 10. okay and notice how it was just like boom boom boom boom it's just these lines running over and over again right and now the result is 15 now the loop ends because are no more numbers to loop through and we go to result result is 15 and then we return the result at the end return value right and the return value here in this case is this object it was of type object and it says result is equal to 15. okay so there you have it a full visualization of a for loop exactly how it works and what is happening and hopefully that clarifies things for you a lot further so i want you to try something try writing this function some array by yourself from scratch and i know we just did the answer but i want you to give it a try without referring to this and see if you could create this function by yourself and if you could that would be fantastic and just give it a give it give it a shot right and if you could get this working see you know that would be absolutely amazing and then check back with this and see how far you got all right let's do some more exercises with loops arrays objects whatever right because this is going to make you so much better so let's make a function called max so let's do const let's say find max okay or you could call it max as well and it's going to take in numbers and it's going to have a let's say cons result and then it's going to return the result okay and then we're going to have something some loop stuff happen here okay some loop stuff and here's how the algorithm is gonna work okay imagine we have an array of you know let's just say one two three and four and five okay imagine we have this array right here and let's just put commas here because that's how the array would look i have these commas and what we're gonna do is we're initially gonna set result to one and then we're gonna loop through and we're going to say hey it's 2 greater than 1. check these if it is then result set it to 2. okay then loop again all right is 3 greater than two if it is then set result to this then check between these two numbers if four is greater set four if five is greater set five and then once the loop is done it's going to return the biggest number okay and now imagine if you know in in let's say there was a case where we had a one here okay let's see if it would work if that same algorithm would work there okay set one two the biggest set one to result okay great now check between these two's two greater yes then make two the result okay then check between these is three greater okay make three the result check between these is four greater okay make four the result check between these is one greater no then don't make one the result keep for the result right and and then that's how we're we end up with four so that's kind of the algorithm that we would do okay now we just have to code it up so we're basically gonna say set result not to zero okay because imagine what if you had an array with only negative numbers in it well then zero would be the biggest number so that's a common trap do not set result to zero we're gonna instead say results is the first item of this array okay we're assuming we're getting back an array or we're getting an array here okay and then we're gonna say is loop so we're gonna say we're gonna write a four of loop const number of numbers and basically we're gonna say if number is greater than result in that case what do we want to do we want to set result to that number that we just found and at the end when we're done with this loop we just simply return the result okay so let's go ahead and give this a try and let's comment out anything else that we might have running okay we don't have anything else running so we're oh we do so let's comment out these lines right here and let's just go console.log and i'm going to say max and let's give it numbers like one two three four five and let's see what it returns as the max aha yeah so this is not a const let's make this a let because we are going to be changing result okay so this error is saying assignment to constant variable so all it's saying is hey you cannot redefine a constant so that's why i'm changing it to a let now you can redefine it right here and we should be good and let's do that trick again let's return result as an object so it looks nice when we print it and you can see result is five now imagine we have one comma two one two so the max in this array is what it is a it's the 4. so let's see if it gives us a 4. yes it does beautiful look at that let's go 20 now and 10. and let's see if that works beautiful and now let's make this array now let's make this massive right like let's just uh yeah let's let's take this right here and let's just paste a couple of times and run it and look at that it says result is 20 and if i make this a 3 over here and run it boom result is 30. i mean it will find it wherever the max is it will find that max right so this is a really nice function that we have created now let's keep building on this okay so this is all going to be making sense and trust me it's going to be so important for you once you start getting to building projects and doing those types of exercises you're going to wish that you spent the time to learn this because this is going to be a complete game changer for you all right so our max function is done let's work on a different function now and what this function will do is it will calculate frequency okay so let's go ahead and try that so we're going to const frequency okay it's going to take in uh let's say a phrase that somebody will say and i'll tell you how many times uh that phrase or that or sorry that that letter occurs okay so let's just say letter frequency okay so what does that mean so say i said haha here's what it should return okay so if i call the function letter frequency on the word haha here's what it should return it should return an object and the object should say h occurs twice and a occurs twice that's what it should return so how do we create this function so it does that if you want to give it a try you can this will be hard because you'll need to use your object knowledge as well that we put together a while ago but this will be using you know summing up numbers looping through things iterating and all kinds of stuff like that and so uh incrementing variables is going to be a tough one if you try to solve it yourself but you should give this a try right about now and we'll continue in five seconds five four three two one let's continue so i have letter frequency how do i determine this okay let's figure it out together first let's just go ahead and call this function so we're just going to say letter frequency and we're going to give it that phrase haha like this and uh let's console log that phrase let's delete that line and let's just make sure that this letter frequency is running okay haha showing up perfect now what do we want to do we're we're getting haha well we need to actually start writing a for loop that will start going through all of those letters because that's going to be important okay so let's go ahead and write a for loop so i'm going to say for letter const letter of phrase and let's just go console log and we're just going to console log each letter and let's see what we get we get h-a-h-a okay great now this is where objects are going to start becoming very very handy because you know key value pairs are going to be absolutely clutch for this um arrays are not a good solution for this okay but like objects are objects are also great for storing you know information in your phone book like on my iphone when i'm going through that is being stored in an object okay that's why i have you know my name my you know i could look up somebody by their name their phone number etc and objects are great for that so we're gonna go and look at something in the console okay and that's gonna make our lives a lot easier so say we have something called word and this word has let's actually give it let's actually call it frequency right or freak um and let's say this frequency has that the h is once and that's it okay so it has one h in there now if we have a word like haha or whatever right or if we want to just check yo is h inside of the frequency we're actually able to check that and it goes yes h actually exists because it can if you do h and frequency what it does is it looks for h as a key ins and searches all the keys inside of an object okay so it goes yes h exists and uh if i go you know because of the word haha does a exist in frequency and when i look it says no that a does not exist that's actually false so using this we're actually able to see if we've already stored something in our object or not because the way that we want to do this is we want to go and say okay so say we have the word haha then i want to have a object i'll just write it out here and it should loop through and in the first loop it should notice that there's a letter h so as soon as i notice the letter h i make a key for h all right and because i know it showed up once i set it to one so i go that key is equal and it's it has a value of one now then i loop through that other word again and this time i see that we have a okay perfect well have i seen a before no i haven't so then i set a to 1 and so far so good okay then we loop through the third time and i see h again well i've already seen this before so what do i do if i've seen this before am i gonna go ahead and make another h and then set that to one you can't do that because in objects you can't have the same key repeating twice so we have this key here and that this key here so what will happen instead is we will end up overwriting this key and just do h as one and that's what it was in the first place but that's not the result we want we actually want to we actually want to increment this key right here this h1 right so we want to increment this one by doing plus one and making it a two so how do we do that what we do is we go hey does h already exist and we do this little checker here right there and if it says yes h already exists then we go go to h and and add one to its value so it goes okay i'm to go ahead and i'm going to do that so we go to this and this becomes a 2 right and then we go to the fourth letter in haha and we do the same thing and we go hey does a actually exist in frequency and in this case it's supposed to be a true and it goes yes a does exist and so if that's true we then go okay find the existing a find its value and increment its value by one and then we get 2. okay so that's how that works that's how that works so let's go ahead and basically say that algorithm but in code this time so first we're going to make a frequency make a frequency object and that's going to store all the memory slash all the data of what it has seen so far okay so this is so make a frequency object okay it's going to be called frequency kind of like we did here okay but in the start it's just going to be empty it's going to be an empty object then we obviously loop through all the letters of the phrase and we check if that letter that we found in phrase does that already exist in frequency so check if letter exists in frequency so you make sure to you know we're kind of writing pseudo code right now because we're just writing it kind of like code but in english and then later you just turn it into code and then you're done so if we check if the letter exists in frequency okay what next well if it exists remember if it exists we're gonna increment by one otherwise we set it to one so let's write that check if letter exists in frequency if it exists so this is going to be indented because this is going to be nested inside of this if condition and we're going to say if it exists we'll then increment the value by one otherwise set it set the value to one okay that's essentially all we're doing and so now take take some time to see if you can actually write this as code and then obviously at the end we're just going to return that frequency that we created okay so we're going to return that frequency so const or let's go let frequency equal an empty object so see if you could code up the rest of this okay take maybe a minute or five minutes or whatever and even if it takes you 20 minutes it's totally fine because this is normal okay you're not supposed to get it this fast this is supposed to take you a lot of time but take some time i'll give you five seconds to pause the video and try it on your own five four three two one all right let's do it together now check if the letter exists i'm going to say how do i check well i just checked by doing letter in frequency okay does that letter exist in frequency this will evaluate to true or if false that's it i'm going to say if letter is in frequency then do the following and then we're going to say increment the value by plus one so how do we do that let's do that right now we're just going to say frequency of that letter so we're creating a new key on the fly and we're gonna say equal to whatever it was before plus one okay so it's like whatever frequency of the letter previously was just like incremented by one okay if it doesn't exist which is the only other scenario then what we can actually say is we can go and say hey set the frequency of that letter to one that's it and uh then we just return that frequency okay so let's try it on this word haha and see what we get and look at that we get h is 2 and a is 2. that's crazy right like we just coded that out from scratch and it works so nicely and let's try lol what are you doing later tonight lol haha okay let's run this and it just runs through every single letter right here and it says l happens about five times is that true let's see l two so one two and then we got three four five yep so that looks like it happens five times and it says how many times o happens and it says how many times a comma happens how many spaces there are and it just shows you the whole freaking thing right so frequency is working as expected now one thing i'm going to show you is called incr these are incremental operators okay at least that's what i call them and they are plus plus minus minus plus equals okay um plus equals one and so these are incremental operators they're really really helpful and make everything shorter so for example this over here you won't ever see it written like this if somebody's coding this up they're gonna write this like this okay so it's gonna say plus equal 1. so plus equal 1 is the same thing as frequency letter is equal to frequency letter plus 1. so these two are equal and i just want you to kind of get used to seeing them okay and we can go and change some of our stuff above as well so like where it says result equals result plus number right how could we change this here try it on your own take about five seconds and this you should be able to do in five seconds five four three two one you could change this with a plus equal all right incrementing it like that okay and if you're incrementing something by one here's the cool thing you could also just do frequency plus plus and that just this just means that you're incrementing frequency by one so let me try hitting run you can see that this works right you can hit one run on this and you can see that this also works and gets the same result and we can you know or you can go back to the oldest one and see we get the same results so it's a matter of preference you never want to write it the long way you won't ever see it written the long way and you could write it in between these two ways so you could go plus equals one or you could go plus plus either work okay so i just thought you should know those you could also go minus minus and that will like decrement it okay and um you know so i'll just leave this as plus equals one for you just so you can wrap your mind around this and get used to seeing it okay so these are incremental operators they're very very useful and very commonly used now i'm going to remove all these comments or i can just leave them here if because you know this might this might kind of hurt your brain a little bit how's this frequency thing working so i'm going to leave that here for you all right now let's just keep building on this and let's keep taking it a step further so now instead of letter frequency let's improve our our skills and and do something called word frequency okay so we're going to build a new one i'm going to say const word frequency and see if you can try to challenge yourself to take a stab at this phrase and then we're gonna run this function okay and we're gonna do the similar similar type of approach we're gonna create frequency here as an empty object and we're gonna return frequency at the end all right um and inside of here we're gonna do our like coding okay this is where we're gonna be doing our logic now here's the one interesting part here i'm gonna comment this out obviously let's comment that out let's go ahead and console.log word frequency to make sure it's running and let's give it a phrase the phrase is lol what is going on lol what law let's just say that okay lol what lol so we know that if we run that here's what we should get so if i run this function so let's have an example and this is also really good for documentation because by looking at this people can know how to call your function and then what your function actually returns at the end so i'm going to say word frequency and if i call this function with this phrase law what law it will return the following it'll say lol occurs twice and what occurs one time okay just like that and um this is what it should return so how do we make it so it does that well i wanna i have to teach you a couple of things for this so say i have a phrase and let's go phrase is equal to lol what lol so what we would really love for to happen is imagine we had an array and it had a it had things like this that'd be really nice because if we loop through something like that right in an array it would just loop through the words and we want to loop through the words instead of letters that's the only difference here between last exercise and this exercise okay so how then the question is how do we get it into an array so we can loop through it because if you try to loop through it in a string watch what's gonna happen okay so if you try to loop through in a string it's gonna loop through and print out every single letter from here so let's try to write a loop and loop through this so i'm gonna say four letter in phrase console.log letter okay and we're gonna hit enter we're gonna close the parentheses and run this right and it's just gonna oh sorry not not in let's run that loop again and say of of and it's just going to print out every single letter well that's going to be confusing because it's going to count letters for us and instead what we want to do is we want to count words entire words right and words in this case are separated by what what's a common thing all of these words are separated by take i'll give you a hint they're separated by these spaces okay so we can do something cool in javascript we can turn this into an array um and if we turn this into an array so let's say i give you phrase and if i call dot this method got split on it it's a string method and i say split it by spaces and i hit enter watch it what it's going to do it's going to turn that into an array and now that array very clearly has three items and if i loop through through these items watch what's going to happen so i'm just going to call it array okay and then let's just loop through there's a 4 word in array console.log word i'm sorry i'm just used to python so it's for of of of of so for word of array yeah law what law so look at that i'm actually looping through the words in that array and i can now in my object see if this word exists and if it does exist then i can increment it by one and if it doesn't exist then i can just set it to one so it's the same exact thing but just with words this time and all you have to do is turn it into an array of words and then you're good so let's give it a try now is what we know so we're gonna once we get our phrase okay what's the first thing we're gonna do to it what's the first thing we're gonna do to that phrase to turn it into an array we're gonna do phrase dot split yeah this is going to turn it into an array but we need it to be separated by what it's separated by spaces in this case okay so boom this is going to give us what we need so now let's let's go ahead and um i'll do let's just call this words okay and um now let's console.log these words and hit run and watch what happens now i hit run and watch i got lol what lol okay if i have hello here and i run it lol what lol hello yeah so now it's doing what we want it to do now the algorithm is going to be pretty much the same as letter frequency very very similar to that so we're going to basically use like a similar similar formula okay that we did here so we're gonna say we're already creating that frequency object there yeah and then we are returning it that's good so we're doing that here too we're creating it and we're returning it so that's good and we're gonna do the same thing so we're gonna say for const word of words okay let's just console log the words for now and let's just see what it's console logging so let's run it and you can see that it goes lola what law perfect is every word and we're gonna do the same thing check if it exists in the frequency if word and frequency then we're going to say we're going to increment it by one so we're going to go frequency word plus equals one else frequency word set it to one and at the end return frequency so let's try this and boom look at that lol is twice what is one time and it's already working right that's crazy so let's go yo yo yo and let's run it and here we're gonna see that yo is coming out three times lol is coming out two times and one is what is coming out one time so i mean this is so cool we just made it but there's something we can do to make it even better i want you to notice the similarities between this and the letter frequency thing that we wrote yeah and instead of calling it letter frequency let's just call it i mean actually let's leave it as letter frequency that's fine but they're very similar right the code here is very very similar to the code we have here for example we're creating a frequency object we're creating a frequency object we're returning frequency we're returning frequency right we're we have a loop that we go through we have a loop that we go through if it's detected in the frequency incremented by one if it's detected in frequency incremented by one if it's not detected set it to one if it's not detected set it to one i mean my gosh there must be something we could do because it looks pretty much like the same exact thing and watch there's something brilliant that we can do so we can actually delete this entire for loop let's get rid of this console log we can delete this let's get rid of this return here let's get rid of this frequency here and the only new thing we need in this is we just need to split it by uh spaces to break it into words right and let's go const words sorry i keep forgetting the cons sometimes and all we do here okay this is going to be so beautiful is we call our letter frequency function that we created earlier and we just pass it words and then ill know what to do with it so it goes in here and then it has instructions for what we need to do right and all we need to do here is just say return so let's try running this and look at that you guys we are getting the same exact answer and it is completely correct yo is three times what is once lol is two times okay now this is if this is not blowing your mind think about it like this when you go to google right and you type in kanye west and it starts auto completing it's using the same thing because it knows what are the things that are being searched frequently and because it knows their frequency it's showing them here so for example maybe this search over here right this kanye west runway that might be done let's say 10 times kanye west net worth might be done five times kanye west's girlfriend might be searched three times okay it's just an object and then google is sorting it and showing you based on the ones that were the most frequent that's the really cool part and this is why you know once you learn this here all you need to do is be able to attach a front end like this and boom your apps are going to be absolutely amazing and mind-blowing so let's try this now okay let's try our own function with different inputs we're going to say const user input is prompt uh write your sentence right and we're gonna replace this with whatever the user types in so we're gonna say user input here and call this and um yeah let's go ahead and run it write your sentence and we're just gonna say um [Music] kanye west has great music but west side is greater than greater than east side yeah because i live on the west coast in california and then you got all these people in new york and i like that my time gets back i get my three hours back when i come to california instead of losing my three hours when i go to new york so if you're in new york and you want to earn three hours back of your life forever come to california so let's try this yeah and um probably the only thing that occurs twice is west i imagine okay and then let's just write kanye is also the goat the goat that's not gonna work the goat okay ella said the goat and let's hit okay and run it and uh it came back all right and it broke it down and you can see it did a full breakdown of every single word kanye is two west is two has is one great is one music is one but is one side is one is two and the goat is two thus two and it did it all so fast and so quick all right so we did a lot of challenges and exercises and if you want to deep dive and do like a full on boot camp and master arrays and objects then i recommend you deep dive into exercises okay where we'll have additional exercises for you and lance he is going to be your boot camp instructor for those okay so if you want to become a like a legend he's going to help you turn into a black belt my job is to take you from white belt turning into a blue belt he will do that so if you want to for example you know because i'm going to move on to different topics now but if you want to just keep exercising this you can do that you can do that by going into say this exercises folder on the left hand side by the time you're watching this tutorial we'll have bunch of more exercises right now we have this one here that says convert convert hours to seconds you click that okay and then lance has this exercise prepared for you there's a rebel that you'll have to copy okay and paste in your urls and you'll be able to fork this and be able to code it on your own so this is the rupple that lance has created and if you want to be able to do it on your own hit fork at the top okay and then you can actually run this uh rebel okay and uh you can write your code here and you could write your solution here okay and what lance will also be doing with some of these exercises he'll also have a link at the top of the loom video where you'll be able to click and watch his video explaining that exercise explaining that project in detail as well okay so think of him as a solid um you know boot camp instructor that just like kind of dives deep in with you all right so that those are going to be the extra resources available to you with that said with that said you're doing amazing pat yourself on the back i mean wow you're doing an excellent job so far by being here you're putting in the work you're putting in the effort i mean you could be doing so many things you could be playing with your kids right now you could be outside hanging out with your friends you know you probably got off of work and you're putting in that time to learn this i mean that's huge dedication you're taking time away from all this other stuff you could be doing and doing this so now granted coding is a lot of fun but if you're in this stage i know you're doing it for learning and i tip my proverbial hat to you um huge props for making it this far with that said let's keep on rocking and rolling all right now we're gonna move on to something really fun they're called higher order functions don't let the name confuse you or freak you out they're very very easy i swear once you see them a couple of times pattern recognition maybe and then it's so fast it's so easy so let's get to it so there are a couple of higher order functions i'm going to show you okay so higher order functions and i'm going to show you map and i will show you filter map is like one of the most important things that you should use uh i'll also show you reduce okay and uh map will make your life so much easier like you'll be using map so much and then you'll also use filter a lot when you're writing javascript code so let's go ahead and comment out these lines here because we don't need them right now and let's just get started okay so we want to use let's start with doing some of these functions again but instead we're actually going to use map so let's say we want to double our numbers right any number that we give it watch how easy it is so say i have an array i can loop through this using dot map and i can say map and give me a number and for each number i'm just going to console.log it so watch what happens let's run this and boom there i have my loop like look at how clean it is it's just one line right no blocks of code no weird squigglies or anything like that and what i'm what i'm saying is map through this i mean literally think of it like loop through this like it's literally like dot loop and then each variable let's we'll just call it number so like this will be a variable called number then this will be number and this will be number and each time what i want you to do is just print it out so i'm returning this right away but if you wanted to write a full function here you could just do this put open close squigglies and like write whatever you want here okay you could write multiple lines here and when i run this you'd see it's like one haha two haha three haha for haha like so on and so forth so let's remove this now we're doing an implicit return implicit return by not having a squiggly braces here we don't even need to say return it's automatically returning it okay now i want you to take a look at this how could we double all of these numbers here watch how easy it is i could just say number times two and watch what happens so let's just go let result is equal to that and we'll console log result okay let's run this and look at that you guys like that is so clean that is so nice i mean it is the easiest thing right in the world and it just boom two four six eight and all i did is i just said number and multiply that by two now here's also what's cool about map so whenever you have to write loops pretty much just forget about them and you'll be using maps like most of the times in javascript most of the times and what's cool about map is it's also returning to you an array okay so map returns so it loops and returns an array so remember when you have to like make this result thing so for example when we were doubling our numbers right we had to make this result and this temporary array then we had to loop through and push to that array and then return that array well what's amazing about map is it's already doing that it just goes through and doubles it it's automatically pushing it to an array right and then it's returning that array at the end so that's what makes map so freaking awesome and all of our like code that we have written before we could just like replace it right so let's let's rewrite our double functions let's say const double map and it takes in numbers okay and what this does is it will take numbers so we'll do return numbers dot map and for each number just multiply it by two okay so that's it that's our entire function so compare this double here with how many lines of code to this double here with one line of code this is so much cleaner and so let's delete that and let's try running double map and give it an array we'll say one two three and we should get two four six boom look at that we got an array of two four six so this is a much nicer way of writing it so i try turning some of these okay for example you know some of these functions into using map or using filter and see if you could do that all right now what i'm going to do is before we get into the exercises and remember for exercises if you need exercise there'll be an exercise folder for you me or lance will put together these exercises for you and you can always kind of access them from here and exercise okay and by the time you look at this it'll be much more fleshed out so i showed you an example of how to use map so this is map all right now i'm going to show you how to use filter okay that's another important one so say you have numbers like one two three four five six well in order to be able to go through these numbers i mean and and let's say i want you to only give me numbers that are greater than three how are you gonna do that right now let's create our own filters we're gonna say const filter and it takes in numbers and it takes in a filter number as well so like should be greater than or something like this okay so we have to give it a few things we need to give it numbers and we need to give it like it should be greater than 4 or greater than 5 or greater than 3 something like that and then how will it work well we will need to have an empty array to start off with and then what we need to do is go hey is one greater than this number here and if one is greater than this then throw it in that bucket but if it's not let's say we have we chose 3 to be our number here so 1 is not greater than 3 right so then it shouldn't do anything with it and cross it off then we go here is 2 greater than 3 nope is 3 greater than 3 nope is four greater than three yes so then you get four it's five greater than three then you get yes is six greater than three yes right so you pop those numbers in there but besides those you don't so then you get this filtered array okay so if you run filter and let's say we give it uh numbers let's say we give it a you know one two three four five six and then we say it has to be greater than three well then what should filter return it should return four five six that's what it should return so see if you could write this function on your own okay so i'm gonna give you five seconds to pause the video and try giving this a shot on your own five four three two one all right let's do this function together so i have filter here now what we can do is um we have our numbers we have what what it needs to be greater than so we're going to start off with an empty array so we're going to say result equal that empty array let's actually write our for loop first so let's return the result and let's write our for loop so we're going to say 4 number of const number of numbers i want you to do the following if number is greater than this number then we're going to do result.push number and then we're going to return that array at the end all right so let's give that a try now so we're going to do console.log and we're going to call our function filter we're going to give it an array of one two three four five six right and then put a comma here and let's give it another argument and the greater than number will be three so let's format our code and let's run it all right and then filter work so it gave us greater than four five and six so here we've kind of created our own filter this is like a manual way of making a filter and it's all right it does okay job if we need you know for example let's say we give it a two well then it should give us number three four five six let's run it so now it's only looking for numbers greater than two so boom it it works but let's use the dot filter method and dot filter is an array method that we can actually use and it makes our life a lot easier okay so watch this what we can do is let's comment this out right now and i can actually go and create nums okay so let's say we create nums one two three four five six okay and let's filter through this so let's say nums.filter and i'm gonna say for each num return to me make sure num is greater than six all right let's console log this and here's the cool thing about filter okay filter returns an array all right that's the cool thing about filters so if i go back to filter here it also it loops and returns an array with matching conditions so that's the difference between map and filter map will return the exact thing and filter will loop and return an array with matching conditions all right so let's give this a try and let's console log this and let's run it nothing is greater than six so that's why we got nothing back let's try three boom four five six let's try uh let's try greater than or equal to this so if we do greater than or equal to then how many items should we get back take a guess all right if you said four good job that's right it is four great work on that but it will return four because it'll be four five and six because they're greater and this is equal greater than or equal to so let's run it one other thing with conditionals that um you should know about is uh operation called and and all right so the and logic is really important for you to learn so let's go ahead and look let's just practice this here but if you have true or false watch what happens if you have these statements like this right if you have true statement or a false statement you can have so if you have this this will return a true and how you write an or is like this in javascript if you do true or false it's going to give you a true if you do true and and and false you're going to get back or false all right so these things are important for you to know they're logic tables and i think it's much better for you to just understand them by example because if i tell you logic tables you're going gonna be like oh my god logic tables what is that well it's a lot simpler than you think so for example say i want numbers greater than four so i want numbers greater than four but i also want numbers uh that are less than three or less than two let's say how can i say that statement well i can say it like this let's go or and now if i run it it's gonna notice that it gave me a five and a six so those match the conditions and it gave me a one because one also matched the condition so anything that's a or statement here's the cool thing about or it needs to match this or this it just needs to match one of them and if it's the case then it'll automatically be true just needs to match one of them but if you said and right if you put a and here logical and like this it won't show anything you know why because nothing matches that nothing is greater there's no number that's greater than five and six and less than two at the same time this wants both to be true at the same exact time so here we wanna put an or examples of these could be like let's say a user is authenticated right in an app and then user is a premium member you know or like and user is paying member so then you want something to happen right so you can go if then you want to run some like piece of code that that let's just say does something okay so if user is out and then like code goes here so if user is authenticated and user is a paying member then do the following so this is an example so if this evaluates to true and this evaluates to true that's the only time this code is going to run but let's say the user is not a paying member and this is false then you know for example let's let's make a let's make an example here let's say you're a youtube user right and you have youtube premium so if you have youtube premium then i show you no ads so if you're authenticated logged in and you're a paying member then i show you no ads otherwise what i do show you ads so that's the nice part about this and and thing so if i can even make it like this right equal true and this is equal to true so that would be like more verbose way of saying it but this is why this chaining kind of comes in but then like doing the same youtube example maybe let's just say that let's remove the ads like let's say the youtube app deciding when to show you the videos so if i go to youtube oh i can't go to youtube right now because i'm in focus mode so you're just gonna have to imagine that we're in youtube because i'm a human being right like i'm sometimes making these courses for you and these exercises for you and then i get distracted spend a bunch of time watching youtube and it's just it's just a waste of time right and i end up not making this course material for you so i have to stop myself and block my own youtube so there you go that's what you saw i've blocked my own youtube and this is what my current focus is so let's just go back because i don't want to fall down the youtube rabbit hole but just imagine in your mind's eye right what happens if you're authenticated you be white we might want to relax this statement and put an or here why you know show youtube videos so whether the youtube user is authenticated or whether the user is a paying member in either case they still get to see youtube videos regardless but let's just say you might have to be logged in so that's why the or so the aura creates relaxing conditions easier to match and creates these strict conditions that are like district disciplinarian father okay so use them accordingly they both have their own use cases uh but they're very important to understand like the and and the ors okay and they come up quite often so here i can using this i can find numbers below a certain thing and numbers less than okay all right so let's make this example a little bit better okay oops did not mean to do that cool let's go back down all right let's make this example a little bit better so what can we do with this okay so say we create a array of objects so this is where it's going to start getting really cool because in reality you're always dealing with or mo a lot of the times you're dealing with array of objects when you're using an api or whatever and i'll show you what it looks like so say you have actors right and you want to have actors with their net worths and then you want to filter based on their net worth so only show you like the richest actors versus like the actors that might not be that rich yeah so let's say we create an array yes first thing we're going to do is we're going to create this array and then inside of this array we're going to have we're going to create an object and we're going to create a name and let's say johnny short for johnny tepp and then we're going to give johnny depp a net worth of whatever that is let's say amber uh net worth of 10 and then uh let's create create leonardo with a huge net worth so whatever that is 100 million cool so we have an array of objects okay so when you have an array of objects what you can do through it is you can loop through it um kind of in like a normal way if you wanted to but i'm just going to go and show you how to make that filter example that we're talking about okay so what i'm going to do is i'm going to say actors.filter and i'm going to filter them and i'm going to grab each actor and i'm going to filter them based on their net worth anywhere where their net worth is greater than 10. so if it's greater than 10 show me those actors so guess which actors it's going to show me can you take a guess i'll give you five seconds five four three two one you're absolutely right it's only going to show me johnny and leonardo it's not gonna show me amber because after that lawsuit she ain't got no money left right so let's hit run on this and we see leonardo and we see johnny and we do not see amber right let's go ahead and comment this out and i'll also delete this line here because we don't need that anymore so let's run this again and you can see that i have johnny and leonardo right here so you can see how powerful filtering is right like it is able to go through an array of objects and it's able to filter based on the net worth and then based on that it's only returning it's creating a new array of objects and it's only returning the objects that have a net worth of greater than 10. and we can keep taking this further now what i want to show you is we can not just keep everything in console logs right but we can also put things to the dom so we're going to get a lot more into dom elements later but right now let's just do a little sneak preview so what i'm going to do is i'm going to say playground dot inner html and um we're gonna now output this stuff to an html okay so i'm gonna say internet html and i'm just gonna say leonardo okay let's start with this and end the h1 tag perfect now let's run it and you can see it runs it right over here the next thing i want to do is right now it's hard coded i'm get how i'm getting his name so let's actually write a piece of code where we can dynamically get this name over here okay so let's go ahead and instead of console logging this result i'm going to store this so we're going to say const result okay or let's just say let result and we're going to store it in here and then here let's make this a template literal where it says hard-coded leonardo we're gonna make it javascript i'm gonna say result get me the zeroth element from the result so that's gonna get me the first thing all right and uh then i'm gonna say dot actually i don't need to do yeah yeah i can do dot name okay result zero dot name so that'll probably get me johnny depp let's run this okay sometimes if it breaks like this just refresh and everything should be fine so i'm gonna go ahead and refresh okay perfect so now you can see that it's actually getting me johnny kind of how i expected it would let's go console.log and we'll see a result here as well so you can see all right and johnny net worth is 200 to whatever two million right and then leonardo dicaprio net worth is 10 million and uh i'm able to get johnny right here by doing result zero dot name dynamically if i wanted to basically see let me actually run this again if i wanted to see the entire object like this entire thing but output it onto the dom i could stringify it so i can actually go hey get me the result and then we'll say stringify json. let's go json.stringify and then we'll pass in result okay and let's run this and it'll just kind of like output it kind of like that which looks pretty hideous so we want it to look a little bit better right let's start off with just showing the names of the people that have a higher net worth than let's say two million so basically what i'm gonna do here is i'm gonna do the following okay so let's let's go ahead and run this so what i'm going to do is i want to make it so it just gives me the names of each person okay and how can i do that so say i have an array like this let's store that in results i'm going to paste that here so let's whenever i type in result i should get that well how will i join them what i can do is i can actually map through this because map will return an array and so i'm going to map and first i'm going to get this element and i'm going to get this element and all i'm going to do is i'm just going to pull out the name so what i'm going to do is i'm going to say result.map and i'm going to say for each actor in there i want you to just return to me actor.name so this is just going to return this code here saying return an array with just actor names that's it so return an array map is saying return an array that's just filled with actor names that's it that's all i'm doing so let's run it and boom i'm just getting this back even if i do that that should get me kind of the right result now what i can do on top of this is when you get this array back you can actually call a method like join on it and if you join it it'll actually join it and turn into a string so it's the opposite of splice splice turns it into an array the join will turn it into a string so i'll actually say the join and then join them by either spaces or i can say join them by a comma and a space right so now it's going to be johnny and leonardo and no matter how many actors i had it would kind of join them by name with a comma and a space in there so all i need to do to this thing that we had written earlier and i was just pressing up so i could find that and i'm just going to say dot join and we're going gonna put this here and put a comma right there i'm gonna hit enter and now just doing the whole thing all in one go so let's copy that line and we're gonna do it right here okay let names and i'm going to say names are you know whatever result was we're going to map through it for each actor just get me the actor name so again get me an array with actor names that's all i'm saying here and then join it by a comma and a space and then those names i want them outputted on my dom so let's hit run and you can see that i'm getting those names out put it on my dom okay let's add in a couple of more actors here so boom boom boom so let's look up matt damon networth all right celebritynetworth.com perfect so 170 million all right 170 million let's type that in 170 million let's type it in so we can copy the right amount of zeros here let's copy that let's move it back and i'm going to say matt we'll put that right there so his net worth is 170 million let's uh grab another actor let's go brad pitt net worth okay and we got 300 million here perfect so let's go 300 million and we should get calculator.name nice good website good website and i'm going to copy this right here and we'll paste it right there just remove the commas of course all right so we'll name this one bread red okay that's it and let's remove this one because that's a duplicate so this is this is good for now and um let's let's just run this yeah let's run this and see if it works and so any actors that have a greater than ten dollars net worth you got johnny matt brad pitt and leonardo dicaprio and you know the whole thing works perfectly and what's cool is like if you wanted to show images for them you could also show images you just need to store image url all right so i think these exercises kind of pushed you a little bit when it comes to filter like if you had to write this code without using filter or map oh my god like good luck try it and it will be so many lines of code there will be so many functions with filter and map i mean they just make it so easy to kind of just like go through this so i'm going to comment out all of this comment out this going to comment out all of this right here so when i run it nothing really should be coming up perfect so now what i want to show you i want to show you reduce okay this is the another one that's really really important so when is reduced used let's say you want to combine all of if you want to sum all of the net worths okay so generally whenever you're thinking of summing it's a amazing use case for summing like whenever you think some think reduce okay and i'll just try to teach you with examples because that'll just make it so much easier for you to learn so say we want we have that function where we sum right so let's go ahead and find our sum function so where do we have it some array all right so we have this function some array look at how many lines of code this is right now watch what is going to happen when i use reduce okay when you're summing an accumulator like this that's when you use reduce when you are doing something else where you need to return an array you will use map okay so push gets replaced by an app all right so let's see if we can turn this into a very small lines of code like summing an array of numbers here's how this will look okay some nums okay some with reduce okay so i know it's a big name but this is still a set the you know simple function and i'll show you how it works and here's what we're gonna say okay so we're gonna get numbers and we'll do we'll have it do numbers dot reduce all right so to keep things simple let's uh not even have it be a function okay let's just start actually let's do it right here on the right hand side first so say i have one two three okay how do i sum them up so here's how we're gonna do it with this okay so let's say i have my nums okay so let's say i go nums are 1 2 3 and then i'm going to say reduce okay and reduce takes in a function reduce takes in a function as an argument that's why it's called a higher order function because even if you look at filter i don't know if you noticed but what you're really giving filter here so uh let's just go back you know just in case some of this wasn't clear number number times two this is just a fancy way of writing function that takes in a number and then you go return number times two so you're you're creating a function on the fly here okay you're creating like an anonymous function with no name on the fly here and or lambda function and you're just passing it that function okay this is what's called a higher order function you're passing it a function this right here is a function like this right here is a function this right here uh right here is a function and so we're gonna create a function here function and um let's let's give this a try okay so what does reduce do reduce loops and gives you back the accumulator all right so this is going to be my previous value this is going to be my next value i'm just going to call it any x for now and let's just go ahead and console.log previous and next okay and let's run this and let's see what happens okay boom i got one two so what's previous and next in this case right this is our accumulator so it's it's basically going to be like this is the previous value this is the next value so if you do previous plus next it's going to do one plus two and then previous is going to become three okay preview is gonna become three all right and then you're gonna go through this and do three plus three and you're gonna turn it into six now what i'm gonna do is i'm just going to go return previous plus next okay or previous plus current that's usually what they call it okay current so let's do previous plus current and i'm going gonna store the result of this in results so let's go const result is equal to that and we're gonna go console.log and let's get the result and let's take a look at what it is and boom you see that we just got back six okay so this function here with the result um with using reduce it made our life really easy right being able to go through this entire thing and sum it so quickly with essentially one line of code that's a total game changer now let's see if we can even make it simpler so we're going to use es6 notation and turn this function here into an es6 function so watch what happens so this function part is going to lose this right here and we don't need that we don't just say function anymore we're going to put a greater than equal and equal and a greater than sign and then this part here we we want to do implicit return so we're going to remove the return but in order to have implicit return you also need to remove this squiggly like curly braces we're going to remove them we're going to format it okay and you can even if you want try to get this on one line so now that entire solution is just one line so you're using reduce and you're summing up all these numbers so when i hit run watch what happens i got a six and guess what can you remember where we've made a function that takes two numbers and returns their sum because that's all you're doing here you're creating an anonymous function that takes in a number and then just returns and just sums both of them right that's all this is doing so can you remember where we've created a function like this okay i'll give you a couple of seconds five four three two one to find it and let's see if i can find it as well so if you look we created a long time ago we created this function sum right here okay and we even have its short version right here some arrow two some arrow and then we also have some so let's see if we can feed it that function okay so now you're going to start to understand why it's called a higher order function so let's bring it down let's bring some down so i'm going to copy this and i'll bring it down just so you can see it easily and what i'm going to do here is instead of even writing all of this first we're going to turn it into one line of code how we had earlier so we've done that right we said previous current right and then return previous plus current so sum up those two numbers we could also say a comma b return this so if i run this this should still give me a six as expected and here's the cool part i can actually just feed it that entire function just like this so i can just say hey reduce it to one number and then just sum it so that's why it's called reduce because it's an array and you're reducing it down to just one number right it's gonna return one number here that's why it's called reduce and then i'm giving it the sum function and what the sum function does is it just takes in things and it sums them up so let's run this and this still gives me a six let's say i wanted to multi take the multiplicative product of all of these numbers right so i would want to do 1 times 2 times 3 times 4. what would i need to do in order to get 1 times 2 times 3 times 4. see if you can do that with reduce okay so take a few minutes and try it on your own i'll give you five seconds five four three two one all right let's get let's go all you would have to do is you just have to copy this create a new function call it multiply and you just change this a plus b to a times b and just feed it multiply and now it'll just keep going through multiplying those number saving their accumulator and spit it out so you feed it sum you get some you feed it multiply you get the multiplication multiplicative product at the end so anytime you're using reduce you could create your own function or just on the fly just go a comma b a plus b this is a pattern i use very very very very very often and i hope that you use this don't anytime you're thinking some just copy this for now literally you can copy and paste this most of the times whenever you think some this is usually going to be the answer and then you know you can stack overflow it later and just go hey how do i sum up something with reduce how do i do this with reduce and you're going to start learning this reduces something pretty complicated and so i don't want you to go fully down the rabbit hole but just learn it with pattern recognition anytime you have to sum up numbers use this right a good exercise for you to try would be how can you use reduce to sum up all of these net worths okay so get the total net words so try giving that a you know see if you can give that a try i'll give you five seconds and then we'll try to solve that together okay so i'll give five four three two one all right let's try to solve that one together all right so i got all these net words over here and i want to sum them up how do i do that by the way just a pro tip in replied there's something really sick that allows you to explain code so let's say you're not understanding what this is you can highlight this right click and click this button that says explain code and this does a pretty freaking good job this code takes the array nums and reduces it to a single value by adding each value together that is a really good explanation so you could hit yes and then you can also hit regenerate and it generates a new explanation for you so this code takes an array reduce it to single number adding all the numbers together so that's a really freaking awesome feature of replica make sure to keep using that anywhere you're kind of confused and you don't know why we're doing a certain thing i mean i'm kind of blown away by it it's really it's really good okay so like for example look at line 356 right now right if you highlight this and right click and hit explain code it will tell you watch this code is an example of template literals brilliant it is used to display the value of variable called names inside an h1 tag this is brilliant this is explaining it better than me let's see what it says about this filter one let's see how good of a job it does here so let's explain code this code filters the actors array for all actors that have a net worth greater than 10. oh my god oh my god so now let's play with this um actors array that we were working with earlier right so i'm going to comment out all of this stuff here for a second and i'm going to go back to this actor stuff and let's go ahead and we don't need to uncomment anything let's just go down here and i'm just going to say actors.reduce and i'm just going to write what i had written before and then i'll then i'll start using my brain okay and so there's gonna be an accumulator oh one of the things that is kind of useful to know that i'll kind of tell you in a second is this okay let me actually tell it to you right now so you're not confused later okay so let's go ahead and comment all of this right here you could pass in so it this reduce takes in two arguments one argument is a function and the other argument it takes in is like some kind of number okay so it takes in two arguments so we have already given it a function and then we can give it another argument like a zero so watch what happens when i run it right now i get 10 but i could also start the accumulator from negative 10 and then it will count up to zero right or i could start it at already ten and when i started from there it will count up to twenty so this secondary argument by default usually it starts at zero but you can also specify this one so helpful for you to know if you don't need that you could just write it like this okay but i'll just leave that here so you know that there's different options for you available okay let's go back to this part here where we were writing actors reduce so this is going to be my previous value okay and my accumulator is going to be zero and then what i'm going to do is for my current value okay so this is previous this is current and i can just say dot net worth and let's see if this does what we want it to do let's console log the result of this and if it doesn't then we'll try to fix it and looks like it does it combines all of those net words already okay so this is previous right if i had to write it in a verbose way let's write here previous this is current as you just say current not net worth and then previous is that so previous is like in the start previous is zero then previous is like uh whatever the result of this was so it's kind of like recursive why is it yeah so okay so think about it like this right we're going through it the first time first loop first previous is zero so zero plus 20 million or whatever is 20 million so then previous becomes this next time then 20 million plus 10 then that becomes you know that like 20 million 10 or something like that right and then uh you add it again and then previous becomes the sum of 20 million plus 170 million so this becomes like 190 million or something like that okay and so that's how previous works do this we'll say console.log and i'll run this and if you remove the zero this should still work because by default it's uh zero oh no actually in this case it won't work c so we have to actually pass in a zero so that's why that's important uh because something because it was trying to like add the objects on top of each other so it becomes weird so just pass in that zero if you need to and then this way you can sum it up so see reduce allows you a nice little way to sum up this whole thing let's comment this out all right let's run and hopefully nothing prints out beautiful so just to recap we talked about map function and how you can use map to double numbers we talked about filter and how you could filter for specific net worths we talked about reduce and how you could reduce things to a single value and sum them up together or essentially how you could sum up things without having to you know loop through and do it all manually reduce allows you to do it kind of in one go so you know and we talked about higher order functions how higher order functions work together meaning it's a function that takes in another function as an argument that's why it's called a higher order function so we talked about those there's a lot that we covered and this is kind of like the part where it gets kind of complex and it's like what is happening things will keep getting harder so i don't want to promise you things will get easier but this is one of the pretty challenging parts to understand if you don't really grasp it right away don't beat yourself up it's totally normal it's okay all right you're in the right place with that said we're going to keep on rocking and rolling and learning new things all right boys and girls let's get back to it before we're very close to getting to that rock paper scissors game for you and that's going to be really exciting but first things first we have to work on getting your dom skills up okay so let's go ahead and talk about dom manipulation and no i'm not talking about a dominatrix get your head out of the gutter okay i'm talking about this dom right over here all right so when you see stuff in this console log right here that usually has to do with um that's just whatever is in your console but when you see stuff here that's your dom okay it stands for document object model which you never have to remember again okay it's just like nerdy knowledge that won't really be super useful for you in the real world you'll just refer to it as dom most of the times dom and it's just hey this is the stuff that's showing up here okay so how do i change this exercise to say exercise how do i say change this projects here from being written in black to be written in red all right all of that requires you to manipulate the dom when we're playing rock paper scissors right how come when i click this button watch it's going to say rock versus scissors you win when i click this hand let me move myself here when i click this hand watch what happens boom boom boom boom boom boom boom boom right all of this right here my friend is just dom manipulation boom dom manipulation this changing here when i hit this red button right here watch what's gonna happen boom everything got cleared up that right there dom manipulation okay so let's go back so that's what we're gonna work on okay how do we actually make stuff happen on the screen how do we change stuff on the screen with javascript how do we mess around with the html with javascript and we're going to play around with that a little bit so let's go ahead to our index.html and i'm going to go ahead and add in a div okay and we can add in a div actually let's do this to do some dom manipulation some of this stuff let's do it also outside of this replace stuff that we're doing here so you can start to learn how to do things from scratch yourself as well okay so just do me a favor hit command t or control t on your computer open a new tab and let's go to replic.com okay and now here just open a new repl okay so for example there's a multiple repels let's go back multiple rebels that show up here let's just choose the html css and javascript one okay depending on when you're watching this maybe if they updated the site click a plus button and then choose html css and javascript okay whichever way you want to do this so i'll just click here and what do we want to call this i'm just going to say dom manipulation lesson all right and then go ahead hit create perfect it'll bring you to here okay and if you hit run uh right now you should see hello world on the screen how are you seeing this so you came with three files here index.html script.js style.css now to style.css don't worry about it just for styling the main ones that we're going to be worrying about here is the html and the script so this is pretty much standard html that when you just like make any javascript app you you you know you you kind of start off with but to make it even less intimidating for you to start off let's just remove almost everything we're just going to leave a script tag here and let's say if we can say hello world in this h2 and let's hit run let's see if this works so it looks like hello world shows up here so this is literally two lines of code okay and let's even write this line of code here so you understand how to link a style sheet to your javascript sheet okay so hello world and now let's go to our script.js file and we'll write console.log and i'll say hello and i'll hit run and notice the problem that we ran into right where is our hello hello why isn't this showing up in the console what we need to do is link this style sheet to this script sheet okay so we need to go ahead and do that let me zoom in a little bit so you can see everything a lot more clearly so let's go ahead and do that and i'm going to link this okay move this over here so we're going to say script hit tab and it'll create these tabs for you right and then we're going to say script source is and for source i'm going to say script.js because this is the name of this file you could call this whatever you want as long as you change the name here for script let's hit run and [Music] now you see hello over here is showing up okay perfect so we have linked our index.html with our script.js okay now let's do basic dom manipulation okay how are we going to do this well what i want to do is this h2 i'm going to give it an id and we're just going to call it title and then we're going to come here and i'm going to say let title equal and what's cool about javascript is you can do something called document.getelementbyid so we're gonna pull this specific element right over here this h2 right here by putting in the id so what's the id can you guess right it's title okay so i'm gonna get this id and then let's go ahead and console.log this and let's see what it shows us on the screen so i'm gonna say console.log.title let's run this um sometimes if your app kind of breaks out like this just hit just go ahead and hit refresh so i'm going to refresh here not a big problem all right let's run it again and you can see that it says hello and then it says html heading element so it's it's showing us something that's a really good sign now what i want to do is i'm going to say take the title okay and we're going to see if we can grab its title dot inner text so let's try this let's see if we can do this ah so i'm actually able to pull the text of this title so now let's go to our html and change this hello world to hello world hello knight and let's run and and you can see that we're actually pulling hello knight from here right from html we're pulling that and reading it in our javascript so that's a really good sign means we can actually now do stuff with it now here's the cool part how can we go the other way how can we update our html from our javascript and then it'll show up here so let's go ahead and do that now i'm going to say title dot inner text and let's just change it to whatever we want okay so let's say we want our inner text to say goodbye so let's say we wanted to say goodbye my lover goodbye my lover goodbye my friend you have been the one there we go so look at that right now i'm gonna i'm gonna let's um let's run this and you see for a fraction of a second it'll say hello night and then it says goodbye my lover so let's run this fraction of a second and then it goes to go down my lover so we're printing out the text before changing it let's also print it out after changing it so we're gonna say okay and in our console log here we're gonna say before like that and then here we'll say after like that and let's run this now and you can see before it was hello at night and then after it became good by my lover so that is the heart and soul of dom manipulation okay this is this is what it is now if you want to change the html you can do that as well so watch this i can actually go ahead and do title.inner html so i can actually change its html okay so it was an h2 right i could actually say put it in p tags and change it so let's say we'll make a message so we'll say co let message equal and here i'll put goodbye my lover that'll be the message and then we'll say it's whatever the message is right boom so let's comment out this last line right now and let's go ahead and run this and watch what happens okay so i should get pretty much the same exact thing all i've done is create a variable message putting it in here now watch what i can do i can put that same message within these p tags okay so first let's just start off by doing hello just so we can get a sense of how this is working and you can see that we've changed our inner html to this all right so notice the problem we're running into right when i do p tags it's still showing title tags it's because it's inner html okay so if i go back to this tag here this doesn't have any other inner elements if it had other inner elements it'd be able to change them so there's nothing for it to change here okay so here's what we want to do instead we want to actually wrap this entire h2 in a div all right so let's go ahead and copy pick um cut that paste it here so now here's what it should look like you should have one div and that div should have a h2 inside of it that's it okay one last thing we need to do is we need to give the id not to the h2 but instead we need to give the id to the div okay so the div should have the id not the h2 let's go ahead and try again so now i'm grabbing this one when i say get me um when i said get me title it's getting me this div right over here and then when i say change the inner html it changes this and to be even more clear what i can right click and rename all occurrences and we can call it title div okay so what i'm doing is i'm grabbing the title div and then changing its inner text and its inner html so let's go ahead and give that a try now and you can see that i get back hello now in order to make this hello instead of hello this message show up that we wrote remember let's use template literal so see if you could replace this hard-coded hello with this message right over here so take five seconds okay it'll be a good practice and using template literals remember to start with backticks and uh pause the video try to yourself five four three two one and let's go ahead and do this now so i'm gonna replace this with backticks back text right here okay and then this here is gonna become a javascript variable so we're gonna go like that and i'm just gonna put message in here okay let's run it now and you can see it says goodbye my lover and then there are other things i can do as well right so for example i can actually grab this div right here and change its style property and make it red or green or blue or whatever i want here's how we can do that let's go ahead and do that from raw html file and here for this div i'm just gonna pass in a style attribute i'm gonna say style and we're going to put a string here and i'm going to say color make the color blue so let's run this color is blue and put a semicolon here and run it don't put blue as a string because it's already a string and there we go goodbye my lover okay if i wanted this to be the background change the background color instead this is how i could do it there we go so we could do background color like this okay so let's go back to how we had this right here okay so now in order to do that i'm going to remove this entire thing let's do it from our javascript file instead so i'll go to my script.js and if you want to move around in a really comfortable way you could actually do command p and then do script.js and command p so this allows you to kind of move through without even having to use this um you know navigate through files like that so here i'm going to do title div dot style dot color okay and this actually will get me the uh color property of uh that div okay whatever color it is or whatever and what i can do is change it so watch this actually so i could say color and let's go red let's run this and i just made the color of this div red okay now another thing i could do is i could change the background color and how we could do that it says we could we can't put dashes inside of a variable name i could do background color like this and then we could hit run and now it changes the background color of it to red okay so there's a lot of stuff that we could actually do but i think the few key things that i want to show you more is actually like on click all right and how that works so that's going to be another really important one and you're definitely going to need to know that for tic tac to uh sorry rock paper scissors so let's make sure we have we have this figured out in order to do to to do this exercise i want to give you context so here's the context in our rock paper scissors when you go here okay and you run this app okay let's go ahead and open this up actually in its own browser let's go right here rock paper scissors right watch what happens when i click here it detects that i've actually clicked rock when i click here it detects that i've actually clicked a hand and when i click here it can actually detect that i've clicked scissors so we're going to do like a baby exercise that's gonna highlight this okay so we're gonna make a we're gonna make three squares and each square is gonna have a different color all right so we're gonna have a red square a green square okay a green square and a yellow square okay you could do it in whichever order and what we would want to do is when the user clicks when the user clicks on one of these squares we just want to console.log that property value so we want to read it we want to be able to we want we want it to say in the console log red right when we click yellow it should say yellow at the bottom right when we click green it should say green at the bottom it should be able to detect which square the user clicked on and be able to pull out that square's value so this is going to be an important exercise because once you can do this you'll be able to attach and do more functionality with the rock paper scissors button because remember when you click this a bunch of stuff happens but in order to make that stuff happen you first need to detect that a button was clicked and you have to detect which button was clicked was it the rock one was it the paper one or was it the scissors one so let's go ahead and do this uh red yellow green exercise so in order to do this we're gonna go back to our exercise page that we had open on this exercise we're gonna go to our index.html and we're gonna make three dips let's go div one we're gonna make a div two and we're gonna make div three and this is going to have an id of red this is going to have an id of green or sorry yellow yellow and this is going to have an id of green now we want to give this a width and a height okay so we want to give each of these with uh divs a width and a height so for width we'll say 100 for height we'll say 100 and then we want to give it a color and so overall says style and we'll say color is red okay because this is a red one and put a semicolon here and let's run this and let's see if something happens okay so nothing has happened yet all right so now let's make this red square over here okay how are we going to do this so if i hit refresh obviously that shouldn't be there i just made it to show you that it works so let's go ahead and style this so what are we going to do so i'm going to create a style tag and then we're going to give it a height of 100 pixels put a semicolon here we're going to give it a width of 100 pixels semicolon there and we're going to give it a background color of red i don't need to put a string here because it's all a string let's run this and we have our red square so i'm just going to copy this paste it over this and paste it over this so now i should have three red squares when i run it okay perfect now of course we're just going to make it called yellow this one we're going to make it green okay and id and then we also need to make the color yellow and then we need to make the background color green here let's run and you can see i have these three squares now what we want to do is we want these to show up side by side instead of up and down like this so this is a little bit of styling stuff but we're going to be really gross and we're going to style everything in line styling don't ever style like this okay but just for now we're just going to style like this so let's put all of these three boxes inside of another big box okay so let's put them inside of a container so just wrap all three of those um let's see if i could show it to you in a clear way cool so here you have your red div here you have your yellow div here you have a green div right we're gonna put all three of those like boxes that you created inside of this big div right here and then we're gonna style this one and we're gonna say display flex run it and now it should show it to put it put it in a flexbox or show it to you like this okay now what i want you to do is when i click this red one it should say red when i click this yellow one it should say yellow and i click this green one it should say green so let's work on that now how are we going to do this so here's the cool thing so first let's go ahead let's go ahead and grab our divs so this we're going to need this red div we're going to need this yellow and this green so what i'm going to do here is see if you can do this document.getelementbyid and use this technique here to get the red div okay i'll give you five seconds here five four three two one okay let's do it together now so i'm going to say a red div or let's say cons red div actually let's say let because we might change this later red div is we're going to do document.getelementbyid so let's go document.getelement by id and we're going to pass in red here let's copy this and paste and paste and if you're new don't copy and paste just write it all down because it's going to build your pattern recognition all right so i'm going to grab yellow here paste it here green here paste it here so now we have we're grabbing the red div the yellow div and the green div okay and here's what we're gonna do there's something called dot on click okay so i'll show that to you right now so let's go red red div dot on click okay so this will detect any event that's happening when a user clicks and we're going to set this equal to and we're going to create an anonymous function here and we're just going to say console log and in this console log we're just going to say console.log you clicked red you clicked red because we already know the click read right because we've grabbed this entire red div we grabbed this entire red div here and we stored it in this variable right there okay so let's hit run and let's click red and it says you click red okay and now we can just we've been removed you clicked and so when i click it it should say red now watch what happens when i click yellow nothing happens right when i click green nothing happens so red knows its own bounds and it can detect when it's being clicked on thanks to this dot on click and then we just pass this anonymous function and then we can do stuff here right so if you wanted to be able to write multiple lines of code here you could do this you know console log red say hi whatever right so then you could run multiple lines of code like this and you could run them so that says read high every single time i click this the other way of writing this here that we're writing the short that we're writing here the other way of writing this would be to say give me a function here with no arguments and then that just console logs it says red okay so that would be another way of doing this so when i click red now it still says red okay this is kind of like the old school way of writing functions and you could still do that but arrow functions are just make things look cleaner there we go try see if you can try to do the same thing for yellow div so when i click yellow it detects that i'm clicking yellow and see if you can do the same thing for green so when i click green it detects that i'm clicking green i'll give you five seconds five four three two one all right let's try it together so you know try pausing the video if you want to try it yourself or let's go ahead and do it together now so i'm just gonna go copy here paste paste and then this red i'm gonna change it with yellow and then i'm gonna copy that yellow right there and paste it here and this red here i'm gonna change it with green and i'm going to copy that green and paste it here okay so let's try running this and watch what happens so let's go run this now when i click red it detects red beautiful when i click yellow it detects yellow and look at how sensitive is right even when i click right right here so close it detects it like look at that when i click when i move just a little bit over it detects red when i move just a little bit over it detects the yellow so it's really good and now let's try green that's what we want okay because what what you guys are gonna do is imagine instead of red this was a rock so what you're gonna say is well you know let's say uh you say user chose rock okay so that so when you click red let's run this first you click red it says user chose rock and then maybe what happens next is you calculate um you know random you get random computer choice so maybe random computer choice says the computer selected you know maybe paper okay and then what do you do you compare these two against each other so you compare user choice uh versus computer choice um and then you figure out a player choice versus computer choice and then you figure out like which one is better so then you put them against each other and you you find out like what the result is right maybe you know if you lost you should get negative one if it was a draw you get a zero or you get a one if you won and then you show all of those on the screen so you know it shows the results on the screen like it says you win but on the dom right on the dom so another order of saying screen is really just dom so then it shows it on the dom document object model where the users can see it so that's that's really like the bare bones of how you're gonna start being able to do rock paper scissors okay so you really need to understand document object model and how dom manipulation works is the most basic version of it but honestly this is really all you need and you'd be able to do that rock paper scissors uh no problem so hopefully you enjoyed learning about dom and with that said we're now going to go ahead and start covering more stuff let's actually do one additional exercise on this because as you've noticed you had you had multiple things and you wrote the same code but multiple times here you know pretty much the same code multiple times here so one way i want to show you is you actually could even like loop through all of these okay and then actually like kind of you know do the thing that you want to do with them all at once so i'll show you now so what i could do is um at this level let's go ahead and give a class to all of these so i'm going to basically say class is color button all right and let's end the quote and let's do that for all of the buttons i'm going to go here and we're going to give it a class oh sorry let's copy this let's paste it and let's go ahead and do it here as well okay so now what you should have is three like squares or whatever right and uh the class is just color you could call it color square that probably is a better class name so color square color square color square okay now if we want to get all of these elements all at once what i can actually do is i can say console. actually let's do it like this i say con squares and i can say get sorry document dot get query selector all and then i can pass in the class that i'm actually looking for so in this case i'm looking for the class color square let's also console log this and let's run it all right and i get back a node list so that's exactly what i was looking for okay now let's see if i can loop through these before we loop actually what we need to do is let's run this and node lists right now is empty so that's not what we want we want to put a period here period color square basically says hey i want to look for the class them color square okay so this is classes and i'm going to select all the classes i'm going to return them to you as like an array or a node list perfect so now i have all these elements right over here all right so let's just make sure we're getting all of our color squares and console log this one is console log squares let's run this and boom you can see we're getting all of our squares right here because we're getting three html developments perfect now here's what one thing we want to do okay in order to do this go ahead and change all these two buttons because in rock paper scissors you're not gonna these aren't gonna be divs these are gonna be butt tens okay because if i go to here these are buttons okay these are buttons buttons buttons cool so let's go back here and we're going to change these divs to buttons so button end it with the button this is going to be a button as well button here and button there cool so now that this one div here has three buttons perfect so let's hit run and let's make sure everything is working as expected red red red yellow yellow green green green perfect now what we're going to do is we're going to give each of these buttons a value okay so we're going to give this button a value of red we're going to give this button a value of yellow we're going to give this button a value of green and let's go here and we're going to now say now that we're getting back our squares let's go console.log square let's grab the zero square and let's do value okay now when i run this code you're going to notice oops square is not defined ah squares of zero dot value let's do that okay and let's uh let's comment this out so we don't have to worry about this anymore comment this out and you can see we're extracting the value here and we're getting back red okay so that's a really good sign now if i do this again i'm going to get back yellow but if i do this again i'm going to get back a 2. so instead of repeating this code again and again here's a great point to write uh what do we write when we have to repeat a ton of code over and over and over and over and over and over again we use a loop and specifically let's use a for loop and let's use it for each loop okay so we're going to say and for each is one of the best loops so if i haven't shown you that up until now i'm going to show it to you now okay so four each is my favorite that one is even better than a um four of loop okay so let's go ahead and use a for each loop so i'm going to say grab squares and then for each square okay let's just console log so grab each for each square i'm going to console.log square.value let's run this and now you can see and we're going to comment this out and let's run and you can see i get red yellow green okay now what i can do is i can loop through this and basically make this function right over here multiple times okay so i can actually say hey for each square what i want you to do is actually update its on click property and set it to this function so now we can actually just go ahead and do that so i can say square dot unclick and we're going to set that to console.log that square's name okay and we're gonna take all three of these lines and actually comment them out because we don't need them anymore so let's go ahead and run and check it out red red red yellow yellow yellow green green green whoops we're getting some weird error let's run it again oh because that name is not a thing i'm sorry let's do dot value let's run it again and value is being pulled from this html attribute that we created right here value that's where it's coming from so let's go back let's hit run click red yellow green yellow green red right so look at how nice this became now we don't even need this big chunk of code anymore right we just have this here okay so let's i'll leave the comments there for you let's run click click click click click click click click click right so this is super nice and uh this pattern you're definitely gonna need it for when we're making our rock paper scissors game so keep this pattern in mind this is an example you're gonna be definitely using all right let's um dude times clicked okay so let's take our app um up by one level so this dom red yellow green squares app that we made okay so i'm going to click on this here all right and um and we're going to take it up up a notch so we want it to be where when i click it it actually says the number of the times clicked here zero if i click red one it should give me one if i click yellow four times it should give me four here and if i click green three it gives me three so how are we gonna do that we're gonna start combining a lot of the things that we were learning okay so see if you could attempt it but let's do this together so you can just get some more practice here so i'm going to create a object called times clicked it's going to keep in store how many times any of these colors is clicked so we're going to have red is clicked uh red just click zero times we'll have yellow zero times because start off everything is zero right green is going to be zero we just have it like this for now and then what i'm going to do is just on click here i'm going to turn this into a full on full function yeah like a function but not just that returns right away so we can write stuff here i'll comment out the square value part for now and what i'm going to basically say here is um hey basically what i want you to do is grab the times clicked object and put this in as the key so uh and and basically grab its key okay and we're going to say dot value so dot value will be whichever one i click remember so the dot if i click this the value is going to be red and what i'm going to say is increment that by 1. so if i click here the value is going to be red and then my object is going to go find the key where it says red it's going to find this and then i'm going to say plus equals 1 its value so it's gonna increment this by one and uh we also want this to show up like here we want it to show up right so now what i'm going to say is i'm going to say that square inner text we're going to change it to [Music] times clicked squared up value all right so let's go ahead and run this and i'll click this click red boom boom boom perfect okay and if you want the most updated version of this app i'm i'm imagining you're coding it up in your own rupple and that's great if you're coding it up here in your own replit but if you want to merge if you want to see the finished version you know it's going to be in here in this dom folder red yellow green exercise and then you just can come here this has a solution there so you can just navigate here pick the solution and then see it okay this is the most updated one this is the one i'm doing right now and that's how it shows up and i click here boom it shows up right so look at that right how nice is that if i click yellow 10 times it shows it to me click read 10 times whatever i'm doing it's it's keeping track of everything so this is where it it's nice to work with objects and things of that nature this is why we practice all these things so now there's a lot that's going on here there's a loop going on there's an event listener called on click happening we're going into this times clicked object and updating its key values and then we are manipulating the dom and showing that result on here right so there's a lot going on here and with just these few lines of code and so you know it's a lot but that's why we built it all up step by step so hopefully you enjoyed this exercise for you know furthering your dom manipulation skills now one thing one more thing i want to show you here is how to clear this so basically to start a new game because for rock paper scissors you're gonna need to know how to do that right so for example we play a game we keep track of the score right so that's why you need to learn how to keep track of a score and then when we hit this red it ends the game right so it clears the game and then you start from scratch all over again so if we go here we want to be able to add that functionality so let's go ahead and try to create this together okay so i'm going to say const clear scores okay or you could call it function as well whatever is easier for you honestly it doesn't really matter and what clear scores is going to do is it's going to take you know all of these squares here and it's basically just gonna clear up their inner text okay so i'm gonna say squares dot for each square i'm going to grab square.value and we're just going to set that to empty so we're just going to set it to nothing so we're going to loop through take each square set its value to empty and then that's kind of it okay so this is going to be my function that clears everything so this looks good to me now we just need to make a button that can detect that that button is being clicked okay so we will go here in our index.html file alright and we want to add in a button that says clear game or something like that so it's obvious so if i go back i see clear game button is right there so perfect oh sorry actually we're going to give this button we need to give it a id or something right so we can grab it so let's call this clear clear dash game that's fine let's go back into our that script and then i'm going to basically say once clear game div is do document dot get elements by id and the id in this case is clear game so i have my clear game div and um what i'm going to say is clear game div dot on click and i'm going to set its on click to this function right over here so i'm just going to clear scores just basically when i click on click run this function right over here okay so i'll put this function right over here and let's try it so basically right when i click when i click this button okay or maybe let's call the clear game button clear game button let's do btn so our code looks nice and clean on the same line and now when i click clear game button it should clear all the scores so let's give that a try oh it's not doing that so let's see if we can debug it and see what's happening okay i'm trying to change its value but instead of value what i'm meaning to change is the inner text so let's go enter text and we're going to set this text to zero and let's try now let's run this let's go back in the game there we go right there we go now it's doing it correctly clear game it starts from scratch what happens if we set the text to empty text so let's see what happens does this give us an error no so this this might actually be even better just set it to an empty string or a zero and you're good to go here so now this app is really coming out nice right this app is doing a really really good job and i mean yeah this is a great app looks really really nice so there you go like this here should give you a very clear idea of dom manipulation how to make things work like if you have this example to work off of i mean you're pretty set to go with dom manipulation so great job if you got this far nice work all right you're making amazing progress so far but here's what we're going to do now we're going to step it up we're going to go and start building a tip calculator app so check it out i'm going to go over here and we're going to do the following i'm going to open this up so hit that button right behind my face the top right and it's going to open up this this right here and we're going to go over to tip calculator and hit click on it okay and here if you type in let's say the bill total is a hundred dollars the tip amount is ten percent and you can see it already calculated it correctly right because if the bill is a hundred dollars and the tip is ten percent well that's the tip would be ten dollars so the total would be a hundred and ten dollars per person but what if we had more people what if we had two people so watch what happens when i hit plus boom the bill just got divided between two people and so it automatically tells hey john you need to pay 55 kazi you need to pay 55 so both people know exactly how much they need to pay what if i keep increasing this number well you see it keeps dividing between all of those people so if the bill was 110 dollars and you divide that by 10 people you get 11 dollars per person now watch what happens if i keep subtracting it's subtracting and subtracting and subtracting it if i go here and now subtract it watch it's not gonna let me go down to zero right i'll try a couple i'll try a couple more times boom boom boom boom boom boom boom boom nope does not let me go below one so these are some of the functionalities of this app that you'll have to keep in mind so for example what will you need to know how to do well you'll actually need to be able to get the user input from this field right here okay and this field let's say it's called our this one over here let's just say it's called bill total input okay then you're going to have to get data from this tip as well and let's say this one is called tip input okay also you're going to be able to you're going to need to be able to pull the number of people at any given time this one will probably be called let's say number of people okay so maybe these are all divs or inputs that you can have you know these are ids that you might be able to have access to okay and then this over here this right over here right this will be called per person total okay and all of these will be div ids okay which means these are special things inside of the html and you can get access to all of this so then if you want to get access to this hundred and ten dollars you'll be able to do something like per person total uh you know div dot inner text or whatever right and that'll get you access to what you're looking for and that's just to show you how the javascript portion will interface with this app okay and then based on that you're going to need to do things right so for example you're going to need to do some calculations that you know maybe take the bill plus the tip and then it divides that by the number of people and then when you do that you get this so there's going to be a bunch of things that you're going to need to understand but take a screenshot of this actually right now on your computer or with your phone because this will help you constantly refer to certain key elements on how this app is going to work so i'm going to now explain and kind of walk through this app and we're also going to have you set it up on a new repel so let's go ahead and do that now so this is going to be your tip calculator exercise so how you're going to get access to it so i'm going to zoom in here so you can see everything a lot more clearly okay and then we're going to kind of walk through every single thing so on the left hand side right you see projects make click into projects all right now when you click into projects you're going to see tip calculator so go ahead and click on tip calculator and now you're going to see exercise now don't go into the solution because once again if i show you how this works over here right let's run this and over here you'll see that we have project exercises project solutions so here's the tip calculator solution this will be the fully working app so you'll be able to type in 100 here and 10 and it'll calculate everything correctly you'll be able to hit plus minus minus minus so this right now is the working version okay so if you need to see the solution anytime don't go to it right now do not do it but this is where the solution will be and the main file that you need to write code for is the script.js file the javascript file the index.html and the style files are already completed for you so you don't need to touch them if you make the javascript work this entire app will work okay so that's where your solution is going to be but if you go to tip calculator from project exercises and you do 110 and see nothing happens you can't change the number of people it doesn't update your score there's no calculations being done here so the javascript here is not working okay so this is where your javascript is not working so uh this is your exercise file okay now what i recommend highly highly highly highly recommend you don't just start coding in this script.js what i recommend is you create a new rupple with these three files right and then get started okay so let's go ahead and do that now so i'm going to create a new tab here and we're going to go to replic.com all right now we're going to choose html css and javascript rupple and here i'm basically going to say let's go and say tip calculator exercise and i will hit create rupple okay now that this rupple is created what i recommend you do is go back go to your index copy all of this so command a command c or control a control c okay cop select all right in here copy it go here and delete everything in this index.html and paste what you just copied okay so once you paste it you should see an ugly looking bill app okay now the next thing we're gonna do is we're gonna grab the style file so let's go ahead and grab the style file copy it come back go to your style.css delete everything that's in here hit paste hit run and now the styling is complete so now our app is looking good okay so this is what style files stylesheet is for now the last thing we're actually going to do here is you see if you go to your script there it's empty so we're going to go ahead to our exercise copy the whole thing okay command a command c come over here paste it so now when you look here there isn't any real javascript code written up okay and what i'm going to do is i'm just going to collapse all of these functions and now what we're going to do is we're actually just going to walk through walk through like all of the um all of the things that you need to know in the gotchas right and then you'll be able to just get started and code it up yourself okay but just let's walk through it together all right so you're gonna be building the tip calculator app now there are a couple of things that you're gonna need to know all right otherwise this pro this project is gonna become way harder for you and i don't want that to happen okay so i want it to be something that you're able to kind of grasp so there are a couple of functions you're going to need to know their names all right and you have access to them so you have access to calculate bill increase people decrease people these are the functions you're going to create these are the only three functions you'll need and make sure to give them this exact name they're already made for you you cannot change their names if you change their name your app will break i'll explain why these functions are hard coded inside of our index.html okay so for example when you are typing over here typing over here every time you type on key up we're calling the calculate build function so that function is running literally every single time you type here that's why that function is there you don't need to change that name the other function i told you about for example increase people and decrease people function those are also written here so for example you can see here increase uh there's a plus sign right there right and then there is a minus sign right there and then there is a number right over here every single time you click this plus button right over here every time you click this plus button this function increase people will run every time you click this minus button over here this function decrease people will run that's what's happening so that's why these functions have special names do not change them unless you change them here and then you're fine okay but i just don't want you to fall prey the next thing every time you clickety clack and type anything in here or here anything anything you type in here here you're gonna run this calculate bill function okay for your tip um and your build total okay so calculate bill and then you also have calculate bill twice you can see that so this calculate bill is for this one and this calculate bill here is for this one okay so every time you type in any of those fields calculate bill automatically fires and runs going um and then the other things you'll need to know are a couple of things like you know you have this bill input and you have a tip input right so you have ids like build total input and you have other ids like tip input so let's look for temp input you have tip input okay now because i'm nice all right not everybody's gonna be this nice but what i've done for you is i have put it all into the javascript file everything you need to know so you don't have to go to your index.html file pretty much at all okay you don't have to like go and look at anything because what i've done here for you is i've already just told you hey here are the three functions you need to know calculate bill increase people decrease people i'm already letting you know these functions are hard coded in the html so you cannot change their names and then i'm already letting you know these are all the div ids you're going to need access to so you're going to need access to build total input this is going to be this div or this input field so that's going to be that input field you're going to need tip input okay this is going to be the user input for tip you're going to need access to you're going to need access to so let's just draw these again that's right there tip input is right there you're gonna need access to number of people which is right there this is a div okay so this is a div id so once you get the div you're gonna need to do dot inner text to get to get these okay and then you're going to need access to so you're going to either for this i think you might need to do dot value one of those dot value or dot inner text okay try both of them and it should work one of them should work and then you have per person total which is right there so those are the div ids you're going to need access to i'm already telling you their exact names so you don't have to look in your html file right over here on line 20 i'm telling you hey get global access to all of these inputs okay meaning just get access to all of these inputs right here before you start creating your functions because your functions are going to need access to them so you know if i were you i'd do something like const let's say bill total input div or something right and then or build total input and you can do something like document dot get element by id and then pass in bill total input okay this is just an example of how you would get this specific one right over here all right so what i'd recommend is you grab not just this one but all of them so you have all four of these divs and have access to them that's what i would recommend you do here going underneath here i would i recommend that on line 24 line 25 get number of people from number of people div so once you get access to these four divs bill input tip input number of people div and per person total div you can use the number of people div and from there you can actually get access to the number of people by pulling the dot text okay and remember to type cast so anytime you get a thing so let's say thing input and then you either do dot value or dot inner text but both of them are going to return to you a string that's going to look like this and then you call the number function on it and then that will turn it into an actual 10 okay and then you'll be able to do math on that because remember if you take 10 string and you add another 10 string to this this is actually going to give you not 20 but 10 10 10 10 10 okay which is going to be silly so you want to do you want to do it the right way okay so make sure you type cast it use that number function okay so this is where you're gonna set up all your globals and then you're gonna be good to go now let's go into each of these functions at a high level so you're gonna create three functions here all right and you're gonna define these three functions so calculate bill calculate bill will pretty much run all the time like you should calculate bill when a user types it here automatically you should calculate bill when the user updates the tip you should calculate bill when the user hits this plus sign you should calculate the bill when the user hits this minus sign and ultimately what calculate bill is doing is it's updating this number over here the total per person owed okay that's the ultimate job of calculate bill okay you can see it says calculate the total bill per person that's what it does and then if you go here there are ample ample ample amounts of tips for you on how to actually do this okay so i have tons of notes for you as you go and code this along so i hope you don't have too much problems there okay i'll guide you through everything hey get the user input and convert it into a number so i'm reminding you to type cast here hey get the tip from user and convert it into a percentage hey get the total tip amount calculate the total amount and then update it on the dom and show it to the user right so updated on the dom means update this right here so calculate bill hopefully that kind of makes sense at high level increase people what this will do is splits the bill between more people all right so what should happen here well it walks you through it should increment the amount of people amount of i'll just say amount of people then you update the dom with the new number of people all right so what does that mean so you increment the amount of people and then once you increment it you make sure that you write that to the dom like you change this one to a two for example and this function runs increase people increase people function runs every time you hit this plus button so when you hit this plus button that function runs when you hit the minus button decrease people function runs okay hopefully those are kind of self-explanatory uh but hopefully that makes sense and then at the end you want to calculate the bill based on the number of people so i'm already giving you a hint you're going to be reusing some of the functions you've created previously okay perfect so i'm going to close this go here decrease people it splits the build between fewer people okay so there i'm gonna go over the similarities between increase and decrease people right if you look at this increment update the dom calculate the bill decrease people decrement amount of people update the dom with the new number of people and then calculate the bill based on the new number of people so they're pretty similar and how they work so once you figure out one of them the next one will be really easy the only difference between decreased people is you when you hit plus you can go as high as you want but when you hit minus you shouldn't be able to go below one because it wouldn't make sense right you have the bill but then how come it has zero people that owe it that doesn't make sense so it shouldn't have zero or you can't have negative people right so you can't decrease the number of people to zero or negative so here i recommend you write a guard clause i haven't shown you what a guard clause is but basically it's just an if here it's a fancy name for just an if statement and if statement is just something along the lines of this okay if something something is not true i'm just going to write it in english just return and what that basically means is this will end the function so if you say return it just won't activate any lines that are below it so let's say you were gonna decrement the number decrement the number of people here but here you check for the condition is people equal to one one or less you go hey is people less than or equal to one if people is less than or equal to one then don't run any of these lines of code right like just stop the return here is just like hey stop the function end it right here okay and and you're not even giving it anything to return just return stop right here so that's an example of how that would work okay so i'm gonna get rid of all of that now so that would be your decreased people function okay so i hope that this exercise kind of gives you everything you need to know and now you should be able to get started working on this project i wish you the best of luck and give it your best shot try as hard as you possibly can i really believe you're gonna make a lot of progress and i think that if you really push yourself you should be able to do this if you don't get this done don't get discouraged it's okay i'm right here right we'll code this together i'll show you the solution next um and yeah we'll just walk through this together okay so pause the video now give this a shot and try to nail this and get this done and then what i recommend is you come back and walk through the solution because our solutions might be different and you might be able to pick up you know a lot of things from how maybe i solved the problem versus maybe how you solve the problem okay and remember in coding there always can be multiple different ways and one way isn't necessarily wrong okay it's kind of an art form so we're gonna have different ways where we get to something so that's it um i hope you enjoyed this and uh get to working and i'll see you soon all right so i hope that you gave it a try and if you got it good job for solving the tip calculator if you didn't it's okay we're gonna do it now let's do it together so let's build a tip calculator so here we're going to walk through right and let's pay attention to the instructions the first thing is we're going to get access to all of our inputs and divs okay so our bill input tip input number of people div and per person total diff so let's get access to all of these now so i'm basically going to say cons bill input and we're going to say document.getelementbyid and we're going to say bill input total build total input and then we're going to get access to our tip input so we're going to say document.getelements by id and i'm going to paste in tip input because these are the specific ids i need then let's get access to our number of people div and we're gonna do get element by id and then we're gonna paste that in right there number of people and we're gonna do get access to our per person total okay and this will be per person total so we're going to get access to all of this and what global access means is because we're defining it all the way up here all of our functions will have access to all of these divs all right another thing we're going to need is we're going to need the number of people from number of people div so now i'm going to say let number be why i'm saying let here is because the number of people is going to change so sometimes it's going to be 1 sometimes going to be 2 three four five right so number of people is gonna change so we're gonna say let number of people equal we're gonna go to our number of people div right and then we'll try and see if we can do inner text and let's type cast it into a number now let's see if any of this works okay so in my calculate bill i'm just going to try to do a console log and i'm just going to say hey show me number of people and let's just see if like any of this is even working right so if i type in here every time i type it runs my calculate bill function and every time it runs that it actually shows me my number of people right my number of people is one so that's why i just keep saying one one one one one okay now i can do console log and we can also do bill input right and i can get the bill input value and we can console log that too so i can go here and say one two three and you can see we got one two three at the bottom right and the console log abc and i got abc at the bottom hopefully you can see that it's right there perfect so it looks like i'm able to uh get information from from these divs and things so that's working so i'm going to now remove these console logs because i've verified what i needed to verify now i'm just going to follow the instructions that i have written here so get bill from user input and convert it into a number so i'm gonna basically say hey bill input and what i'm gonna say dot value should honestly get me the actual bill now i should just have to type cassette to a number and this should get get me the actual bill and now let's just save it to a variable and we'll call that bill let's console log bill and uh let's see what happens okay so let's run our app and one two three right and our bill is constantly being printed out to the screen and it's a number so that's that's good so i'm gonna remove this console log don't need that anymore now we're gonna get the tip from user and convert it into a percentage so we're going to say const tip is equal to we're going to do the same thing and we're going to say tip input dot value this time and we're going to actually convert it into a percentage right because that's what it says convert into a percentage divided by 100 so we're going to divide it by 100. now let's console log the tip percentage let's run this and i'm gonna do 10 and notice it gave me 0.1 because 10 divided by 100 is 0.1 so that's perfect right we're getting our tip percentage that means it's 10 great so i can get rid of this console log don't need that anymore all right now we're going to get the total tip amount and how we're going to get this is we're just basically going to say you know it's going to be bill multiplied by tip percentage right so now let's go ahead and console log this and we're going to say tip amount tip amount okay and i'm going to just put it as an object so it prints out kind of nicely so let's go ahead and let's do writing this is the same as writing this both are the same so this is just like a pro little pro hack all right so i'm gonna say 10 and tip amounts did not get updated interesting so let's go ahead and fix that let's run this again let's say 10 oh because i'm not putting in a bill total so let's go ahead and do 100 10 on that tip amount is 10. uh what if it was 200.7 would be 20 dollars let's do 300 and you can see that tip amount is calculating correctly right it says 30. uh that's perfect so it looks like this is working so i'm going to go ahead and remove this console log don't need that anymore all right now next up we need to calculate the total so the total is going to be tip amount plus bill so let's go ahead and do const total and we're going to say tip amount plus bill okay let's go ahead and console.log that now and let's run and when i type in 100 and i type in so uh 10 so right now tip is assuming zero percent so now we have a hundred oh by the way let's do that little trick we'll do this wrap it in an object let's try this again and we're going to say 100 and we're going to give a tip of 10 and you can see total is 110. right let's give a tip of 20 and total is 120. so this is working exactly like how we wanted to let's get rid of this now now we're going to calculate the per person total where we're going to divide by the number of people so that should be easy to do per person total and we're gonna do total divided by and we already have access to number of people right here right this is pulling number of people is pulling straight from here okay so it's one and we're type casting it into a number so it's going to not be a string of 1 but it's a actual number of one right so we're going to do that divided by number of people and now let's go ahead and let's show that so we're going to do per person total let's run this and we have 100 tip is 10 and per person total is 110. it's because right now we're not able to increase the number of people right but let's say i went to my html file and i just hard coded that one to a two let's see what happens i'm gonna hard code that to a two let's run our app and let's see if this works so i'm gonna say bill is you know bill is 100 and then tip is 10 and you can see that it says 55 dollars per person right which which makes ample amount of cents 55 per person why because it's 110 110 divided by two people is 55. so now let's go and change that hard-coded to back to a one let's run our app again and uh because we want to change that dynamically right we don't want to like hard code it in so make sure that this is back to a one when you run your app perfect so what's up next let's go down and let's see what's up next and now update the per person total on dom and show it to user okay cool so let's go do that so i'm gonna grab per person per person total div because i have access to it from up here oh let's just call it per person total diff okay so per person total div we have access to it up there let's p yeah per person total div and we're going to change its inner text to uh per person total right over here okay so i'm going to say per person total oh i'm sorry okay i'm uh yeah i'm just kind of misunderstanding this but like what i mean is this is going to be total per person okay so that's that's this div right here per person total so we are updating it correctly okay so let's just see what happens now let's run this let's go ahead and type in 100 let's type in 10 percent and let's see what happens we're getting back 110 so that's good but we want it to be in dollars so let's go ahead and do string template literals and we're gonna wrap it in this and just put another dollar sign so this dollar sign will just make sure this is javascript and then this dollar sign will actually put an actual dollar sign so i'll say 100 and we'll do 10 and when we go here you can see that it says 110 dollars okay great now what happens if we have a bill that's something like this 148.5 what happens if we have a bill that's like decimals you know or has maybe weird decimals and now you can see that it started showing like lots of decimal places right like so for 135 dollars and 52 cents it says 149.00 like how are you going to pay that in cents that doesn't really make sense so what we want to do here is we want to do a dot 2 fixed so we're going to do that now so you can actually do dot to fix two and pass in two right there and it's gonna make sure that it doesn't go beyond two decimals so let's try some number again like that and you'll notice that now it actually just goes to two decimal places now what if the bill is more like 3 000 or something like that it gives you 3 300 but it doesn't you know it'd be nicer if it kind of put a comma in there right so if you want to kind of do that what we can actually do and this is a cool uh trick that i learned that i use a lot actually so that's why i kind of want to show it off here you can do dot locale string and just pass in um en us so it's just gonna format it to us currency like a dollar currency or whatever right and uh now if you try some bill right you notice that it's actually putting that dollar sign and that comma or sorry not the dollar sign but the comma which is nice so like if you get some like i don't know you're never going to have a bill this much when you're eating food right but all the commas are there and if you get up to 25 million the commas are still there so this is good now we just want to make sure that we still do that dot to fix thing so let's do two fixed and pass it to two places right so fix it to do decimals first and then turn it into with commas let's try it so let's try some big number and let's do decimal places like crazy and notice that the decimal places here don't change okay so great all right in this case all right lesson learned so it seems like if you try to use dot two fixed and locale string it doesn't work so just pick one in this case we're just gonna stick to dot to fix for now okay so without making it much more complex and that'll just take care of the decimal places which is perfectly fine actually but yeah our decimal places will be fine and then you can give whatever percentage tip and everything will work out as expected so let's get rid of this console log we don't need this anymore so i just got rid of it perfect so now it seems like our calculate bill is doing exactly what it needs to do write it it calculates the bill in a really intelligent way so now all we got to do is increase and increase let's work on increased people so here it says increment the amount of people well i already have number of people number of people right here in line 29 so what i'm going to do is i'm just going to copy this and paste it here and i'm just gonna do plus equals one so we're just gonna increment the number of people by one and then we're gonna update it on the dom so we're gonna grab number of people div which is gonna be this div right here okay and we're just going to pop in the number of people that we now have so we're going to say number of people is equal to number of people dot inner text is equal to number of people okay so now let's run this and let's hit plus and you can see that every time i hit plus it actually increments the number of people and then it shows it and that's why you can see that it's showing it exactly how we want it to right and right now minus doesn't work okay so that's fine we'll do that in a second but watch what happens when i do this the bill doesn't calculate the right way i have 10 people okay so let's run this again let's go a hundred dollars tip is ten percent okay and let's run this and you can see it's saying everybody owes a hundred and ten dollars per person that doesn't make sense because 110 dollars that's eleven hundred dollars so how come the bill started with 110 dollars and now we owe 100 110 or something's wrong so what we need to do is once we do this we need to recalculate the bill based on the new number of people which is super easy all we have to do here is reuse the function we just created so just call this function and that should handle everything so let's go ahead run this i'm going to say we have a hundred dollar bill i'm gonna say we're tipping let's say 10 number of people is two and boom look at that it's 55. why does it work because remember per person total is calculated total divided by number of people so when you update number of people here this number of people updates and that's the number of people calculate bill function has access to so when you run it again it just recalculates this with a new number of people after you change them pretty beautiful right so very very simple let's go ahead and do the same thing so this code is going to be really really really similar for decrease so decrement the amount of people instead of plus one we're gonna do minus one number of people div we're gonna change to update that and then we're gonna recalculate the bill so it's gonna be very similar to increase so watch what happens when i have a hundred dollars i have a ten percent tip i can go one way and i can go backwards look at that how nice but here is the problem i can go more than i can go less than one watch i went to negative one what is that i'm going to negative numbers what is happening how can i have so what the restaurant now owes me for eating there like they should you know what i mean like the royalties there to eat you are special you are a royalty so if you went and the restaurant owed you money i would understand okay fair enough because you're here watching this tutorial you're top of the food chain all right while everybody struggles out there you're here grinding it out so then you can level up your career provide for your family provide for your kids you're a champ tap yourself on the bat pat yourself on the back do both tap and pat do them both all right so we don't want to go below one person so we're gonna add what i call a guard clause here basically going to say if number of people is less than or equal to one homie just stop just stop stop don't run this simply here means end the function right here and the decreased pupil function on line 70 and don't run any of this so let's try this again and i'll explain 110 now when i hit minus watch what happens hit minus nothing happens when i hit plus it works when i hit minus it works but when i hit minus now it doesn't work so what is happening when it's one or less than one it just says hey i noticed that this function is running but i want you to only run here and when this condition is true because number of people is one right just one less than or equal to one yes it's true so then the code just stops and doesn't end up running any of this now in the other case scenario where a number of people is let's say two it goes as two less than or equal to one and it goes false so then it doesn't run this but it ends up running all of these here okay so that's why it's a guard clause right so we're just guarding the entire code base and we stop it okay to prove to you i'm just going to say it's a long number of people so i'm going to stop okay so let's go ahead and uh run this and watch what happens when i hit minus it detects one is one or less than one so i'm going to stop right when i go here and try to run minus see it doesn't happen it doesn't happen the console.log statement doesn't happen doesn't happen even here it doesn't happen even here but when i go one more below boom one is one or less than one so i'm gonna stop one is one or less than one so i'm gonna stop so it's detecting it right every single time every single time okay so we can even like leave a little message for the user and say you know hey you can't go you cannot less than one person right so now like the user can see this message and no okay i can't do that right so plus plus plus minus minus minus hey you cannot have less than one person and if you want to make it more intrusive and more visible to the user you can even do something like an alert so now we go 100 10 percent tip plus plus plus minus minus minus minus says hey right you cannot have less than one person so this lets us know right there that that's not a possibility so you can do it whatever way you want okay you could throw an error if you want and like that'll kind of crash the app and if you want to be really pro i can give you one like kind of pro javascript tip is uh what you can do is you can throw an error and show the user they're doing something wrong but like kind of in a sneaky way so here you can say you can you can replace this alert with something called a throw and they'll throw an error so you do throw and then what's nice about throw is you won't even need that return like or just leave the return here but like you won't really need it okay so you can do that return pattern i'm leaving this return here to show you use a return pattern again and again because that's normally what i do but here if you want to throw an error and really let the user know you could do that right so for example boom 100 10 i try to hit minus and it throws like a red little error at the bottom says hey you cannot have less than one person so it's very clear that the user is trying to do something that they're not allowed to do and like you can make it visible all right so there you go let's see if this entire thing is working or not let's open it up here and let's check right we just built this and we're excited right let's see if it works so we got a bill we just went and ate at a nice restaurant let's say you went to cheesecake factory you took your family out i mean it's a nice night out right they gave you a big fat bill for 375 dollars maybe you maybe you brought some friends with you and they're like hey mandatory tip is 20 so you all start freaking out who's gonna calculate it what is it gonna be what's happening right so you go okay we got the tip is you know 10 or we're gonna give a 20 tip so that's oh that's 450 right now but you only have one you only have selected as one person but luckily you brought your friends with you right you brought the entire gang hopefully so you know you got you got uh juanes you got daniel you got frankie you got lance you got nas i mean you got the whole gang up in there right so you got all these six people look at that your bill is only 75 dollars that's not too bad right that's not too bad that's that's easy maybe maybe you bring in two other people from somewhere you go to them and you grab them and you're like hey come join our party and split the bill with them too now the more the merrier am i right you got 56.25 i mean this is at this point the restaurant should be paying you right this is nothing cheesecake factory nice night out with the family and friends i mean come on that's a bargain the 20 tip right so this is this is really nice right this is really nice app that we could actually use and what's amazing is it's already hosted online thanks to repple yeah it's deployed on the interwebs so you could put it on your portfolio you could do whatever you want with it's live ready to go okay ignore that sound that was i'm having a focus session and it makes this little bang so now what i want you to do is you're going to grab all of this javascript code that you wrote go back to this exercise file okay and go to tip calculator go to exercise go to the script js okay and then delete everything that's in this exercise file okay and then paste your code in here all right and give it a try and see if it works so go and run it so go to your now project exercises you should be able to go to tip calculator you should be able to type in things like 100 10 plus plus plus plus minus minus minus it should all work smoothly okay so make sure you go ahead and do that update your exercise as exercise as you go so you have the most up-to-date version with all of your projects completed all in one place nice and ready for you to use all right that was the tip calculator i hope you had fun i had a ton of fun actually sharing it it's 11 53 p.m i was supposed to have a date night with my girlfriend we're gonna watch the boys the new season of the boys is out i mean god that show is good season three started watching this indian movie called rrr phenomenal and um about to move soon you know leaving marina del rey man a lot's going on you know a lot's going on and instead of doing any of those things you know i decided to be here and uh build this app with you and do it together so it's gonna be awesome so i hope you enjoyed it i hope it was awesome let's continue let's learn more javascript i hope you're excited i love your beautiful face and i'll see you soon let's go welcome back now i want you to start getting ready for rock paper scissors and by the way just a sneak peek you're going to be doing something with netflix soon so one of your projects is going to be netflix okay so i hope you're excited about that this is going to be with vanilla javascript so this is just a little sneak peek now what we're going to be doing is i want you to start getting ready for rock paper scissors because we're about to start building it soon but there are just a few things that you need to understand for this all right so for rock paper scissors one of the dom manipulation concepts you're already good with like for example when you click a button right so for example if i go to rocket processor solutions over here and when i click this to click and detect the button you've already learned this concept so that's good um when i click the hand you've already learned that concept so that's you're good there you learn the concept of being able to hit this red button and then it clears everything up right so dom manipulation concepts you've learned so i'm happy about that i think the things that you still need to know are how to select an item from an array so let's go ahead and just do a practice exercise together so remember you're going to be coding in your playground.js and i'm going to be coding in just playground.js okay so this one is for muah qazi this other one is for you okay so this one is going to be with all the finish titles so how do you select an um item out of an array so let's practice that so here let's say we create a new variable called uh fruits okay i'll just do let fruits and let's see did we make it earlier yes we did okay so i don't have to i'll just change this to a let okay i'll bring this down [Music] you have to paste the whole thing in we'll just do this and i'll do it up until here okay so fruits is only going to be a couple of items now let's go ahead and make sure that fruits is we're able to console it so i'm going to say console.log fruits of zero let's run this okay one second it says it's already been declared so maybe i don't need to even say let here let's run this okay cool so i have this fruit banana showing up now how would i randomly select something from this array okay so let's make a function we're going to call it okay random selection from array this is the function in here we're going to put our fruits and now since this is inside of a function you can say kant's fruits and you can create a new fruits here okay and the scope of this fruits is only going to remain within the function and outside of the function this variable will be unknown okay and let's move this down here and let's just run this function for now so i'm just going to say console.log random select from gray or let's say random fruit okay and let's say that this takes in items let's say it takes in fruits and it randomly returns them okay let's uh take this array out i know i'm making go back and forth yeah yeah yeah whatever just just it's okay all right i know i'm making go back and forth but it's all good um it's not supposed to be inside of this function let's put it outside of the function okay because i'm making a mistake so it's my fault i apologize for this confusion and what we want to do is you want to pass it a fruit and it should randomly return the fruit so an example of this if you call random fruit and you pass it in you know let's just say or whatever you can pass it numbers as well so if you pass it in one and two it may be randomly returns two okay and if you run it again it might randomly return one so that's what this array here does all right so it's going to get fruits and it's going to randomly select now how do we randomly select so one thing you have to remember is we have math.random and this will give us a random number okay so let's try it math.random and i'll get a random number now if i multiply it by 3 i'm always going to get a number that's going to be less than 3. now to make these numbers useful because right now there are these decimal numbers which are kind of useless we're going to floor all of this we're going to call a floor on this all right so now when we press up and keep running it press up and enter up and enter now notice i'm only going to get numbers between 0 1 and 2. okay so i want to be able to get 0 1 2 and 3. so for this the range should be because this is 0 1 2 3 i should be able to select randomly between these four numbers right here okay so in this case i might have to do math multiplied by four so then i get a number between zero one and two and three okay so i'll always get that so keep running it i'll never get four i'll only get zero one and two and three sorry zero to three okay so that's the trick that's how we're gonna get that now this is this over here is the max right for multi where i'm multiplying it by four that is the that's the length that i want it to be okay so let's go create a variable called max length is going to it's gonna be four or yeah four okay and now i'm gonna write this function i'm just gonna replace it with max length so now when i change the max length to let's say i wanted to give me between three items i just change it to a three i run it and now i get between zero one and two so this is going to be dynamically changing so in order to account for that we need to pull from fruit's length okay so we're gonna say math.random multiplied by fruits.length this will give us a dynamic array and then we want to wrap this in math.floor okay and we'll say random number and then what we're going to do is we're just going to return fruits whatever that random number is so it's going to be 0 1 2 3 and 4 or whatever whichever one right now let's run our random fruit function and pass it our fruits that we just created right over here let's run it and let's see if it does what we want it to do okay so i don't need to say let over here let's just hit run cool so i got a pear let's try it again i got a banana let's try it again i got an orange let's try it again orange let's try it again orange let's try it again orange banana pear pear banana right so just randomly picking and it never breaks okay so you can see how this is working right every single time i run it run run run i get back a different fruit okay and so let's console log what number is every single time random number okay let's run it boom you can see the random number is two so it gets zero one and two so i get the orange random number is one so i get the apple one apple zero banana okay so that's how this random fruit function uh works so this is definitely one that you needed to know because in order to be able to do what you're going to do in rock paper scissors you're going to need to know how this works more specifically speaking there's going to be a function in rock paper scissors that you're going to need to implement which is going to get a random computer choice and the array you're going to have is going to be rock paper and scissors and you're going to use need to essentially lose the same logic to randomly pull a computer choice out of this array of three elements rock paper or scissors okay so you're gonna have to figure that one out one more thing you're gonna need to know before we get into rock paper scissors is so this shows you select a random element from an array that's what this piece of code shows you the next thing you're actually going to need to know is some more advanced conditional statements meaning how do you chain if with an else if with an else so you're going to need to know that okay because that's how you're going to be able to implement your rock paper scissors game so i'll give you an exercise there are three different weathers rainy sunny and overcast okay and what we want to do is if the weather is rainy i love rain so we should give that a plus one score or a one score uh we don't need to put plus one here right uh if it's sunny then we give that a score of negative one because i don't like sunny weather okay so i freaking love rain man like i love rain rain is so awesome sunny um it's all right and then overcast would be zero i also i mean like for me i also love overcast so it is what it is you know um i would want to give this a score of one but since for this example we're just gonna do this okay because i like rain more than i like overcast so this is how we're gonna do this app weather scorer this is gonna be our function and how are we gonna do this so see if you could give this a try and write you're gonna need to write essentially three if else if else conditions okay and they're gonna need to follow this pattern let's go ahead and do it together if you can't figure out yourself that's totally fine okay i'm gonna give you five seconds five four three two one all right let's do this together now so i'm going to basically say if so the the weather score right it's going to take in an input from the user so it's going to take in what the weather is right now so we're going to say if the weather is rainy and you can use three equal signs here as well or two equal signs both will work in this case if weather is rainy and we'll also create a variable called score that'll keep track of the overall score i'm going to say if weather is rainy then we're going to do score equals one okay and now we're going to say elsif weather is sunny we're going to say score is equal to negative one and now you could do an else because we're just going to assume it's overcast because those are three choices so you could do else or you could also do an else if okay because you can chain as many elsifs as you want but you can only have one else and then we're gonna say else score is zero and then at the end we want to return score okay so hopefully you either got this or try it now without like removing your code from scratch and then writing it again from scratch and you can try it that way too and see if you can get it and now we're gonna call console.log our weather scorer app that we just made and we're gonna give our weather score rainy and let's see what score it returns wait let's uh comment out our allure fruit stuff up here let's run it and you can see we got back one because it's rainy now let's try sunny now that's a negative one okay and then we have overcast there we go now if you want to take this to a next level you could even chain these so for example we could even chain these and go uh if weather equals equals rainy and maybe you can have two types of weathers you can give you can have somebody can give you multiple like um weathers or something right like you could get they could give you it's rainy but then there's also overcast or you know it's a mixture of two so then you can chain them together like that so you could go if weather is rainy let's just say i'm giving i'm just gonna give a very rough example so we're gonna say weather and then we're gonna say whether two and whether [Music] two is overcast then maybe this gets a score of two because it's two of my favorite weather's in one where there is rain and there's overcast all right so here's an example of doing that yeah i have two other conditions here and i'm checking if both are true then score is one now let's go and pass both of these conditions so i'll say uh first weather is rainy and then the next weather is overcast right in this order oh wait sorry overcast let's put overcast here and we'll say the score would be two points in that case so if whether one is rainy let's give that a try and boom we got a score of two okay so that way you can actually chain conditions okay and then here let's see if i can do this right so let's go else if and now we'll do another else if right here and then in this elsif i'm going to say check if just the first weather is rainy then give it a score of one let's remove that boom let's bring this all together so now let's see if i pass just rainy and maybe i don't even pass a second argument let's watch what happens boom i get a score of one okay let's try i pass sunny here and let's run this i still get a score of one so watch what's happening this condition ran over here and it said hey check if the weather is rainy and weather two is overcast okay so we ran this and we saw actually you know what this is true but this one over here is false because of this and statement here both of this becomes false so the entire things the entire thing becomes false so then we don't run this check then we go to this else if here then we check is weather equal to rainy it's the first weather equal to rainy and we go yes it is and then it gives it a score of one okay and the order here matters because if you put this statement above well then if the weather was rainy and overcast it would still only get a score of one because it would run this statement and then just end because it's chained with an else if not an if so else if meaning if this if runs then this if will not run but if you remove that with just an if now both of these will run regardless okay so that's why this statement elsif is like an important one to keep in mind and also you can check multiple things why this will matter is in rock paper scissors you'll have computer choice here and you'll have player choice here and you'll need to compare if you know rock and maybe the computer picked or sorry let's it's yeah so let's say computer picked rock and you picked um let's say scissors or paper you'll have to give yourself a score of one whether you won or not okay so if you want in this case you have to give a score of one otherwise zero otherwise negative one if you lost so this will come in handy when you're building that game okay so this is just kind of foreshadowing that so this was a little contrived example but if you hung in there and you did it great job pat on the back and with that said i mean you're you know at this point you're pretty much ready to actually start building out rock paper scissors i hope you're excited all right i hope you're excited we're now going to work on the rock paper scissors app so let's go back here now where you're going to find this app is going to be in your projects over here okay so let me go back to this here so i i can get you a little familiar with this if you haven't really been familiarized with this yet so what this is on this right hand side is you have some lessons you have project exercises and project solutions okay so these are fully working apps got it these over here are exercises meaning when you go to rock paper scissors in under solutions you're going to notice that the entire app works but if you hit refresh here and you go into project exercises again and you go rock paper scissors under project exercises you will click and nothing will work meaning that the entire app is made but it's missing the javascript functionality okay so nothing dynamic is happening with this app as a result of that so that's where exercises will show up now to find where to go and code these exercises on the left hand side you have this folder called projects so you're going to click projects inside here you're going to have rock paper scissors i'm going to click rock paper scissors so we're going to go to rock paper scissors and here you're going to see that this project has an exercise and a solution and every project will have its own exercise and will have its own solution folder okay so if you look at them exercise solution folder uh the exercise folder has your html your javascript and your style sheet solution has the same thing okay the only difference between the solution and the exercise folders is going to be the script this is the only thing that's different between the two okay these two are not the same you will need to update this inside of exercise i would highly recommend do not look at the solution sheet until you give this project a try on your own okay that's gonna be that's not good you're not gonna improve like that okay so seriously just like don't do it it's gonna be a waste of your time waste of your effort like otherwise why are you watching this tutorial just don't watch it go do something else right so if you're gonna do it then do it right make sure you do the exercise first and give it your best attempt even if it takes you hours or days it doesn't matter do that because you're gonna get better so let's go into you know this file right over here uh let's so what we're gonna do is we're gonna familiarize ourselves with what's inside of here okay um and then we're probably gonna move over into a new rebel okay so i want you to actually do this exercise but outside of here because if you try to do this here it's not gonna be the best experience plus i want you to become a better developer so i want you to actually create a new rupple with all three of these files in there and then try to code it up so you can see how to do this from scratch okay so as a matter of fact why don't we actually go ahead and set up the new repel now and then we'll walk through the code together okay so let's go ahead and do that so hit open up your open up a new tab and then just go to replit.com just like this replit.com we're going to select the html css javascript okay click here and then just choose uh great rapple but we're gonna in this case say rock paper scissors and hit create rubble perfect now inside of here we just have index script and style okay so we have these three files now here's all we're going to do we're going to go back we're going to copy so what i'm going to do is i'm going to do command a or control a to copy this entire everything that's inside of this index.html i'm going to copy it right click and copy let's go back here let's delete everything that's inside of here right click and i'm going to [Music] paste boom just pasted that code okay so now my html is pasted if i run it you're gonna see it doesn't look very good but it's there okay then we're gonna go ahead and grab the style sheet i'm gonna copy it and we're gonna go back and we're going to delete everything that's inside of here i'm going to right click and paste this and i don't want you to worry about the styling and everything i just want you to worry about the javascript portion so you can see that with the styling boom everything looks perfect right everything looks super clean now in our script let's go ahead and copy our script and don't worry this is not the solution okay so just copy everything that's inside of here so either control a command a to select everything and then you're going to hit copy then come into this script and paste it okay and hit run and if you click nothing should be working yet perfect okay this is you starting from scratch and now let's just walk through kind of what everything is so let's start off with index.html what's going on in here it's a very simple file with only a few lines of actual code all right some of the code is you know just doctype html html like whatever right that's default html files come with that a couple of lines of code here and you're going to need to know the player score certain div ids because you're going to need to access them so for example this button has a value remember when we did red green and yellow when we did that color app our buttons had a value red it had a value green it had a value whatever so then when you clicked it you're able to retrieve its value that's why that exercise is going to be val helpful to you here no pun intended valuable for you so this is uh that's those buttons you're going to need to know these classes so familiarize yourself with this index.html because from the javascript side you're going to need to detect when somebody clicks this button and you're going to need to be able to refer to these specific buttons you're going to need to be able to refer to you know just specific things and then write on there okay so for example when the player's score shows up maybe that's the player's score div when the hands show up meaning the computer hands or the user hands they should show up here and by hand it's like computer choice or player choice the result of the game whether you won or lost that should show up here as well okay um obviously above that red button right of course it should show like above there so it should show like here end game button you're going to need this id as well and this script here just means that this index.html here is linked with this uh javascript sheet okay meaning if you ever want if you ever change the name here make sure you go and also change the name here and make sure they both match okay cool but i would recommend you don't change anything because once you're done with your entire code you should copy your working code and paste it back inside of the script okay your and the only file you need to change is a script file okay awesome now let's walk through this project step by step we're not going to solve it right now but i'm going to give it to you as an exercise but we need to just kind of go over some stuff okay so this project will have a couple of functions that you need to implement all right here we go so if you look at this there's only one two three four and five there are only five functions that you need to implement the code shouldn't be like longer than 100 lines it should be less than that probably around 70ish lines without comments and that's what you need to work on okay it's five functions one two three four five six actually sorry six functions you need to work on six functions now with each function there's going to be some documentation telling you what this function should do how to run this function and what it should return okay and then there's going to be some other notes sometimes if and you know within the function as well so for example let's walk through computer choice well this function computer choice get computer choice randomly selects between rock paper scissors and returns that string so that should be pretty self-explanatory what that function should do every time i call it here's an example of me calling it get computer choice and here's an example of it returning a random string rock here's another example of me calling it and it returning a random string scissors this function has no arguments okay zero arguments nada so you won't need to add in or take away arguments the arguments are already there for you to help you out here's another function you're going to need to implement the get result function okay this is going to compare player choice and computer choice and it will return the score accordingly meaning here's an example where the human wins aka you win against the computer when you call get result and you pass it rock and scissors so this is the player choice and this is a computer choice so when you give it rock and scissors who wins is it the human or the bot that wins this case the human wins so then it should return a score of one here's an example of a human losing you call the get result function you pass a scissors four player and you pass it rock for the computer and it returns negative one because rock beats scissors and then here's another example of human draws where you pick rock for the human and rock for the computer and the score should be zero okay so those are examples of how to call this function what it should return should return a number and the two arguments that it has okay this function is probably going to be one of the most difficult ones for you to implement and uh here i i have even other notes for you to make it easier so for example when you're implementing this you're gonna need to have you're gonna need to do a lot of if else if else conditions okay because you're gonna need to check if the player picks rock and the computer picks rock then what happens okay so you're gonna need to write the code here it says all situations where human draws set score to zero so in order to write this well this should be pretty easy because when's the only situation it's a draw so you could say if a rock goes against a rock that's a draw if a scissor goes against a scissor that's a draw if a that will take you forever or you could just say hey if player choice and computer joints match that's a draw so you could do it like that all right so that should take care of all of your draw conditions then here are your other conditions so this is where all situations where human wins you should set the score to one so you're going to use a bunch of else if's here and this is a situation where you will define all situations where a human wins so a human will win if human pigs you know rock against scissors a human will win if the human picks scissors against paper a human will win if a human picks paper against rock so those are all the winning conditions go here and then all the losing conditions you can be pretty clever about it and you don't even actually have to define them because you could just say else human loses okay so these comments are there to help you kind of simplify the logic for you a little bit and then just return the score make sure you don't forget to return the score i'm going to toggle this function and close it then you have the show result function okay this function is also going to be a little bit advanced and this one this function here get result is heavy on if else conditions show result is going to be heavy on dom manipulation okay so show result is how you're going to draw on screen and show stuff for example if i go to the solution version when i click here show result is a function that's doing you know human chose rock computer chose paper you lose and then giving a score of negative one and then drawing drawing it out here okay so that's the show result function so get result will calculate who won show result will then output that the human computer choice the human choice the current score all of that stuff onto the screen so show result updates the dom to you win or you lose or it's a draw based on the score also shows player choice versus computer choice okay now here um you can see it takes in three arguments okay the score player choice computer choice so it needs that in three pieces of information and uh hint on a negative on a score of negative one you should do result.inner text you lose why because oops if i go back here i have a div called result right so make sure you get this div by using element document.getelementbyid get this div right store in a variable called result and then you could do result.intertext and change its value to you lose so that's what i said don't forget to grab the div with the result id so this is just a hint on how to like do one of them you're going to need to do multiple divs here then you have on click rock paper scissors so this is where what should happen when the user clicks well right when the user clicks you need to think about what happens so this function should calculate who won and show it on the screen so to give you a hint this function should call upon our get result function and our show result function that's kind of it okay that's what this function will do all right and then we have our play game function this is going to be a really important function the name is a little misleading and i'll kind of explain why but here's what it should do make the rps rps means rock paper scissors so anywhere you see rps it means rocket processors so make the rps buttons actively listen for a click and do something once a click is detected so that's what the function of play game is so all it does is just listening here okay it attaches listeners to these and once you click here it should run this function right there when i click here it should run that function right there and of course we pass in the player choice so if i let's say choose rock yeah and um i click that then it calls on click rps and then it passes in rock as the player choice it and then vice versa if i choose any of these other ones and then on click rps knows what to do so i have all the notes here for you right so you make sure to use query selectors select all rps buttons right and then i have even step by step on how you can do it uh loop through the buttons using a for each loop add a click event listener to each button and uh this is you know um we can say add an on click and this is something that we did already with our color app okay remember we had to add event listeners on click to each update each button's on click properties to basically listen for a click and then call another function so refer to that red green yellow square app that we did okay cool so that's what play game is gonna be and then um you know and then make sure that in there in play game you also add a listener to this button too so basically in play game all you're really doing is you're just updating the on click properties of each of these okay that's kind of kind of what happens there and last end game end game is just gonna be a function that clears all the text on the dom so if i go here and i hit this it just clears all the text so it takes all the values that you had initially set sets them to empty string or empties them out okay so i hope that you know i really believe that you'll be able to do this we've done every single every exercise everything that we've done up until this point preps you for this project there shouldn't be any concepts that are new while putting them together is gonna be harder and then there's gonna be certain things that are for sure going to be challenging so do don't be upset or frustrated if you don't get this honestly i don't expect you to be able to get it you'd have to be really really freaking hyper smart to get this on your first try when i used to do these projects i never got this these types of projects on my own like right away in the start i would give it my best i would come close but it wouldn't be working and then i would actually look at the real code and then i would go ah okay then i would try it again but i would give it an honest try so make sure that you do give it an honest try and try your hardest before you come and look at the solutions and the concepts you know they'll be covered are like for loops dom manipulation variables conditionals template literals event listeners higher order functions and math.random stuff okay so um i think you're going to have a lot of fun with this and really give it a try and then pretty soon we're going to walk through and build this together okay so the next uh step will be us actually walking through the entire solution together but for now you should stop take a break and try to build this together by yourself all right see you soon all right let's go through and code up rock paper scissors together let's go so let's go and do this step by step all right and we're gonna walk through and do every single thing together so this get computer choice function over here remember we made this function that allowed us to get a random item from an array right fruit item we're gonna use very similar logic to that so uh let's go and say and i'm coding this live together with you so if i get stuck in any of these parts it's live yes i've coded it up before but now we're doing it from scratch so we're gonna get so here are the rps choices okay so we have rock we have paper and we have scissors these are the three choices that that are universally available to us right and now i'm going to just say and let's capitalize this r p s okay and now we're gonna say we're gonna randomly select one so random choice okay and then here i'm going to do math.random right and we're gonna multiply that by three just hard code three in there because we only have three choices so this will make sure that it gets the number between zero one zero and three okay and then we're gonna call mata floor on this so remember because math.random is always going to give you some like crazy numbers zero point eight four four four four four something right but when you floor it it'll just remove all the decimal places and then round it down so now this should give us zero one and two perfect that's exactly what we're looking for and then all we wanna do um is let's let's actually call this random number and then we're going to do uh rps choice pass in the random number and then that's it we should just return that okay so return random number so if this function let's see if this function is good to go and if it's working okay so i'm gonna go ahead and call this here we're going to say console.log actually here's even a cooler way of testing this so let's just copy this function right over here copy paste it in hit enter alright so basically what all we've done is we took this function and pasted the definition inside of our console and now let's just call computer choice let's call it again let's call it again let's call it again and you can see that every time it gives us a random choice rock paper scissors everything is random okay so this function is working correctly okay so i think that's great now let's move on to the next function this is going to be a little bit of a harder function right this is the get result and it's going to compute the score so based on the score that we give it it's going to say whether you won or you lost so now what are all the situations where a human draws this one over here is simple we're going to say if player choice is you know equal to computer choice well in that case we're just going to return a score of actually let's have a variable here here called score and we're going to basically just say score equals zero these are all of our draws situation so now all of our drawing situations are handled now we have our else ifs that we're gonna start okay so else if actually let's do it this way uh we're gonna say elsif so now we're gonna have a bunch of elsifs so what are the situations where a human will win so let's pick a situation where a human will win if a human chooses rock then let's pick a situation where a human will win where they pick paper and then let's pick a situation where a human will win if a human picks scissors okay so those are the three different situations so let's give it a try so we're going to say if player choice is rock and and uh make sure to always have everything in title case like this because if you use lower r somewhere for rock and capital r somewhere else your entire app is going to break okay so just be consistent with uh this spelling here everywhere all right let's go here and let's give it a try so computer choice so rock will beat scissors so this is situation one where a human wins now let's try another let's see another situation here okay so i'm gonna copy this and paste this here right so these are now we're making all the situations where a human wins and we're going to set the score to one in this case now we're going to have another elsif so i'm just going to copy this and paste that okay and uh let's also let's actually copy i'm gonna copy this entire thing and paste it again copy this entire thing and paste it again so in the situation of rock and then we need to handle situation of paper and then we need to handle situation of scissors so paper if a human chooses paper well what would the computer need to choose in order for the human to win let's think that think about that right so if i chose paper well paper beats rock so then we're going to pick rock here and then scissors beats paper so we're going to put paper here so now we've defined all of the conditions where a human wins so we're done with that and then the last thing we actually just need to do is define a situation where a human loses so what we need to do here is just say else score is uh negative one okay so now everything else is a situation where it's reversed where the computer wins but we can we can be really smart and cheeky and just say else here okay otherwise you would have to do a bunch of elsifs and then you would have to basically reverse this and put all the choices where computer wins and manually define each one of them but if you do it this way you don't have to define each one of them right and then at the end all we need to do thanks to this note this note is pretty much giving away the exact line of code you need to write make sure to return the score okay return the score now let's take this function and see if we can copy this and let's see if we can paste this function in the command line we pasted it and let's call our function get result and i'm going to give it a player choice of rock and then the computer will be scissors and let's see what happens and we get one is that true does rock beat scissors yes it does so we get back one what happens if both are rock zero so that's perfect let's try let's try all these test cases right to rock scissors we tried rock rock now let's try scissors rock and we should lose scissors comma rock put make sure to put those quotes and let's run it and indeed we do lose so all of these test cases that we have written here right check out what we have written out here so this function is gucci this function is doing what it's supposed to be doing so we're good on the get result function okay so i think we're good with that so we finished get computer choice we finished get result okay now let's go through some of our other functions that we're going to be doing as well so let's let's go to our next function show result well before we do this before we just like do show result kind of in one go let's just attach our listeners first because that's going to be the most important thing because if if i was making this app the first thing i would do is add listeners because if i don't add listeners i'm never going to be able to see really anything happen so let's go ahead and add listeners so loop through the buttons using a for each loop okay so let's do that but first what i need to do use query selector to select all rps buttons so let's do it rps buttons i'm going to set document dot query selector all and we're going to pass it rps buttons let's go to our html file and if you see here we have rps button class right class rps button class rps button so it's not plural it's singular and let's just see if we can actually console log this out so let's go ahead and console log rps button okay and uh here we we are calling the play game function so if i hit run everything should run and there we go we're seeing that we're getting three html button elements which is exactly what we expected right and now you can either manually attach a listener to each one of them so you could do rps buttons you know zero dot on click and we could say um you know just console log the uh the value we could do that rps button zero right and then you can just do dot value so this is like this would be a way of hard coding it but that's not what we want to do so when we click rock it does detect that we're clicking rock when i click paper it doesn't work when i click scissors nothing works right so let's go ahead and now do what the instructions say here so it says use a loop to go through them so i'm going to say rps buttons dot for each so that will allow me to loop and for each button okay rps button i'm going to do something so for each rps button we're going to add an event listener so let's go ahead and do that now for each button on click we're basically going to say hey every time i click you i want you to call the on click rps function okay and then step four is make sure to pass the currently selected rps button as an argument okay so or the currently selected so basically if i click this then i need to pass this to on click rps okay so let's go ahead and do that so i'm going to basically pass it the value of that so we're going to say rps button dot value so loop through the buttons go through them and then for each button give it this function okay and now if i hit so if i hit run here and i click nothing is going to happen right now but let's go to our on click function and here i'm just going to say console.log and we're just going to say console.log playerchoice so let's hit run let's hit and now you can see every time i click rock it prints it out when i click paper it prints it out when i click scissors it prints it out as well so now the rps button f loop is doing what i wanted to do and i'm going to just remove all of these notes because i don't need them anymore because we just essentially did all of this that it was asking okay and um yeah so play game button is done on click is detecting the click so that is good now what i can do with the on click is we have the computer choice already ready to go right and we already have the get results function so we can pretty much play rock paper scissors at least in the command line like we're we're pretty much done with rock paper scissors here so i'm gonna basically say con let's get computer choice get comp choice or computer choice and we're gonna call that computer choice function so let's try it get computer choice and let's just console.log our computer choice okay so now we should have and uh what we'll do is put it as an object so then it'll tell us like what's the computer choice and what's the player choice let's run this and click and you can see player choice is rock and computer choice is scissors i'll click again this time player choices rock computer choice is paper i'll click here i click this one right now so it says our choice was paper computer choice was rock so our get computer choice function is working correctly that's really good okay well now since we have player choice and computer choice guess what we don't even need to see how this get result function works we just need to call it now baby and have it return the score that's it so let's go and do con score and we're going to just say get result and we're going to pass it the player choice but make sure you pass it in the right order and we're going to pass it the computer choice all right and then we're just gonna console log the score here okay and uh make sure to just put it as an object so it just looks nice let's hit run boom look at that player choices rock computer choices paper and the score is negative one meaning we lost right because paper beats rock let's run it again we chose paper computer chose rock paper beats rock so we won this time let's choose scissors and we lost because we chose scissors and the computer chose rock and we lost let's try scissors again and we won because we chose scissors the computer chose paper and the score is positive one meaning that we won okay fantastic so guys the whole thing is working you guys this is really really exciting now the only things that are left are we need to keep track of the overall score of the game so every time the score updates we need to actually keep track of that score and increment it now what we could do is we could actually create a object to actually keep track of both of those scores and we could put that object all the way at the top why are we putting it all the way at the top so every single function can have access to it because it's like a database okay so it will have all our scores we'll say const scores okay and then this will have a computer score okay and it'll start off with zero and then it'll have player score and that will start off with zero let's give it a more descriptive name and let's call it total score okay so this will be the total and we will update it depending on you know whether the computer wins or the player wins right or the human wins and where will we do this well what we can actually do is we can do this inside of our get result function okay so we can actually update this object right over here directly so inside of our uh get result function you could pass it the total score right and then we could actually do that update that so i'm gonna give it i'm gonna say total score let's pass it in i changed my mind let's not do it in there because this function is very pure let's not pollute it with other things and this happens very commonly you know as a developer you go back and forth a lot because it's normal to kind of go back and forth and then decide you know what i'm going to keep my leave my code clean because then otherwise this function is going to have too many dependencies and it's going to be kind of annoying so let's leave that as is we're gonna update this total score after we get it right so let's say that uh i i on click i get the computer choice i get the score well then i update the score based off of that okay so i'm gonna basically go and say get the total score and we're gonna grab the uh we're gonna grab the player score and we're going to increment it by whatever score whatever whatever we get as a score okay so this way for now we'll just keep track of the player score you don't really need to keep track of the computer score i will leave that to you to implement as a challenge okay but for now we'll just keep track of the player score and increment the player score okay and then let's console log total score and now let's play this game so rock so player score is negative one let's play rock again so now this time we won right so last game we lost the player score became negative one this game we won all right now all that's left to do is updating the dom to actually show you one or you lost or you drew so let's go to our show result function this is where we're going to be doing dom manipulation right is we have a couple of different scenarios we have a scenario where we could say we lost right so if score is negative one then do something else if score is zero then do something right else if score is 1 or we could just say else do something right so in this case if we want then what we want to say is you or sorry you lose okay in this situation we would want to say you drew or it's a tie or something right so let's put double quotes and now we'll say it's a tie and here we can say u 1. now we need to do something with these strings because right now we're not telling the computer to do anything right so we're going to create uh we're going to get the divs so let's get the resultive and this is going to be we're going to get this by doing document dot get element by id [Music] and i believe the id is called result let's go take a look and we have result here okay we have result we have player hands and then we have player score okay hands and then player score okay let's go back hands div is going to be document.getelementbyid and we're going to do hands and i believe this div player score we're also going to need that so let's go const player score div document i get element id player score okay just like that in the in a case where we lose right what we actually want to do is we want to say result div dot inner text i want to set that to you lose and then we're going to do the same thing here and the same thing here okay so let's see what happens now let's give it a try so i'll run this we win and i'm not seeing anything yet so let's go and debug what the problem is so resultive let's make sure that this result div is the actual div that we want so i'm going to console.log or actually we i don't think we're calling the function show result anywhere so let's go ahead and work on that now so remember on click rps what it should do is calculate who won and show it on screen right so line 74 calculates who won right then we update the leader the total score and then we want to show on the screen who won so let's go ahead and do that now i'll do it at the bottom here and we'll call our show result function and it has a couple of arguments and you can see it's telling us it has the argument of score what other arguments do we have let's go check let's go check player choice and computer choice so we're going to give it the player choice and then we're going to give it the computer choice there we go player choice computer choice okay that's um [Music] that's effectively it that's all what we need to do here so let's give it a try now run it boom and it says you lose and it that's is that true that we lost right we got a score of negative one let's try again you won and now look it says um the score is one so i win and then the total overall game score right the total score it says is zero player score is zero now because we won and now it's a tie so everything remains zero zero zero let's run again i lost it goes back down to negative one all right now one a bunch of times dang my score is just getting worse and worse okay all good so our score is working the way that we want it to work right so what we want to do next is at the end we also want to update the scores okay so let's go ahead and do that so let's update the score div now so or actually let's do hands first because that's really important so we're going to say hands div dot inner text right and it's whatever the choices are that the player choice and computer choice so i'm going to say player choice versus computer choice okay let's run this and let's see what happens rock versus scissors paper versus rock scissors versus rock okay so that's working but it's not really easy to tell which one is the human choice and which one is a bot choice what i'm going to do is i'm just going to put an emoji here and an emoji there so here i'm just going to make a person emoji and then for this i'm just going to make a robot emoji let's run this now when i click you can see that it shows a robot emoji a human emoji and a robot emoji right and then all we need to do is just make sure that the score shows up like here right score score should show up there so let's go ahead and do that now and i'm gonna [Music] access the player score div and grab its inner text right and then we're just gonna get the total score and we're gonna set that total score to yeah that's actually it i don't even think we have to do anything the total score should just be this and we should be good so let's run this now this so it's bringing the total score as an object because it is an object so we actually just want the player choice score so player score let's run it oops undefined so why is that undefined let's see player ah player score not player choice run boom negative one boom negative two right if you want to make this fancier or whatever you could put this inside of template literals and you could say your score or something something along those lines if you wanted to right you could say your score say one two zero one whatever and there you go now let's open this up in a full tab right and let's take a look at this let's play this game click rock versus rocket to tie click again rock versus scissors you won rock versus rock it's a tie i picked rock computer picked paper i lost right and my score is being updated automatically let's just play a ton of games and let's see what happens all right we're getting on a oh we lost a lot of games there right so there we go so the computer is doing a good job and uh but but we beat the computer right that's what matters we want at the end so let's go back and now if i hit the red nothing happens so we just have to make the red button work so first let's do the following so we're going to say const end game button and we're going to say document.getelementbyid and i think it's end game button if i'm not mistaken so let's go back let's look and i have a button i gave it id of endgame button so let's go back here and we're going to say endgame button just like this all right and we just need to connect it so we gotta go [Music] endgame button dot on click and on click we just wanna run our end game function that's it okay and in our endgame function what needs to happen is it should just clear all the score so in our endgame function we're gonna grab our total score okay let's actually pass a total score total score right here that's just to signify that we're passing it the total score okay so we're signifying that we're passing this that's why we're making a dependency and we're getting the total score because the global variable that the whole our entire app has access to this total score okay so this function is going to take total score and it's going to set the total score of the player score to zero and then we're also going to set the computer score to zero here and we're also going to just erase everything that we see on the dom okay so let's go ahead and grab our all of our divs i'm going to copy them from here i'm going to paste these divs here and then we're gonna grab their inner text and set it to empty right and then we're gonna do that for both of the other divs so paste paste double click copy double click paste double click copy double click paste and that should make everything empty so i think this should be good for the endgame function so let's go ahead and try this run it play play play play hit the red button and everything clears up run run run run hit end and you can see that everything is working okay perfect so there you go this is your entire app right let's go and try it the entire app is working hit the red button it stops starts again okay so the challenge for you is see if you could add player score player score and then computer score and see if you can see if both of those get updated as you play the game right that would probably be the best version of this app if you can make that work that'd be really nice and with that said we're essentially done with this so all you got to do now is try copying all of the code here so command a command c or ctrl a and ctrl c go back to the exercises that you know the where you were working on this javascript course rebel so go back to that and then go to this exercise folder go to script.js right and see what happens if you paste your entire code over this so if you paste your code over this and you hit run and you go to rock paper scissors project exercises your game should run just like that i'm going to command z and undo all of this all right there we go so you should be able to paste it in here and i recommend that you do so then you have this fully working okay and then if you want to delete all the comments you can from this to kind of make it make it a lot cleaner but at this point right the whole thing is you you've done pretty much the whole thing i'm going to remove all these console logs from here just so you could see this in an easy easy to see way like this on click function you'll realize is the main function right it's the entire kind of game logic that happens that happens here and um we get the computer choice we already have the player choice we compute the result based on player choice and computer choice we update the scoreboard and then we show that score on the screen so this is like the main logic of the game right this is where your main main main logic is happening so i hope that this totally made sense you understood every single step by step parts of this and this was a lot of fun for me to show you i hope it was fun for you to actually learn this and you enjoyed it but that said i love your beautiful face and i'll see you shortly time to learn apis or how to get pictures of random dogs every single time i'll refresh refresh again refresh again and different dog different times do you want to make this well guess what you're going to need to learn how apis work and don't worry we're going to keep it bare bones very simple easy to get started so that way you could learn and not be confused on what is going on now in order to learn about this let's go ahead and code this up together from scratch so hit command t and let's go to replic.com all right so this is a platform where you can code super easily right if you've been coding along thus far just choose html css javascript and the app will be up and running right away okay let's go ahead and do that and for the name we're just gonna say dog api playground okay this is just for fun and we're just gonna test this out okay now it's going to give me a random index.html file a script file and style and script is already connected with index for example if i do console.log and i say hello it's going to show that hello right there all we're going to do here is let's add in a random div i'm just going to say div and we're going to say id for id maybe i'm just going to say dog image or something like that and then we're going to give it an inner html of image like this okay you'll see why this is important because we're going to manipulate this from our script file okay so let's go grab dog image now let's just play with the apis first okay so the url that we're gonna need for this is this one right over here okay https colon slash slash dog dot ceo slash api slash breed slash image slash random now for you what i'm gonna do is i'm gonna go ahead and add this to the playground so you'll have access to this okay so i'm gonna create uh api section over here okay we're gonna say apis so if you're watching this javascript tutorial you'll be able to get access to this url okay so this is for the dog api right i'll just say dog api cool so you can go ahead inside of here and and copy this okay let's go to our brand new repo that we had created and in here we're just gonna get access to this okay so what do i want to do i want to fetch this so we're simply just gonna say fetch and we're gonna pop in that url that we got so copy this url paste it in here now there are certain new concepts that i'm gonna teach you but let's just go one step at a time okay right now i kind of want you to just follow along with me and we'll code this up and then worry about what it actually does in just a second so i'm going to say dot then all right and this dot i'll put it here dot then but this is the same as if you wrote it all on the same line by the way so eight being on line five here or here is actually the same thing but it's just that i don't want this long to run in line to run infinitely long so i'm just going to hit enter here so it breaks it off into separate lines now we're going to get back a response and i'm going to say hey return to a response.json i know this is confusing right now but we'll walk through it in a second and then i'm going to say hey get me that json okay and i'm just going to have you console.log.json all right so let's run this and let's see what happens if anything at all and would you look at that what my code is doing is going to this api meaning there you know what is an api there's some data somewhere in the cloud somebody else is hosting it and we're going grabbing access to it and bringing into our app this way we can be lazy and we don't need our own database and we don't need to figure out how to get random dog images this as long as you have access this link or this api it will automatically get you a different dog image every single time so now i'm gonna and you know there's examples of lots of different uh apps that you know you could use your api so you could use a movie api and then also you can have you could build like a movie app without needing you know every single movie which has millions of them right you don't need access to them you can actually get access to them through a database that allows you to do that all right so right now i am actually getting a random dog image every single time over here okay i work console logging it out so let's go ahead and copy it to prove it i'm gonna hit command t command v and i'm gonna paste it in the browser and you can see that i actually got a real real image right it's a cute puppy i have an english bulldog as well so you know it's kind of cute i like dogs so here i'm fetching this data and then once you fetch it you have to do something to it right away so this is where this dot then thing comes in so whenever you see this dot then thing this is talking about promises okay so promises is this like weird confusing concept in javascript because this leads you into asynchronous programming and all that basically means is up until now you were writing you know uh regular scripts you had this like list of instructions that you would have the computer do like you would say hey you know run this for loop then go to this array and grab this then do this with that array then filter that johnny depp net worth and show me that different actors that was like synchronous code meaning it runs line by line when you're dealing with getting data from somewhere else like from a third party website all of a sudden your code isn't synchronous anymore meaning that your code doesn't learn run linearly anymore so here is an example of this okay let me see if i need to zoom in more that's good for now so i'm going to go ahead i'm going to say console.log say yo and i'm going to paste that right underneath this and we're gonna run this and you can see that this did not run linearly right so here let's prove this right so i'm gonna delete that hello at the top so run first and then this should run third right because what should happen is and you would imagine that this console log here would run seconds i'm just going to say comma or actually let's do it here and i'm just gonna say run second all right so what should happen is this console log should run first this over here should run this console long should run second and then this console log should run third but when i hit run watch what happens right run first and run third ran first and then run second showed up so what is happening well we make a request to this url so that's the same as if i com pasted this right you saw how this takes a second to actually show you a new dog image link right it takes a few seconds one two one two one two one two so it takes about one to two seconds whereas this code right here runs almost instantly okay so what javascript decides to do is it says hey i'm gonna run everything that i already know so it already knows this it runs it it already knows this it runs it but this information over here right this takes maybe two seconds so let's write two seconds right here that takes two seconds once that takes two seconds and gets resolved right this returns to us as a javascript promise so we just get back we're like okay we got the data back these dot dens what they do is we go okay once we get that data back then i want to turn that data into json okay so we'll talk about what json actually means so that's this is step one right and then what we do with this is we console log that json so this is step two and i know this is really weird notation but just.dense but you'll get used to it after some point when you start learning more and more about like apis and asynchronous programming or for now just like kind of memorize it that whenever you have to do fetch you do these two dot dens every single time and you pretty much can copy paste this exact type of code um every single time you do a api request okay that's what's happening okay and these are functions so i'm just basically saying hey dot then you know grab the response and turn it into a json and what json does is json turns the data essentially to this object type of format that you see here right so you have message and then you have the url and then there's another key so we have one key with the message which is the actual image for the dog and then we have another key which is status which tells you whether it was successful or not and then that object ends right so that json is really just an object with two keys inside of it message and status that's what this is you know getting back and then once we get that back we go ahead and console log it out this dot then runs whenever this promise here resolves okay now watch what happens if i let's say cut this right i'd remove those lines and i just say console.log and we run this let's run this and you notice it just says promise what the heck is that right i can't really do anything with the promise promise is a really weird thing but when i bring that back now something happens so whenever you're dealing with promises if you just call this it's going to give you a promise but you have to do a dot then and this other dot then these two dot dents chained together to pull that data out after your code runs and waits for two seconds so this is an example of like asynchronous programming and it's a complicated way of just saying like stuff you have to wait for this over here is stuff you don't have to wait for right this is literally that's literally all that means okay stuff you gotta wait stuff you don't have to wait for stuff you have to wait for and when you have stuff you have to wait for you have to do these dot dents that's when you use them okay and then they just call them these like fancy names that confuse you like promises asynchronous programming in your head honestly between you and i don't use those words okay in your in your head just like use simpler words so you can understand it but like learn these words because they're going to be helpful for you when you're googling things right how do promises work how how do you do asynchronous programming with javascript but like for yourself just go is this stuff do i need to wait for is this like a url or a database thing that i'm doing yes i probably need to wait a few seconds to get that data yes okay then i just know that i'm going to need to do dense google how to call how to do a fetch api request google how do i deal with promises google how to get a json file from a promise right so that's where your google skills come in and stack overflow you go there and you get the information that you actually need all right so hopefully this part over here makes sense to you and we're retrieving the data now we want to take this further okay so what we want to do now is we want to do this right and then we want to actually update our we want to update our um this right over here okay we want to we want to update this right over here and we want to like put the dog image here so the new dog image that we're getting all right so let's do this once we get that json back right here then what we can do is once we get it back then we go ahead and update this dom right over here right and put the dog image so let's go ahead and do that now so i'm gonna i'm gonna remove this console log here and we're going to go right there i'm just going to say console.log json right and let's run this and this is the json that i'm getting and i can see that this json is just an object so if i actually did json.message i should get the contents of that message so i should get this url right over here all right so let's go ahead and try that so i'm going to say json message and you can see that i'm getting that that like specific url that we need yeah all right now that i know i'm pulling this data all i have to do is just update this dog image div and change its inner html to a different image okay so let's go ahead and get access to this i'm going to go back boom and i'm just going to say you know const get or dog image and it's going to say document.getelementbyid and i'm going to pass in this id right and then all we're going to do here is dot inner html and let's do template literals here and i'm going to say image set set the source for the image and the source for the image is going to be json.message all right and then we'll just end this image tag right there so this should do the trick let's try it i have a broken image so interesting what's happening here i need to put quotes around this let's give that a try okay boom there you go so now you can see our dog images oh that's a cute dog look at that and i i have a i love pomeranians i just think they're so cute oh that is cute look at these guys just playing run right every single time you run it you should now just be getting a new dog image right so this is working now their sizes are kind of different and a little bit all over the place so in order to make sure that we have a size that we actually like what we can just say is i can pass the uh height and width properties okay so we can say height is 100 and width is 100 let's try running it now and you'll see that we'll always get an image of this exact size every single time but maybe we can make it 300 and 300 that way it'll be big but it won't like completely blow out a proportion right so there we go so 300 by 300 is not a bad one as you could do that okay so this is just like a really bare-bones starting example of apis and like that quickly you have a up and running app you know this is nice like if you had to do this by yourself you know how much work that would take you would have to collect infinite dog photos manually you'll have to download all of them then you'll need like a file with like hundreds of dog photos and then your code would need to like go through that file manually and like randomly select the dog and then show that dog and you have to keep that dog thing updated and it's like so much work but here somebody's doing that for you with the random dog images that they have collected and all you get to do is just hit the run button every single time and get a different freaking dog that's nice now what we could do is instead of making this app where every single time you have to like refresh this app and get a new dog image that's kind of like lame let's make it so we have a button that says like get new dog or get dog or something like that and then every single time we click that we get a new dog okay so you you have enough information to be able to kind of do this yourself so if you want to challenge yourself you could try it but if you don't and you just kind of want to follow along that's all right too because we will have some exercises coming up for you okay so don't have to kill yourself here all right so first thing i'm going to do is i'm going to turn this into a function okay in my mind i'm thinking about it like this i want to turn this piece of code into a function and what i want to happen is i want this piece of code to run every only when i click the button and every time i click the button this piece of code should run all right so let's go ahead and add a button right underneath this okay so this button can be added by going into html hitting index.html right here and right underneath here we can say button get new dog let's yeah let's give it an id of dog bun okay let's run and now we should have a get new dog button okay cool now what we want to do is i just want to say hey every time i click that button so let's go let's go grab that dog button because i'm going to say const dog button go to document get elements by id there's a dog button okay and here i'm going to say dog button dot on click and we're going to set its on click to just say you clicked get new dog okay so it's just gonna say like hey i noticed that you click get new dog okay so click it click it click it click it every single time i click it you'll notice that at the bottom right here it says get new dog right so it is working click click click click click okay perfect so it's doing what it's supposed to do it's detecting the click now what i want to do is i want to run this fetch request on click so let's wrap this bad boy inside of a function so i'm going to say const get new dog okay and we're going to turn this into a function and we'll do it like this and i'll take this code and i'll paste it in here let's format it so it looks beautiful nice so now what this is doing it get there's a function called get new dog when we call it it fetches this data it fetches this url uh gets a response like console logs the response right and then it like updates the image now we don't even need this console log here so i'll just remove it so all this does is gets the url and then updates the image with the new dog thing all right and here what we're gonna do is we're just going to go ahead and call that function so i'm just going to say get new dog like this and we're going to call this function okay let's run it run our app and now what we're going to do is we're going to say get new dog and boom it just got us a new dog let's hit it again get new dog boom got us a new dog get new dog getting you right that is so nice and now that dog button every time i click it that button is doing the work for us and we don't have to like kind of do anything right that's nice uh if we want we could put that button at the top as well so what we could do is let's go to index.html i'll take this button from here i'll kind of move it at the top right there and then this hello world i'll just completely remove it so if we go to our app we have get new dog right at the top you click it you get a new dog you click it again you get a new dog again if you want you could give everything kind of a margin but we don't really need to do that for this we can just keep this up oh that is cute um i have english bulldog that very similar to this yeah she's adorable she has huge paws man so yeah so this get new dog thing is working kind of honestly how we wanted to and it's really kind of straightforward so not too complicated honestly like it works it makes sense and what i'll do for you is i'll take this lesson right and turn it into a lesson in our main like javascript app that we were working on and i'll put it in here for you so then like you can actually go through this api's lessons right so okay i'll make a new folder that way it's like clear it's like dog related right and then in here i'm just gonna add an index.html file i'll also add a script.js file and then you don't really need a style sheet for this because there's not much style so we'll paste the javascript code that we wrote we'll go back to this app and i will grab the index.html i'll copy this and we'll go ahead and paste that index.html code in here for dog random so what's nice about this now is right over here on the right hand side right you'll have under lessons you'll have api lesson for get random dog you'll be able to click it other people will be able to see that you made this too and you just hit get new dog and you'll get a new dog every single time and then in order to like actually see the code for this app you can go ahead on the left hand side go into api go into dog random and boom you'll see it right here so this code is like the solution is there for you if you need it this is going to be the uh little project that we just made okay and then we're going to like do more practice stuff with apis okay so we're gonna get to it right now but hopefully like this app makes sense for you so far all right now we're gonna build another app with apis and this is going to be a superhero one and you should try to kind of make a little bit of it yourself as we go along but they're going to be certain concepts in here that might be new for example like access tokens but this superhero api app is going to do the following every time you click get new hero is going to randomly select the hero show you that heroes intelligence or durability or attack power or speed or something along those lines like stats you know so for example if you typed in get random hero it might bring a batman or if you typed in another hero it might bring up let's say spider-man and so you should be able to do that with this app now if we want to really take this app to the next level you can try making it where you can type in the name of the hero like batman and hit enter and it should automatically pop up batman's image and it should show batman's stats or maybe his biography and then every single time you type in a new person and say get hero it automatically does that every single time okay so this is what we're gonna code up let's go ahead and do this together step number one go to superheroapi.com it should bring you to this page where it says get all superheroes and villains data from all universes under a single api all right so now here's what you need for this you're going to need it's going to generate an access token for you so you're going to need to connect it with your facebook if you don't have a facebook go ahead and create one it's free make a dummy one come here connect it okay so do that and then you'll have a account access token okay so once you log in with facebook this token is gonna be important because without this token this api will not work so make sure you have that and then what you're going to need is this url right here okay this is going to be your base url then for this api there are a couple of other things that that are helpful to know for you is how this api will work is you'll need to either pass in the id of the hero or you're going to need to search that hero okay so if i for example go here you can find the character ids here you'll be able to go here and see all the heroes right so you have ethan hunt you have evil deadpool you have spiderman right over here right you have batman hawkeye you have thanos so you have all these heroes as either you pass in their id so for example you saw that the id was two four five so what that basically means is what your url will look like is the following so you'll have https call superhero api.com slash api slash whatever your token is so i'm going to go ahead and copy my token and then we're going to go ahead and paste this oh sorry let's go ahead and do this so right so api.com api slash whatever just imagine that that says your access token right here okay your access token slash you're gonna type in id slash whatever hero that you want so let's say 245 or whatever it is okay now if i try to go to this url let's see what happens and let's make sure i bring my access token and repl i'm going to replace this part with my access token let's hit enter and let's see if we get anything if it works at all right you actually just say 245 here just like that okay so let's try that and you can see that i'm actually getting the data back on ethan hunt and i have power stats on him so his intelligence is strength is pretty low 11 speed is kind of low uh durability is low but then like combat is pretty high right ethan hunt and then he has a place of birth which is wisconsin i did not know that okay his height is five six uh what's his occupation he's an agent he's a training officer and um yeah and then here's his image so i can actually click that image and boom it shows me okay apparently it's uh tom cruise okay that's what i expected so let's go back here so this is the basic this is a call like a sample call reference okay so this is going to be useful for you and now we can actually just start coding this up so let's go ahead open a new repl so let's go to replic.com replay.com okay and then just go ahead and choose that html css javascript one that's the one we want and we're gonna say superhero api okay let's go cool and in here we're gonna do kind of a similar thing but this time we're going to say get super hero we're just going to create a function right from the start all right and then we'll just say hello [Music] and we'll just call this function let's just to make sure that this function is working and make sure to put an equal sign here and run this okay now you should it should say hello at the bottom right there and you don't actually even need to do console log here just run this because it already has a console log and you can see that we're getting back hello perfect so seems like our get superhero function we created it we are able to call it now inside of this function what i actually want to do is i want to make that fetch request so remember that fetch requests we made earlier you can pretty much go ahead for a dog random and look at it and your fetch request is going to be very similar to that all right so remember it's fetch you pass in the url and then you do these dot thens so let's go ahead and do that now okay so i'm going to basically say fetch and let's put that reference url there so we have we can see it at all times and now i'm going to basically uh use the url right so let's go ahead and do that i'm going to paste and character id here is going to be let's just say 245 because that's ethan hunt and for access token i'm going to go back and copy the access token so copy and let's paste it in in place of that where it says access token okay replace that with just whatever your token is and uh this is what you should have now one really really key hack that i'm going to show you here is make sure to put php here if you don't put that this will not work i know it's pretty weird but this is a weird hack that i had to kind of find around it and it's just for the superhero api okay you don't ever like need to do api.php like that okay so there we go this should get the ethan hunt guy and then we just need to do the two dot dens that we've talked about so i'm going to say response get the response as a json and then we need to do something with that response we're going to say then once you get that we're going to say json and we're going to say console log that json okay so with fetch requests you can pretty much like copy paste these lines almost every single time and then fetch of course is just going to fetch that's not going to change the only thing that's really going to change is what goes in here okay so i'm going to hit run on this and let's see if anything works and boom look at that we are getting ethan hunt we're getting that data right over here uh just as we want it to okay so we get response success id is 245 name is ethan hunts and then we're getting all the power stats that's perfect right now if i wanted to get any one of these specific things i could do like let's say the dot id or dot name let's say i just did dot name and let's run this i should just get back i should just get back ethan hunt okay if i ran and i looked at this and i wanted power stats right i could do json.powerstats and that should get me back just the power stats and then i believe image should get you the image yup right and then you will have to do dot url to get the actual url out of that because it's an object within an object okay and now we have access to the url and if you use an image tag you can actually then pop that up on the screen there so what we'll do in order to attach that image to like basically your app is i'm gonna go ahead and i'm just going to say hey get the document dot like query selector all right and we're going to query select and grab the body tag so that's this tag right here all right i'm going to grab the body tag and then to the body tag let's uh let's add something so i'm just going to say plus equals okay and we're just going to write like i don't know hi or goodbye something like that let's run this oh we want to make sure we do dot inner html here so let's do dot inner html let's run this and you can see that all we did here is we just appended goodbye right there okay if you don't do plus equals and you just do this it will replace everything that's inside of the body and replace it with goodbye and that's not what we want right we just want to like attach that so watch this right so this ethan hunt that we're getting we have the image here so just go ahead and copy that okay uh right click copy that and if i go const image i'll just paste that there it's that long url okay so now what i can do is i can just like attach that image to the html body okay so what i can say is i can just go and go i have image tag right and then this image tag will have a source and this source is uh gonna be the image that we have okay let's uh let's make this a template literal so we can then write javascript in there all right boom boom boom there we go so we have this so image and then just like in this like that cool so image we gave it a source and this is going to be the ethan hunt image and it's kind of hard coded here all right let's put this maybe in strings is that what that wants yeah that's kind of weird huh like it wants that in strings even though it already is in spring so kind of weird but whatever we can we're going to go ahead and do that and now you can see that this image is popping out and it's actually not ethan hunt i apologize it's amazo right but if i change this uh hero here you know then i could get a different image but yeah so if i run this i'm just going to get that amazon image every single time okay so this is apparently what amazo looks like i mean i didn't even know that right and we're going to give this a height and width too so let's go ahead and do height is 200 and then we're going to say width is 200 now in order to make this dynamic i want you to try it because right now every time i run this and even if i pass in a different hero let's say i put in 245 and i'm actually putting in ethan hunt notice that it's still going to give me a mazzo so see if you could change something here in this function where it could update this image dynamically okay so give that a try i'll give you five seconds to pause the video and try it on your own five four three two one all right let's go ahead and now give this a try together so i am getting back this data but i'm just console logging it so instead of console logging it what i want to do is uh i want to grab the body and i want to add this all of this to the body okay so this is what i want to do so i'm going to cut this because i don't need that there i'm going to remove this console well you can keep that console log for now i'll keep that console log and i'm just gonna say hey uh get me the json and then just add that image now instead of using this hard-coded image what we're basically gonna do is uh we're gonna grab this image right over here so remember we're gonna need to do json.image and then that'll give us this object right here and then we're gonna need to do dot url to get access to then this url right here that key okay so let's go here and we're gonna say json.image.url just like this so now i can remove that hard-coded image that i had let's run this and let's see if that works and boom i got i got ethan hunt let's run it again let's run it again let's go here to our html and i don't want to say hello world here anymore i want to actually say button that just says get new hero and we'll make that work later and for bonus points you should try to make that work yourself okay before we even do anything else perfect and i'll just add a new break line okay this just like breaks things on to a new line and then that way the get new hero button always stays at the top so let's get back to our script and um watch what happens if i pass in 20 and run it now it's going to get me amaros image if i run 40 and run it it's going to get me this guy whoever that is uh let's hit 60 and it's running me that looks like bane is that is that bane he looks epic yeah that's bane that's sick and his relative is apparently king snake who's his father yo i didn't know that that's lit that is super cool man ben is a badass now see if you can make this get new hero button works every single time i click it i want to be able to get a new hero every single time so i want you to pause this video give this a try on your own five four three two one all right let's go ahead and try to do this together it's all right if you didn't get this i'm proud of you for trying and i hope you tried um because you'd only be cheating yourself if you didn't all right so uh let's let's do basically what we did for that dog app right so we have our button and what we want to do is let's go give that button an id well we only have one button so i can be kind of lazy here and i can just select this button i can query select this button but is that a good way of doing it not really right like that's no i don't want to give you guys bad habits let's just say id new hero button let's just say that let's go into our script and we're going to get access button kind of up top here const hero button new hero button and i'm going to say document dot elements by id paste in that new hero button and so whenever that button runs i want to run this function here so i'm going to say console.log new hero button and i'm going to say on click run me this thing gets superhero and that's it so now when i run this app everything should be empty when i hit get new hero it should run but every single time i run it it's going to keep making a new request but it's going to get me the same hero every single time so getting your hero get new hero get new hero get new hero it's getting the same exact hero but every single time and that's not what we want we want a different hero every single time and so now i'm going to give you another piece of this exercise okay try this on your own so see if you can make it where it randomly picks a hero okay remember that array exercise that we did where we picked random remember the when we were making that color app right uh remember or sorry fruits app and we picked a random fruit remember when we did rock paper scissors and the computer chooses rock paper scissors randomly all right so you're gonna need to use some of that knowledge to pull this off this one's gonna be a little tricky but i think if you really tried you could make this number where it's random now if you need a hint if you don't need a hint you could pause this video try it on your right now if you need a hint what i'll tell you is this number is not going to be between three like it is for rock papers and scissors this number is going to be between one and all the way till 731 because that's how many heroes they have so you're going to need to put a number between 1 and 731 uh in here so it should either go 1 or 731 or some number in between but never lower than one and never higher than 731 okay so you need to make a function that can do that all right so take five seconds right now i'll give you five four three two one all right so we're gonna do this now const uh random uh i'm gonna create a function called random hero and basically what this function is going to do is we know that there are 731 heroes okay so khan's number of heroes is 731 and what i'll basically want to do is i want to do math.random okay so let's also open this up in the shell or sorry in our console and give this a try all right so let's go here and actually i'll clear this up so you can see this nice and at the top so let's say i do math.random and we multiply this by 731. now notice that i always get a number between 0 and 731 but it'll never actually go up to 731 right so that's maybe not not what we want we want it to actually go up to 731 so there are a few hacks you could do here so if we want to do so first of all let's do math.floor so math.floor will and if i hit up and enter up and enter it's going to keep going but it'll never actually pick 731 and it it's not going to be easy for me to prove that to you here but it's not and it's also able to pick zero and that's not what we want in order and to prove this to you guys what i can do is like copy this piece of code and just change it to a smaller like number so you can kind of see this so see how it goes zero and one but it'll never pick two so it's basically picking the lower bounds we want to actually pick the upper bounds one start with one and end at 7 31. so the way that you could do this is you could actually just add a plus one to all of these so this way when i run it every single time i'm gonna get a one or a two every single time so you could just add a one or instead of math.floor you could actually call math.seal so either of those ways work so we're gonna do the same thing with our function with 731 and just add a one at the end and this is always gonna ensure that you're getting a number that's greater than zero and it doesn't end at seven thirty it would unit actually seven thirty one okay so this will get us that so i'm gonna paste this here okay now the 731 is actually just you know number of heroes number of heroes and then we're gonna plus one this cool and we're gonna say and actually we can just return this that's it okay and then we can just call the random hero function here so i can just say a random hero like that so get superhero and we're gonna get a random random hero okay you could because this function here is just going to return a number so for example if i do this and we do random hero and press up and enter it says run random here is not defined interesting but i just defined it so let's try random hero now boom there we go so every time i run random hero you can see what it does right it gets me a different number every single time and does a pretty good job right of generating a random hero so that's why we're just running this random hero in here they'll generate a random hero and then we'll get that specific superhero and then we'll get that dude's image so let's hit run at the top let's go ahead and click get new hero get new hero and all right so we've had a little bit of hacky html here that might be causing some problems so let's go to our html file real quick and let's just uh update this real quick okay so what i'm gonna say is um i'm gonna put a div here and we're just gonna say id is hero image and then inside of here we'll just have like an empty image thing okay and then we'll just update that instead so here we're gonna say const hero image div all right and then i'm going to say document dot get element by id and i think it's called hero image right let's just double check hero image copy come back paste it perfect and then we're just going to do uh we're going to replace this part right here with hero image div and we're going to change that html to this image so now let's give this a try and let's see if this is still working hit run at the top hit get new hero and let's try it and it works okay so i'm getting new heroes and look at what's happening their images are actually showing up at the bottom hit get new hero again and so every time i hit get new hero it actually like gives me a new hero so that's great and why is this happening so let's go ahead and open this app up and let's try to figure out why is this happening why is this behaving instead of replacing the hero it keeps adding them so get new hero get new hero i mean this is kind of a cool functionality too actually i kind of like this uh i kind of like this uh version of the app right every time you hit get new hero you keep getting back somebody somebody new so it's actually super super super cool i actually i really like this functionality but let's say you want to change this let's say you only want one hero well what you could do instead of this plus equals here which appends you could just say equal and that's only just going to replace so run this again hit get new hero he'd get new hero and you're going to get a new hero [Music] every single time okay or you know not every single time there is a one out of 731 chance that you're going to get the same person again probably lower than that but yeah it's a pretty low chance this is going to repeat itself all right now what we want to do is we want to have a search field here and you should type in there and then um you should have a get new hero button right next to it so you should be able to type in what hero you're looking for and then say get hero and it should surge that hero okay so we should have like kind of two buttons so one button gets a random hero okay and i guess let's just give this a name of random hero so uh let's go to our button and here i'm just gonna say like random and so when you click it it's very clear that this is gonna get a random hero okay and then what we're gonna do is we're gonna have an input which you you know is gonna be your search button all right so let's go ahead and create that input now i'm gonna say input and let's run our app and we should have an input right here okay and then we're gonna have a button kind of like in front another button in front of that input and this is going to be search okay let's run this so now our app is going to have two things so random hero will get you a random here every single time or you could type in a name of some hero like batman and hit search great so let's go back to our app let's go to script.js and let's work on this search get you know basically let's get a hero that was actually just searched so i'm going to create a new function well do i need to create a new function let me actually think about it because getsuperhero a bunch of the functionality is going to be same just this uh this is going to change right so for example if you search a hero then it'll go base url instead of id we're going to actually do search.name of the hero and if you pass in an id okay so if they pass in a name then this is going to be the url like schematic or whatever right this is what the url is going to look like and to pass in an id the url is going to look like base url slash id okay and let's uh try that url so let's go grab that url real quick so i'll go here grab this whole thing copy it hit paste grab your token go back to that paste this token right here and now we're gonna do slash search slash batman and let's see if this works as i expected or if it's gonna break and it actually does work wow look at that let's try spider and yeah spider shows up let's try spiderman let's see if that shows up that's the wrong name so let's try spider dash man and spider dash man indeed shows up now one thing if you have noticed is you're gonna get back of basically the same response regardless of so you know whether you searched the you you searched it up like with the search spider-man or whether you typed in the id of spider-man which is i can see here it says 620 so let's go ahead and replace this here with uh 620. both of them are actually going to return to you pretty much the same exact response right like the response is very very close the only thing i see change here though is we have a results array like we have a results uh key here right and then the value of that is an array so basically it seems like it gets you multiple results for spider-man um one or multiple results and so basically it seems like we would want to pull basically i think we would be safe just pulling the first result that's the difference between this and if i actually just type in 620 because that is getting me that specific spider-man that i was looking for whereas for this it's getting me a array of results and then the first result has the specific spider-man that you might be looking for okay so we're just gonna get like the first item out of that array that's how we're gonna do it so let's go back so some of our code is going to change not all of it but just a little amount of our code meaning in one of the scenarios so normally we just do json and we're good but in this case we might have to do dot json.rt get me the zeroth result right and then then i could do dot image dot url unlike how it is currently where you could just do json.image.url okay so let's maybe let's put these examples kind of this so you can see right so with this method i can just go like this because i already know exactly which json that i'm getting here i'm getting multiple results so i want to pull the first result get that results image url so a slight change is going to happen whether is going to happen whether we're given um a id or a name so in that case for simplicity's sake i think what i'm going to decide to do for now is just create a different function that way we won't have to do all this if else conditioned stuff we can just have a different function okay so this function here let's rename it and this should be get random superhero that function we run and it essentially will get a random superhero and um yeah and if it's gonna get a random superhero i mean you you really don't even need to give it an id so yeah so yeah you could call it get random super get superhero i'll just leave it as uh let's go ahead command z this let's just leave it as get superhero for now just because i don't want you to like have to change it everywhere like for now you should just have a working version so let's leave that as is so this is one function now let's make another function and this is going to be called get searched get search superhero okay so this is whatever the user searched up and this is gonna it's gonna probably you know whatever the name the user is searching for right now we're gonna be able to copy a bunch of stuff from here okay so let's go back for fetch request here we're gonna have a base url of course but on the top of the base rail we're going to say search and we're going to pass in the name so this is going to get us the you know like put in batman or whatever here and then we're going to do our dens.dense like how we did earlier and let's just go right here and paste them format this cool you do our dense.dense and for json here we're actually gonna grab the we're gonna say const super uh hero is equal to json.results of zero this is gonna be the specific hero and then we can replace that with hero.image.url and uh instead of console.logging json we're going to console.log our hero and this search superhero function is going to run whenever we click the search button okay so let's go ahead and let's see the search button dude we give it an id let's give it an id of search button let's go back into our code and uh let's say search button is going to be document.getelementbyid and we're going to say search button and uh then we're just simply just going to attach a listener to this and we're going to say on click get search get search superhero and for now let's just hard code batman so it should just get us batman and then put him out so let's hit search oh sorry let's hit run at the top first then let's hit search and look at that it's working perfectly exactly how we wanted it to work and when i hit search i am getting batman exactly like like i expected okay let's replace batman with thanos and let's hit run and let's hit search and you can see that i'm getting back thanos so this is good this is doing this is doing what i needed to do all right now what we need to do is we want to be able to put in stuff in here and get access to that so i'm gonna go inside of this input and to grab its value we're gonna give it a name and we're gonna say the value of this is search input so let's see if that will allow us to do what we want to do so i'm going to go ahead and i'm going to say const search input i'm going to say document dot get element by id actually we have not given this an id let's take out the value and we're just gonna do id for now id is gonna be search input okay let's let's do the id there all right now i'm going to say search input and we'll try to get its inner text so search input and let me let's see if we do dot inner text if it actually gets us what we want all right enter enter text and um let's console log it here so i'm going to say console log search input so every time i run i type in that button so let's search and it doesn't look like i got anything let's type in hello or let's not type in that let's say cookie monster so it's like visible let's put a cookie emoji in there and let's hit search and let's see if that did anything and got us anything we're looking for nope i don't see anything let's silence our console logs here so i'm going to silence that console log let's silence this console log here and then this one in here as well so no more console logs let's hit run let's hit search and something is happening but we're not getting what we want let's type it in search is still empty all right so all we need to do let's just hit run here okay all we need to do is make sure search input is documented element by d search input right and then every single time we run this function search we're going to console.log whatever value is in here okay so we're going to say search input dot value and make sure the console log this so now they'll extract the value from that field so let's say i write in uh you know cookie monster and hit search and you can see we're extracting cookie monster right over here exactly how we want to right so this is going to be the search that we're now gonna pass in okay so this is the search input.value is essentially gonna be the name so this getsearch superhero function what we're gonna do is we're gonna copy this search input.value and every time we call this function instead of passing hard coded thanos instead we're just going to pass in the user's search input value that they put in so let's try running this again okay let's try running this again and i will say thanos and let's hit search and boom let's hit batman and hit search and boom let's hit spider dash man let's go search uh ethan maybe oh wow that worked i'm surprised and that was fast too look at how fast it is man this is nice right um this app is doing what it's supposed to be doing so when you search it gets you a hero when you click get random hero it gets you here as well now what we want to do is above the hero it should say their name okay and underneath it just say maybe some of their stats so let's go ahead you should try see if you could try that on your own um but we'll walk through it together if you don't get it okay so i'll give you five seconds to try to pause and try to do that on your own five four three two one cool so what we'll do is we'll get the hero name i kind of showed that at the top okay so let's see where we're doing this we're saying okay the hero image i want you to replace it with an image and i want you to replace it with the following so let's go back to where we're doing that so we're getting the hero let's just go to our random hero function first because that one is easier to understand and here we're creating this you know we're basically saying hey the html is the inner html is this we're creating this image show that image well above that image we could actually put the um we could put their name okay so for example i could say kant's is uh we're gonna go grab the json and we're gonna say dot name so json.name but we need to actually like make the actual h2 or whatever so let's turn it into an h2 i'm going to say h2 wrap that in an h2 okay and we'll wrap this this so json.name and now if you want to like kind of concatenate these together you could actually go i mean this is kind of getting really crazy but what this is doing here is you're inserting the name html and then you're inserting the image right after that so let's see if we can try this and if this works let's go random hero right and now we get robin v and the image let's try again we get vision 2 and boom right we get the name and the hero as well and we can get their stats too so let's try console logging the json and we're gonna do dot power stats let's run random hero and you can see we get back intelligence strength speed durability power combat so you can actually show all of those stats right underneath here see if you could do that by yourself okay so here i would highly recommend you take about five seconds see if you could add that yourself so i'll give you five seconds five four three two one all right so let's go ahead and do this together so i'm gonna say const power stats um is going to be you know not h2 but maybe it's gonna be like p tags so we could actually either do all power stats or what we can do is just do one stat at a time so let's just try intelligence and we're gonna put in a p tag here and i'm gonna say dot json.powerstats.intel and wrap that close that p tag right there so so now what i can do is i can go and take this intelligence and just show it at the bottom right so we can add that right here intelligence hit enter and let's go right random hero right ellie bishop intelligence is undefined interesting let's see why that's happening oh i misspelled intelligence right here okay so careful with the so that's why copy pasting is oftentimes better better for programming so you don't make these errors let's go ahead random hero we got sauron and then the and it's 88 over here okay so if you want to make that better you can actually say intelligence and then it'll look cleaner that way so now let's hit random hero tundra intelligence is 38 and try doing this right let's make another one for another stat so we're going to do instead of intelligence maybe this one will do strength and we'll say strength and we'll paste strength right there and then we'll attach strength onto this so we're just making this this long html right over here all right let's run this get random hero and you can see now we have the cape we have intelligence and strength now if you want to make it like kind of more enticing you for for intelligence let's put a brain emoji for this let's put a muscle emoji and now let's run this get random hero and you can see intelligence is 50 and strength is 10. right random hero intelligence is null so maybe this hero does not have an intelligence right here intelligence is 88 strength is 10. now we can see the pattern here right basically for all the stats we're going to keep needing to repeat this pattern again and again and again meaning this it will basically you'll need to keep copy pasting p tags together so at the end of the day what it actually looks like is p tag right and then you're gonna have this so like actually it'll actually look like this so you have this p tag right here um combined with this p tag back to back combined with probably another p tag that talks about combat right combined with another p tag that talks about maybe strength or sorry not strength but like speed followed by another p tag that says durability so we're seeing this like pattern here and we want to actually create this big long string and then we want to just attach that string right here so you know it's a pattern so what we can actually do is let's just create a function that actually you know gets stats get and show stats or actually let's say get stats html so it will get the stats right but then convert them into a usable html so we're going to create this function and we're going to expect that we're going to get a character okay so just like we're going to we're going to expect that we get this like json-like data of that specific character and then what we're gonna do is we can do map here or we can do a for each but but since we're just trying to do a string concatenation it might make more sense to do a four each you could also do a dot map and kind of join everything together so we could definitely do it that way as well okay so how that might look like is say you have an array let me clear this so say you have an array that says hello by cookie whatever and let's give this so if i want to join all of these i can actually just do this and i can just say hey just join them all together so if i have an array of like p tags and i have intelligence here intelligence and then i have another p tag that says speed right i could actually do dot join here and do this and i just get back one big string so this is kind of what we want to do here so i'm going to say character okay dot map so map basically says return an array and we're actually we're going to do power stats character.powerstats.map okay so we're going to loop through all the power stats we're going to loop through all the power stats and for each stat what i'm going to say is make this html like looking thing here all right so since what we're getting back is actually an object it's not going to be super simple to loop through this so what we're going to say is character.powerstats is not an array okay this is actually going to be an object that you're getting back so what we want to do here is we want to loop kind of this way and i'm going to say for stat in character.powerstats and we're gonna loop through this and let's just console.log each stat and let's call this function getstats.html uh let's just say maybe and i'll call this function and we'll pass it the character which is just json in this case uh but this really is the character okay so get stats html pass it to character and then it should just run and then console log all the power stats let's run this let's get a random hero and you can see it just ran through and says intelligence strength speed durability power combat perfect so now what we want to do now that we're actually able to loop through this now another way that we can actually loop through this and let me show this to you because this is kind of cool so if you have an object right so let's say we have things and things is this object right over here which has strength and cookie well i can actually go and i can say object.keys and pass in things to it and it's going to just turn that turn all of its keys into an array and then i can actually loop through those keys so that's a really cool way to actually to actually like iterate so instead of saying for stat and power.stats what i could actually do is i could say object dot keys and um we could ask for the character character the power stats and this will turn the whole thing into let's actually just console log this so it's not super confusing i'll console log this here in the same line all right let's run this and let's get random hero and you can see that i have this array here intelligence strength speed durability power combat so i just turned this into an array of all of the keys so now what's cool about this is because it is an array i can loop through it with a dot map and then a dot map will loop through this array and also return an array so now what i can say is for each stat i want you to do the following okay so it's going to go through each stat so intelligence strength speed durability power combat blah blah and here's what i want you to do you're going to uh create this string okay we're going to say p tag and then this p make sure it's a template literal with backticks it's going to be a p tag it's going to have um that the name of the key that you're passing so here i'm just going to say it's going to be the stat okay whatever stat that is so it's so this is going to turn into their strength or whatever uh or like intelligence right and then we can say i'll put a colon here right and then after that colon we want to do is actually put the value so i'm going to say i'm going to say character dot power stats right and then pass it that specific stat we're looking for so i can just say stat or i could just do it like this and i can say stat like this okay so it's going to go to that object and it's going to pull that specific stat so all this means is let's say that this object was called we had something called character dot power stats and that was equal to this array right there whatever right or that object let's copy that object and let's say we have power stats is equal to this object right here and so if i do power stats and i pass in strength oops it's going to get me the value of strength so it's going to get me 8 right there so that's all we're doing here i'm basically going into that object and i'm just pulling out its value and then we're just going to end this p tag and this p tag all right so it's gonna loop through and do that and then let's see if we need to do anything else for this one and honestly it doesn't really look like it so we can actually just return this array and it's gonna create a full array okay and so i'm going to call this const let's say stats and then we'll console log stats okay so let's run this let's do get random hero and you can see now i have intelligence and a p tag i have strength and a p tag i have speed and a p tag i have durability in a p tag power and combat and if we want to give each of these an emoji we could do that as well and we can kind of create a map for the emoji and then kind of like map the map the stat stat to emoji map we could create that and then we could even use that here and get the appropriate emoji so for example we can we can create that right here right so we could say stat to emoji right and then we could say hey if the stat is let's say intelligence and you don't need to even put it into string here so let's go intelligence is going to be this brain comma and strength is going to be muscle and then we have speed let's paste this and then we have durability durability and then we have power and then we have combat so strength is that speed is a zap durability is let's just say like maybe a tire emoji or something we'd apparently there's no tire so say a rope um workout lift there we go that's durability and then power i don't know that will be power okay and then combat will be sword okay stat to emoji so that's emoji so here if we want to actually like map that we could actually just right before this stat to emoji and then give it the value of the stat and uh this is going to get us the emoji that we want so let's run this let's hit get random hero and you can see like we have intelligence as a brain strength is that zap boom okay get random here another random hero and you can see we got boom right power combat our emojis are working kind of as expected so this is actually making all the stats for us and getting them right and instead of having all of this crap right here which is kind of like weird and annoying i could actually just remove this right and um and here we could just say con stats is get stats html right and then we could just replace all of this and paste stats and now when we run this and we get a random hero okay let's do a random hero okay let's see it's all oh yeah it's doing undefined right now and we know why because we haven't turned it into a string yet we're like this is still an array so remember at the end of and we also need to return we're not returning anything so we want to do is we want to say dot join like this okay and we want to do return stats.join and like that okay so let's run this and now when i do random hero you can see that it's just giving me one long string of p tags intelligence is a p tag this strength right here is a p tag speed right here is a p tag and now when i look you can see that it's actually showing up really nicely right so professor zoom let's get random hero and you can see all of this right here run this again random hero boom mr freeze isis run run run and then we're just getting the intelligence strength speed durability all of that right here now it would be nice to have this intelligence i capitalized as capitalized as well so let's go ahead and maybe add a um dot title case 2.2 title case okay which is kind of a nice little thing that you could do and we could actually pass that in right over here and i could say that two title case and let's see if title case string method javascript okay so you can always like google this stuff too and i'll kind of show you examples and let's see if there's a method that does title casing do we have to oh dot two upper okay so we could actually just do that to uppercase and we should be we should be fine that shouldn't be too bad or maybe that just uppercases everything that's not what we want either actually we can just do two uppercase and yes it's not title casing because title casing is like pretty complex but dot to uppercase is a method that comes built into javascript and you can see what it does and it's really nice right it just capitalizes everything which is nice like we're capitalizing the stat right here um and you know that makes that makes the whole thing just look a lot better so the stats html function yeah it's getting definitely pretty intense i can feel that but uh you know if you're doing this and you you know you got up to this part like you're doing a good job so just hang in there and honestly what we could do is we could probably turn this function get stats html into like get hero info you know get hero info html or something because we can just create the whole the entire html in that function which will be really nice we just hand over all the html elements so it's like the hero name right well that's just character.name so for example if i copied this and i brought it down here this is this would just become character dot name so that should take care of that and then we actually update the div at the end and we create we do this like image thing right here so this image thing that we're doing here well that would be really nice to actually do it handle that here as well okay so let's try handling that here i'm gonna say character.json image url okay this will be a template literal like this just a const image so this will be the image uh html okay and then we have this final html that like yeah and then here we go ahead and we um update this so yeah get stats so we can actually rename this function as to show stats because really what this function is doing is showing the stats on the screen um or showing the hero info on the screen so we could right click this and rename all occurrences we could say show hero info it's a show hero info so this is basically the function that's actually going to show this here the info so i think that's like probably a much better name for it and then it would make sense if that's the function that actually updates uh the entire app as well so i'm going to copy this for now we're going to come down here and i'm going to paste this right over here so this function doesn't even need to actually return this return anything stats boom and in so for stats we can actually just do the dot join right here so i can actually just say that join so then it it just turns this entire thing into that long string instead of keeping it as an array and then this hero image div dot inner html well this just becomes something simple we can actually even remove this guy now and actually just say image so this just becomes this nice little html so we get we make the name html we make the image html and then we make the stats.html and then we just concatenate all of those together and update the hero image we don't need to we don't need this function to return anything right show hero info and we basically get rid of all of this all of this here and we can just simply call the show hero info function so now this function just became really easy to look at right get superhero once you get the superhero you just pass that superhero jace uh con superhero is equal to json you just pass that hero or that character or whatever and that this just shows it on the screen so let's actually try this let's run this let's say random hero all right so it didn't it's not coming up on the screen let's figure that out real quick so what i'm going to do is i'm just going to say console.log and let's see if uh name is working as expected so let's try name let's run random hero yep oh actually it's working i just had to like hit the run i just think i never hit run now let's hit random hero and look at that random here is showing up right and then intelligence strength speed durability all of that showing up exactly how we want let me remove all of this here so now it's really easy to read get the superhero show the superhero that's it now this function is reusable and i'm gonna give you that as an exercise so try that right now see if you could take this what we did right here and add that to search functionality so when i type in batman and i hit search make it so it actually shows me the batman name it shows me the batman image and it shows me the batman stats so see if you could do that on your own i'll give you a hint it's you're pretty much only going to be writing it's going to be just a few lines of code and it'll do the entire thing for you so i'll give you about five seconds see if you could try to figure out i mean pause the video and see if you could try to figure it out five four three two one okay let's go ahead and do this together now so this is going to be really really really really nice okay because watch what we're gonna do let's go to our search superhero function and i'm gonna delete everything from here okay and remove everything right and we already have our hero here which is the first item i'm just gonna call our show hero info and i'm gonna pass in the hero that we have okay and let's give it a try now so let's search uh batman and let's hit search and look at that it's already working right this is kind of pretty unbelievable but if you actually open this app up and you go batman and you hit search boom let's go spider-man boom let's go thanos boom [Music] i mean this is amazing or you could get a random hero and both them both of them work so just to explain a little bit about how we were able to make it work that easily is look we already have access to the hero right here so then you just pass that hero to show hero info and it knows what to do already it knows that it's going to get a character it knows it can do character.name it knows how to get the image url it knows how to like turn the thing into object.keys map through it get the stats you know get all of these nice emojis that we have here it knows how to do all of that and so then it just kind of does all of that for you and then you're you're good you're just essentially reusing a function that you've created that's the nice thing about reusing functions right um it it like really is a game changer when you can reuse like your existing functions all right cool so now just to kind of make our app pretty i'll just say like um at the top kind of like right here and i'll say um [Music] you know [Music] superhero app and then for instructions we'll just say like you can search for a superhero like batman or thanos or simply hit all right so superhero app you can search for a superhero like batman or thanos or you can generate a random hero so now the user goes to this app they understand kind of how it works and what it means so hit random hero all right let's open this up here superhero app you can search for a superhero or you can generate a random hero so let's try random hero right boom we're pulling random heroes and this is like going to an api pulling the data from there or i can actually say you know bane let's see if that works you know thanos i know that works ooh bane has nice combat why is this power like only 51 do we have superman here oh cyborg superman that is badass durability 100 power 100 speed 93 strength i mean yeah but i don't really like superman because he's just overpowered it's like oh he just has like literally every power on the planet it's like how's that a fun superhero i need my superheroes to kind of be like weak but then use intelligence and that's pretty cool um or maybe that's how i was because i went to chess club and i resonate with those heroes more so there you go we got this app it's fully working it's doing everything that it needs to do now what i'm going to do is i'm going to move it over for you inside of our javascript course so you have access to this under api i'm going to create a new folder and this is going to be called superhero superhero app or whatever and in here we're going to have a index.html and you don't need to follow along on this one i'm just creating this for you so you you know that this is available to you and so we're gonna paste the index.html in here we'll go here copy the script so command a command c or ctrl a control c and you're gonna paste that in here and then i'm just going to link it all right so now you should actually be able to go to the home page here and you're actually going to see get super heroes right over here right and you'll be able to click in to get superheroes and then the app should show up here so you could do random here and it'll generate a random hero or you could ask for thanos and search and it'll bring up thanos for you okay and if you want to make this app a little bit more robust meaning like well actually i think if you tried thanos let's see if that works search oh that still works so that's pretty cool spider man let's try okay so the app is actually smart it can it can detect that normally what you do is you call dot to lower case on this so then like whatever user types it just lowercases it and then you do whatever you want with it but this is fine so there you go your app should be working here and should be available to you in your javascript course you'll be you'll be able to click it and see how it functions and uh this will be the solution file for you okay so the solution will be available for you here and you can just kind of go and play around with it and use it or for bonus points you could replace this with your own code okay so if you want to be real pro go ahead and copy paste your own code that you just did in the other repel right paste it over it and see if this still works and if it does you're a real champ because i want you to have this entire javascript course should essentially turn into all your code everywhere here okay so we've covered a lot i hope that you've enjoyed it so far i mean this was a lot of fun covering apis in so much detail and building a mini project i'll see you soon i promise you will be great i promise you're going to be a champion developer one day and i promise i'm going to teach you promises let's get right into it so promises are kind of tricky to understand it throws people off a lot but you and i are going to learn it together just go to replay.com make sure you're here replay.com this is the url and then we're just going to open up a new rupple with html css javascript and let's just say learning promises okay and hit create rubble so we're just going to kind of start from scratch and we're going to walk through kind of real real basics of promises okay so promises introduces the concept of asynchronous programming all right it's a complicated word and i know we've talked a little bit about promises already but now we're gonna start deep diving into promises and looking at it at like bare bones basics and starting from there so asynchronous programming is some piece of code that's going to run out of order okay it's going to happen at a random time so the way that i want you to kind of think about it is like this like imagine you're at a restaurant and you order some food at the restaurant now when you order that food you're still continuing your conversation with whoever you're sitting and eating food with while that food is being prepared you're still talking once the food is prepared the server will bring it up to you or the server will say hey no soup today right that's what they'll tell you so let's go ahead and mimic that type of that type of thing but inside of code okay so i'm going to go ahead and zoom in here so you can actually see a lot more clearly let's do it like this all right and let's say that you're the server or let's say that there is a server and you're going to you order let's say tomato soup tomato soup meanwhile you continue your converse convo with a friend so your life basically continues so this is your other code running whichever code is ready to kind of go and then once this uh your tomato soup is done your server brings it to you in this case we'll just say if your problem is resolved okay the the order that you requested if your order is resolved then your server will bring soup your server brings you soup okay if it is not whoops if it's not resolved paste what's going to happen is rejected okay so this is other situation that can happen and your server will tell you like no soup today okay so maybe like these are the two things that can happen either you get soup or your server comes in to you and tells you hey no soup today so these are the two different type of scenarios that can happen now in code we're going to try to go ahead and mimic that and kind of write it but first things first i want to teach you how to write asynchronous code right so if you've ever done a fetch request or api request that's an example of asynchronous code the way to mimic that is usually you're waiting for something to come back to you so the way we can actually mimic that is we can write a set timeout function and what this does is it takes in a function so let's say whatever soup okay and just console let's just console log soup for now console log soup and we'll pass it 2000 milliseconds now what this means is this function is gonna wait for two seconds and then it's gonna say soup so let's go one two and boom we got soup okay let's run it again one two soup so every single time two seconds happen you get soup so two thousand milliseconds is one second one second okay and so in other words what you can say is if you have a function okay so let's just say you have some funk and this function that you have it like kind of prints out soup or whatever you can just pass in your funk like this let's call it waiting for soup paste it in here run it and this code is basically saying hey set timeout you're gonna you're gonna run this piece of code aka this over here and i want you to wait two seconds oh sorry this is two seconds sorry two thousand milliseconds is two seconds one thousand milliseconds is one second okay uh my apologies on that so you say hey i'm gonna wait for some soup and two seconds i want you to print that out so run i'm gonna wait one second two seconds and then boom i get soup let's run it again one two and i get soup one two and i get soup now let's say you have other bits of code so let's say you have some code which is console log you know you you get to the restaurant with your date and so you start the convo with your date right whoever that is you start the convo and then you continue the convo right but now this is the interesting that happens right so watch this for example and i'm going to take this and paste it here so on line 10 you start the convo and line 12 is you it's gonna say still speaking so what should happen well what you would imagine to happen is i'm going to what what i'm what you should imagine to happen is this line runs first then this line runs second and then this line should run third but watch what's gonna happen you start the convo with your girlfriend or your boyfriend whoever and it says still speaking and then you get soup that's really weird right so if i just go and do this and make it really clear this is one this will print out two because this goes in right here and this should be three so you should you should expect to see one two three but watch what happens one and three run first and then two comes out so it seems like if i had to order this it seems like this line of code seems like this line of code runs first and then this line of code runs second and this line of code runs third because this we're waiting for this all right this is like kind of running in the background now let's model this in a more realistic way so in the start you start your convo right you sit down and start your convo and then what we'll actually say is let's call it order soup so you sit down you start the conversation with your partner line 11 you order your soup and then you're still speaking right you continue speaking so let's run this you sit down you order your soup then you wait a couple of seconds and then soup is ready in reality of course the soup is going to take longer than two seconds to get ready but this is just to show you that you can start a request right right on this line is where you basically start your request and then your request is ready at a point some at some point later right you get the data back now when you're dealing with stuff like this with timeout yes you will get back you know kind of what you're looking for but timeout is also not really good it's called it's thread blocking meaning like it will kind of stop you from often times doing other things so when you're dealing with real world data like an api request it's going to return it to you as a promise what you're not going to get back is this timeout thing okay so let's go ahead and kind of model that so let's create our first promise so i'm going to basically go ahead and say const promise one and it's gonna be a new promise okay and this is a promise class we'll talk a lot about classes don't worry if we haven't already you know in in the javascript course if you're watching it in the javascript course there's gonna be a timestamp for promises or if i have it as a video on our youtube channel or sorry not promises with classes go ahead and watch that watch the part with the classes because you'll then really get how like a promise works under the hood because whenever you do new you're actually creating um like a object from a class okay so anyway so promise takes in a function and that function takes in two things it either takes in a or a reject and then it wants you to do something with it okay so now what i'm going to do is i'm going to say set timeout set timeout will take a function and let's just say i'm going to do this and it says soup is ready all right and i'll do the same thing i'll wait two seconds and then what this code will do is write actually inside of this timeout let's go ahead and do this right inside of this timeout so i'm going to do the following so we're going to have a timeout function and inside of this timeout we're going to say is ready and for now we'll set is ready to true so we're going to say hey if the soup is ready and this is how you do ternary operators by the way so i'll show you an example of a ternary operator so if let's say you have a if is ready equal equal true then you know run this um else do this all right so if you have this line of code you could write it in different ways the first thing you can do is actually you can remove this because if this is already true then you don't even need to say equal equal true but if you want to leave it here you can that's not really going to change anything and then what you could do is you could turn it into a ternary operator as well so you could say hey you could remove this and you could do if this is true do this if it's false do this so that's what we're doing here on line 20. we're basically going to say hey if is ready is true then i want you to do hit you know soup is ready otherwise what i want you to do this is where our function ends right and then let's give it two thousand second millisecond wait right here otherwise i'm gonna say no soup today okay so let's just say no soup today something like that and i'll put a little check mark here if you don't have emojis by the way you can get this app called rocket on your macbook all right so now what this is going to do is it's going to run and what i want to do is instead of console.log for promises what we do is we actually will do resolve or reject all right so if uh like if it's a right scenario and you want and it did it correctly then you want to say resolve like so if you did if you made a let's say a api request and you got data back you want to resolve that and return it if you didn't get data back for whatever reason maybe there's a server error maybe the data wasn't ready then you want to reject it so in this case we're going to say go ahead and reject no sub today okay so do this and this is going to be our like first promise that we have uh wrote and i'll remove all of this okay so remember this is to just kind of visually explain it to you how ternary operators work is like this okay so it's right here right this part right here is the condition this part right here runs if you have a true runs if true and this part right here runs if false okay that's how that's how ternary operators work okay so if i put a box around this the term for this if you haven't seen this yet it's called ternary operators so instead of if else condition you'll have this like more specifically it's that like question mark part and the colon here okay cool so i have this promise here and now let's see what happens when a console log this promise so let's see what happens promise one and i'm gonna go ahead and run this and notice what i get back so i'll comment out all of these lines here up at the top let's run this and you notice i actually get back uh something called a promise so wait how is that useful i did this and i'm just getting back something that says promise what the heck does that mean all that's saying is hey you have a promise but that promise has not been fulfilled yet it just started so it started and like i'm just letting you know that it started now i need to tell it to do something once it's resolved so remember it takes two seconds to resolve but when i run this it instantly does promise right so what i want to do is i want to do a dot then and dot then is the special things that a promise has and what that does is if the promise resolves then you can call a dot then and get its value so we can say console log value like this okay and let's run this and you're gonna see first it says promise and then after two seconds it says soup is ready if i make this five seconds so it waits that'll make it even more obvious so it just started and it said promise now after five seconds one two three four five boom soup is ready and it shows up so you can see that this is working kind of the way that we you know expected but this dot then notation for you might be weird but if you have done api requests you'll recall that hey this is that's actually very similar to api requests because that's where you use the dot then thing and that's how you actually pull the value out now what happens if the soup isn't ready so i'm going to go on line 19 and i'm going to change that to false what happens when the soup is not ready well watch what happens we're going to wait five seconds one two three four five and nothing happened what i don't see anything why did that happen that is weird it's because we're not actually catching that mistake okay so let's go right here this is all gonna be one line but i'm breaking it up into multiple different lines so you can clearly see like what's actually happening okay um and so i'm gonna say hey get me the value on success so the dot then is when success happens okay and then there's a dot catch so this is when an error happens okay and so i'm gonna say get me the value in this case and let's run it so watch what happens in five seconds one two three four five and boom no soup today and that's happening because our on catch is actually catching the reject so whenever you have a reject like this that goes into catch and you can actually pull that from the value so let's go ahead and do i'll say error okay and we'll just make it an object error error and here we'll say success message and i'll say success and an object like this so we'll run this and now you'll see this promise will run and then in five seconds it will get get you okay so in this case here it said error no soup today okay and what we'll do is we'll make this function two seconds and what i want to do here is instead of false or true i want it to randomly select true or false so i'm going to put true or false i'm going to make an array and then we're going to index that array if we index it by zero we're going to get false if we index it by one then we're going to get true what i actually want to do here is i want to index it by something random right so i'm going to say math.random and then i'm going to let's actually call math.floor math.floor and in that i'm going to say math.random and we're going to multiply it by 2. okay so this piece of code here will always make sure i either get a 0 or a 1. that's all that piece of code is doing so this way i'll pick a random true or false and so that way it'll randomly either resolve or reject and i'm kind of mimicking a real situation here fifty percent chance it'll work fifty percent chance it won't but that's not how good apis are right good apis work 99.999 percent of the time and there is this tiny bit of time where they break or return some kind of error so that would be a terrible api if it worked only 50 of the time so let's run it and boom on success we got soup is ready okay let's run it again we'll wait two seconds and we got nothing so what happened here we might we must have had a weird error oh no it just took longer than two seconds apparently and then boom error no soup today right and i can keep running this and it'll randomly keep selecting and then it'll just check hey if it's ready is true run this and if it's false it will run the next statement right because all it's doing here is putting either a true right if i put a true here and i run you'll see that i'll always get and let's make the wait one second so we don't have to wait that much so if i say true it's always going to give me back success and i can run it a million times and if i hardcode false here you'll see that it'll always give me back error so we're just going to put israeli here because israeli is either going to be true or false okay great so now you can see how our promise is working and this promise is extremely similar to the promise that we had in our you know the dog application we made and the superhero application we made and actually let's go ahead and reference that so so go let's go back to our javascript course and if we go to uh dog random and we look at the script right notice that we're doing something very similar here right we have this fetch request and let's actually bring that in here so we can actually play with it so i'll run this and watch what happens okay and i'll console log this for you console.log and you'll see that'll actually say it's a promise and to make it visible that i'm console logging this i'm just going to say fetch like that do it run and you can see that it's telling me that hey the fetch promise has began it has started but now i actually need to do something with it so what i actually need to do in this case is i want to do let's do let's do this okay so i'm going to do fetch and then on another line so like normally i want to do this but you see how the line is running so long that it's going to be too long so i'm going to break it up onto a new line so i'll hit enter so we're going to say fetch dot then and i'm going to get the response and we're going to get the json response back now here's the interesting part if i console log this part here you're going to notice that this actually is also a promise so let's console log this part and i'll just say response and we'll run it and notice that response is a promise response json is a promise too so when you run this call majority of the times you're sending another request and saying hey can you please turn it into a json and then that is also an asynchronous task that could take multiple seconds before returning so it's kind of like this invisible coding that you're doing here right so we have the fetch promise once it's once it resolves once the fetch promise resolves i want you to run the response promise with the json and guess what guess what you're gonna have to do in order to pull a value from that promise you're gonna have to chain it with another dot then okay so we're gonna have to go and chain it with another dot dense i'm gonna go down here and we're gonna say another dot then and we're gonna say data or json or whatever you're gonna say console log data okay this this variable here does not matter you can call it whatever you want and if you ever hear that that's just me using a focus app to keep me focused to keep shooting this so if you ever hear that i apologize it'll happen every 20 30 minutes or something like that just ignore it all right let's run this okay so what did we get we got oh yeah we gotta do not console log all right so make sure to remove that console log that we had remove this part right here and just return response.json like this and then do data and call data on this so let's run that and now you can see that we actually got back the random dog image that we're looking for okay so when you're doing fetch remember fetch is a promise and then you do the dot then response and then that's also a promise okay so this is a promise that's a promise okay so there's like everything is a promise all right and then within here within right here you you have access to the actual data right there you actually get the real real real data and you can do something with it okay so that's why that's like a little bit of a funny reason why that happens but but underneath the hood it's a promise now i'm going to teach you something that's going to make your life a lot easier moving forward and it'll also help you avoid having to do dot dance and dot catches because they get pretty annoying as you can see you'll have to keep chaining and this is essentially one line of code right if i actually remove the wrapping or whatever like this is not how you want to be writing your code honestly with like that many.then.then.then.catch because then you'll have to attach dot catch they'll catch any errors that happen and honestly it becomes kind of a nightmare and so what you want to do is you want to avoid using this syntax and you want to use the new syntactical sugar that like es6 and beyond provided for us and that will make our life incredibly incredibly easier and so i want to introduce you to you the concept of async await okay it's incredibly easy it's not hard it will make this part a lot easier it'll seem a little foreign and weird the first time you look at it but once you get used to it that's the way to go and your code and your logic is going to become a lot easier okay so this fetch request that we're doing here right we want to avoid all these dot dens and make it simpler so let's create a new function and we're going to say get get dog whatever and now what we're going to say this is the most important part is whenever you want to use a weight you're going to need to use async okay so make sure so what we're going to do is just pass in the async keyword here which just says hey this is an asynchronous function so this function uh will run out of order if this function will need to communicate to the internet or get some type of data or we'll need to wait uh half a second a millisecond a couple of seconds to get this data async just means whenever you have to like speak to some website or some database or something you're using an asynchronous function there like 99.9 okay so whenever you think api requests think async whenever you think i'm going to do a fetch request think async functions whenever you have a post request async function all right so i have this async function over here now with this async function um what i want to do is i want to say fetch response is and i'm going to fetch this image okay the only special thing that we're actually going to do here is since this url run real url runs really long i'm just going to say const url and pass that in so we could just actually say url and then i don't need to make this this huge we can make this much smaller i can make this bigger here so i have my url and i'm just going to fetch that url and then what i'm going to do is i'm going to get the data and here here's the interesting part so for this what you want to do is you want to pass in this keyword a weight all right this is very important a weight a weight is the same thing as you doing dot then and then saying respond something okay a weight will make your life a lot easier so we're going to say oh wait then next line i'm going to say const data and i'm gonna say await response.json so look at that we have our fetch requests and then we have our response.json and that's being stored inside of data and now you can use the data variable kind of anywhere you want inside of this function it'll work everywhere and it'll work normally and then you don't have to like you're not forced you're not forced to like code inside of this then method like that's kind of ugly and annoying and now you could use console log data so let's try this and run it okay and you can see that um i got back my oh actually sorry we didn't call this function yet that's why i was like this was something weird is happening all right let's run this and you can see that we're now getting our our random dog right over here okay i'll comment out this fetch right here let's run it again and you can see that i'm actually getting back my dog so this syntax is really really really clean it's a much much much better syntax so in order to use this you have to create a function you cannot use so here are the rules rules for using async await one you must create a function okay you cannot use async outside of a function it won't work so you can't like do this here or something like that that it won't work like that so you need to have a function all right you can't like use a weight like this you need a function that's called async and then you can do all your jiggery pokery all right that's step one two you must use must create um let's use keyword async use the word await so anything you're waiting for you just await it right so here we're gonna await this promise and then we're gonna await the second promise and that's it those are the only two promises right this is a promise and then this is a promise and then once you are done waiting for them you just get back the actual data and then you can do whatever you want with it right so that data gets stored here it's a much much much nicer way to write it so try to do it like that now i'll give you a little exercise see if you could do this soup example that we just did see if you could do this but using async await for this promise right here rather than the dot dance okay so see if you create a function let's you can call it whatever you want like get soup or something right and then see if you could turn this piece of code into this all right so take like five seconds give that a try so i'll give you five seconds five four three two one all right if you haven't paused it or you pause it whichever one hopefully you gave it a try let's go ahead and now do this together okay so i'm going to say const get soup and we'll do this way and then here i'm just going to say const soup is a weight promise and then we can probably console log soup and let's see if this works okay so get soup and i'm gonna run this see i ran into that problem myself i forgot to put i mean and what's nice is that it actually gives us a nice error a weight is only valid in async functions and at the top level body of modules so let's go ahead and put async and run this so boom there we go error no soup today right if i remove a weight watch what's going to happen and if i run this it's just going to say promise right here i'm not going to get anything else i'm going to comment at every other console log statement so we don't get confused that's it it just says promise and then that's kind of it but the only way to get the data out of it is you just say oh wait and now that same thing that was initially saying promise now we'll actually return you data okay i don't know why it's taking that long why is it taking forever okay there we go soup is ready perfect let's run it again and let's see what it says this time soup is ready let's run it again mmm so that's weird how come sometimes it says when the soup is if i run it if soup is ready you know it says it correctly but if soup is not ready it returns nothing isn't that a little sus what's going on so what's going on is now you have to try catch this so if you get an error you're not doing it you're not able to do a dot catch like how you were before so that's what's happening we're getting in a reject reject and reject is not going to get stored in here so what you want to do is you want to say try and you want to wrap this in a try catch so what i can do is i can say try and we try this and we console log and then we do catch okay and we just let's just say console log soup and let's see what happens soup is ready let's run it again soup is ready okay so see we got something that was an error interesting so maybe let's pass in let's catch the error here and let's see if we can print the error out so let's run it and let's hope we run into an error and let's see if it actually prints out our error or not okay soup is ready soup is ready boom there we go no soup today so if you want to catch this is how you catch with async awaits in tax so the catching is not the prettiest but i will just promise you this that if you start using async await a weight will make your life a lot simpler and they'll simplify your code a lot and then it'll be much easier for you to deal with things when you're doing asynchronous programming so a weight is really like the way to go all right now what if we want to take this example further meaning if you promise the waiter or the waiter promises you that they're going to bring you soup well if they bring you soup then that's good now what how can we take this even further if the waiter brings you soup then maybe you also pay the waiter okay so let's let's write these up here so if waiter brings you soup maybe then you tip the waiter and you you pay for soup on the other hand if you don't get your soup so this is like what happens if the situation is resolved but if it's rejected and it doesn't go through and your soup is declined for whatever reason or they didn't have soup then maybe you you know you're you're a crappy customer and you leave a bad review and uh you give no tip all right so how are you going to actually you know write that in code so see if you could give that a try and see if you could take this or the dot down one farther and see if you can kind of um add in all of this sauce like in terms of adding in a bunch of these things okay and just you could create arbitrary variables like uh tip for the waiter so you could create a variable called tip you could create a variable called pay and you can just kind of set what happens to that but the main thing i'm looking for is you know where to write those lines of code okay that's mainly what i'm looking for so give that a give that a try and then we're going to do this together so i'll give you about five seconds so go five four three two one all right let's do this together now so i have this you know so we have either whether it's resolved or rejected now everything that's resolved in my mind is going to go inside of this try block and everything that's rejected is going to go inside of this catch block right so say we have you know cons and and maybe we can give a ra rating you know why not so let's say we have let rating we define another variable let tip and we define another variable let pay okay and if this if we got our soup as promised well then what i'm going to do is i'm going to say i'm going to increase the rating to say i'm going to say hit i'm going to rate this place five stars and i'm going to say the tip is you know maybe 20 and i'm gonna pay you know ten dollars or whatever for the food and then on the other hand if the and then for review maybe i give a five star review here right but on the other hand if i don't get what i want then i'm going to leave a rating of one star i'm going to leave no tip i'm not going to pay anything because while i didn't get anything and then review i'm going to leave one star okay so we can kind of do that and what we could do is actually we can even turn this into an object i'm thinking something let's do that actually uh const data okay let's just say data because that's how usually you get data rating is zero and tip is zero and p is i'm just gonna say zero i mean it should be kind of null okay because those are data types as well null and undefined so you could do null or undefined if you want to be like really accurate because these aren't defined yet actually all right so pay is zero and review is zero and let's actually use those data types afterwards and i'm gonna remove this and then we're just gonna say data.rating data.tip data.pay data.review and then we're going to do the same thing here so now it's actually even looking kind of like a real api which is interesting and then at the end of all of this whichever one we're going to return data and return data okay the try catch block so now if i do soup and i'll do console [Music] log now let's run it and watch what's going to happen so promise is running soup is ready all right why didn't we get our data why did we not get our data let's see every console logging it we are are we running yeah we're running at soup interesting yes this is the magic of uh asynchronous information right that's the problem with it so i can get caught up but i can get caught off guard with it too even though i've been programming for years so it is complicated see here if i actually run this it's not going to work because this function runs instantly and then i'm sitting there and waiting for the data so i actually have to await this data and get the results back because it's a promise and i need to retrieve the data but i can't just await it right so i have to actually so what i need to do is this say i want to remove this console log on line 47 and i still want it to actually read the console what i want to what i want to do is get soup right i want to actually call this is a promise getsu is a promise right and it returns when we run asynchronous function it's going to return uh return a promise okay so in order to get this function we can't just call it right when you just try to call it it's not really going to do anything so what i want to do instead is i want to do dot then and i'm going to say value and we'll console log the value that we get out of it let's run this now and now you can see the soup is ready and we got this data so we're go we're actually got the data back that we were looking for right and then here i can actually see that the rating is five tip is twenty percent pay is ten dollars reviews five stars if i run this again and oh no soup today well guess what rating is one tip is zero pay is zero and review is one star so that's how that's how this works hopefully like this makes sense for you on you know kind of how this how you actually do this how all of this works so here's a simple trick for you to remember if you're struggling with promises or you've ever struggled with promises or i promise you will struggle with promises you know in the future if you ever so let's just do this okay so see say if you console log get soup and you're like how the hell do i get the value out of this why can't i extract the value out of it if you ever read that something says promise there's only two ways to ever extract the actual value out of this it's only two ways either you await it which you're going to need to wrap that in a function that has async you're either going to need to await this or you're going to need to dodge then this all right and then just do value value right return the value so those are the only two ways you actually get data back from an async function or any type of asynchronous task or asynchronous promise even if you make a sum function and let's say you make a async sum function that takes in two values a comma b and returns their sum a plus b if you call this function right watch what's gonna happen so if i call this function i pass it one comma two and then let's just say sum here and i'll run this even if it's something simple like this watch what's gonna happen when i run it i ain't got back the results son what the hell why not get back the result i clearly defined this there isn't even any asynchronous parts to this i'm just clearly saying sum up a plus b why are you playing games with me but because we have the async keyword it's an asynchronous function which means by default it returns as a promise so the only way to extract the value out of this you give it a try i'll give you five seconds five and you can pause the video five four three two one only two ways either you call a weight or async my friend so let's go ahead and do async here uh or sorry either await or dot then so let's do then and we'll say console.log or sorry we'll say value console.log value just like this and now let's run it and you're gonna see that we got back to three that three we extracted right away so that's how async functions work and any type of async stuff that you have if you want to extract its value you're gonna have to start using dot thens to retrieve value for them especially if they return data like this all right so hopefully that gave you some examples of how this works all right this probably isn't going to solve everything for you but it's going to give you examples and what we're going to do is in notes here in your javascript course that you're going through right now in notes i'm going to create a file and i'm just going to call it async let's call it promises async awaits it apis whatever okay and uh let's uh let me call it dot json dot js and i'll paste in all these kind of notes for you as reference point so you don't lose them so if you want to go in notes you can look at it okay and then here's another note for you that lance has created these are really nice and really helpful it kind of goes through some of what we've talked about and plus it asks you lots of questions and gives you lots of written notes for promises to practice them more and to really understand them more right so he walks you through hey how do you get the promise variable how do you increment the waiter money how do you you know how do you do the async await plus try catch he has an example that's like an actual working example and if you want to run any of these examples open up a new rupple copy paste copy this code paste it in there and it'll work and how to actually get this data okay so here we're doing return user and just remember since this is an async function you're gonna have to actually extract its value out of it so we have those exercises those notes here for you if you want to get more practice with the javascript course if you're not in this javascript course or whatever make sure you're watching this on youtube just type in javascript and you should find this all right so with that said i hope you enjoyed this i hope you learned something about promises and i know it's confusing but if you really stick to it and keep practicing you'll keep getting better with proc with promises and if you can just really work hard and understand this concept of promises now your journey to becoming a developer will become much much much easier because there are so many concepts that are asynchronous when it comes to web development and non-understanding promises will always get you in a lot of trouble all right with that said i hope you enjoyed this and one last thing i i said i was going to talk about null and undefined you could make these like you know null types because if you didn't give a review it should really be type null right and uh let's just say we don't define any values there and if i run this i should get back like null types if uh you know my soup is order right no no no no okay which which makes sense because by default why would you give a rating of zero by default right that doesn't make sense that would mean you literally go to a restaurant rated zero you actually paid zero but you haven't been to that restaurant so it's actually null it's not it's non-existent or undefined either you can use either one of those and that'll represent a similar thing in this scenario so null is a special value and undefined is usually also a special value all right with that said i hope you enjoyed this let's keep on going let's keep on learning all right let's take your api skills up a notch we're going to build this weather app right over here i can type in arizona hit search temperature is 90 degrees max is 95. i can type in chicago search 91 max is 94 and min is 88 and it's clear right now or i can type in las vegas where i actually just was at and i got very very sick playing a chess tournament wasn't because of the chess tournament it's just vegas as a cesspool of crazy humans doing wild things and so got a crazy sinus infection but now i'm recovering so anyway it was hot it was 120 degrees there when i was there so there you go this is the app this is what you're going to be building right now with the api knowledge that you've learned so let's go ahead and set some ground rules for this and let me actually also show you what you actually need to know in order to be able to build this okay so first thing we're gonna do is let's open up a new tab and let's go to replay.com we're gonna just open up one with html css javascript okay this one right here and let's just say api weather okay and hit create replica cool so this should just be empty right now and then let's go over and open a new tab and we're going to go to rapidapi.com just type in rapidapi.com now once you're on this website sign up i am currently logged in okay so i can log out but like sign up with either github or google or whatever it's free just sign up and then it'll bring you to like rapidapi.com all right on here just search for api so we're going to search for a weather api so i'm going to just type in weather and hit enter and you'll see over here that it shows open weather map this is the one that we're going to be using this is the easiest one to use and why we're using rapid api is because they make using apis really really really easy so let's use them okay they're freaking awesome so let's click on open weather map api and i'm going to zoom out just a little bit so you can see you can see a little bit better here let's drag this back now you can see our api request is getting set up i'm going to hover over this where it says node axios whatever we're going to switch that to just javascript fetch because we want to see how to do that request in fetch and this is already kind of showing us how to retrieve the data from this open weather api okay it's putting in a key it's making a request to the open map open weather map api and it's trying to pull some data from there now there's just a couple of things we're going to need to do so in order to even use the free one just we're gonna need to subscribe to test it doesn't take in a credit card or anything like that so just hit subscribe to test and then choose the one that's a zero dollars okay this is not gonna ask for a card it's just free just hit the subscribe button so we're just going to hit subscribe click back on api documentation all right perfect let's go back to the javascript fetch mode all right and just clean up some of these things over here so for example this over here i'm going to replace that with chicago so you're going to notice that it actually updated that dynamically in the url that we had remove this all the option optional ones just remove them double click and remove double click and remove double click and remove imperial you can leave that and then xml double click and remove so your your url should look pretty simple fetch url should look pretty simple right now okay so if i zoom into this should basically just say community open weather map blah blah blah and then units imperial okay and the city should be chicago for now let's see what happens if i actually try to run this so let's go up at the top let's hit test endpoint run and boom you see that it's actually already giving us back a result okay so let's scroll down here a little bit and you can see we have a result here so we got 13 items back and i'm gonna just close all of these items that it sent and it sent us back a couple of you know it's an object with like a bunch of different properties right so we have a cod a name which is chicago the id of this specific place what time zone it is in all right whatever this dt thing is clouds wind visibility the stuff that we're going to need is we're definitely going to need to pull from weather so we can pull things like main it's like clear okay because if we go back to our app our weather app you can see that we have this clear here so we're going to need to pull this and then after that we just need to pull these different three different ones so temp min temp and max temp so if i go back to rapid api where is min temp max temp let's take a look at that so let's see if we can find the mint max temp all of that so i'm gonna look inside of main and here we have temp min temp max and temp so we have all of the things that we need so it seems like we get them back in this object and then the key that it's in is main okay so for example if i was to imagine what i will be doing is i'll get back some something like data and then from data i'm gonna have to get access to maybe the first data point or whatever and then i'm going to need to get access to main and then within main so main right here and then within main i'll probably need to get access to temp just like that so that's probably how i'm going to get that specific temp that we're looking for okay so let's go ahead and try that out let's copy that code snippet so i'm going to basically copy this entire thing the other way you can copy it just hit copy code go over you don't need to spam it like me being just an idiot go back here and let's go ahead and paste that all of that okay so this is going to be like a bunch of code that got pasted but options here is really what you you so when you're using fetch you can pass it it can take in a url and then it can take in options and then inside of options you can pass it things like you can pass at things like what's your method so this is a get request and then you can also pass it in headers and you could pass it in like the specific key that you need like an access token because you're gonna need that and then who you're sending the request to all right so that's what options really is and if i try to run this let's see if we actually get back any data and boom you can actually see on the bottom right i just get got back all the data so dot then console log response now let's see if let's see if we can get from that response right so this is really data data and let's see if i can do data dot main and let's see if that does what we wanted to do boom it actually just got us back what we were looking for after i did data dot main i didn't even have to do data zero dot main and i'm getting back my temp my temp min and temp max and those are the things i need right what was the other thing i need well i needed that thing where it said clear where did it say clear it said clear under i believe weather so let's go check again so when i ran the results i have weather weather has an array so i have to probably like grab the zeroth item from weather so i'm imagining i gotta do something like this data dot weather of xero dot main i imagine i gotta do something like that and then that'll get me access to that'll get me access to what i need because data will get me access to this whole thing whether dot weather will get me access to this right here whether xero will get me access to the specific array right there and then dot main within that will get me access i believe to this key right here uh this value right here clear so let's give that a try and see if that gets us what we need dot weather of xero dot what do we say dot main clear boom so you can see exactly how we can actually get back uh how we can get access to the things that we need this is how you can make that request so hopefully this sets you kind of in the right place to get started with this exercise and i'll show you now the project that you're going to be building okay so then you have all the tools that you need to be able to complete it so if you go to your javascript course main folder right main file right over here here's where you will find your weather apps if you actually go down you'll see it'll say weather app right over here okay click on that and this is your weather app that you can use and if you go inside of the exercises for this weather app so let's go to projects let's go to weather app let's go to exercise and this exercise here okay we'll walk you through exactly how you're gonna do everything inside of this weather app now you can use this url here or you can use the url that the way that i showed you on rapid api for bonus points try to just use the rapid api way um i think it's easier so then you don't even have to go to open weather app weather map and create your own api but whichever one is simpler for you do it that way and here it'll walk you through exactly how this project works okay so it's like hey you know get the weather data so create a function that essentially runs and gets the weather data um you're gonna need to write something so if we open up the app on this right hand side let's go to the weather app you're gonna need to have the search input field where you're gonna need to extract the user city from and then pop that into your url and then search it right so then when they hit search it pulls all the data this weather maps api problem is pretty similar to the superhero app that we made so i don't think you should have too much trouble honestly doing this this is not shouldn't be too challenging for you if it is it's all good we'll just walk through this together and then you have two functions here okay you have the search city function all right and then you have this show weather data function and search city what this is going to do is based on whatever the user has put in here it's going to extract the value that's what search city will do and then show weather data will update data on the dom and you will have access to what those variables are as well by those variables i mean the dom you're going to need to manipulate the dom so check out the html on where you actually need to go and manipulate the dom also to make your lives easier i have put all the divs you'll need access to all right so your city name weather type temp the these are the div ids okay so these are the actual div ids if you go into the index.html file you'll be able to see those specific ids if you look for them like city name weather type men temp max temp right and that's where it goes those go right there when you change their inner text so all you'll need to do is change their inner text now to get ready for this project what you need to do is this so for your file do the following in your index.html go back copy the index.html from from this exercise file right from the javascript course copy the entire index.html file go and replace it paste it over into the new replit that you created do the same thing by going to style.css and copying this entire thing and going ahead and pasting this so your styles should showing be showing up and then for your script well what you could do is you could copy pretty much everything that's here and then maybe just paste it underneath for now okay so that way you have kind of the piece of code that you and i worked on together so you have that already okay that's just to show you how to pull data and then the rest is up to you because this should already show you enough of what you need to do and really put you on the right track and then it's your job to like go okay how do i retrieve this data and how do i actually like have this data show up here right show up into the right places because this piece of code already does that for you so have fun give this project a try and see how much of it you can get done all right if you get this whole thing done huge props if you don't don't stress too much we'll walk through it together all right with that said i'll see you shortly all right now let's get to work and let's solve this together let's build this weather app now we're just gonna do it from scratch this is the only piece of code that we had right and i got that from rapid api i went to rapid api signed up for open weather map and then basically i was able to get my data points and then it also just makes a code snippet for you which is really nice just make sure to choose javascript fetch and then you can copy and use that exact code snippet so it makes your life a little bit easier now i don't even need this api key right over here because i'm using a rapid api one so that makes life even easier so what do we need to do here we need to get the data based on the city that the user types well we're already able to fetch based on the city right so if i see my fetch request here i can see that i'm passing in chicago so i get chicago data if i run i get clear okay let's remove this here and i'm just going to leave it to data let's run this and you can see that i get back all of the data related to related to chicago right and i can even see name here so let's just put data dot name and let's run it and you can see chicago well let's say i change this to marina del rey and let's run this okay i got some errors right there marina del rey let's put percent signs let's see what happens okay no problem no problem let's go back to open weather map api and i just want to see um when you type in marina del rey how does it write that in strings randall right ah percent 20 20 20 just like that so that's how you represent a space in urls as percent 20. so that's marina percent 20 del rey cool that's a city yep so now it's pulling it's searching at marina del rey and i can also look up hollywood or whatever i want right and let's hit run and it'll pull hollywood and retrieve its data so we already know that whatever we want to put in here it needs to go right here so this is where like you know in my mind if i'm looking at this i will immediately convert this into a template literal and right here okay so const let's just say let city equals whatever city equals whatever in my mind this is where the user city is going to go so i'm going to go user city because i know that it's something that the user is going to give me it's not going to be actually hard coded into my url so now if i give let's say hollywood then when i search it'll say hollywood right here if i give detroit or whatever it will get me detroit yeah so now this is this is kind of doing what i wanted to do we have yet to retrieve the data what we want to do is obviously pull the data dynamically from this user input box when the user types in the data right so if we look here we have city name we have weather type city name is probably where i imagine you know we're gonna pull the the value from that's where the value is it's in this text box so you want to pull the value out of there so let's just say las vegas and then we want to pull the value when the user hits the search button so we want to make our function where when the user hits search we can extract this now if we go to our index.html you can actually see that on the on click method for this search button we already have search city function that gets called so every time i click this button the search city function gets called so let's see where our search city function is it's right here okay so now let's go ahead console.log city and it seems like we're already pulling the value out of it right here and we should be able to see the value so let's type in las vegas let's hit search let's hit run i guess let's type in las vegas and let's hit search and you can see that we pull las vegas so by searching city we're already able to pull the value now we have this other function which is called get weather data so i'm just going to put a const right here this is really the you know this piece of code that we wrote up at the top okay it's basically that because that's where we're really making our api requests i'm just going to first cut my options and i'm going to pop in my options right here because those are like my keys and all of that stuff and then i'm going to cut my fetch request and we can delete this user city because we don't need that anymore and boom we can put our fetch request right get weather data will take in a city so now we'll just call this city right over here because we're already grabbing that from the argument right there i don't need this url right here anymore because we're using rapid api cool all right so fetch fetch will be the city that we're fetching and then it will return that data okay so right now we're console logging the city names i'm just going to say console log data so search city is going to run and then what we can do is we can call our get weather function and pass the city that we got so let's go ahead and give it the city okay so let's see what happens now let's say i hit detroit and let's hit search and you can see i just got all this data on detroit right and it i can even see that the name here says detroit now let's type in las vegas boom name las vegas and i'm getting all this data back so it seems like my button is connect my typing being able to type is connected when i hit search it's extracting the data it's sending that over to get weather data and then that knows how to make a fetch request and retrieve the data back and the last thing really that we need to do is really grab that data and throw it onto our dom right like actually show it onto our screen to show weather data so this is in this method in this function right over here show weather data we just need to update the dom elements so basically what i want to do here is i'm going to take these guys and update them okay so for example what do we have temp right so let's say document dot get element by id and temp and we'll set its inner text to let's just hard code it to 86.6 and then i'm just going to call show weather data right underneath here and i'm going to give it i'm going to just give it some dummy data right now okay so right now we're not really going to pass it anything useful and let's go las vegas search boom and you can see that my temp was 86.6 okay so i'm just hard coding this right now but we're going to need to dynamically pull the temperature and then pass that temperature right actually past the data and not just kind of the silly thing we're doing here so now what i want to do here is i want to return this data so let's just do this so this way i'm returning data and the next thing i can do is i can make this function async and why i want to do that is i'm about to run asynchronous code and i need it to run in the right order because i want to get the data first and then i want to show the data but if i try to run them both at the same time without doing this what's going to happen is this here is going to run first because this is like synchronous code and then this here is going to run after because this is asynchronous that's not what we want we want this to finish first and then we want this one to run okay so i'm going to say async and we're going to say const data and i'm going to say await okay and we can pass this data now to our show weather data and then we'll console log the weather data and see if we're actually getting back anything and i'll just say a cookie here so we can see that it's the actual thing that we're getting so let's run this let's type in las vegas hit search i'm getting back undefined interesting oh because we're not returning anything so actually we can put a weight here and we just got to make sure we return this fetch and now a wait will grab the [Music] grab the data and then we'll store that data and then we'll pass that data so let's try running this now let's see what happens okay las vegas boom now it works and we get our cookie emoji perfect so we grab that data and then we show the weather data okay so we get weather data and then we show weather data this is the right way to do it and now that we have access to that data remember how we want to get access to our temps right so let's go ahead console log and we're going to say weather data dot i think if you do main all right let's see what main gets us let's go las vegas again and main gets us all the stuff that we need so it gets us the temp so we could do main dot temp here and i can just copy this and i can paste that right there let's hit run and now you can see that we have 106 degrees temperature automatically being updated right there now we just need to do min temp and max temp and city name needs to go here as well so we're just going to have a bunch of document.getelements by ids now so let's go ahead i'm just going to paste this line five times because i have one two three four five dom elements that i'm going to need to update so one of them is obviously going to be temp so let's just say we're good with temp the next one i'm gonna do is a city name okay so we're gonna go and see i think it's literally called city dash i could be wrong city name yeah i think that should be fine i think so we'll see see if this does what we wanted to do and let's just do weatherdata.name so let's try this let's go ahead las vegas let's hit search and boom las vegas perfect so that worked next one is this right over here how did we get clear again let's go check so we're going to do dot weather of xero dot main and that'll get us what we need okay so we're gonna do dot weather of xero [Music] dot main and this is going to get us our this is going to get us what's the div called div is going to be called weather type weather dash type and then we have temp min dash temp and max dash temp so let's just do both of those min dash temp max dash temp okay and then in order to get those i'm gonna just need to do temp underscore min temp underscore max i'm just looking at this right here temp max and temp min okay and now let's give this a try and i think the entire thing should be working so let's go las vegas hit search and we can see las vegas clear temp men temp maxstamp boom that was slick can you believe we just did that right now like we were speeding through that i was like what 14 minutes with explanation we're going fast so let's go chicago hit search clear chicago temp mint max temp right let's type in i don't know that should probably break oh crap that's working so i guess you could type in cities or states maybe i'll try illinois beautiful so it works kind of all around let's check california and just general nice so look at that right it's working really really well it's able to pull the data fast it's able to show the data and if you want to move all of your code from this into the javascript exercise page you could do that as well just make sure you you know command it copy this and go all the way back and then just go into this exercise one right and then select it and paste everything over it and you should be good to go right and then your exercise file should be working so you should be able to go to your project exercises you should be able to click weather app and then it should be kind of working in there for you okay even if right now it's it might be broken there you go so now if you go to weather app right over here it should pull up and once you put your javascript code the exercise one should be working and then the solution one is of course the final version so that's you know that's always gonna be up and running so there you go that's how you make your own weather app hopefully that gave you a clear understanding and everything makes sense and hopefully you enjoyed it and i'll see you soon all right i hope you're having as much fun as i'm having now let's move on and talk about classes so how do classes work in javascript open a new tab let's go to replic.com all right replit rep lit.com open up html css javascript file and we're going to say a lesson and we'll talk about classes okay all right so how what the heck are classes how do they work so classes are you know any time you've seen okay for example uh anytime you've done a dot method on something right that requires you know about classes so let's go into our script.js here so i'll give you examples of where you're using classes where you didn't even realize that you were all right so when you say new promise when you say new promise you're using classes here okay where else are you using classes remember when we can have a array of nums and then we could do numstot push well guess what you're actually working with the class you're working with the array class and that happens to have a method called.push and we'll talk about everything too we'll talk about methods okay we'll talk about properties properties we'll talk about classes okay that's the main topic right main topic is classes and there's all these things all right so we're going to be building this ferrari right over here now let's if you look at this ferrari here right what do we have we have and excuse my terrible photoshopping job but i'm not a photoshop expert i'm a developer all right um that's what i'm that's my skill not photoshopping so we have this ferrari here not fiat because that car sucks so here we have our ferrari and it will have this these these are the properties that it'll have okay so you'll be able to do car.name car.model car.wait and classes are very similar to objects if you learn objects you know you you you're kind of in a you're in a pretty good place like you're not going to be too confused to as to what is happening over here now uh we have this now what are the other things that we actually need to know about this right we have all these properties if you look on the methods well look at what kind of methods we have we have car.start we have car.drive we have car.break and we have car.stop now those are all the anything with the dot start and the open close parens like that those are called methods okay and those are basically like functions but anytime you have to do car dot start then it's just going to be called a method okay any any function that needs a dot is a method okay that's another kind of way to remember it and then properties are where you're not calling the function with open close parentheses so just car.name is ferrari car.model is whatever 500 car.weight is 850 kg car.color was supposed to be red and i photoshopped over it and i made it white so whatever color is red just imagine it's a red okay so we're gonna go ahead and build this thing and we're going to do it in a class-based way so we can actually uh model model this okay and then you'll be able to create multiple car objects from it so let's go ahead and do that now all right so there we go so i'm just going to leave this over here so you can see it the entire time okay all right so i'm going to go ahead and do class and we're going to do class car and we're just going to do this all right now we're going to need to create a constructor and a constructor is really going to have like the you know like what are the initial type of arguments and things like that we're going to have so you'll also learn about a new keyword and it'll be called this alright so i'll show you now so we're going to have this dot name okay so the car will take in the name it will take in let's say a color and honestly that's kind of it i don't want to deal with model and weight yet so i'll just take in a name and a color okay for now or maybe it takes in [Music] top speed or something like that speed all right and then we so this this dot name will be name this dot color will be color and this will make more sense once we actually call this object okay and this.speed is going to be whatever speed you pass in so now let's create a new object with this class so i'm going to say const car or ferrari is and we're going to say new car okay so note this new car how we're doing this new so other things you're going to see new with is new date okay so data is a class you're going to do new promise promise as a class okay and we're going to pass in our arguments here so for name i'm going to say ferrari for color we're going to say red and for speed i don't know i'll say 250 top speed and i'm just going to console.log ferrari and let's look in the console and see what we get and boom we just got a car object right there and it says the name is ferrari the color is red and the speed is 250 right beautiful so this is how you will like create a class and create a constructor that will like initialize things instantly now this part this is the keyword that throws a lot of people off like what is this what this refers to guys is you know how we do uh the the name well this refers to ferrari so now when i do so watch this right so if i do ferrari dot name and run it i'll actually get back the name ferrari okay so let me remove the other console log just so we can see ferrari now if i remove this dot name watch what happens it says undefined okay so this here in this case becomes ferrari ferrari.name [Music] and we set its name to the whatever name was passed in so say it we had passed in ferrari so then it becomes ferrari like this so it goes ferrari.name and sets it to ferrari okay so in other words this argument gets passed into name and name is the variable that goes right here so that's going to be ferrari and this specific ferrari object that we just created that is referred to by this so everywhere we said this it's being replaced with the word ferrari all right that's what this does all right so if i now go this.color and run this let's go console.log ferrari dot name and then we'll do speed run this and we get ferrari red 250. okay so you can see we've already created three properties that this has okay so these are these are properties properties okay now we're going to go ahead and create certain methods for example let's create a method that's um you know car.start or car.drive okay um car dot break so let's say we have let's say we do car let's say we do drive all right and let's just say console log just drove two miles okay now what we can do is we can go console.log and i can say ferrari in this case i don't even need to console.log it because console.log is inside of the drive method so we can actually just say ferrari dot drive open close parens and when i run this watch what's gonna happen boom it says just drove two miles okay so that's the drive method all right let's do car. let's do break method right so how are we going to do break let's say for break we just want a console log and we want to say came to a screeching halt so you try that and see if you could call dot break take a few seconds this should take you only five or seven seconds to do yourself it's going to be only one line of code just like on line 18 and then you should be able to refer to ferrari dot break so give that a try make sure you're practicing with me the entire time so i'll give you five seconds five four three two one okay let's go so i'm going to go ahead here and say console.log say uh coming to a breaking come breaking coming to a screeching halt or something like that right let's hit run and let's do ferrari dot break breaking coming to a screeching halt there you go okay and uh what are other methods right so we have methods like stop so that is probably like car the car coming to a complete stop so let's say that the car starts off with like a speed of uh okay so let's say we have a current speed as well so we'll go this dot in everywhere we have speed let's say this is we we change this with the top speed okay so i'm going to right click rename all the occurrences i'm going to say top speed so maybe this is passing in the top speed just to make that very clear now we'll have this dot current speed is going to be zero and start all right so whenever a new car is created well it isn't driving right now so it'll be zero but then let's say we start driving the car then maybe the speed goes up by 10 mile uh 10 miles an hour or something yeah so how we could actually do that is in our drive method i can just increment this dot current speed current speed by 10 okay and that just increase the speed by 10 and we'll say console log and i'll say driving driving at and we'll put this dot current speed okay so let's hit run and now you can see it says driving speed at 10 miles an hour so now we have a new property called desktop current speed so i can actually go ferrari dot current speed and we can see that oh no sorry it's not a function so let's run this again it's not a method so current speed right now is you can see undefined oh i'm sorry the and if the speed here is undefined because this is called top speed my apologies but if you if you console log dot current speed you can actually see that it says it's currently 10 miles an hour right so let's run this and you can see it says 10. okay i'm gonna comment out all the other console logs so it doesn't get like super confusing as to what's happening and i'll console log this just drove two miles an hour as well right so it says driving speed at 10 miles an hour and let's console log before we started driving the car as well so in the start you can see the speed is zero right here right if you look we see that the speed is zero right there right then after we drive you can see that the speed is 10 miles an hour well what if we do the drive method again what will our speed be can you guess take five seconds and try to guess this five four three two one okay let's see if you guessed it right beautiful okay nice if you guessed 20 because it increments it by 10 and if you do drive multiple if i do drive two more times what is current speed going to be at this point take a guess i'll give you five seconds five four three two one and it's gonna be 40 miles an hour okay driving speed at 30 miles an hour driving speed at 40 miles an hour so the car is getting like faster and faster now what we could do is we could kind of get fancy and we could do a set timeout where basically if we drive for one second uh it gets up to a certain certain speed if we drive for two seconds maybe it gets up to like 35 miles an hour or something and then when we get to 2.8 or 2.9 seconds maybe it's it does 60 miles an hour right so what is that actually um ferrari let's see 0 to 60 how long does it do it in about 3 point how fast is a ferrari so let's see their seconds right so three seconds 2.9 seconds 2.5 seconds what's crazy is that rivian which is one of these trucks that is like my absolute favorite right now dad that is like faster than a ferrari and it's a truck and it does it in three seconds so some ferraris we have go and do it in 2.9 seconds whatever we'll just do 2.9 seconds right so what we can do is we can even like get fancy with it and we can create a method that like takes us to 60 seconds 60 miles an hour right so let's call it zero 260. and what this does is maybe it runs a set timeout and then it console logs that was fast or something right and let's make let's put some squigglies around this actually because we want this to be like a function and we want to write probably more things in it and then we want to set the current speed to 60 because i'm going to set the current speed to 60. so let's see if this works kind of as expected so we're going to do console log we don't need to console.log we can actually just do ferrari dot 0 to 60 and run this and let's see that was fast okay and now if we check so like if i comment out all these other lines and uh let's comment out this line as well and this one and now let's just check the speed so i'm just gonna get this console log one and put it right here and run it that was fast so because it's asynchronous notice what happened it ran and told me what its speed was actually before that code finished running so we what we want to do is we could turn this actually into a promise if we wanted to get kind of advanced with it and then get this promise and then once it resolves we could do something with it if we want so we could do return new promise and then we can like resolve resolve comma reject and kind of get fancy with it but we can try doing a simpler way first because simpler ways are usually you know we like them and we can actually just grab the current speed like this okay so we can grab the current speed from here after it changes it to 60. so let's try running it now and you can see that the current speed uh at this point has been you know turned into 60. so if we do it like this it'll work and it'll it'll do what we expect it to do now for break what we want to do is see if you can make it where break brings the speed down by 10. okay so if drive brings the speed up by 10 see if you can make it where brake brings the speed down by 10 okay so give it a try pause the video i'll give you five seconds to pause the video and try it on your own i think you'll be able to do it yourself okay so let's do a countdown five four three two one okay let's give it a try now so let's do it together if you hadn't already and if you did great job okay and if you didn't it's okay we'll figure it out together so for break what i want to do is i basically want to say hey um i can remove this console log for now don't care about it and i will simply say set the current speed to um minus equals 10. okay so this will just decrement the speed by 10. and we'll we'll put a console log here and we'll say breaking so let's comment out all of these lines here okay and let's comment down this one and i'll just go right here so we got the ferrari right we have the ferrari now what do we want to do i do ferrari dot drive so this should bring it up by 10 miles an hour and let's print out the speed so i'll console log speed or sorry ferrari dot current speed so let's run this and the current speed is 10 miles an hour okay now let's do ferrari dot break and then we'll console log the speed and you can see that when i did drive it increased it by 10 miles an hour and then breaking it decreased it by 10 and so now we're at zero miles an hour okay now what if we wanted to make stop where stop essentially just brings the speed down to zero regardless of where you're at so to emphasize that first let's do drive multiple times here and see if before i continue the video if you can guess what the speed is going to be on line 46 so i'll give you five seconds to figure that out 5 four three two one all right so how i'm going to figure this out is one two three four five five multiplied by 10 is 50 so this should get you to 50 miles an hour they should decrement by 10 this should get us 40 miles an hour let's run this and we get our speed at 40 miles an hour okay so now what we want to do is we want to implement the stop method okay so try to implement it yourself i'll give you some time to do it you should be able to do it okay and if you're not going to pause the video or if you have paused the video and you're back let's figure it out together now so i'm just going to say now i guess it would make more sense to say coming to a screeching halt right and then we can actually say this dot current speed and we can actually set it to just equal to zero okay so like basically we're going to reset it to zero so let's try ferrari dot stop and now can you guess what line 52 is gonna say okay take a guess there and let's run and boom you can see that now we're at zero miles an hour all right so we were driving at 10 driving 20 driving speed 30 40 50 50 and then we were breaking and then we came to a screeching halt and now we're at zero miles an hour and the car has effectively come to a full stop all right now let's grab a different car let's get a porsche right right here and let's see if you can create uh a new object with a porsche so give that a try and let's say its speed is 250 miles an hour as well okay or 240 miles an hour so you have a porsche [Music] porsche okay color is yellow right and then speed of this is let's say 250 miles an hour so make a new object with this and then see if you could do things like drive it or get its current speed and things of that nature give that a try give that a try okay and while you give that a try one thing we can do is um let's go down here okay give that a try pause the video and see if you can actually try this on your own so you take five seconds five four three two one okay now here's how you do it okay let's do it together so i'm going to make porsche right and it's gonna be a new car and i'm gonna say porsche and color is yellow and top speed is let's say 250 miles an hour okay and uh let's go ahead and do porsche dot name and we'll console log it and we'll do dot color and we'll do top speed and let's run this and see if we actually get it yep we get porsche it's yellow and the top speed is 250. can we drive it let's try it porsche.drive and let's do let's drive it like multiple times all right and you can see boom the top speed uh now we're at 50 miles an hour if you want you could also turn it into a loop right so we could basically say you could run it for five times or more if you want so let's say we have an array of one two three four five and i can say for each and i can say i don't care about the value i don't need to use it and i can simply say porsche [Music] dot drive so all this function is doing is i don't care about these and i'm just saying hey increment porsche.draw uh just do porsha.drive essentially five times so this gives me a loop that lets me run this piece of code five times let's try it okay i cannot read properties of undefined on line five interesting line five what's happening on line five okay let's comment this out i guess let's try it okay so actually let's do this because nums is also of class type array or sorry array arrays are class type array so you have to instantiate them first and then you can actually do a dot for each so now i can do nums.4 each and now it will actually work okay so now i can actually try run and you can see that we just looped through five times and you know really floored it and gave you know ran our porsche now let's see if we can do 0 to 60 for our porsche so porsche.0260 and let's run this and let's see if that runs okay and it goes phew that was fast now for our timeout we want to make sure that we give it like a couple of seconds right so we want to say 3000 so this will wait for three seconds and then it'll say that was fast and then print out the current speed of the car etc so let's try it now and boom that happened three seconds later it goes phew that was fast okay so we have zero to 60 on this as well and then can we do porsche dot stop and then check porsche dot current speed and we'll console log this and run this now and then boom we have speed is zero okay there you go oftentimes you'll see these get and set methods a lot so i'll show you an example of that and you can try to make this yourself as well so i'll do get current speed you can already kind of see what this method is going to do okay and see if you could write this yourself it's going to be very very very very easy okay it's just going to do one line here um literally take like four to five seconds try to write it on your own as well and five four three two one okay so get current speed and you can just say return current speed okay there isn't a huge amazing use case for this here but i'm just showing you this because a lot of classes will have these getters what they call getters setters so i i want you to get used to this so they'll have ton of like get methods and then they'll have ton of set methods that like set the current speed right so basically this drive method is really like set the speed or like update the speed back by a certain thing um we could even give it like uh we could even give it a method like target speed where you as a user can actually pass in the speech actually let's do that because you've seen how to call methods but you haven't seen how to pass arguments to methods so how about you could actually call the method drive and put in a like a number here like a speed number and instead of incremented incrementing this by plus 10 it'll increment it by the speed that you give it okay so now when we call that drive now drive needs something okay and uh i can also show you default arguments in javascript which are really nice so if you don't pass in an argument it'll just give you 10. for example if i try to run now my code is going to kind of like not work you see how we have these nands everywhere like nan because we're not passing in a speed when we call our drive method so if you see our drive method here we're not passing in a speed here right so if we actually just give it a equals 10 that's a default argument so if i don't pass in a speed it'll set that to just be 10. so let's give it a try now and see if that works yes it does right but let's go ahead and give some speed so for example for the porsche what i'll do is i will comment out this line where i gave it a like a drove it five times here what i'll do instead and i'll comment out this nums line too what i'll do instead is i'll say porsche dot drive and let's say i say 40 okay and then we console log and we get the current speed so let's go ahead and console log here and run this and you can see that it instantly just went it shot up to 40. right it instantly shot up to 40 here let's do 80. okay let's do 40 here and let's do maybe another 80. now what's gonna happen so i did 40 here for drive and i did 80 here for drive what do you think line 69 is going to get us what's the speed going to be 5 4 3 2 1. speed's going to be 40 plus 80 right it's all incrementing on top of each other so it's going to be 120 let's run it and boom we got 120 okay so there you go this is how you make basics of classes and this is an example with cars if you have cars how can you make different classes and give cars different methods and hopefully this was like a really visual example so it kind of got certain concepts through for you so that's what's happening with classes okay so to give you some other real world example of this and you know i want i do want to talk about nums and stuff like that and i'll kind of foreshadow it a little bit but here's a real world example so let's say we have const numbers and we have this array right here and we do numbers dot push and i say 4 and i do console log numbers what is numbers going to say is numbers going to give me back an array 1 2 3 or is it going to give me back an array of one two three four which one is it gonna be if you guess that it's gonna give me back an array with one two three four good job that's exactly right why is that happening because we're doing this dot push so what is dot push is dot push let me ask you is dot push a property is dot push a function or is dot push a method uh or is it something else what's not push if you guess that dot push is a method or a property that's not right because property is if i didn't have any function call here okay so that would be a property it's not a property if you said function that would not be right because a function is if you had to call push like this because you have to do dot push it's not a function if you said method you are completely correct good job okay so this is an example of a method method so if it's a method well then that means whenever methods are involved there must be classes because you can only have methods inside of classes i'll write it as a note you can only have methods inside of classes so you must have a class here well that basically means that numbers which is of type array that that means that that's a class okay it's its own class and that class has methods like dot push and there has there's something i haven't shown you yet but it's called type of so if i actually have an array so let me clear this console and let me zoom in here so you can see better so if i do type of and i say one two three array okay here it's giving me okay what's the type of this and it says object right if i do type of and let's say i do two it says type of number if i say hello right it tells me string so this is a type of either object but specifically this is of array class okay so sometimes javascript is weird it ends up calling a lot of things objects but this is really like an array class and classes are objects sometimes that's okay then you have number then you have string so that's why like when you have a string it has its own methods like dot split right where it turns that string into an array um or you could have an array with one two three and you could say dot join join this with strawberries right and then when i do this it joins one two three with strawberries so there are classes which have their own method so if you were to visualize this so for example when i have arrays right here like arrays right what is array so imagine it like this array is of class uh or it's a class array and then you might have different methods like you might have a join method and you might have the push method right and then we can actually even try implementing our own push okay and we we could create our own push and see if that works exactly like push does and so let's give that a try but first let's just see how certain array methods work okay so for example i'm gonna do so i have one two three this is an array right if i do dot push and i say four you can see that i've added a four to that array right so let's just go to one two three again perfect okay so we have this one two three array now one thing you could do to an array is i could actually get the zeroth property of an array and i can change it sorry about that um i have a chess tournament coming up so my friend is calling me for that it's tomorrow in las vegas and it's like a hundred and four degrees severe heat warnings there but i'm excited and i'm gonna go play it there it's the national open chess tournament and they have a hundred thousand dollar prize guaranteed i'm not looking to win i'm just looking to have a good time it's going to be fun playing on the u 2100 if any of you guys are chess nerds let's get back to this so let's say i have this or so let's say i crit let me create an array so x equals we'll say 1 2 3. okay so i have this array right here 1 2 3. now i can actually change some of the properties in here so i could actually do x of 0 and i can change that to i don't know 10. and now when you look at x notice that i've changed at that 0th position and now you have a 10. okay well what if i change at position 2 and i do x of 2 is now whatever x of 2 was plus 7. what do you think is going to happen what do you think is going to happen here so x of 2 will get you access to the the third index right so this or the second index zero index right this is a zero this is a one and this is a two and i'm setting x of 2 to whatever x of 2 was plus 7. what do you think is going to happen there well this 3 is going to actually turn into a plus 7. so let's try it right and let's run x and you can see that now i have 10 here and 10 there so you could mutate an array right now by doing this what if we access an a location that we haven't we don't even see there so let's give that a try so let's see if i can do x of 3 right which doesn't exist and say i say uh apple and now we do x and you can actually see i have 10 to 10 apple so i could actually add things to an array by getting like the last index of the array and adding things there whoa that's pretty bizarre huh so using this knowledge we can actually implement our own push method okay and i'll show you how you can actually add methods to the array data type so javascript allows you to do array.prototype and this allows you to just get access to the array like class and we can actually now create our own method here and say my push okay so this is going to be our push method that we're creating and we're going to say it's going to be a function okay and what this function is going to do is let's for now let's just say it's going to get this dot length okay this this will refer to the array you're calling the dot whatever on so let's create const fruits and i'm going to say banana let's say blackberry that's not blackberry uh berry is fine oh we don't have to apparently what happened to it strawberry and then we'll have a cookie okay so apparently cookie's a fruit but hey let's just go with it and now let's do console.log and i'm going to say fruits.mypush and call it as a method okay fruit's not my push let's call it the method let's hit run and let's see what happens here okay we're getting an error somewhere let's see where we're getting that error it says line 97. oh because i'm not like calling typeof on anything so let's just comment that out let's run this now and you can see i have one two three four okay and right now it says undefined because i'm not having it return anything so let's say return dot length so it should return length of three and we're we're getting that three we were looking for okay uh let's get our cars to get our cars to kind of calm down a bit so i'll just comment all of that out all right so and then let's comment out our array stuff here as well so we should just have fruits now if i add an additional fruit in here let's say i add a pear or an apple what do you think the length is going to say do you think it's going to say 3 do you think it's going to say 5 you think it's going to say 10 what do you think is going to say let's try running it boom 5 because i have 5 items in here so in order to do the thing right if i have an array with five items then all i have to do is say something along the lines of my array five and in the fifth position i can put in whatever item i pass so my item okay so in this function we'll pass in item okay and then we can actually just pull the item from here and let's actually just see first if we can actually get access to our item through that right so let's just say return item and i'll pass in cookie the word cookie and let's run this and you can see that my push function like meth run my my push method runs it calls this and i can actually call it on type array right i'm creating my own methods for the array and then it's actually returning the cookie right here right so in order to do this now i have all the pieces of the puzzle i can do grab this array okay so this will get you the actual array that you're passing it so let's run this just so you can see and you can see this refers to the actual array that was passed in okay so hopefully that demystifies the word this a lot for you okay because that's what this is referring to and now we're gonna say it's whatever you're calling this dot thing on is usually like this okay so it's referring to like fruits in this case now if i do another dot that dot will be referring to whatever this would be okay so now i'm gonna say this it's i know it's an array and i know what i want to do is i want to return the array okay and on its fifth element around his fifth position zero because let's just go through this this is zero this is one this is two this is three this is four so in its fifth position right over here i wanna add in a um a what other fruit is left that i haven't covered yet a kiwi do we have a kiwi in here apparently we do nice so on that position i want to set that to a kiwi okay and then we return this so let's go ahead and try that and you can see boom we actually now have a kiwi right over here okay so that's super cool but this five is hard coded how could we get this five in a dynamic way well if we have access to this can we do this dot length and get access and then we're just going to set that to a kiwi but in instead of a kiwi we can just set it to an item whatever item we pass it so now we can pass the kiwi from here and let's run this and you can see that we pass in the kiwi went here and it plugged it in boom and so now we have our own push method right we can actually just use our own push to push whatever we want so let's try pushing a couple of things and let's then print out our our array okay so ignore that so let's go ahead and and push a bunch of stuff so i'm going to push more cookies i'm gonna push more strawberries okay i'm gonna push another i'm gonna push an orange okay and then we're gonna console fruits and let's see what happens and there you go all of the things that we actually pushed right got added all of these guys that we pushed here four new fruits you can see that we now have those four new fruits right added in right there okay so you can extend classes you can extend uh array data types like this you could extend other data types like this so you could extend so many things and then you know now hopefully other things to you might make sense too for example if you have an object right so let's say i create an object called things equal or let's say i create an object called actor and name is uh jamie foxx and age is i don't know how old he is 37 right and um money is i don't know whatever something random right so now i have an actor how do i get the keys of this actor i got to use a method on the actor you know object so object is also like its own class and it has its own method so if you were to imagine it you should imagine it like this i have a class object and it has different methods for example it has a method called keys all right so now watch what happens when i do object dot keys and i pass it actor okay so i can actually pass it actor and boom i get name age money all right well actually object keys is a little bit different it's it is on the object class so you could do object.keys and pass past the actors so that's fair enough that's still like that's still a method dot keys okay so there are a lot of things that are um all right and you can also do this you can also do dot values and get all the values back right so you could do dot keys get the get the keys you could do dot values it'll give you all the values of that object so there are so many use cases of this knowledge and this information and if you deep dive into it now it'll save you so much pain in the future because it gets so much harder if you have like shaky foundations and shaky basics and then you try to go and build you know learn more complex stuff on top of it you're just gonna have so much trouble but if you learn this now and you can extend these classes and add your methods and do a whole bunch of stuff like this you're gonna be just such a badass developer in the future and you're gonna be so much stronger than most people and where other people get stuck you're gonna be flying past so i hope this made sense i do i would like to do some more kind of exercises with classes because i think you should get very used to seeing them like everything under the hood is going to be some type of class some type of object everything under the hood is going to be methods and all that type of stuff going on so if you start getting used to seeing all of this now i think it's going to be good for you so we're going to do a few more examples together so all of these notes here i'm going to leave them for you so you have access to them kind of whenever you want okay let's go let's make sure that they're running and if you ever want to run them you can just copy them into a new rupple and run it okay and all of these notes i'm going to take them we're going to go back to our javascript course and then inside of classes i'm going to create a new folder okay and in this folder i'm just gonna call it or actually this could work really well as a yeah so that's good actually so let's go inside of here we're gonna create a new folder and i'm gonna call it car class okay and then inside of here we're going to make a new file we're just going to say how did we name them we should just call them script.js everywhere for fighting game would it be yeah we just call script.js that's fine and then all of this is gonna be in here for you okay so you're gonna be able to see how do you actually work with uh you know how did we create the car class and that lesson is gonna be there so you can just go and take a look at it at any given time that you want all right to finish this off i'm gonna leave you with an exercise try creating a new replit a new rupple okay on replit with just html css javascript and try creating a bank class okay so create a bank class and then it should have methods such as withdraw and it should have methods such as deposit okay and it should have properties such as balance okay so for example i should be able to do [Music] um you know kazi accounts and i should be able to do new bank account or whatever account um and you could call the class bank account or bank i don't care whatever and then maybe you could uh start it off with the initial balance okay so and then if you ever do self dot or sorry python world desktop balance it should get me the current balance in this case it should get me back you know 100. if i do this dot deposits 100 the balance should get incremented so what should happen is give me one second and i'll show you what should happen okay let's move this up here boom [Music] all right if i do that then after this if i actually take a look at this dot balance that should become 200. if i do this dot withdraw 100 then when i look at this.balance that should become 100 okay because i just subtracted it so i want you to give this a shot see how far you can take it and how much of it you can complete i really believe you should be able to do this entire thing and you should be able to call these methods okay and then do them right so it should be this that deposit yep 100 like this it's a method right and then it takes in a function sorry it's a method and it has a parameter that you have to pass it so in this case i'm going to pass it 100 and then increments it by 100 if i do 5000 or 10 000 it should increment by that amount on the other edge cases let me ask you this if you have zero dollars in the bank should you be able to withdraw a hundred dollars so let's say that this dot balance or let's say you try to withdraw in this case two hundred dollars when you only have a hundred dollars left should you be able to do that no you should not so it should catch that it should stop that from happening and it should print out an error message telling the user hey you cannot withdraw more than what you don't have in order and if you want to make it really jacked and really amazing try adding a ui to this project i don't care if it's ugly it doesn't matter but see if you can add a ui to this as well so it has like buttons i could press for withdraw i could click them and they can help me withdraw and then i click a button it helps me deposits deposit so maybe so let's actually draw this out right so i have a button here for withdraw draw i have another button okay i have another button right here or wherever it doesn't matter for deposit i don't care about the ui as long as you get get it done and then we have another button here or not a button but like rather maybe you have a you know maybe here it actually says what the balance is so it just says like hit a balance right now is 100 or whatever so it actually literally has the balance written out and then the balance increases and you can see it on the screen right so you hit withdraw you hit deposit it either decrements or increments and you know and then if there are any other methods or anything like that you could think about adding them uh maybe there is like you want to close your checking account or something like that and then just clears up everything you know but this is like the main crux of it so try doing this see if you can nail this one you should definitely able to nail this exercise and then once you give it a full solid attempt then we'll work together and code together and make the finished version got it all right i hope you're excited go give it a try and then come back and we'll do this together all right now let's work and create that bank class that we were talking about so let's go ahead and do this so i have this bang class the first thing that comes to my mind before i even start thinking about anything is bank class bank just like this okay um and you know i'm like okay cool that's that's that's a good start what's next well what's next is i have certain methods i have a draw method so i'm just going to go ahead and kind of create that and then i have a deposit method so i'm going to go ahead and create that okay the the balance is going to be something that's going to be instantiated so it's going to be like right when the class is created the balance is going to be created right at the exact same time so for that i'm going to need constructor and the construction is going to just be kind of empty like this and i'm going to say i'm going to grab balance and we're going to say this stop balance is whatever the balance was passed in then all withdrawal does in my mind is withdraw right this this function right over here withdraw what this does is it should just take this dot balance and increment it by whatever amount the user wants and we should have pretty much the same thing here for deposit but we decrement it oh sorry the other way the other way the other way decrement on withdrawal and increment on deposit right because we're depositing money and we're taking out money so so far looks pretty good to me looks like we're almost done honestly with this let's go ahead and do const causey checking and we'll say cla new bank and uh we're going to put in we're going to start it off with a deposit of 100 okay let's go ahead and console log causey checking dot balance okay and then we're simply going to i'm gonna just move it a little bit out of the way here and we're gonna say run okay and you can see that i'm getting back uh 100 here which is great you know that's exactly what i had expected when we made this now let's try adding so i'm going to say causeychecking.deposit and we're going to add in 100 and then let's print out the balance again okay and now the balance is 200 and what we can do is inside of our withdraw function i can just add an or end deposit i can add a console log right here and i can say so it just shows us the balance right away okay so [Music] that won't work so i'll just do balance call in this dot balance like that okay and you could call this whatever you want that doesn't matter and this in objects is the same thing as if you did balance okay so both are the same so i'm just going to copy this and i'll also paste it over here so we have um so basically as soon as it updates the balance amount it should just show it okay so then that way we don't have to do all these a ton of console logs okay and maybe let's add another console log that says console.log deposited and the amount okay and then we'll do the same thing for withdraw and we'll say with drew the amount so let's run it and now you can see it says deposit it 100 right and we can put in so i just put a dollar sign here and then we can put amount like that so it'll show it with the dollar sign so it's a deposit 100 so balance is now 200. okay and we can we can do this same trick that we did here for with for withdrawing okay so let's try with draw so after withdrawing balance is 100 let's withdraw one more time balance is 100 0 right now here's going to be the problem if i try to withdraw one more time do you think it's gonna let me withdraw i'll give you five seconds to figure that out five four three two one yes it's gonna let me withdraw right watch what happens boom negative 100 should i be able to withdraw allowed to withdraw money that i don't have the answer is resounding no right heck no i should not be allowed to do that that is crazy otherwise would be super rich right all of us would be insanely rich so what we want to do in that case is add a guard clause inside of our withdrawal okay so we're going to say guard clause so protect against this and i'm just going to say if and hopefully you tried this and you got it if you did good job and if you didn't that's okay but like if you didn't get it and you want to attempt it now try pausing it now and basically what i'm gonna say is i'm gonna say if this dot balance is less than or equal to zero then just return like meaning don't don't run don't run this function method just stop it right here okay so let's try running let's try this again and let's see what happens okay and maybe we can even say this and and say um you know or maybe we can we can like throw an error here too or a console log and just say can't not withdraw you cannot withdraw more than what you have so if we're already at zero this will stop us this statement will stop us with drawing if we're already at zero okay so for example if i try running this now it says you cannot withdraw more than what you have so this is really good for zero but the the problem still remains for example if my balance was at 100 i could still withdraw 200 right that won't we won't be stopped by that let's say i try 200 and run this you can see now my balance is negative 100 right and then it stops me after that but that's not what should happen we should be able to withdraw before that so maybe what we want to check is we want to say if this dot balance minus the amount that we're being passed in if that's less than or equal to zero then just stop so let's try running it now and you'll see that it doesn't let us withdraw less than you know once we're at 100 it doesn't let us withdraw and it stops us twice and stops us both times so we'll not be able to withdraw any more than we have right so for example if i try to withdraw let's say a thousand dollars it'll just say sorry can now withdraw it all right and the our balance will still be at at 200 okay so maybe we can i can do this it's like i can print out the balance as well here right so you can now withdraw more than what you have and then boom shows the balance right there so that stops it and now you can you can try depositing you know as much as you want you can deposit ten thousand ten thousand ten thousand if you look at your balance it'll be twenty nine thousand one hundred now let's say you start with drawing twenty thousand and then you try with drawing 5 000 and then another 5 000. let's see what happens so a bunch of your deposits deposited 1000 withdrew so deposited one 10 000 deposited 10 000 and then you tried to withdraw so it's like withdrew 1000 withdrew 20 000 so balance is not 90 100 from 29 000 that makes sense but when your balance got to 4 100 right and you try to withdraw 5 000 well you ca it says you can't you can't withdraw five thousand dollars so that's how those methods are working so that's really really good now the only thing that was left is if you could kind of create a ui for this right so let's go ahead and try to create a ui for this that shouldn't be that hard so the first things i want to do in order to create a ui is i need some buttons all right i'll create another button here and for this button we'll call it we'll give this button an id of deposit deposits we'll give this button id of give this button an id of withdrawal okay so we got two buttons here and it'll say deposit this button will say withdraw so a little plus sign to show that that adds money this withdraws minus sign that that withdraws money we'll remove this hello world from there okay so now we have deposit and withdraw um we'll have the text for your balance right there so i will have a div here and then inside of this div i will have a p tag and this p tag will say uh balance right and then balance will be zero for now and then we'll give this an id of balance this div because then we're going to be able to change its inner attacks or it's inner html right perfect so we got balance right there cool so we have our balance we have deposit withdraw and now what we want to do is when we click we want certain functions to run so what i can do and there's this nice little trick since i have this deposit id right here i could actually just say i believe deposit and should run this i think so but let's uh let's not be that hacky let's try to avoid being that that degenerate so i'm just gonna say const deposit button and we're gonna [Music] documents dot get elements by id and we're gonna say deposit okay and then i'm gonna do the same thing and we'll get the withdrawal button and all we're going to do is we're just going to attach listeners to this i'm going to say deposit button dot on click and every time you do on click we're going to do you know quasi checking and this we'll just do cause you checking that withdraw that's fine cause you checking that withdraw and um oh okay that's a good that's a good point we'll also have to do a input field for like how much do we want to deposit or withdraw right so let's do input and we'll give this an id of amount so let's go back and i will simply go amount input and then we will say amount so if i hit run again you'll see i have a field above here because that will basically tell us how much do we want to uh withdraw or deposit so i'm going to say withdraw whatever the amount input dot value is okay and let's see if that actually does anything right so i'm gonna i'm just gonna console.log and i will say amount input dot value [Music] and let's see if that does what we wanted to do so i'll say 23 and i'll run this sorry 23 and then i'll hit i actually got to attach it to something right so for now i'll remove this line and i'll just say amount input dot value and just console log it for me please let's run this and let's hit deposit deposit deposit 23 deposit 25 deposit deposit that does not do what we want it to do let's just console log anything for now just to see if things are attached the right way let's run this let's deposit deposit deposit did it this is still not doing what we wanted to do okay so let's go back to our deposit button it has the correct id of deposit right so the id is correct let's go back pause it this is going to be withdrawal and so i'm saying deposit button dot on click that let's try that ah interesting okay let's open this up let's just see if it's not a bug hit inspect console and let's hit draw it is not a bug interesting okay we're doing something wrong we'll figure it out oh yes i forgot on click takes in a uh anonymous function right so let's do this and now let's hit deposit yes so it runs every single time so now the button click is being detected correctly that's good now let's do amount input dot value and let's run that oops let's run this let's do 23 deposit 25 4 deposit 25 deposit now this part is running correctly as well so if i do 26 deposit right works works correctly good okay let's move it to a new line so things don't get that squished okay so i have attached a listener on this on click now let's try doing that withdraw thing that we were doing with draw [Music] right kazi checking out withdraw amount dot input value okay and let's try doing that so i'll do ten dollars uh oh sorry not withdraw right deposit because this is a deposit button so let's run the code again let's hit ten dollars deposit boom the deposit just went up by ten but it's attaching the string so now it doesn't say 4 100 now it says like 410 000 so what we want to do is we want this to be a number and yes okay so we want we want that to be a number and what we could do is we could just call dot value on here and we could just call number on this so now and then amount we don't need it to be an input because it's actually an amount now and we just pass this amount around now so now i could set deposit amount okay so if i said 10 here hit deposit amount input is not defined so this is just the amount and i don't even need that line anymore let's run it again let's do ten dollars deposit okay let's do twenty dollars deposit oh interesting we actually can't do it like that so let's go back let's keep that amount input there once we get this query selector then we have to do dot value because if we just do dot value it's going to just get the value that it initially had when the script loaded and that's it and then every time you click it it's just going to get you back that value but if you keep it like this dom element and then at the time of the click pull the value then you're actually going to get the correct value so i apologize but you're going to have to keep doing that value here and then you're going to have to type cast that to a number like this okay so this you'll kind of have to do each time okay so let's run this and see this i don't need this here anymore let's run it again all right i'm going to deposit ten dollars and now you can see that the ten dollars are deposited correctly okay let's try depositing a thousand dollars let's try depositing 20 000 right and you can see at the bottom right there now it's doing it correctly right we're depositing the correct amount now let's try doing the same thing for the withdrawal button so if you haven't done it yet try doing the withdrawal button yourself and see if you can get it i'll give you five seconds five four three two one all right let's try the withdrawal button together so i'm gonna paste this i'm gonna replace this with withdraw and then we're gonna use the withdraw method here okay and we're just gonna do number amount input.value same way let's run this and i'm gonna say 100 deposit so balance is 42 and now withdraw balance 4 100. so now deposit and withdraw are working all i need to do is update the dom after we do this deposit right so as soon as that happens we're going to update the dom and how what i'm going to do is i have the amount not the amount input i need the i need the balance right so i need this balance div so let's go back and we're going to do const balance div document.getelementbyd and we're going to say balance okay so it's going to get us to div and i'm going to say inner text and we're going to set that to and it's going to say balanced um and we're going to pass in this right there okay you could also just do this so we can create a new variable use that here and use that here okay and then do the same thing for the withdrawal function and then just replace it with amount so then it's cleaner okay so there we go quasi checking that deposit amount and then the balance is going to read that amount and then we're going to do the same thing right here balance div enter texas amount let's run this let's hit 10 boom balance is 10. let's do 30. now you can see balance is 30. right but the problem here is that it's only putting in the amount it's not actually putting the actual balance so instead of amount what should we put here take a guess what we should actually put in here is we should do causeychecking.balance okay that's what we want to do here let's go ahead and do that here as well so it's reading the balance the entire time in that case all right let's run it and let's go 100 deposit 1000 deposit 5200 20 000 deposit 25 000 withdrawal 1000 or sorry withdrawal right withdrawal let's say 19 000 it would draw boom the new balance is 2200. so hopefully this should so hopefully this tells you a lot about how classes work you know what you could do with them how to then connect them to a ui and all of those things because they make your life honestly a lot easier right and then you can use them in a really nice easy way um and they're just really useful and you're gonna see them everywhere and everything is a class like balance div this is a class that's why you're doing dot inner text documents is probably like of a you you get this document object model which is probably like this class or this object and you can do dot get element by id let me ask you what's dot get element by id is it a property is it a method or is it a function which one is it you should be able to guess this in like three seconds three two one if you guess this is a method good job this is a method right because it looks like a function but with a dot that's a method so this document is a class and then we're doing this dot whatever method um so everything just everything has to do with classes and objects and all this stuff and so this is why this is so important for you to learn and you know this this keyword is so important to learn because this will come so many places it will be so confused what it was and you'll be thankful that you did so many class-based exercises and will still do more because like just doing one example is not enough you have to do so many different examples so many different exercises so many different projects and then the more you do the more it starts clicking and the more you start understanding so pattern recognition and programming is one of the most key and underrated and understated things that you could do that will just like skyrocket your skill set okay like intelligence is one thing yes but pattern recognition is even beyond that when it comes to con you know programming even things like chess and then you can build on top of it and take it further now the last thing i'll do for you is we'll take this bank's class we're going to go to our javascript course and then inside of here inside of classes i'm going to create a new folder and we'll call it banks class okay and then in here i'm going to create a new file it'll just be called script.js and this file will have the entire code okay and then i'll grab the index.html so you have that to refer to as well and you can always see it go back here and we'll add in whoops oh jesus what did we do what did i do okay i moved banks out of the banks class out of the classes okay cool now we're good let's add in a new file here and we'll say index.html and we'll paste that html right here okay all right so now what you'll be able to do is you'll be able to go to the home page right and right on the home page right here you'll see lessons and in lessons you'll see classes it'll say bank with deposit and withdraw methods and so this lesson will be available for you you can click it and play around with it right here okay and deposit so you'll have the fully working app with the final solution okay and then you'll be able to hit withdraw and take out any of the monies right hit withdraw let's do 300. boom okay boom 99 okay you'll be able to withdraw whatever you want deposit whatever you want so this app is there for you now and then if you want to look at the code obviously the code is going to be inside of folder called classes it's going to have banks class in there and inside of there you're going to have this code and then the script file is going to be the main one where the entire javascript is sitting there waiting for you okay and you can always use this to refer to your notes run the app make changes and do whatever you want okay hopefully that was insightful and gave you some more insight into classes and we'll be still doing more stuff so i hope you're prepared and excited all right now that you got your classes skills up to a certain level and we worked on how to make a bank we also worked on how to make a car class now what i want you to do is you're going to be taking it up a notch and you're going to be building a street fighter game and this is going to be a really fancy game it's going to have sounds and it's going to have the ability to attack and heal and you're gonna have ken and ryu and two fighters fighting you're gonna be able to create a player class a game class and you'll be able to play the game win the game and you'll be able to hit q a to attack and heal from player one and you'll be able to hit p and l to attack and heal with player two and there's gonna be a whole lot of stuff you can do with classes and this game is gonna push your javascript javascript skills to the next level now for this game your instructor is gonna be lance so i hope you're excited stay put he's an awesome instructor i love him to death you're gonna enjoy it and i'm gonna send it over to lance to show you how to make the fighting street fighter game let's go lance what is up guys it's lance here and like kazi said i'm going to be taking over this specific section of the javascript course i hope you guys are ready you guys are crushing it so far and as you can see we're on a separate repel from the course right these are the topics that i want to go over so the first one we have up here is something called while loops you may have heard of this when kazi was explaining loops the ones that i know that you guys know are the for loops so take a look so with four loops my key if you want to know the difference between these two is you use four loops right when you know how many times you want to loop right and for a while loop right they do the same thing they both loop but you use this when you are not sure how many times you want to loop right think about when we use a for loop i use a for loop to go through an array and loop however long that array is we know that right but the while loop we want to keep looping until a condition is not true all right so let me show you what it looks like enough talk all right for a while loop all you have to do is set up is just this right the key thing that makes this engine run is this right here this is called your condition right whatever you put here is how long you're going to loop to so let's set up an example all right let's say let num is equal to zero right if i were to console log num it would just show me it's zero but what if i say keep looping while num is less than five right so that's how you can read this it's actually really easy to read with while loops you can say while num is less than five keep looping so if i ask you guys right now right here is num less than five yes right so if i were to run this piece of code it would actually run forever because when will num ever equal five see there we go so then we can say something like this right while num is less than five you wanna say consolag looping right and then after we say console log looping we can also do a num plus plus all right do you guys remember what plus plus does plus plus will increment add one to the value of num so the first time it's zero right then the second time it's one two right and so what we could also do here is put a comma and write num so if i were to run this code what do you think we're gonna see in the console over here give you guys five seconds one two three four five did you alright let's hit run and we can see looping zero looping one looping three looping four so how many times did this run this run five times right so now we can switch it up all right let's say let's say let num 2 is equal to 10 right but we didn't know let's pretend this is a hidden number that we didn't know right as long as num is less than num2 right keep looping what if we didn't know what num2 was will it still stop yeah because once it reaches 10 right the condition is no longer true so let's hit run there we go 0 through 9. so that's kind of how the while loop works while the condition is true keep looping so here's a here's another example not as useful all right you can say let and this will be closer to the activity that we're doing let finished equals false i'll say equal is true right so if i said in this while loop finished is equal equal to true right how many times would this loop if i were to run it take a guess if you said it ran infinitely you'd be correct why is it infinite though answer my question what do you think that's because we're saying while finish is equal equally true keep looping but at any point did finish change no but if i were to say in this while loop finish is now equal to false right then we could say run and we'll just see one looping right because it's going to console.log switch it to false and then exit the wild there we go so we looked at the while loop that's pretty much it for that so the next thing we have is add event listener right here and if we were going to talk about ad event listeners you guys need to remember what the dom is so what is the dom well the dom right dom stands for what document object model or model right basically the html itself right so here doctype html and we can select with javascript any of these elements here so as you can see we have our basic hello world text up there how would i grab this div right with javascript all right can you guys see it you guys remember so give me five seconds one two three four five awesome so if you notice there's a little id here that says play alright so what we could do right is set up a variable you can say let play is equal to and then how do you grab uh an id from the dom well i can say document dot get element by id and just over here just say play all right and if i were to console log play what are we going to see exactly html div element right if i wanted to get the inner text right could do something like this enter text hello world all right that's what it says inside that div cool and this is how we use the dom to get what we want from our html right so what if i wanted to add an on click to this what did it cause it teach you you guys remember and for simplifying and for simplifying purposes we're actually going to call this play div so you can make a difference okay cool so now our variable that's holding our dom element called play is hello world so how do we add an event listener the way that qazi taught you right play div would be something like this dot on click right every element has an on click attribute that we can access here and we can say onclick is equal to an anonymous function which just means you know just means a function without a name so if i say when i click this div on the when i click on click of this div we'll console.log yoyo right so let's hit run let's click hello world we should see yoyo oh i see it's because i did capital c just to be lower case c let's see now run yo yo yo yo yo you got it cool so that's pretty simple that's perfectly fine and i'm just going to show you guys an alternate way to do the same exact thing right so this is the on click way right but there's also something called add event listener so play div so you could do is say play div dot add event listener right and then you can say two things right so let's say add event listener and you notice these parentheses down here let me zoom in cool these parentheses comes from the add eventlistener method so this is a method right and it takes in two arguments what are the arguments it's one what are you listening for here well i'm listening for a click then you can put a comma and then you're going to put a function like so okay so you do this es5 where you can say function and you basically it's what are you listening for and what do you want to do when you click all right so this time i want to say console log hey yo or hey yo poo apparently all right so if i hit run here and i click on this hey yo right so how is that different than this it's just a longer way to add events right the like it's a long way than on click but the benefit would be instead of running a click i can write other ones like key down key up you just have to change what the event is listening for cool right so that's just another thing a little side thing that i want to teach you guys the main reason i wanted to talk about event listeners is because we can do something like this all right we can say document dot add event listing right so what i what am i adding an event listener to if i ask you guys that question okay take a look so this one i added event listener to the play div but this one i'm adding an event lesson to the document right so the document is essentially the dom or the whole uh page itself right so basically if i say right something like this and write key down that is an event that we can listen for and then here i can say function right e right and then we'll console.log hi okay cool so let's take a look and analyze this for a second i'm saying document.add event listener i'm saying listen for a key down which is me pressing down on the keyboard and then this function represents what i want to do when i press key down right i want to say console.log high so let's hit run and if i were to press let's say the queue on my keyboard what's going to happen oh it's going to put q if i click that let's click the app itself hi all right i'm just going to click l hi i'm going to hit space bar hi right whatever key i press down it's going to run this function so that's how event listeners work why is this useful answer why am i telling you well the main thing is e right here you don't need to put e here but e is essentially what's going to represent our event or keyboard event right so if i say something like this if e dot key right because each e has a key attribute that we can call e dot key equals q right then i want to say console of you pressed q else right i'll say console log not q okay cool so let's hit run again if i were to press the spacebar once again oops not there on the app not q obviously it's not cute but if i hit p knock you what if i hit q q so if you ever wanted to make your app respond to your key presses we can use document.ad event listener like how sick is that right this is going to come into play when me and you are going to make a fighting game together where we can press q do a nice punch we can press a we can heal up so i'm getting excited right but we're almost there that is document.ad event listener right and you can set conditions within that function too so i like this because it kind of like ties everything together so awesome so i hope you guys enjoyed that one the next thing i want to talk about is audio tags so let me get a second to set up some sounds here for you guys so that we can mess around with it okay so i took a moment to grab some sounds for you guys oops not packages sounds as you can see we got fast heel quick heel quick hit victory fast these are gonna these are things that we're going to be using for the fighting game activity later on but if you wanted to learn how to add sounds to your javascript project we're going to be using something called the audio tag with our html so we're going to need to go to our html for this one and down below here we can go right before the body or actually we can do it outside of the body even and we can say audio like this okay all we have to do it's similar to the script tags or your image tags right we're going to add a source sorry we're going to say source is equal to sounds all right and then we can just pick one so let's do quick hit all right we can say quick quick hit dot left or actually mp3 doesn't really matter cool so that's the source and after that we can had something called controls so i'm just going to format it real quick so we have source we can also do style yeah so for the style i just want to say display none because i don't want to see this audio tag and then for type let's do an audio mpeg awesome okay and then after that we can also give this an id so i'll just call this punch because it's going to use that punch sound effect and now that i'm looking at it quick hit that web is what should be here wav not mp3 so make sure it's the same as the source we'll hit run really quickly all right don't see the auto tag good and next what we want to do is head over to your script.js and let's think about it right so we have this quick hit sound and kind of goes like poo poo right but when do you want to hear that sound right so that's where the programming starts to come into play i want to hear that sound when i press q right so if i press q after our console log i want to play the sound so how can we play the sound remember we gave this an id right so if we give us an id how do we grab this element ah now it's coming together so if i want to grab an element you can say document dot get element by id and just put in the name of the id which i believe is just punch all right so we got the element now but now we grabbed this audio tag how do i use it well to play audio we can just do this method it's just called dot play and if i hit run again i press p well not there i press p not q right but if i press q you heard that all right it's going to play as long as you press q and a little thump sound that's the little quick hit all right that's the one i'm going to use for the project itself so you can set up conditions based on the key that you key down that you press and based on that you can play a punch or a sound right so that's going to unlock a world of possibilities for you guys we could also set it so let's say you want to add another sound let's say if i don't press q i want to hear something else so if you want to add another sound i'll do is copy all this right place in that audio tag once again help don't forget to close it there we go so that's the close this is the closing audio tag for this one this is the closing audio tag for this one for this one make sure that closes but instead we're going to say victory instead of quick hit it is victory and this is not wav this is mp3 so we got mp3 on the line let's hit script js and when do i want that victory sound to play it's when i don't hit q so let's say document.element by id and put in victory vic tori and we'll hit dot play this should work and let me just double check that's what i called it yep victory awesome so let's see if this works run i press q to punch you you heard that and you hit p because that's gonna be something else hey so that's gonna be the victory music when you win in the fighting game as well but as long as i hit not q i'll hit i'll play that victory sound so if i hit spacebar all right i hope you guys can hear that but this is super cool when i found out about javascript sounds i was like yo we could do a lot of different things now right cool so that is audio tag so i didn't really write anything here but we are using them mostly in our html calling them with our javascript and timing when do you want to hear that sound so that's the very basics of all of these things we need all these three concepts plus everything you learned previously to make this fighting game app so without further ado let's move on to the next part alright i think you guys are ready we can finally getting started on your next project the fighting game i'm super excited about this because there's a lot that goes into this this is definitely going to be a lot harder for a project than the previous ones but i think you guys are ready all right it's going to go over all the topics that we've done before especially focusing on classes as you can see here so before i explain what's going on i want to demo the app a little bit as you can see this is our very minimal front end with two players lance for player one kazi for player two right it's pretty obvious how this works if i were to press q lands attacks if kanzi presses q i mean p he attacks as well alright so let's see what happens if i press q right now oops not there on the click on the app thank you there you go you hear that little sound effect and it hits and does damage to qazi and it updates the dom live which is sick all right what if kazi replies with by pressing p there you go i did a little bit more damage than him but we'll see we'll see all right let's say kazi wants to heal up heard that there we go i can heal up as well and that's pretty much the game we can kind of just go at each other one person on the right side keyboard one person on the left or you can just play by yourself like this [Music] hey so it looks like i win this round as you can see lance wins right here and if you wanted to reset just click this nice button over here boom so we're back to 100 health we could go again [Music] now cozzy wins this time so that's pretty much the app all right it looks like pretty simple but there's a lot of things we actually need to keep in mind so i hope you guys are ready right as an added feature we can hit the simulate button and look at that kazi wins the simulation right it just basically runs through all the commands and once there's a winner it'll get print out who wins so that's pretty much the demo now it's time to get through the exercise you guys ready awesome so to get to the exercise when you hit run the javascript course you just have to click fighting game right here the exercise and you should see the same layout if i were to press q or anything like that it's not going to work it'd simulate nothing all right we're going to add those features ourselves and if i go to this rupple here right this is the same thing this is basically the exercise just ported onto an independent ripple for your guys's testing purposes so i'm going to link it to you guys but hop on a separate rebel to get started on the exercise i'm going to be on here explaining to you guys how it works you ready let's go alright so you guys finally made it here to the fighting game app and now i wanted to explain to you guys how it works give you guys a little bit of a tour just so you understand what the hell am i going to do to make this work so we saw a couple things right you saw me press q to attack right you saw me press reset right you could probably think in your head how you're probably going to do this but luckily for you in the script js right you'll see all the instructions so i walk you guys through don't worry so again make sure you fork this specific rebel fighting game project right so that you can test your code here and not mess with the javascript course if you forked that right and then when you're done you're just going to copy paste your code to the repo so we'll meet up back there make sense cool so this is the fighting game app right this is to create an update game function that will update the dom with the state of the game what that means is when i punch qazi he loses health we should update the html now there's two classes we have to create a player and a game right you guys made classes with qazi before remember so that was like the car right and the car can drive it can honk right what is this class this class he can strike or heal and that makes sense for the player right but then there's a class for game the game is going to represent the whole game itself so what can the game do play check if it's over declare the winner and reset so i hope that makes sense to you these functions are hard-coded into html so don't change their names keep it as it is and here you're going to find all the div ids that we're going to be using there's a couple all right let's play result the names and the health so let's take a look at the h the html just for a second take a look around as you can see very bare bones right this is the image of ryu here here is a div called player controls so let's why did i go here it's because of this id so there's an id called result right and that's going to hold the winner of the match right so remember that you saw that lance wins over here that's gonna be with the result div so if you look scroll down to the result this is the div that's gonna hold that name okay so if you're ever wondering what the hell is this lance take a look at html and see if you can find that same div cool but lucky for you and the exercise we grab all the dips for you right so the names should make sense it's pretty easy to read the play button is a variable that holds the play div right the name div holds the player one name uh-huh cool awesome so now for the meet right the actual factual functionality of the app right this is called update game right the point of update game is exactly what it sounds like update the dom with the names and the latest health of the players right so right now it's defaulted to 100 and defaulted to player 1 and player 2. that's just based off the html so if i go to player 1 right here how do you like take a second to think about this how would you guys grab this div and change the text of it to the player ah right it's getting really complex now but it's not as complex as you think right so we want to be updating this to lens and this takazi or even your name and then within update game we're also going to think about when do we want to stop updating the game and just declare a winner right what condition will we need to do that right so when we update the game we're gonna need a condition to check if the player health is less than or equal to zero because if it's less than or equal to zero should we keep playing the game no we're done so right so if this hits zero or is less than zero we can declare a winner and declare winner is actually another method all right if you scroll up you'll see all the methods that we need to make cool so the very first thing besides update game once you have that working we need to start creating our classes so what is a class guys can you remember a class i like to call it a template for creating an object right so this is the blueprint of that object what kind of object are we making here exactly a player object so in the constructor we have to think about what are the attributes of a player object so what do we need we need a name we need a health and we're going to need attack damage right that attack damage if you guys don't play any video games or unfamiliar that just means how much damage will my punch do to you all right so we can leave that as attack damage right and make sure that this is all passed in the constructor because we are going to do that ourselves later cool so for the strike this is a function within the class and remember what that's called exactly it's called a method right so this is the strike method and keep mo keep note of what it takes in takes in a player an enemy or attack damage right before you get all worried what do you think the strike function does exactly what it sounds like you're going to strike somebody right so when i strike kazi we can make him lose five damage points or a health point so this should be like 95 right but we want to make it random you guys know how to make random damage right so that's why the first instruction here is get a random number between 1 and 10 and that is the damage amount so think about that how do i get a random number hmm right think way back right actually not even that back you guys did that earlier in another project so get a random number between 1 and 10 that is your damage amount so now that we have a random number that's the damage amount what should we do with that amount exactly we should subtract qazi's health with that amount right so subtract the enemy health with the damage amount right so how could we you know change the enemy health by subtracting the damage amount right so play around with it that's why that's why i want you guys going separate rebel it's easier to just play around and test it right i don't expect you guys to be like i got this lance right for me it's going to be incremental you got to test stuff out all right feel it up so subtract the enemy health for the damage amount and after we do that you you technically you did damage right that's correct but i want to see it on the html itself on the front end right so we need to update the dom somehow so guess what then you're going to call update game which is going to update everything with the latest stats so that's why a lot of the functionality comes from you making sure the updating game works properly cool so after you do some damage after you strike kazi you subtract the health you update the game and then just return a message saying uh lance attacks qazi for this amount right not too bad right now if you understood that the heel is going to be very very similar right so remember a heel is going to restore some health back right so we don't want to make heal overpowered so instead of 1 through 10 heal is a method that takes in who is healing right so if i put in let me put an example here heal uh player one who's healing player two or player one player one you guys are killing it so if you said player one we're good to go how does heel work well the first thing we're going to do is get a random number from one two five exactly so we take that number one to five and store it in a variable we can call it hp amount so we have amount what should we do with that amount add it to the player's health right so if i got my num random number was 3 i need to add 3 to the player's health so something i want you to start thinking about is right how do we get the player health lance right well you got to think back on when you make a object from a player class how do you get that health and then how do you want to pass it down right because it takes in a player so how do we get that player and how do we get the health cool so after you added the health to the player guess what we got to update the game to make sure that our html is up to date okay and when it's done just return me a nice message that says lance heals for two hp do good so far great because you're done with the player class that's it only strike and heal as you can see awesome so with the player class done there's also the game class right so if again class template or blueprint for creating an object what object are we creating in here we're creating the game and all the functionality for it so in the constructure constructor the constructor right the attribute that it needs is just is over so if i ask guys what do you think is over means right it looks like it's defaulted to false alright what do you think it means all right take a second one two three four five is over represents if the game is over so if the game if so if is over is false is the game over nah it's not over yet if it's true though the game is over okay cool that's all you need to know by default it's going to be false because if it's true that means we finish the round and if i ask guys when do you think the game would be over here yes this would be if one of us health is below zero or equal to zero so as long as it's not zero or equal to zero keep playing cool so if you got that let's talk about our first method here this is called declare the winner or declare winner notice what it takes in it takes in is over that's interesting okay it takes in player one and player two right if you look at the description if the game is over and a player has zero health we need to declare who the winner is and that's what this function does cool so all i want you to do is just create a variable that's going to hold the message and if is over is true why do i want to check for that because if if if is over is true then that means the game is over but we don't want it to just be that we also want it to be and so what's and in programming that's going to be something you want to think about and player 1 health is less than or equal to 0 then update the message to player one wins or lance wins then we're gonna need an else if if is over is true and p2 health is less than or equal to zero then update the message to kazuwins or p2 wins and just for fun here if you look underneath we need to play the victory sound which i totally forgot for the strike we also want to play a little sound too right but you don't have to worry about that just yet that's gonna happen when you press buttons but when we declare the winner there should be a nice victory sound okay and after that just return message variable that's the clear one keeping up so far feel free to rewind a part of the video just to hear me explain it one more time sometimes you just need it more than once and it clicks all right and don't worry too if you're totally lost there's going to be a solution where i explain how the code works awesome so here we have reset reset is exactly what it sounds like let's say we finish the game and it's over we can hit reset to put back the hp to zero not zero sorry 100 right so reset is going to set the health back to 100 and what else should we do exactly we should set is over from true to false or just make sure it's false because then when we reset the game is ready to go yeah cool another bonus thing is usually there's going to be a text here that says lance or causey wins we want to clear that resolve div in our text so that doesn't show there's a winner right because it shouldn't be wondering if we just started or reset yeah cool awesome then there is this play feature right that's the one where we press simulate and it's gonna just run through all the commands and just generates a winner randomly not randomly but based off the commands that you put so this is where that while loop comes in and notice something where it says while exclamation point this is over right so what does the exclamation point mean if you don't know what the exclamation point mean that just means not right so when not this is over or in other words if this is over sorry in other words as long as this over this is over is false keep running right if it's true then it's going to stop so basically once is over is true no more while loop right keep looping until is over is true if this is confusing you you can still write it as that as well you can say false like so and it would still work the same right this is just another way to do the same thing amazing so like i said once is over is true the while loop is broken then we declare the winner right this is the simulation part right that's nothing to do with us pressing or clicking the buttons this is if you got lazy you just want to see who would win click simulate awesome so once that while loop is done run that declare winner method after that here i want you to set up the players or you can say let player 1 equal 2 and then how do you set up a new player object from the class you tell me all right so put that over here then we want to save that original player data right so if i said uh let player one equals you can say let p1 equal to player one i just want to set a copy so that we can reset without um worrying about you know the original health so there's that next create the game object from the game class it's the same as this one all right how do we make a new instance of the game class and then we can initialize the game by up saying update game right because when you put in lance and qazi as the players it's not going to say lance and qazi here unless you call update game right so make sure you call update game over here awesome over here it's the same thing like we're doing up at the top here except we're just saving the state of is over okay now this right here line 148 we're going to add a on click right listener that's going to run the play method all right so think about how do we set up an on click what uh div element are we gonna use from here to hit the play button or it's the simulate button and make sure that it runs it right that's all you need to do for 148 and for 151 if you're still listening right you're going to add functionality where we can press a or q to do different things so if you remember the prep section that we had earlier this is where it all comes to play so here this should look familiar add event listener key down function e right here's the trick if you press q and the enemy health is greater than zero and is over is still false then call the strike function or method sorry strike method and after striking play the attack sound so here's the audio tag section coming up again and you might be asking lance there's audio here well if you look at the index right scroll all the way to the bottom you can see i already set up the audio for you you just have to play it so how do we play audio sounds think about how we did that all right grab the ids and you hit the play method to play the sound it's up to you guys to tell me when you want to play each sound so map out the sounds to what you want make sure you get the heel in there this is for keel and this is the player two controls and once you have that you should have a working fighting game so this is definitely a challenge i'm not gonna lie to you guys but if you do this you can pretty much make whatever game you want and i think you guys are up for the challenge so take your time with this rewind what you need to and if anything we can look at the solution and do this together so are you guys ready i know i am let's get started all right so this is the solution let's walk through how to make this fighting game app together so are you guys ready and at any point it's starting to all click feel free to pause the video and see how far you get before i catch up to you so this is it this is the fighting game at the moment nothing works i'm pressing buttons and nothing is happening so as you can see this is the fighting game and if as a reminder the main functionality of this game visually is from update game right it does exactly what it sounds like it's going to update the html or the dom with whatever's happening all right so we can see it the main core functionality is going to be based on these two classes that we'll make so think back to when you made a bank think back to when you made a car with qazi right we're going to make a player now and we're going to make a game all right so what i'm going to do we're going to be unconventional we're going to start with the classes first so that update game might make sense right we're going to start with by making the classes cool so let's scroll down to the class player right this is the part that you guys should be familiar with when i make a new player it should look something like this and we have to pass in qazi the health and the attack damage which is just how much damage will cause this punch do that's that's what seven is standing for right cool so as you can see this is where the name goes the health goes and the attack damage goes and then from here we put that for each property of an object right so how do i get if after i create a new player how do i get kazi's name you're going to do kazi.net or kazi right so let's not we don't have to make any of the functions i just want to showcase you how this works so if we scroll down let's find where we have to make the players who will create two players using the player class right so what we have to do i'll do is say let player 1 right you can call this whatever but i want to call player 1 equal to how do we make a new instance of an object we can say new the class name right so capita capital p parentheses and then whatever we pass in so a reminder what do we pass in we need name health and attack damage okay so let's see so we're gonna need name which will be player one will be this time we'll make it quasi right and then the next parameter is health we'll say 100 and for attack damage let's just say 10 so now that that's there this is player 1. if i were to console log player one what am i going to see guys and we see there you go there is our player object with name health and tactic so if i say player1.health right we should see 100. cool if i wanted the player one's name that name right so that's why in the example we have something like this let's see over here yeah that's why i said player one a name is the name or kazi because that's the name of the variable beautiful so at this point you guys should be able to make player two so i don't make player two same thing let player two is equal to new player lance we'll say 100 as well and we'll also make 15 to make it fair well sorry not fair that's not fair at all we'll make it 10. sorry beautiful all right so with that said those are our two player classes right so with coding everything's a pattern and once you understand the pattern we can replicate and do what we need to so this is how you create two players from the player class how do we create a game object from the game class okay cool so if you were saying like game equals new game right is that it right well if you're one they're not sure if this is it we're gonna look up and see if we need to pass anything in the constructor nothing so this is it for the game class right and if i were to console log the game right let's see what we find out we say the object and only attribute that it has is is over is false right as a reminder what is is over mean right basically if is over equals true the game is over if it's false i can still punch quasi he can still punch me back alright we can keep playing so that's what the game is so if i were to if i wanted to see the state of the game i can just say console log game dot is over and it's false so is the game over false it's not over awesome so that's the basics i initialized it like this we're going to come back to this but this is my review for the classes cool so now when i say p1 dot health or p1 that name or game dot is over you should know what i mean cool all righty so now that you've got your refresher on how the classes work we're going to make the core function that's not in any class it's called update game and again it's going to update the html to the game right so if you look at the comment here we're going to update the dom with the names and the latest health of the players what do i mean by that let's break it down by the names so with names where are the names on the html do you see it it's player one and player two right i wanna change this to the names that i put in so if you look all the way down player one is kazi so this should be changed to kazi alright so how do i change that to cause right to break it down step by step first i need to grab this dom element all right so how do i grab the player one dom element so lucky for you all the elements that you need are up here you're just going to have to examine each one and think about what you need and they're pretty easy to read in my opinion so which of these variables contains the name dom element all right i know you guys see it it's number 38 p1 named it is equal to p1 name right if i were to console.log it just to prove it to you guys p1 name div hit run boom there it is html div element and then how do i get the player one text in there right do you remember think back to what kali taught you he said dot inner text and i can see player one so again where is this coming from we are grabbing it from the dom which is right here and you can see it highlighted p1 name the inner text of this div is player one okay cool so now that we know how to get this player 1 we need to determine what we want to change it to right so in this function line 44 we can write p1 name div right and what do i want to change about this div do i want to change the whole entire div no just the inner text so to change the inner text you just do it enter text again and to actually update it or change it you say equals and then if i say something like dog this is going to say dog right but it's i don't want to say dog i want to say kazi and i could just hard code this to kazi this is still technically correct right but what would be more accurate is if i get it from this object player one object so how do i get the name of player one right so you see how the code can be written in a way that's readable so if i want player 1 right i could write player 1 here that would still work but this is the key here this is the parentheses in here this is the argument i'm passing player 1 as p1 so what i'm basically saying is player 1 is the same as p1 so whenever i say p1 i'm talking about player 1. same thing with p2 okay so in the inner text here if i say p1 this is what is the data type of p1 is it a string a number or an object i'm gonna give you guys five seconds one two three four five if you said object you are correct it's the same as the player object that we created before so if this is the object what properties does this object have and which one do i need right i need the name so i'll just say p1 dot name and there we go all right and i'm just underneath this i'll call update game right here i'm going to move it later but if i say update game and i say pass in oops actually no i can't do that and you go back cool if i were to go down here to prove it to you let's see you want to be calling update game here so in line 143 this is where we're going to call update game and we're gonna pass in player one or actually no we're gonna do this sorry let me start over so we're gonna come down to 143 and over here in 137 we're gonna save that player data so p1 is equal to player one and p2 is equal to player two okay we're doing this so that we have the original player data all right so when we reset it's going to be easier so now like i said before player 1 is the same as p1 cool so we want to start the game by updating it and we can put p1 p2 and we can say the game i think was the third variable game state oh yeah game dot is over perfect okay now hit run here look at that quasi it's kazi now right how is it kazi did i write just kazi there nope because i am saying an update game change that inner text to player one's name all right like i said before we could do dog here and if i hit run it's going to be dog cool and again like i said kazi would still work in this scenario right but it's not what we call dynamic right it's hard-coded quasi right i want it to be whatever i put so if i put p1 that name here it's qazi but if i go back to this instance in 134 if i change this to kevin hit run now it's kevin see how it's dynamic depending on what it's like kind of like when you start a video game and it says enter your name here the game will be updated to say that name all right so that's what we're doing all right so hit run cool so if i ask you guys how can we put in player two's name how can we put player two's name what would you guys do you guys got the pattern it's gonna be p2 name div dot inner text is equal to p2 dot name boom that's it awesome so what about the health well the health right we're gonna what we need to start thinking about what div holds this health right let's see if there's anything that can help us here all right if you're not sure we can also look here so in the health it's going to be the p1 health right so we have to grab that element by its id and we already did over here right p1 health dip so following the same pattern we can just say p1 health div dot inner text is equal to what we're going to put is the p1 dot health all right same thing here p2healthdiv dot in our text oops dot enter text is equal to p2 dot l awesome so this isn't so bad because this is it this is what's actually making it so we can see what's going on after i punch quasi or he punches me back cool so now the next thing is if i punch qazi his health will drop to like 90 or whatever okay so if it's 90 are we still playing yes or no yes so if we're still playing right that means we can keep going at it but if my health is zero can qazi still punch me no he shouldn't be able to i'm already done right so we can set a condition to make it so it stops updating the game and we can declare a winner right because that means the game is over so we can clear a condition like i said so if the player health is less than or equal to zero then set is over to true right so basically told you what's right for the condition so how do i get the player health again p1 dot health okay you're right health right and what do we want to check about the health we just want to say p1.health right what we want to say is if p1 that health if kazi's health is less than or equal to zero right then the game should be over right but what about my health if my health is less than or equal to zero right can we keep playing no so what am i really saying then um what i'm saying is if either player's health is equal to zero right so we can say this or right here this means or p2.health is less than or equal to zero so let's read this out fully together so this is saying if kazi's health is less than zero or equal to zero or if lance's health is less than or equal to zero that means the game is over but is it over by just writing this if statement not really right what we need to do is take the game state right or in other words take game dot is over right and set that to true and then we can update the game state our game state is what we passed in here game state to equal game dot is over right so it's like it's called transitive property i'm saying this is now true and now game state is also equal to true right cool now if you remember the solution and the demo when kazi beats me right it's going to say kazi's wins over here in this area right here where my mouse is right so what we need to do to make it so that messages displays is find out which of these holds that resultive right if i go to the html let's look at the html where are you over here 989 it's empty right but we want to populate it with a message that says kazi wins right so that's what this update game is going to return right so we're going to say result dot inner text right where am i getting result from i'm getting it from over here all right it's actually called result div sorry and how do i change it to the message well the message is can be like kazi wins but that's not dynamic guys if i put kazi wins here and i beat qazi it's gonna still say kazi wins and that's not right so what we need to do is make a dynamic by saying is equal to game dot declare winner right and pass in the arguments let's pause them you might be wondering lance what the hell is declare winner well don't worry declare winner if you remember up at the top here it's a function or method that comes from the game class and we haven't made declare winner yet so don't worry about it just know that we have to call it right here okay so declare winner and if you look at declare winner all right sorry for moving around it's going to take three properties it's gonna take the game state which is game is over right it's gonna take p1 and p2 right kind of like transferring this over it's like uh this guy was doing stuff and then now pass it on to the next task right declare winner his job all it is is to let us know that handles who the winner is right update game is just updating the game declare winner is telling us who actually won between the two does that make sense perfect and the last thing we want to do in this if statement we can just say return the game state perfect okay that should be good then that's update game for you so let's hit run perfect so now we got quasi lens right we're making progress on our app already cool awesome so now we need to do strike and heal and strike and heal is from the player class right so remember this is the player object and methods are functions within the class right so when i never think about methods methods are just what that object is supposed to do so what is the player object supposed to do it's supposed to strike an attack right now it can also heal up so that's why these two methods are strike and heal all right you guys are doing great so far right that first function wasn't bad right this thing should be more familiar this this method okay it's kind of like look at this as like a big review of everything you learned so far and don't worry if it doesn't make sense take your time pause the video take a break take a walk right the cool part about this being a youtube video is that you can take it at a pace that you want so with let damage amount right so this is the comment here strike is attacking an enemy from a random number between zero and your attack damage bonus okay so what we're going to need to do is get a random number between 1 and 10 and that is the damage amount right so let's do that so how do we get a random number guys do you remember to get a random number we're gonna use math.random right and what i wanna what i wanna do is store that in a variable so let's make a variable let's call it damage amount all right and we'll set this equal to math.random right and then if i do times 10 that's going to give me a random number between 1 and 10. right and more specifically every single number between one and then so that means 1.5 1.6 1.7 1.10 do you want to do 0.5 damage to causey or lance no so there's two ways we could go about it we could do math.ceiling to round down or math.floor sorry math.ceiling to round up and map that floor to round down right and if i want to make it to 10 right let's use math.seal so math.seal is how you use it put that in parentheses and there we go so if i asked you guys what does line 75 do it gets a random number between one and ten cool and we store that random number let's say it's seven and put it in damage amount all right so how can we take that damage amount okay and subtract the enemy's health by it right so let's say i'm quasi i'm punching or striking lance myself and for seven damage right how can i reflect that on lance's health that i lost seven damage well we have to subtract it with the damage amount so to get the how do i get the enemy health then that's probably a question you have well again you have to ask yourself do i have access right that's kind of like the key here do i have access to the enemy health if i look at the parentheses here yes i do it's an under enemy so if i were to console log enemy and test this function out right that's going to be the player object right or the one who's getting attacked in this case me so what i could do is say enemy right and how do i get the health of a player exactly.health right this is not new you got it guys that health right and how do i subtract damage amount by it well it's going to be minus equals damage amount right subtract enemy health by the damage amount not too bad right cool all right so then if i did the damage already what should i do next i should update the game because kazi can punch me but it's not gonna get reflected on here unless i update the game so let's update the game by saying by saying um what's it called player not player then we could say oops player then we could say enemy and then we could say the state of the game which is just going to be game state right or in other words game dot is over perfect all right and the last thing to need to do is return a message right and basically the message is going to say like qazi attacks lands for this much damage right and if you remember there's something called template literals where we can make this dynamic we could say player dot name which is going to be kazi attacks template literal lance and get the name for and how do i get the amount of damage well luckily thanks to the variable name you can just say damage amount perfect cool so we should have strike and i know you're gonna say attack damage is not used but i'm gonna come back to it if this makes sense to you guys okay cool all right so let's test the function out and see if it works so we can hard code that function and call it right here remember p1 is player one so how do i use the strike method of this player right if you remember a method it's just a function inside of an object so we could just say dodge strike and remember i can't just write dot strike i have to pass in what i have to pass in dun dun the player the enemy and how much damage right so what i'll put here is player one right that's the player the enemy is gonna be player two and the attack damage is going to be 10. remember i'm not using attack damage yet right so let's run this function and see what happens boom 91 right so how much damage did kazi do to me he did nine damage if i run he did one damage to me right see how it's a random number each time the strike is working perfectly right so we can do console log two we can console.log p1 strike to see what it returns to us is it run 92 and it says qazi attacks lance for eight all right so we are missing something that's why you always want a console log to make sure you're not missing anything so let's see for eight didn't say damage all right so that looks more uh like an actual game message so it's a run kazi attacks lands for nine damage right so this is perfect this is the strike function already set up right cool so now let's talk about uh the attack damage argument so remember i'm not using this right but this has the same name as a player as the player attack damage right so at the moment we're getting a random number between 1 and 10 right but you guys should be able to understand this if i remove this 10 and said attack damage right what did i just do what's going to be the random number if you said i don't know right that's going to be true because it's dynamic right why is it dynamic because if i put let's say i put 25 here right as attack damage what that means is if i go over here i'm now getting a random number between 1 and 25 or whatever i put as attack damage let's see if that's right let's hit run 11 damage right that's big boy damage that's five all right 13 right nine all right two right 13. there's a lot of ways to get a number but it can go as high as 25 if you put it there there you go that's a big one 23 damage right so what i'm saying is if i based it off now make it even more dynamic instead of just writing 25 i want to say it's going to be based off p1 dot attack damage right so now what is the random number between all right take a look at player one the random number now is between one and ten again right so this is the place where you're going to input your character stats right so in the video game you put the player's name you put the health and then you could say qazi can do uh 50 damage right let's hit run run 14 19 23 48 damage right so as you can see this is what controls how much den so there's a lot of variation now that we added to the game right you could give someone with a thousand health and someone else a thousand damage if you wanted to right but for simplicity's sake i'm going to keep it at 100 and i'm going to keep this at 10. okay so let's hit run and now it's back to 1 through 10. cool and you also know that this piece of code is what makes me or makes quasi do the punch all right if you wanted to change it around to me doing the punch back to kazi you say p2.strike change this player to p2 change this to p1 and take in player 2's damage yeah cool so the way i would like to understand this app is remember the bits and pieces of this app and figure out ways to we can put it together and when we want to put together right so we don't we can erase this because we get how it works now if i hit run right nothing happens right because i only want to call this strike function at a certain point but we'll get back to that later so that's the strike right i'm gonna move a little bit faster because the heel is actually the exact same thing except no one takes one argument just who the player that's gonna heal right so if cause is healing we're going to put causes information in here okay so the first thing is get a random number between one and five let's do it so let's call it hp amount and let's get a random number between one and five well that's going to equal right math.random times 5 right but this is going to be 0 through 5 and it's going to be the decimal places so we want to say math.seal right and there we go all right that's the hp amount how do we add the hp amount to the player's health well we can just say player right if you remember this up here it's going to be plus equals player dot health well not player health sorry player dot health sorry is going to be plus equals the hp amount okie dokie so we got player.health plus equals hpm cool so after we updated the health in the background right we need to update the front end with it so our phone was only a way that we could do that it's with update game so update game it's going to take in the player right and also p2 and also game state all right which is also just game that is over perfect okay and then we're gonna return a nice message so that we could see it which can be similar to before which is backticks right it's going to read qazi heals for 5 hp for example so to get kazzy's name we say player.name and then we can say heals for the hp amount and then you could say hp exclamation point perfect now let's test if this works okay so to test if it works we're gonna get p1 how do i get the heal method dot heal what arguments does it take it's gonna take in who's healing right and i hit run i healed for 103. let's see if our message works so let's console log the return kazi heals for three hp that's perfect all right 101 104 101 right so this piece of code is how a player can heal right so there you go and with that if you wanted to make player two heal just say p2.heal and p2 right the benefit of making something dynamic is that you can heal like this okay oh i see i see speaking of making a dynamic i made it a little too dynamic it's a good thing we tested this so go back to the heel yes this could just be p1 p2 right because those are the variables that hold the player names so now i've hit run there you go 100 101. now let's only lance heals for four so remember this is how a player can heal depending on who wants to heal you just change it from p1 to p2 so erase that and guess what guys we finish the player class let's go so the player class is now done and let's say the game is pretty much half done too right we already can strike we can also heal cool so now let's work on the game class all right so remember refresh on the game class the game object represents the whole entire game and within that game right we are using strike and heal right but the only thing that we care about with the game is checking if it's over right which it should be false at the beginning uh declaring the winner right after we update the game we have to say like oh qazi wins or oh lance wins right we also want to be able to reset that's what this button is for but let's say we're all at zero hp if i hit reset we should be able to restart our health back to normal set is over back to false and then we can fight again right then there's also this bonus function called play right and play is gonna make it so that we can simulate the whole match okay so you don't even have to play the game you can kind of just simulate what would happen right by pressing the simulate button okay so let's work on that and if we do that the game is pretty much done right we just need to add like little details like sound effects so starting with declare winner if the game is over and a player health has zero health declare the winner right so let's do that let's create a message variable that's the first thing right here so let's say let message and that's it okay it's going to hold a different message based on the condition right so that means if you look at this it says if is over is true and qazi health is less than equal to zero then update the message variable to qazi wins right so there i kind of tell you guys how to write this exact thing you say if right code block and read this and translate it to code well if is over right is over equals equals true all right and how come i don't have to write game dot is over right well take a look do i have access to just is over yes i do right over here it takes in is over p1 p2 so i can just call it freely like so cool so if is over is true right and p1 dot health is less than or equal to zero right in other words if the game is over and causes health to zero right then i want to make the message right update the message to say backticks p 2 dot name wins why do i want to say p2.name wins all right think about it for a second if the player wants health is zero who actually won player two all right kazi's health is zero then i win lance wins all right next is the elsif right i'm going to write it just right over here else if which is the other what's the other scenario in this case well the other scenario is is over equal equal true and right and means both conditions have to be true p2.health is equal less than or equal to zero okay and if that's true right we want it so that the message says p1 wins yeah so the message is gonna say p one dot name wins perfect okay and then if i want i could just take this and put it over here perfect cool and after that we also have a victory sound that i want to play so if you look in the html and you remember the prep course that we did together all the sounds are set up right here right we have p1 attack p1 heal p2 attack p2 heal and victory so and all the sounds are loaded up on here as well so we want to play is that victory sound over here so let's play that victory sound and remember to play the victory sound we just do document get the element by id which is just going to be victory and we're going to hit dot play right and then since we have the message variable we can just say message all right make that really simple cool and now we can declare the winner right this function is now up and running let's see what's what's going on here a message okay good this function is now up and running and if you remember update game function let's see where is it perfect in update game function i said game dot declare winner because that's the method of the game and we passed it in and that's going to hold the message so what is going to show up in the inner text of this resultive exactly it's going to show lance wins or kazi wins okay cool and we can't test it yet until until um you know we get the actual attacking functionality up and running so why don't we do that so before we get through the reset and play we're gonna pause this for a second and we're gonna make it so that we can actually punch and heal right so let's scroll all the way down to the bottom right to the player one controls this is the meat of the project right so if you remember the prep i'm using document.add event listener key down right it's listening for me pressing down on my keyboard uh the specific thing is if i press the q button then i want to be able to attack right so let's set that up so if right and how do i get the key for q right it's going to come through this e parameter right here which is like your keyboard event so if my keyboard dot key right is equal equal to q that's basically what i want to say here so i'll say if equal to q or if i press q and right p2 dot health is greater than zero and the game dot is over is equal equal to false right there's three conditions here why do they matter because i want to be able to press q but i can only press this q if you know player 2 is still alive and the game is not over otherwise i'm just going to keep beating up a dead horse right we don't want to do that so let's put the code block in here and after striking right play the attack sound that's the comment that should go in here right after striking then play the attack sound well how do i strike well i showed you guys how to strike to strike you just have to say the person that's striking which is player one right uh put in who's striking who's the enemy and we wanna make sure that takes in the attack damage right we're making a dynamic here cool so let's hit run if i press q oops no click on the app press q hey look at that we're doing some damage here so if i hit run again to reset it for now right i also want to make a sound you know just to put some impact right so if you look over here which one is the player one attack it is p1 attack right awesome i made the names nice and easy for you guys so it's not too confusing i know it's a lot right but you guys if you guys made it to this point you're doing great so far so how do i grab that element you can say document dot get element by id you can say p1 attack right and you can just say dot play perfect cool so now let's hit run and now we punch all right there you go so now it works i figured out i named i gave the wrong audio files in here it was a dot wav file so i changed it to mp3 so if you fork this rebel at the time watching this video it should say mp3 and it should be good to go like you don't do anything different code wise so let's test it out hit run hey there you go a nice crisp punching sound i'm like literally punching myself and that's the funny part about this so cause he's punching lance doing random damage nice so the cue button works all right the next thing you want to do is set up the e button right same conditions but this time it's for heal right this should say then heal perfect okay so after that's done you set up the same condition if e dot key is equal to where do we want to make the heal button to for player one it's gonna be a right you could set this to whatever you want right the cool thing i love about this is that you can add this to your own game your own project right so if you understand this we can reuse those pieces again and again so a and right b one right well p2 we could also put p2.health here mostly because if i'm kazi and my health is zero he shouldn't be healing while i'm dead right we should just not be able to play so p2.health is greater than zero then p and right and game dot is over is equal equal to false right then we shouldn't be able to heal all right actually no no no if it is true then we should be able to heal yeah yeah there you go so after healing play the heel sound so let's heal so to heal you guys want to do this p1.heal parentheses p1 and then we could say something like uh document element by id and i will save you guys to look it's just going to be p1 here save you guys some time there and how do i play the sound at that dom element it's going to be play so run hit attack that's it heal oh it's not playing you need to double check run oh now it's not loading okay let me try refreshing oh i don't want to lose this progress okay let's check our progress ah there it is we lost it so let's put this back on here the sounds are correct yep yeah see how it says mp3 now before if you looked at the video it says wav it should be mp3 there we go so if i press q p one attack play what the hell okay i see what's wrong this if statement needs his curly brackets okay cool so now we can bring this back uh we can bring back this sound okay cool so the strike is the same the heel is what's new i took out the is over false right that should actually be covered over here let's hit run and now it was a q okay it shouldn't be playing that heel sound okay how about heal all right heel's working fine now it's this guy why are you playing both sounds and healing let's see ah okay i see now all right so you tell me guys if you see the error and the error is actually in the heel all right what is the difference between one equal side and two equals sign so i totally forgot this should have two otherwise it's recognizing every key as the the key press for heal all right even if i press q so there you go that's kazi punching now he heals perfect right so now it's starting to get fun right well fun for qazi not really for me because i'm getting beat up here all right so let's add my controls and guess what the controls is the same exact thing so let's do the if statement all right if e dot key is equal equal i won't forget this time and the punch for lance or me is going to be p and we do the and i want to make sure if kazi's health is greater than zero i should still be able to punch him right and then and uh game dot is over is equal equal to false perfect now after striking then play the attack sound so let's strike p2 dot strike what is the arguments that strike takes it's going to take in the player and i love that replit shows you you know like the little comments of what arguments does it take takes in the player the enemy and the damage so the enemy is player one or kazi and the attack damage is my attack damage and it's like that okay and after we strike we need to play the sound and to save you guys some time it's basically document dot get element dot get element by id and i believe it's p2 attack right i have to make sure you can just look over here it is p2 attack that's how you get that id then you hit play okay cool let's hit run and hp oh i attacked myself uh that's not good there you go for some reason when i the names were switched around and that was really confusing so i hit refresh and now let's see if cube okay that works fine if e dot key oh can't forget the curly brackets okay i hear two sounds there you go that's one now i'm going to punch quasi [Music] and they switch places that's interesting oh that's a really funny bug it's like i punch and then they switch oh and i think it's because of the strike okay so going back to the top guys let's go to the strike and where it says update game this is going to be different so this is too dynamic so we have to put back this to player one and player two and i actually had that before so now we're not gonna get that weird switching names i'm when i put player and enemy there i'm saying that they're switching roles so that's why you see kazia lance switch and now that's why i got confused but now there we go all right now we can actually fight the game i can heal well kazuki can you actually can't heal yet now there's like a back and forth here it's making it a lot more fun there you go so that cleared it up just to recap make sure in your strike function when you update the game it shouldn't say player enemy it just should say p1 p2 so go to line 79 change this from player to p1 change this from p2 to enemy because it should be the same it shouldn't be able to be switched around like that shouldn't be dynamic in this sense so cool that's strike so now let's do the if statement for the heal which is pretty simple the key is going to be l for here right not capital l lower case and if you know p1 that health is greater than zero then we should be able to heal still and i can't forget the curly brackets so inside the curly brackets it says after healing play heal sound so let's how do we heal as player two just use the method and pass it in then how do we play the sound we get the dom element which should just be p2 heal and then do dot play awesome and that should be it so let's hit run and let's see if we have a game oh i love the heel sound effect for my my heel it's like whoop whoop and then kazi says [Music] right and hey lance wins did you hear that that is the victory sound from declare winner let's see well i passed it declare winner drink the man right here play the victory sound right now the only problem is after we play the game it's like a one-time use we can't play anymore because this reset button doesn't work so we're almost done guys we just need to set up this reset button right and the reset button is pretty simple we just kind of set all the values back to its original state right so what i mean by values i mean p1 health causes health and my health sending it back to 100. so all you have to do is just say p1 do i have access to p1 yes i do i say health is equal to oops 100 all right p2.health is equal to 100 right and then we also want to set the game is over to what do you want is over to be false again or true again false because if this dot is over is equal to false that means we can keep playing and do we want to see lance wins right i don't think kazi wants to see my name and for resetting right my name winning and for resetting so we're going to get that result div again get the inner text and how do we make it so that it doesn't show lance wins well we can just say empty quotes that's going to make it blank that's how you clear your inputs that's how you clear your dips and when we're set we should also update the game to p1 p2 and set the game state to whatever this dot is over is perfect so if i hit run here let's uh play the game [Music] qazi wins let's hit reset ay and then we can just play again let's see who wins this time i win this time right this is getting this is really fun i had a lot of fun making this guys with that said that's pretty much the fighting game app right so it wasn't too bad it looks like a lot of code but if you really break it down it's just understanding each piece like all right you want to reset just get the player health all right what do you want to set the health to 100 all right how do you make sure the game is playable false right so if it helps to write stuff down and look it over again feel free to do so right the last function here is the play button this is going to be the bonus feature it's the simulation right if i hit reset i should be able to simulate the game and just see what would happen right so to play i usually like to reset to make sure the player's health is back to full before starting right so how do we reset the game well reset is a method within game so if it's within game and you're calling something within itself you can say this right this represent rob is pointing to itself so that just means the game it's like saying game dot reset right game.reset takes two parameters p1 and p2 right and that's it okay cool now we have the while loop so we went over while loops in that prep video that i had with you guys that prep video that i have with you guys and what we want to do is make sure both players get to strike so that means kazi goes once and then heals and then i go once heals and then it just keeps looping till this dot is over is true because the second this turns true the match is over right so all you have to do is just call the each command right that's it so that's just p1 dot strike p1 p2 and p1 dot attack damage that's it so kazi got to strike in the simulation now what we should do next is p2.heal right this could be any order that you want so now kazi strikes i heal right this is kind of the script so in this script i heal and then now i strike so it's going to say p2 is the player the enemy is p1 and we're going to take in my attack damage okay cool [Music] right and then there's also p1 dot heal all right p1 so i so this is the script guys cause he strikes i heal i strike cause heals all right cause he strikes i heal i strike i was going to keep doing that to one of us dies which will happen eventually and this is the way to make it most fair right in a while loop so i don't have to do any work at all right so once is over is true which means we're out of the while loop right we're going to declare the winner so we can just say return this dot declare winner and we can say this dot is over p1 and p2 right because remember declare winner takes in the game state p1 p2 perfect cool and then uh there is a glitch where it says undefined so let's just make the message say tie right it's a tie when i can't determine who wins okay cool so now that we have that functionality just double check everything time test it out now to actually run the code i had a little to do here which is add a click listener to the play button right so we need to find the div that holds the simulate button so if you look at the top here going up the top there is a play button right here play button right that's going to hold play so all you need to do [Music] is come down below here and say play button dot on click all right it's lowercase because it's not react is equal to the function where result dot inner text is equal to game dot play and then you put in p1 p2 perfect let's hit run okay so now that you have that we can hit the simulate button it should work now let's go lance wins right how's the tie kazi wins there we go cool so now the simulate button works and we're free to just simulate or we could reset and we could just start playing and you can make this fighting game even more advanced you can add like a kick option that does more damage you can add like a i don't know a special move like hadouken and it does even more damage right all you have to do is go to the player class right and add that method in here right this is what you need the essential tools to create something like this and i hope you guys enjoyed if you made it this far in the video congratulations this is the fighting game so sami show me how i did share with us how you did the fighting game and make sure to fork this ripple and place it back into the main course so let me show you guys how to do that okay so let's say your code is working and it's up to date all you guys need to do is go to the main replit again right and you can go to the solution and compare it to how i did in the solution and what you could do is put your code in the exercise folder so if this is your index right you want to take your index click ctrl a ctrl c and then paste it on here right so that it's up to date and has your code okay so once you do that your reply is complete right we moved over here so you could test stuff a lot easier perfect so that's it that's the fighting game guys i'm glad you guys walked through it with me thanks for watching this part all right so you've made it to the netflix clone i'm excited about this one because there's a little bit of a story that goes along with this so let's let's think about a scenario right netflix is hiring you as a developer to fix their app alright if you click on this button right here open in a new tab you're gonna see that looks pretty empty that's because the movies aren't being loaded in properly so it's your job as a developer to make the api call and pull the movies that we need it should look something like this so if you go to your javascript course rebel go to open in the new tab for that you should see this nice page create netflix and bam this is what netflix is supposed to use and this is what netflix is supposed to look like and as you can see all the netflix originals are here stranger things season four if you guys are watching let me know how you guys think about it and then there's trending now and there's also top rated movies right so if you didn't know in the background this is using an api from moviesdb so we're going to be working with a real api and if you get it working netflix is up and running again so this is what it looks like what you're going to need to do is hex to exit this out hop over back into the exercise folder and take these files you're going to notice a link to this replicate netflix project and this is where we're going to be doing most of our coding so let's get started and let's take a look at the assignment so here's our app make netflix here's the scenario where we have to make sure that fetch movies is working so the core functionality of this app is to get fetch movies working right and fetch movies is going to take in a url a div id or a class right so fetch movies is over here as you can see the api url the dom element right what do i mean by dom element what do you guys think what is a dom element right so with dom element it's going to be one of these it's going to be either original movies which is a class trending or top rated right why would i want to put dom element as an argument right because this is actually a dynamic function right why is it dynamic if you remember what dynamic is it can be inputted with any you know parameter or argument and still get you the right itself right result it's not hard-coded right so later on i need to make an api call a separate one to get the trending one but where do i want to put it well that's where dom element comes in dom element is just who doesn't represent one of these guys right so if i want to put it in trending right i need this dom element the trending div because that's where i want to put it and then if you notice there's something called path type that one you might not know but when you look at the data there's two types in here there is let me see let's bring back let's bring that back in here [Music] there's two types of paths what i mean by paths is this if i could create netflix do you notice the difference between these movies and these movies well this is called poster path and this is called backdrop path it's the wide one so you have to define on your api data which path is going to do you want a posterior path or a backdrop path all right that's what that's here for cool so that's what path type is and again here we're going to use the fetch method right to call the api and then we're going to use fetch to get the response and then call something called show movies that's another function right so this is a function that displays the movies to the dom right so fetch movies is just fetching the movies show movies is another function that's gonna show the movies over here right so we're gonna need to take that object and place it into the down all right nothing new right i'll walk you guys through that eventually but i think you guys know how that's done right next we have a function that fetches netflix originals right so these three functions are gonna need some api calls so what i did is x tap the tab over here and let me get you the api that you're gonna need so the url for this one all right let's do a comment here a url to get originals is going to be this api and the cool part is you don't have to worry about getting an api key i already got it for you it's this one right here all right then we can also get the url for sorry this is the url for trending we need a url [Music] for original movies which is just going to be this yep and then we can do something like this oops like that and see the top rated url i have for you guys it's going to be right url pull in and boom there you go so these are the urls that you want to use and you're going to use these and put them into fetch movies right so after you get the url you're gonna call call fetch movies all right so as you can see fetch movies is the key here so i'll put this three times so after this call fetch movies and after this call pledge movies all right why am i calling fetch movies because fetch movies again is already making the api call right it's already making an api call i'm taking a dynamic one and then you're gonna choose where it goes right so it's already being handled right it's a helper function right it's called a helper function because it's helping get originals fetch the movies it's helping trending fetch the trending movies right or using it dynamically alright so that's pretty much it for the app what you need to do is figure out how it comes together and i would start with this function on line 45 okay so best of luck this is definitely a little bit less complex than the fighting game that you guys have done but i think you guys can do it and if you get this working you're free to do whatever you want with this ui because you can use this to make your own netflix change out the code to make i don't know disney plus however you guys want to move it however you guys want to do it so good luck i'll see you guys in the solution awesome so how'd you guys do were you able to get it working if you were close or you got to finish congratulations you have netflix right if you didn't this is what the solution part is for and maybe you can see maybe that i coded it a little bit differently or maybe you coded it better than me right hats off to you if you did but let's walk through the solution right so we have the make netflix app we have fetch movies and the three main functions and i just realized the url is already on here so i didn't need to paste it down below that's okay we'll keep it moving we're gonna see the great originals trending now top rated right so let's break this down here are the divs that we need to know original movies has the netflix originals trending has trending yada yada you guys know that right here's an interesting one window dot unload right it's exactly what it sounds like it's basically a method right because it's coming from window and when the window loads run these three functions so it's going to run those three functions and then display it on our netflix app right but at the moment you're not going to see anything right because those functions don't exist or they don't do anything right they're blank all right so let's start with the core of our functionality and that's going to be on fetch movies so let's hop over to fetch movies that's gonna be on line 45 i believe yep it's right there so now that you're on fetch movies we're gonna need to do is take a look at url dom element and path type i explained this in the last video so to get started using it you just want to say fetch right and then how do i fetch you know api data well you just put the api url right so that could look two ways it could look like this fetch this whole thing or and this would work you could totally do this but this is only getting top rated as you can see but i want to make fetch movies dynamic so how do i make this dynamic just type in url how come that's allowed well i'm passing that as an argument right i'll put that long string when i call the function later cool so after that we can do a dot then all right and again with the cool thing with that then is you can just write it like here parentheses and remember dot then is handling what you want to do after the promise is resolved right so if i say uh that then here and i say response and then say arrow and then say console.log response okay cool so if i hit run here boom nothing really happens and you can even check it on inspect element over here nothing all right reason being we didn't really call fetch movie so let's do that right here all right so coming down below here we're just going to call fetch movies to test it out and here we need to pass in a url dom element and a path type but are we using dom element or path type just yet nah we're not using it just yet so we're gonna just pass in a url and i can't just write url here because then it'll be undefined fetching undefined right so let's pass in a real api url which was this one up the top get originals and we'll paste it right here and let's put some more space so you guys don't get confused all right this is a function call passing an api url we can also hit refresh here because it's going to run then console and look at that response right look at this we got a response here's everything we need the headers the status status 200 means it's good which means we're good to go right so now that we have the response though we need to do something else and something else with the response right well in here if dot okay right if it's successful or if we got 200 we're gonna return right response dot json right cool then we can add an else all right and then we can just throw an error so we can say throw a new instance of an error right the classes are coming back here right something went wrong just in case something went wrong along the way we can have this else statement cool but as you see we got the response object but we didn't get any data right and the okay is true so that's good we didn't get any data all right what we need to get the data is go over to line 54 where this parentheses and you're just gonna have to type in dot then remember dot then is handling what we get back from this right so basically after that then and you can change multiple dot then you can do that then that then not then this is the second dot then and this parameter we'll call data right and then we will console.log the data right so there we go let's hit refresh and look when i contact data this is what we get back we get an object right most of the time when you make an api call you're going to get an array of objects or just an object itself so this time we got one object right and if we open it up we got results which is what right an array right and inside that array what's inside that array let's open it up objects right and notice something there is a backdrop path the back drop path is a character is a what's it called a property with a value of the image remember backdrop is the wide one right so let's open up zero again so there is the backdrop path and here we have the poster path right so i didn't just make this up this is how we can determine whether we want the path type to be the backdrop or the path type to be the poster right so there's fetch movies and now it's pretty much set up right the only thing that we could add here is a dot catch all right.catch is just here because if there's any error we can say error and then arrow here and say console.log error right okay cool we're actually pretty much done with the fetch movies already we're fetching the data right but then we want to take this whole data and show it onto our app right so how do we show movies right luckily we have a function for that show movies all right so what i'm going to do is i'm going to erase this because we don't want to call fetch movies here all right we're going to call it somewhere else what we want to care about now is show movies right show movies is exactly what it sounds like and its job is to display that movies that object that we got back all right this thing this results array and display it like all of these 20 and display it into our dom over here right so that means we're going to use the dom and how do we select things from the dom all right so one of the very first things that we're going to do is create a variable that grabs the id or class right why do i say or class right that's because we have a class that's going to hold original movies and the rest are ids right so what we're going to do is make a variable var movies right element right because it's a dom element is equal to so if i wanted to get a class or an id right i'm not sure what it is can i use document.getelementbyid not get element by id right this is only going to grab an id it's not going to get a class how about by class name right this could work too but that's only going to be class so what i want to do is grab query selector document.we're right document.queryselector if you don't know it's just going to grab the first instance of the class or id right what do i mean let's say we have four boxes right and they're all classes called box it's gonna grab the first box if you have four ids it's gonna grab the four id luckily right we only have one of these one of these one of these so it's always gonna pick the right one so query selector and how do i make it so it's dynamic right i want to grab the trending one so i could just write you know trending here and it would only grab trending right it's static but to make it dynamic right we have access to dom underscore element and where does dom element come from it comes from this argument here and that's what we're passing in okay cool next thing all right we're going to loop through movies object so remember the part on the javascript course about objects there's a way to loop through them and you can use something called the four of loop right so to use a four of loop you say four just like we do with a for loop right but to use four of you're just gonna say four let movie of the object name so what is the object name here right it's going to be called movies right but let's think about this what am i looping through if i just say movies if i'm looking through movies i'm looping through this whole object right but where in this object does the movies live it lives in the results right so i want to be looping through the array right of objects so how can i if this is if movies is an object how do i get the results from that object aha right you guys got it results so let movie of movies dot results okay so from here we can console.log right uh movie let's start let's stop there just to make sense of it all right and instead of console logging the data in line 55 i don't want to print it i want to call show movies right and for now we're going to say url right that's what we need to pass here url actually not url we should pass data because that's the object right the data is the movies the dom element right we can keep that the same and the path type we keep that the same cool so to get this up and running right show movies is gonna get called when i call fetch movies so what we should do is call fetch movies let's call fetch movies again test it out see if i have it pasted right nice i still have the api right then we're going to say the dom element is the original and the original is like this all right original movies yep okay so original movie just copy that that's the class name comma and it should be dot original movie since it's a class and in the comma we want poster path poster underscore path all right so let's hit refresh on this and you see this console log where is this console coming from it's coming from this in line 70. so we're consolidating what a movie is so what is a movie then what does this tell you right it tells me that these are all the objects inside of the movies array all right if our console log up top here console.log movies.results right let's hit refresh on this at the top here see this array of 20. that is movies.results we're we're looping through movies.results so movie is each individual object so this is the first one which is stranger things this was all of us are dead lucifer squid game first kill right it's exactly what it sounds like every movie in movie results okay so when i say movie i'm talking about each movie cool so what do we want to do with this loop then all right what do we want to do with each movie well with each movie right i want to create an image element right there should be an image element if you remember the finished app right let's uh bring it back again and keep bringing it back i should just keep it let's go here open here and let's look oop let's look at create netflix each of these is an image tag with the data of that movie right so what we need to do is for every movie and movie result let's create an image element right so we can actually create that by making a variable so we can say i've been saying var let's just say let to keep it consistent let and let so let's say let image element right and set this equal to document dot create element all right this is how you create an element using the dom img this is making an image tag right so this is this comment right here within loop create image element all right let's get these also in here [Music] set attribute set source i can actually copy all these awesome all right so now we need to set an attribute right so the attribute of this is going to be image element right that's the variable holding the element and we're gonna make an image tag for every single movie all right image element dot set attribute right is data dash id and then you're going to comma movie right what's movie movie is the object all right and how do i get the id right right here id so how do i get an id of the movie object you say movie.id i'm saying attribute as data id okay cool so now when you see set source here that is the actual image itself right this is creating the image tag this is giving it an attribute of the id this is putting the picture in the element make sense cool so we can do an image element dot source right that's how you change it it's equal to and then we have to have the link so the api link for this is universal right it's going to be something like this boom image element.source is equal to this image path right where am i getting this from well if you look that is the url of the image and over here it just needs the path to add on to it right so we put this after original then you get the backdrop but if you put oops if you put this poster path in front of the url you get the poster that's how this works right but now what is this what is this uh dollar sign template movie bracket path type well this is going to get you it's a dynamic way to go into the movie object and path type remember it's dynamic it could be backdrop or poster if this says if this were to say something like um back drop path then it's going to get only the backdrops it's static if i said poster path it's only going to get the posters but if i say path type path type then it's going to get whatever i passed in so now it's dynamic cool oh i copied it over there we go now i can go back like so perfect so the next thing we need to do is uh we actually don't need to add these an event listener i'm gonna take that out but we can add this append the image element to the dom element selected right what does that mean right what it means is let's say i want to add original movies or that's what this data is it should go underneath netflix originals right so how do i put those image tags right that's the step we fetched the data we got each individual movie we created an image tag we put the picture in there where do we put them that's what the step is where do we put those images right and where we put them is going to depend on what we put as the dom element so if you look under the original movies this is what we need we need to put it in this div right so how do we put stuff in this div well we're going to use the append method right so let's come down below right here and we can say movies element right dot append child right so child right is whatever's inside the div right so basically add image element to the movie element right so now we're combining it together so l element oh element there you go so now we appended the child to the dom element selected yep so we're selecting the dom with dom element and it's movies l and when we say movies l add an image element to that movies right so what is that happening visually basically add stranger things to that div add this movie to that div add lucifer to that div it's going to do this one by one because of the loop for every movie in movie result create an image tag set the attribute put the source in and add it to the div and then again create the image tag create the source add it to the div until all 20 is done makes sense and that's guess what that's it that's show movies so if i were to let's hit refresh on this guy see what happens hey look at that exactly how i said it it appended a movie element onto netflix original so the first part is done right that's sick right but now it's gonna go away because i'm gonna erase fetch movies right because this is a static way of doing that like the point of this exercise is to show you dynamic api calls right so i erased it and now if i refresh we lost the progress but you guys know how it works now right so with that said right show movies is done fetch movies is done now let's make the dynamic calls right notice how i have the api already for you what you need to do is just say let url right let url equal to this right and then we call fetch movies remember the thing that we just erased right now we can add it back in but this is forget originals so d you could type in this whole string here but it would look very long right you could just type in url why that's because we have url right here all right holding this long string that's another way another trick for you guys if you have a really long api call and you don't want to you know fill up your function calls with that long string you can just store it in a shorter variable all right making use of variables here and then put the same exact parameters dot original underscore underscore movies comma poster oops the poster path awesome so this is get originals and if i were to hit refresh on here it works again right it works again because why why is this working even though i didn't call get originals well if you go at the top remember that windows unload it's already calling it right so we are one third of the way there the rest is simple so call movies let's figure out that so we can just call fetch movies here we can take this comment that i made for you guys and do let url equal to this right and pretty much do the same thing i can say url and this time right it's different we want to say hashtag trending why are we saying hashtag trending it's hashtag because this is an id you got it so trending and we want the backdrop right the wide one backdrop okay i love coding because once you know the individual piece it starts to get a lot simpler because it's the same pattern over and over again okay so now that that's done if i hit refresh here hey trending is available awesome okay top rated same deal let's hit let url equal boom call fetch movies right we can say url here comma the next thing is going to be top rated and is that a class or an id it is an id top rated all right so this isn't too bad right guys if i do back drop underscore path hit run right at refresh let's frickin go and with that said guys this is your netflix app where you can go big and small look at that awesome so look at that you made netflix you've got it working your boss is happy right feel free to take this project and do whatever you want with it right you can make your own netflix you can make disney plus right but this is how it works you guys learn how to make apis and they're dynamic so congratulations this is it for the project give yourself a round of applause and this has been awesome wow that was a lot i mean that was over 10 hours of content if you got to hear start to finish first of all i love you my adsense loves you thank you so much and i think your skills javascript skills went way higher now you're still not a pro but this is way more than you might have ever done okay and you definitely have increased your skill set so give yourself a huge pat on the back i'm really proud of you for getting to here i hope this was exciting riveting fun engaging insightful interesting and more than anything else just curiosity inducing i hope that you want to endeavor on this journey and on this path to like learn more javascript and just improve your coding skills i had a lot of fun making this for you our team had clever programmer me and lance david everybody had so much fun putting this course together for you i hope you enjoyed it but let this be just a start in your journey there's so much more for you to do i can't wait to see what types of projects you build because that's what you need to do now okay it's all about building projects with this and taking this to a whole another level so if you enjoyed this smash that like button subscribe to the channel because this is the channel where you will become the best developer on planet earth and look out for more content okay so thanks so much for watching and as always this is qazi and i'll see you in the next video 696926