Learn JavaScript With These 4 Projects!

if you're a beginner JavaScript programmer or have no experience writing code before then this video is for you what I'll be doing is walking you through four beginner projects that are fun simple and easy to follow along with and help you learn JavaScript in a practical Hands-On way rather than watching a ton of theoretical tutorials which can be long and boring we're just going to jump into some projects I'm going to stop every now and then explain the concepts that I'm using but you'll be able to see how we actually apply everything and build something out that's fun interesting you can show to friends family maybe your spouse Etc this is going to be a great video for anyone really just looking to get their hands dirty and to build something out in the next hour or two alright so before I get into the environment setup here I'll just mention what the four projects are the first project is a quiz game the second project is a random numbered guesser the third is rock paper scissors with a little bit of a Twist on it and the last is a Choose Your Own Adventure game these are going in order of ascending difficulty meaning the first project will be the simplest then they'll get a bit more difficult until we get to the last project which is slightly more challenging that said even beginner programmers will be able to follow along here and if you want to skip forward to one of the projects I've listed all of the timestamps will be available in the description and you should see them on the screen right now what I will also mention is that if you want to get better at programming I do have a programming course it's called programmingexpert.io if you guys want to purchase that and support me I'd greatly appreciate that you can look at it from the link in the description and if you're at all interested in web 3 and blockchain technology and kind of the development side of that then you can check out blockchain expert my other course from the link in the description alright let's get started with the environment setup if you already know how to write JavaScript code and you've got things set up and you have node.js installed feel free to skip through this portion but for any of you that don't have this or have never written code before pay close attention here sorry as I walk through this setup so what we need when we're writing code is something that can execute our code and then a place where we can write our code now for JavaScript you have a few different options but in this tutorial I'm going to use something called node JS now node.js is actually a client-side application that allows you to run JavaScript directly in your terminal or your command prompt you don't need to really know what that means but the first step in this tutorial for anyone who doesn't have this installed is going to be to go to Google and search node.js I'll put this link in the description as well and you're going to download whatever the recommended version of node.js is for either Windows Mac or Linux you're going to go to the installer so when you download this it should go in your downloads or something like that double click the installer run it and then it should run or install node.js for you node.js allows you to execute a Javascript file so we can do all of our code directly in our terminal and we don't need to open up something like a browser or interact with any HTML okay so make sure you've got node.js installed once you have that installed we're going to install something called Visual Studio code now this is a code editor which is a place where we can write our code so just like Microsoft Word helps us write documents when we are you know writing an essay or something like that we have special tools called code editors or Ides integrated development environments that allow us to write code kind of get some syntax highlighting formatting Etc so that's what Visual Studio code is go to this website again download the recommended version for Windows Mac or Linux double-click the installer install it and then open it up so at this point you should be open in Visual Studio code yours is going to look a bit different than mine because I have some settings and some themes and stuff don't worry about that all you're going to do right now is you're going to go to file open folder and then you're going to make a new folder in some location that you can remember so I usually just recommend going on the desktop so you go to the desktop make a new folder again Mac Windows whatever doesn't matter call this something like Tech with Tim tutorial whatever you want to name it click enter and then open up that folder so I'll actually just go through the step here so I'm following along with you from here you're going to be brought into an environment that looks similar to this what you'll do now is create a Javascript file and then we'll pretty much be Off to the Races and ready to write our code so you can see on the left hand side of the screen here we have a bunch of different buttons the tab you want to be in is the file explorer which is kind of the files right here you're going to click on this button which stands for new file or you're going to go to file and then new file like that okay what we'll do is go to this new file button it's going to pop up this little area and we're just going to type something like script dot JS now you can call this whatever you want so long as you end it in a DOT JS extension dot JS stands for JavaScript and that's the extension for any JavaScript code files so I'm going to go ahead and hit enter and now I'm inside of a Javascript file from here we're just going to make sure that our node.js installation is working and then we'll be ready to get onto the project so we're just going to type console.log and then inside of Double quotation marks we're going to type hello so just exactly what I have on the screen here don't worry too much about it just type this in save your file with control s or by going to file and then save and then what you can do is pop open this terminal from the bottom of the screen so you can see I kind of put my mouse down here and I can drag this up you also can hit control and then back tick on your keyboard back tick is at the very top left hand side of the keyboard where the tilde or the squiggly line is and that's going to toggle the keyboard for you for most of you it's going to be easier just to kind of grab this from the bottom of the screen from here it's automatically going to open the terminal in the same directory where your file is so what you'll do now is you'll just type node and then the name of your Javascript file which in this case is script.js okay if you named IT Tech with tim.js if you named it main.js then you're going to obviously replace script.js with them so go ahead and hit enter and you should see that you get hello appearing in the console if that worked then you're all set up and ready to go if for some reason you got some error with this command you're going to have to look up how to fix your node.js installation unfortunately I can't help you with that in this video but you just need a way to execute this Javascript file quickly recap install node.js install Visual Studio code open up a folder in Visual Studio code like I just showed you create a new Javascript file and then run the file using node name of the file okay that's how we do that from our terminal if you're on Mac Linux Etc this the steps are going to be the exact same but you're just going to see probably a few slightly different things depending on your operating system that's totally fine follow the same steps okay so we're all set up now what I'm going to do is go into full screen mode and we're going to begin our first project which is a quiz game now what I'll be doing is writing a little bit of code then I'll be stopping kind of explaining that code so if something doesn't make sense just hold on I'm sure I'm going to explain it in just a minute or two all right so for our quiz game let's begin with what we want to build the idea here is to make something you can give to like your friend your son your spouse whatever that's a quiz about yourself or a quiz about something that you know a lot about so in my case I'll make a quiz about different computer components but for you guys you can make a quiz like what's my favorite food what's my favorite pastime what do I do at night where do I go at 9pm on Thursdays whatever you want to do right you can make this as personal as you want so I'll give you a bit of a template for the project and then you can extend this on your own and make it as long as you see fit the idea is we'll keep track of the number of correct and incorrect answers and that way what we can do is tell them you got 70 on this quiz or you got 30 or whatever the score is okay so let's begin the first thing we need to do is get some console input from our user that means we need to allow them to type something into the screen so how do we do that well the way we do that is actually by installing a package which is going to give us access to some function which we can use to get some input from the user so we're going to go back to our terminal here so just open this up right and we're going to type npm install and then prompt Dash sync okay npm stands for node package manager and this is something that installs different dependencies on your computer you can then use within your JavaScript files so we type npm install prompt sync and that's going to give us access to a module which will allow us to kind of ask the user to type in some input okay so just run that from your terminal you're going to see some output here don't worry if you get any vulnerabilities or issues that's totally fine now once you've installed that I'm just going to clear my terminal here we're going to go to the very top of our file and we're going to say const this is how we declare a variable we're going to say prompt is equal to require and then inside of Double quotation marks we're going to say prompt Dash sync and we're going to put another set of parentheses here I know this is a little bit confusing it looks like a lot of gibberish just type exactly what I have here this is kind of the most complicated line that we need what this does is load in this module so it requires its use and then we get access to it in this prompt variable that now means we can use this prompt variable to actually grab user input okay so we said we're declaring a constant this is a type of variable in JavaScript we're saying this is equal to require we're requiring prompt sync module and then we put another set of parentheses here not going to explain exactly why we need those but just make sure you have the second set so you have this line exactly as you see it here now let's just quickly test this code out by typing prompt and then we're just going to say enter something and then a colon and a space make sure you add the space there's a bit of separation between where we're going to be entering some code and then we can clear and we can run our code again notice by the way in the terminal you can use the up and down arrow key to cycle through commands you've typed before so I'm hitting the up and down arrow key and it's kind of going through my command so I don't have to type it every time anyways I'm going to hit node here notice it says enter something and you can see my cursors appearing in the terminal so now I can type something like hello world and then we just continue with the rest of the program perfect so prompt gives us access to whatever the user types so now we're quickly going to talk about some variables we're going to define those and use them and then continue on from there okay so what we're going to do to begin here is we're going to say const and we'll just say value is equal to prompt now what we're doing here is declaring a variable a variable is really just some named value that gives us access to some kind of piece of data in this case the data we're going to be getting access to is something known as a string now within our programming languages we have some different data types these are the different pieces of information essentially that we can store in our program so we can have numbers we can have a Boolean value something like true or false we can have strings arrays we'll talk about those later as we go through the rest of this video I'm sure for many of you already know what those data types are but what this prompt function is going to do for us is it's going to give us something known as a string now a string is anything that is surrounded in double or single quotation marks there's some more complicated strings as well but typically your strings are going to be in double or single quotation marks meaning if I have something like one this is the string one if I have something like hello this is the string hello and usually they'll highlight in yellow or some color for you in your code editor okay so what we're doing is we're saying we're going to have a variable we've made this a constant now a constant is a variable whose value cannot change and we're saying that's equal to this function which gives us some type of string so what I'm going to do now is I'm going to type console.log value and what this is going to do is print out or log to our console which is really our terminal the value that we typed in so whatever gets stored in this variable we can then access by using the name of the variable here inside of our console.log again I know this is a lot of information especially if you've never programmed before I'm going to try my best not to overload you but these are kind of fundamental concepts we need to go over so I'm going to run my code again and you're going to see I get enter something and then I can type in hello when I do that notice hello gets printed to the screen because that's what we typed in from this function again function gives us some kind of string this is a data type a piece of information we can have in our program we store that in the variable value and then we access what's stored inside of that variable by using the variable name notice if I try to use something like value 1 here and I run the code I actually get an error so you can see this kind of reference errors popping up saying value 1 is not defined and that's because no variable called value one exists if I wanted to print value one so I wanted to see that in my terminal then I would actually need to surround this in a string so I tell my computer and I tell JavaScript hey I'm not trying to access a variable I actually want to print out literally value one so now if we clear and run and I type something like hello you can see I get value 1 this time because I put it inside of a string okay so that's kind of what we've learned so far we know the string is anything surrounded in quotation marks and we know how to access a variable great so now we're getting something typed in from the user and I just want to show you if I try to do something like value equals 1 here can I go ahead and run my code you're going to notice I get another error now the reason is I'm getting assignment to constant variable now this is where we'll quickly talk about the types of variables and then we'll continue on with the rest of the code so here we're using a constant now a constant is something that can't change so think of constant value right or think of something like gravity which is a constant this is something that's always going to be the same so we have the ability to Define on our variables if we want them to be able to change or not change in this case we've said well we're not going to change this variable so we'll make it a constant however if we wanted to be able to change the value of it later on we'd have to use this keyword known as let or VAR for now just use the let keyword but there is this VAR keyword which is effectively going to do the same thing it just has a few small differences that we don't need to get into right now so I'm going to say let value equals prompt and when I use let this says we're setting up a variable which can be dynamic which can change so we can modify its value without a problem so now if we run our code and we type something in you notice there's no issue because we use let instead of const okay so already in seven minutes there you've learned more than you probably would in like you know five six different tutorials for JavaScript okay we have our variable now and what we should probably do is start working on our quiz we understand the fundamentals now we can move on and kind of create this quiz game so the first thing we want to do is probably welcome the user to our quiz so we're going to put a console.log here and we'll just say something like welcome to the computer Hardware if we can type this correctly quiz exclamation point okay so now the program is going to start it's going to print this message to the user and the first thing I think I want to ask the user is if they'd like to maybe play the quiz or maybe we'll just go right into question one in fact we can just do question one so what I'm going to do here is I'm going to say const and I'm going to say answer one which is a variable and this is a valid variable Name by the way you can use numbers in your variable name the rules for the variable naming are if you wanted to have something like a space you'd have to use an underscore so if I wanted to do answer one hello I couldn't do it with a space that would cause an error instead I'd need the underscore to represent that space or I could then put a capital on the first letter here so something like answer one hello to kind of space it out and indicate it's multiple words this is something known as camelcase which is suggested when you're naming variables another rule is that you can't have any special characters something like an ampersand is not going to work and you can't start your variables with a number but you can't have numbers inside of the variable okay so we're going to say const answer one is equal to and then we're going to ask a question so what's the first question we should ask we'll say something like what is the brain of the computer question mark okay and then we'll allow the user to type now we're going to be looking for a specific answer and in this case the answer we want is CPU or Central Processing Unit okay so now what we need to do is we need to check what their answer is and we need to see if it's correct if it's correct we want to tell them they got it right otherwise we want to tell them they got it wrong so how do we do that well we need a way to compare this value with the correct answer so I'm going to make another variable here and I'm going to say const and we'll say correct underscore answer one is equal to and in a string we're going to type CPU because this is the expected answer that we're looking for okay now what we'll do is we'll use something known as an if statement an if statement allows us to evaluate something known as a condition and see if that's true so we're going to say if answer one is equal to the correct answer then we're going to put a set of curly braces like this don't worry I'm going to explain this in a second and we're going to say console.log you got it correct exclamation point like that okay so what we've done here is we've set up an if statement now the syntax of an if statement is you write if you put an opening parenthesis and then you put something known as a condition now a condition is something that evaluates to true or false now the way that this kind of works is that we have another data type in our program or in JavaScript known as a Boolean or a Bool okay now this is anything that is the value true or false so these are the only two valid values that are booleans so true or false values okay now what we can do is we can write something known as a condition which uses something known as a conditional operator to see if something is a true or false so when I use something like three equal signs here what I'm actually doing is I'm comparing the left hand side to the right hand side and I'm asking if they are equivalent if they are the same exact value and this same type now there is a double equal sign as well don't use that right now just use the triple equal sign we don't want to get confused with the double equal sign which works a little bit differently okay so I say is answer one equivalent to answer two now this condition here is going to give me the value true or false now the way the if statement works is if whatever is inside of these parentheses is true then it's going to execute what's inside of this curly brace block okay so this little set of curly braces here is associated with the if statement and it's saying do whatever's inside of the set of curly braces only if this is true okay if it's false we're just not going to do it we're not going to enter into that block so let's run this and see what we get and it says welcome to the computer hardware quiz what is the brain of the computer and we're going to type CPU and then notice it says you got it correct whereas if I run this and I type something like the motherboard we don't get any results the reason for that is that the motherboard was not the same as the CPU and so we didn't enter inside of this block meaning we didn't print this out okay there's a few more things to teach you related to this but hopefully all this is making a bit of sense trying to kind of blur the line here between in-depth explanations and you know actually writing some code once we get through all this in this first project we're going to go a lot faster I just wanted to make sure that I cover all the bases in case you've never seen JavaScript before in your life alright so let's run this one more time and I just want to kind of test something out and this is what I would encourage you to do as well on your own if you have a question don't necessarily wait for me to answer it you can try to figure it out by actually writing some code and modifying what you have so for example what happens if I type CPU with lowercase that could be an answer someone could type that in without uppercases and notice we actually don't get that output saying you've got it correct the reason for that is when we compare two strings in JavaScript we're comparing them with their capitalization so they're case sensitive so what we actually need to do if we want to allow this answer or an answer like CP and then lowercase U to be correct is we need to convert either our expected answer or the answer the user types in to either lowercase or uppercase and then compare them against each other so the idea here is that we keep our correct answer all in the same case so in this case I keep it completely in uppercase which then means what I can do is I can take whatever the user types in and I can just convert it completely into uppercase and then I can compare the two strings so you're just going to compare them using the same case so how do I do that well there's actually a method and a method is something that you can kind of use on a data structure on a data type and the way this works is you put a dot so we have answer one which is a variable this variable is equal to a string I'm going to do Dot and then this is 2 and then notice we have uppercase here and put a set of parentheses now what this is going to do is it's going to take answer one convert it completely into uppercases and then give me that result kind of in place of this string or in place of this kind of a line or you know expression that you see right here trying to come up with the correct word there it's not going to modify the value of answer one answer one will stay the same but what will happen is it will essentially inject what answer one two uppercase is on the left hand side of this equal sign which then means we'll be comparing the uppercase answer one to the uppercase correct answer to check if it's correct okay so let's clear and run and now you can see if I type something like CPU and lowercase we still get it correct because we converted that to uppercase and even if I type something like CPU like that we still get it correct now last thing to show you here is that if I do add something like a space so I have CPU space it's not going to give us the correct answer and that's because a string that contains a space in it is different than a string that doesn't contain the spaces okay so just keep that in mind you're comparing every single individual character and you can kind of modify the string in a way such that you're avoiding any incorrect answers when it is correct it's just not exactly what you were expecting okay all right so that's a good start now one other thing to mention is that we should probably tell the user when they get it wrong so what I'm going to do is add something known as an else statement now an else statement is the complement to an if statement and this block so whatever's inside of this curly brace is going to execute if the if statement is false okay so if this condition here is false we don't do this instead so else we do what's inside of this block excuse me so I'm going to take this console.log and I'm going to say you got it wrong dot dot dot okay so now if we clear here bring this up a little bit and run the code and we type something like I don't know GPU you can see it says you got it wrong alright so at this point we've learned quite a bit already and we're actually ready to just extend this project and add a bunch more questions now we'll add some more things to it like keeping track of how many correct answers we have but for now let's just copy all of the code that we have paste this here and let's change our variables just so we don't get an error so notice here if I highlight this it's saying cannot redeclare block scoped variable answer one essentially what that's saying is we already have a variable called answer one so I can't make that again right because this is defining the variable when I use this const block so instead I'm going to change this to answer 2 and then correct answer 2. now let's come up with another question we can do something like what is better a 3090 TI or a 40 60. I don't even know if they have a 40 60 or not but let's just go with that and for the correct answer this is going to be a 3090 TI okay so now we can just change this around again so we'll say answer two and then correct answer to and now everything should just work the exact same we've just kind of copied and pasted this and changed the answer and the question okay so let's save that and run what is the brain of the computer CPU excuse me 30 90 TI and it actually says we got it wrong there um okay so let me check why we're getting that aha so the reason we're getting this is because we converted our answer to to uppercase when our answer here is in lowercase what I would need to do is just change this to be Capital TI like that or alternatively rather than converting this to uppercase I would need to convert this to lowercase so if you do get an error don't freak out obviously just do kind of something like what I just did and look through a code and say hey why am I getting that wrong well I typed it in lowercase I was converted to uppercase okay that's probably the issue and you know that you're kind of going to have the error in one of these few lines here because this is where it's evaluating if you're getting it true or false all right so this happens all the time even to experience programmers like me don't worry if you get an error very very common in fact almost a good thing when you're just learning how to code okay so now let's run this again what is the brain of the computer CPU and now we'll type 39 DTI and it says we got it correct that time so we fixed it and it is working great okay let's do one more question and then we'll add uh tracking of the correct questions so answer three correct answer three answer three and answer three and this time we can do something like say what is the recommended amount of RAM in 2023 now this is going to be a subjective answer but I'm just going to go with 16 gigabytes like that this time we're going to convert this to uppercase so we're matching the casing of our answer and that's all we need that'll fix that we're just going to need to make sure these are answer three they are okay perfect let's run this and CPU 39 DTI and 16 gigabytes okay awesome all right so our quiz has now been written we have three questions obviously you can add a lot more I'm just not going to bore you by adding those right now the next thing that we really need to do is keep track of how many correct answers we have now this is fairly straightforward but what we'd like to have is some kind of variable that's storing you have one answer correct two answer correct three answers correct Etc and then display that to the user at the end so the way to do that is to go at the very top of our program it doesn't really matter exactly where so long as it's near the top and before your first question and we're going to say let correct and we'll just say answers like this equal and then zero now one thing I'll mention just because some of you may be getting upset about this I've used underscores for these variables uh really it's going to be best practice to not use the underscore and to do it in camel case like I have suggested uh different programming languages have different conventions for the way you write your variables in JavaScript you are supposed to use camel case so just because that's the convention I'm going to change these here it doesn't really matter no one's going to get mad at you at least you know when you're just starting out but just to kind of be correct I'm going to make sure we're using camel case rather than underscores which is actually a convention in Python known as snake case anyways I have this variable let correct answers equal zero now this time we're using something known as the number data type and this allows us to perform arithmetic so we can add to the number subtract from the number Etc which is different than the string right so the string zero and the number zero are you different like discrete unique values and they can be used differently because of the type of their data the type of their information right so this is a number meaning we can kind of add to it subtract from it Etc so now that we have this variable here what we're able to do is go inside of our if statements and after we cancel that log correct or before it doesn't really matter but just inside of this if statement we can actually write correct answer like this which is our numeric variable and then we can say plus equals one now saying plus equals one is going to add 1 to this value another way that we can do this is we can say correct answers is equal to correct answers plus one where we're saying okay well what was the previous value of correct answers well was it one was it two was it zero whatever it is add one to it and then assign that two correct answers so changing the value or a third way is we can write plus plus and plus plus stands for add one okay this known as the increment Operator just adds one to a variable in JavaScript so I'm going to use plus plus and I'm just going to go here and put these inside of all of the if statements and this way at the end of our program it will tell us the number of correct answers that we had okay I don't think there's much more to mention here I will just quickly say if you see these semicolons here you don't actually need them but what these stand for is a line termination or a line break which essentially means stop reading the current statement and move to the next line okay that's all that means I kind of excluded mentioning them because you don't actually need them for your code to work but since they're here I figured I'd mention that okay so now we're going to go down to the bottom of our program and we're just going to tell the user how many correct answers they got excuse me so to do that we're going to say console.log you got and then we kind of need to embed this number in the middle of the string there's a few ways to do this but the way that we're going to do it is we're going to put a comma we're then going to put the correct answers okay and then we're going to put another comma and we're going to say questions correct like that so now what this is going to say is you got it's then going to put whatever the value of that number is so one two three zero whatever and then questions correct and it's automatically going to add a space between all of these different values because that's how this function works so if I come here now I can print this out let's go CPU let's get this one wrong so we'll go with 4060. let's go with 16 gigabytes and then it says you got it correct you got two questions correct perfect now last thing we can do here is we can actually give them some kind of percentage or grade indicating like what their score was on the quiz so to do that I'm just going to make a variable here and I'm going to say total questions is equal to and I'm going to specify the total number of questions that I have which in this case is three okay so we're saying constant we're making this a constant because we don't expect to change this value throughout our program but if you did add another question obviously you would adjust this and make this 4 5 however many questions you have now what we can do is we can say you've got correct uh questions correct or correct answers questions correct then we can say you scored okay and we're gonna say correct answers and we can divide this by using the forward slash by R what is this uh total questions okay and then we can multiply it by 100 by using the asterisk operator and I'm just going to put this in a set of parentheses so that we have this being applied before we have our multiplication and then what we'll do is we'll just add a percent like that so they can see what their percentage score was so say like 87.2 whatever in this case you know 33 66 or 100 okay so now let's run this and what is brand CPU 4060 and 16 gigabytes and it says you got two questions correct you scored 66.66666 percent if you wanted to cut that off so you didn't see all of those values you do have the ability to round this now I'll show this to you even though it might be a little confusing you can simply take math.round and you can surround all of this here inside of that now I know that gets a little bit messy so what we might want to do here is a const percent is equal to and then put that there and then we can just embed the percent variable so we're kind of structuring our code a little bit better and storing some intermediate values making it a little easy to understand I know I went a bit faster just because I want to move to the next project but we're going to take math.round and we're going to round the division of this multiplied by 100 that's going to round it to the nearest decimal value so you are going to lose um the values here there's a way to keep them but I'm not going to show that to you right now so let's do this CPU and let's just hit enter there it says you got one question correct you got 33 percent perfect last thing and then we'll move on some of you may want to actually have a percent sign and you might be getting a little mad that if you put the percent sign here there's going to be a space between it so what you can do is actually perform something known as a string concatenation the way you do that is you take this which is a numeric value okay and you can't add a number to a string because imagine this right I have something like 33 plus 7. yeah as a human you can read that but JavaScript doesn't understand this because adding a string to a number could result in kind of a weird value now in JavaScript this actually does work I don't want to tell you do that because you can get some strange values so forget about the fact that it does actually work in JavaScript because you shouldn't do that what you're going to do is you're going to convert whatever the numeric value is to a string then once it's a string you can add another string to it right so if I have 33 plus percent then that's going to give me 33 because we're just kind of smooshing the values together which is known as a concatenation all right so we're going to take percent plus that but to do this we're going to say percent.2 string which is a method that again does not modify the variable it just gives us the string representation of it then we put the percent sign like that okay so let's clear and run and let's go CPU enter enter and you got one question correct and it says you score 33 we really should have you scored 33 percent okay so that is Project one I know there was a lot of stuff we covered there I'm going to go faster in the next projects but I was assuming you had zero knowledge of JavaScript we went through a lot of stuff here don't worry if it's a little bit confusing uh but hopefully this was a bit helpful taught you a bit about JavaScript and you're ready to move on to the next project all right so now we're moving on to project number two what I've done is I've created a new Javascript file so I've called this script2.js and I've just copied this line in here because we're going to need to use this for this project we'll be creating a random number guesser where we'll ask the user to input a number and then we will tell them if they are higher or lower than the random number they are attempting to guess then we're going to kind of keep track of how many guesses they've had and we're going to tell them at the end it took you say seven guesses to guess this random number blah blah blah you get the idea this will allow us to view a few new pieces of syntax in JavaScript and to practice working with math and numeric types rather than strings which is what we focused on in the last project quickly I'll mention that I am going to pick up the pace a little bit here if I'm too fast fast for you feel free to pause the video or to go to the playback speed and reduce that alternatively if I'm too slow increase the playback speed and you can get through this a little bit faster regardless would love to hear your feedback on the last project and what you guys are liking or disliking so far please let me know in the comments I always take that feedback to heart and kind of try to adjust in my future videos okay so let's get started here first thing we need to do is generate a random number now to do this we're going to create a constant we're going to call this random number we also could call this target I think that makes more sense actually excuse me and we're going to make that equal to math with a capital dot random now what math.random will do is generate a random number between 0 to 1. it's going to give you like a very long decimal value okay so if we go here and we console.log the target let's bring up our terminal here and we run this uh oops I'm running the wrong script as I was saying so let's go to node and then script2.js you can see we get a value like this so what we essentially need to do if we want to generate a random number between a range or up to some specific value is we do the following so let's say I want my random number to be between 10 and 100. the way that I need to do this is I say 10 which is the minimum possible value we can have plus and then I'm going to say math dot round and I'm going to take my math.random and I'm going to multiply that by whatever the differences between the maximum and the minimum so let's say we want the maximum to be 100 well then I'm going to generate a random number up to 90. so I'm going to multiply this by 90 which is the asterisk operator okay so I take math.round which is going to round this to the nearest whole number okay we're going to take math.random and multiply that by 90. now when we do that that's going to give us a random number between 0 and 90. so now we know the minimum will be 10 and then it can be anything between 10 and 100 because if we had this at the maximum of 90 that would give us 100 right hopefully that's making sense but that's how you do a random number within a range a lot of times you just want to do a random number that is going to be like say 0 to 100 if that's the case then you just take this and you multiply it by 100. it's important that you round this though because if you don't you're going to get a decimal value which you don't want you want a whole number right so we're going to round this off so now let's just print our Target out and notice we're gonna get a bunch of different random numbers every time I run this you should get something different or not necessarily different but something that is random okay so there you go we're generating a random number now that we have that we want to continually ask the user to guess this number if they go above it we're going to tell them you're above if they go below it they're below otherwise they got it correct so let's set up a few variables here first we're going to say let's and this is going to be guesses equal zero now what we'll do is We'll add to this every time the user makes a new guess now rather than doing this kind of constant asking right now for now what we'll do is just ask them one time get that logic set up then we'll move into that new piece of syntax we have not yet seen okay so we're going to say that the we'll actually use let's guess equal and actually no we can use constant sorry this is fine we're going to say cons guess is equal to and this is going to be prompt and we're going to say guess the number and we'll just put 0 to 100 so they know the range then we're going to put colon and a space and it's going to allow the user to type in a number now what we're going to do is we're going to compare this number to the Target value and see if it's greater than or less than however remember that when we get a guess here this is given to us as a string right so it's going to be like the string of one or two or whatever the user types in so what we actually need to do is convert this guess into a number such that we can compare this against the guess all right or again sorry not to guess the target so the way to do that is we're just going to take number here and we're just going to wrap this whole prompt statement inside of this number function all that's going to do is take whatever we type in here and convert that to a number and just as a note if you were to type in something that's not a number something like hello you're actually going to get what's kind of convenient which is Nan standing for not a number so if you type in not a number number gives you not a number which is actually a special type in JavaScript in fact we can have a look at this by saying console.log guess okay and then running this and if we type in hello notice we get Nan right where if I type in something like 2 it gives us the number two and you can tell this is a number because it's highlighting in yellow all right so now we've converted our guests into a number now that we've done that we're able to compare this against other numbers so what I'm going to do is write an if statement and for if statement we want to check if the guess is greater than or less than the target how do we do that well it's fairly intuitive we're going to say if the guess is greater than so I'm using the greater than sign and then the Target now this is a valid comparison operator in JavaScript this will compare either two strings two numbers it can actually compare pretty much any types or quite a few types at least in this case when we use two numbers it works exactly as you would expect we're checking if the guess is greater than because the I usually think of it as like the alligator mouth is eating this value is greater than Target okay if that is for now we'll just say console.log your guess is too high okay and then we'll say otherwise and then console.log so let's do this your guess is too low now I know there's an issue with this if you already know what the problem is feel free to point it out in the comments or at least make a note of it mentally but right now let's just see how this works then I'll explain the problem so let's run this okay and let's guess the number of say 56. it says our guess is too low now in order for us to determine if this is working we're just going to print out what the target value is just so that we know so actually we need to do this before the guess we're going to say console.log Target right here okay just so we can kind of make sure this is functioning so it's 16 is the actual number so if we guess say 13 your guess is too low okay round again 52 we guess 55 your guess is too high so this is functioning now the issue I was discussing is what happens if I actually guess the number right so in this case I guess 0 it says your guess is too low when really we've actually guessed the value so this is where I'm going to uh introduce something known as the else if statement now the way that elsif Stamo works is it's an additional if that we will check if the first if is false so what I can actually do here is I can go else if and just like I wrote my original if statement I can write another condition here so I can say if the guess is less than the target so now essentially the way this works is we check this first if statement if this is true we just execute this block and we skip checking this if this is false we go to the else if and we see if this is true now the interesting thing with the lcif is that you can put as many of these as you want and you can kind of check a bunch of different conditions in a row and be able to skip checking them if one of them evaluates to true so the advantage again is that if this is true we don't check any of these whereas if what I were to do is remove the else's here and just put a bunch of ifs what would happen is we would actually check every single one of these if statements because they're actually separate statements that aren't associated with each other whereas if we return to having our else's all of these are kind of Chained and put in one single statement meaning only ever one of these kind of blocks will ever be entered alright so I just wanted to show that to you but we're going to have this else if now so if this isn't true check this if this is true do this and now we can add another else so now what I'm doing is using the if else if else where now in the else condition we can say console.log you guessed it now the reason why this works here is because if I check if the guess is greater than the Target and it's not and I check if the guess is less than the Target and it's not then it must be the actual Target right it must be the same thing so if these two are false it means we must have guessed the value there's other ways we could arrange this statement just wanted to show that to you so let's now run this okay and now let's guess the number let's actually guess 56 your guess is too low let's guess 2 and it says you guessed it okay so the statement is working as we expected now one thing to mention here just while we're at it it is possible to use the less than or equal to operator exactly what it says checks if it is less than or equivalent to the value same with the greater than or equal to operator okay you also can use the not equal to operator so exclamation point equals equals if it is not equal to this do the following otherwise do this Etc okay just wanted to show you those operators okay so now that we have this what we'd like to do is repeat this until they get it correct how are we going to do that well in JavaScript we have something known as a while loop now a while loop is a loop that will continue looping while a specific condition is true so what I can do is put well put a set of parentheses and inside of here just like my if statement I put something that evaluates to true or false so in this case I'm actually just going to put the word true now I could do something like while guesses is less than 10 and that means as soon as they hit 10 guesses we're going to stop right so you can do whatever you want here for the condition but just put something that evaluates to true or false so in this case we can just directly write true now what I'm going to do is take this kind of set of curly braces here and I'm going to put all of this code inside of here now what's going to happen is we're going to do this Loop continually okay so we're going to keep doing this uh Forever Until We break out of the while loop which is something I'm going to show you now right now what we've done is we've written what size an infinite Loop this means we just keep going forever and ever and ever because this condition is always true so what we need is a way to either make this condition false or alternatively uh we need to kind of manually exit this Loop which is what I'm going to show you how to do so inside of the wall if we have a few keywords now one of the keywords is Brick what break will do is immediately exit the closest internal Loop in this case the closest Loop is the while loop so we're going to exit out of that by using the brake keyword so as soon as we see break we're immediately going to stop executing the loop and go right down to what happens after the loop okay so now what we've actually done is we've implemented a loop that will continually keep asking you to guess until you get the answer correct we'll keep adding to that but for now let's test this so clear and run and oh I didn't print out the guess um okay well we can just kind of run this let's guess 50. it's too low let's get 75 too high okay let's guess 66 too high let's guess 60 too high okay 55. too low 57 too low 58 59 and we guessed the value okay so you can see we exit out of the loop and we stop asking because we got it and we broke using this break keyword great so that's how the Wallop works now what we want to do is keep track of how many guesses the user has so what we can do is we can simply go to the top of our while loop here we can say guesses plus plus this is going to add one guess every time we enter this Loop right because we're just going to keep repeating this code so then what we can do down here is we can say console.log you guessed the number in comma guesses comma tries okay exclamation point like that it will tell tell us sorry how many guesses this took now that's pretty much going to complete the program but let's go up here and just test this out okay so guess the number 50 too high 25 too low 37 too high 30 okay 34. 33 32 you guessed it and you guessed the number in seven tries okay so I think actually that's going to wrap up our number guessing program just a few uh kind of final educational moments here I guess inside of this while loop obviously we can use this break which is what I'm doing uh but we also have the option to use another keyword which is known as continue now I won't demonstrate the use case of this but all this is going to do is immediately restart the loop okay so what I could do here and this isn't really ideal but we can write it in this way is the following okay this is just kind of an illustration of of how this works I could actually put a continue keyword here a continue keyword here and a break keyword here now what this will do is if we enter into this statement and this can be announced if actually as well then we're going to continue now what that means is bring us to the beginning of the loop don't continue executing anything after the continue statement so if the guess is greater than the target don't go down here just continue the loop again and then down here same thing if it's not greater than the target but it is less than the target continue bringing us back to the top of the loop and then if for some reason it's not any of these so if we did actually guess the value then we print you guessed it and we break right which is down here exiting the while loop this is a very like anti-pattern way to write this like I wouldn't suggest you write it this way but I'm just demonstrating the use case right so if I go here we can do this too low 75 uh too low 95 too high 90 93 92 okay you guessed it and then notice this works exactly as it functioned before okay I think that's going to wrap it up let's move on to the next project all right so the next project I have for you is a rock paper scissors game this idea is that we're just going to ask the user if they want to be rock paper scissors we're then randomly going to pick for the computer rock paper scissors we're just going to see how many wins losses or draws that they have at the end of the program let's go ahead and start writing this so I've created another script file again I'm going to take my prompt and just paste this in here I'm going to go a bit faster this time and I'll write kind of some more code and then slow it down so let's make a few variables we're going to say let wins equal zero let losses equal zero and let ties equal zero okay now what we'll need to do is we'll need to ask the user if they want to be rock paper scissors and then generate um kind of a random value and determine if the computer is rock paper or scissors so we're going to say uh const choice or yeah choice I guess is equal to prompt and then we'll say enter rock paper or scissors like that okay and we'll allow them to enter something now what I want to do is I need to make sure the user actually entered one of these valid options if they did then we'll continue otherwise we need to ask them to retry we're going to put this inside of a while loop but I like to write some more logic before we do that so I'm going to show you something new here I'm going to say if choice is equal to rock or choice is equal to paper or choice is equal to scissors and we're going to put a triple equal sign here as well like I was mentioning so what I'm actually checking here is three conditions in one and I'm chaining them together using something known as a logical operator which we've not yet seen now this double pipe operator here acts as an or okay so it's equivalent to writing or essentially what that means is if the left side or the right side is true then the whole expression evaluates to true now in this case I've confused you intentionally by writing actually two sets of ores but all this is checking when we put the ores kind of chained like this is if any of these conditions are true meaning they typed in rock paper or they typed in scissors okay you have to chain it like this how I've written it but if any three of these things are true it evaluates to true so we go we evaluate each individual condition only one of them can ever be true but as long as one of them is true we go in here otherwise we would need to say something like console.log okay and then we're going to say please enter a valid Choice okay and in fact I'm actually just going to reverse this just because I think this will be a bit educational rather than putting the else here I'm just going to put this in the if and I'm actually going to negate this I'm going to say if Choice does not equal Rock and I'm going to use something called an and choice does not equal paper and choice does not equal scissors okay so now I've just reversed the condition so that you can see how we do this in the opposite direction using the other logical operator this operator is the and it works opposite to the or both the left and the right hand side need to be true so in this case I'm saying all three of these need to be true to enter into this otherwise don't enter and then I've negated the condition so rather than checking if it is true I'm checking if it's not true so I'm saying if the choice is not equal to rock and the choice is not equal to paper and the choice is not equal to scissors so if it's not any of the valid options tell them enter a valid Choice let's just quickly test that before we go any further so we're going to clear and run script three and notice that if I type in something like R it says please enter a valid Choice whereas if I type rock that is fine okay so that is working I know that's new but wanted to show that to you all right so if they enter a valid Choice then what we do is randomly pick something for the computer so how are we going to do this we're going to say random and in this case I'm actually going to say index I'm going to teach you something new again is equal to and this is going to be math.random and we're going to multiply this by 2 and we're going to say math.round and then round this now the idea is this is going to give us a value of 0 1 or 2 which we're going to use as an index for something known as an array now I'm actually going to put const choices is equal to an array I'm going to say rock paper scissors like this now an array is a ordered collection of elements okay so what I do is I put a set of square brackets this defines an array now every element in our array is accessible by an index an index is an integer that represents the position of the element so the first element Rock here is indexable or accessible by index zero paper indexable or accessible by index one and scissors index two okay so what I've done is I've generated a random index which will correspond to either 0 1 or 2 which then in turn corresponds to rock paper or scissors right that's it that's all we're doing so that's kind of what we're doing the reason I do it out of two is because well the max index is two it's always going to be one less than the length of the array there's a lot more to talk about with arrays we're not going to get into all of it but I just wanted to show you a simple use case right here okay choices random index now we need to generate the computer choice so we're going to say const computer choice is equal to choices and the way we access an index of an element is use a set of square brackets and then we place in here random index which is the index we want to use so if I put 0 that give me rock if I put one it gives me paper if I put two that gives me scissors in this case we'll use random index because that'll be the random value now because we're not quite done we're going to say console.log the computer choice okay we're going to clear and run and we'll do something like rock and then notice it gives us paper now let's run this again let's do paper gives us paper I just want to give me something different gives me scissors okay so you can see it's randomly generating something for the computer okay perfect so now that we have all of that we're just going to check if the computer beats the player how are we going to do this well the first thing we can check for is if we have a draw if we don't have a draw then we can check the three different conditions that result in a win for the player if they don't win they lose there's a bunch of different ways to check this but it is unnecessary to check all nine different combinations because of the fact that we can exclude the draws and we only need to check for a win condition so you'll see what I mean but I can say if the computer choice is equal to the choice which is really the player choice um and what I'll do is I'll show you in vs code what I can do is I can highlight this and I can hit Ctrl H or Ctrl F and then I press this little button here standing for find and replace and I can actually put a string to replace this with so I can say player choice like that and then I can put this capitalization here and this little underscore and now you'll see what this does is it only selects where we just have Choice whereas if I remove these it's selecting like choices and it would select like the capital choice but if I put both these on I'm matching the spacing and I'm matching the capitalization and now I can press this little button that says replace all and it just replaces all of those for me okay so anyways now that I've done that I have if computer Choice equal to player choice then we drew right so I'm going to console.log draw and then I'm going to say ties plus plus again we're going to put all this in a while loop in a second but for now I just like to write all the logic kind of at once okay so we're checking if they drew if we didn't draw then we're going to check if the player beat the computer and if we didn't be the computer then we lost now there's three conditions where we beat the computer right so we're going to say else if the player choice is equal to and in this case we'll say this is paper and the computer choice is equal to rock then we won right so we could say console.log one and then we can say wins plus plus now what I could do is write another else if statement and just do the same thing and check if we are rock and the computers paper we can do all the other win conditions or I can just chain them inside of here now might get a little bit confusing but let's do it anyways because the whole point is to learn here I'm going to put these in a set of parentheses this is our first winning condition right if all of this is true if the player chose paper and the computer chose Rock we won now what's the other winning condition well the other winning condition is let's just copy this and paste this here and you're gonna see it goes on a new line for us so it kind of formats It Anyways now I'm going to say if the player chose the Rock and the computer chose paper then we won okay so that's the next winning condition so notice I've put these in a set of parentheses because I need to kind of separate them out so we have the first winning condition second winning condition and now the third winning condition and I'm going to check if any of these three winning conditions are true because if they are we won right which is why I'm separating these larger conditions with the or statement so now rather than paper rock we're going to say okay scissors and sorry I realized this is rock and this needs to be scissors okay so we're going to say if the player chose scissors and the computer chose paper then move one now maybe I'm crazy but I'm pretty sure these are the only conditions in which we win so now we handle that and then we have an else and we say okay if we didn't tie and we didn't win we must have lost so we said constellog lost and then we type losses plus plus all right so that wraps that up what I'm quickly gonna do is I'm just going to add another console.log here and I'm going to say the computer shows choose no chose colon comma and then computer choice and we actually don't need the space because it will automatically add it let's just zoom out a little bit because I know that's getting a bit hard to see so we have our three variables right we asked them to enter rock paper scissors we make sure they selected something that's valid now we haven't actually put this in a while loop yet which we will do for now this is going to tell them to enter something valid even though we'd continue with the program in a second we're gonna not do that anyways we pick what the computer is selected okay we print out what they selected and then we check if they won if they lost Etc right saying okay if it's the same then we draw so we say that otherwise we check the three winning conditions win otherwise loss all right let's run this enter rock paper scissors enter Rock the computer Choice paper you lost okay perfect let's continue enter rock paper scissors paper the computer shows scissors all right seeming like this is rigged but let's see scissors the computer says paper you won okay nice so you can see this is working however we want to now continue essentially until the user tells us to stop so now how do we do that well we use a while loop so all we do is we take all the code we want to repeat we're gonna go here and we're going to say while true okay we're gonna wrap everything inside of here so now we have a while loop which means we're just going to continually do this all right and then what we need is a way to exit the loop now first of all let's go here and put a continue statement so continue like that now the reason we're going to put continue is because if the user does not select a valid value here then we're just going to tell them to kind of go again right so we'll repeat the while loop right from the beginning which just means we're going to continue repeating this portion of code until they give us a valid value okay please enter valid this is gonna be Choice all right next then we'll do all this and then what we'd probably want to do is once we exit the loop or we need a way to exit Loop sorry so I'm going to say enter rock paper scissors and then I'm going to put in parentheses or Q to quit okay first I'm going to check if they typed in Q so I'm going to say if player choice equals equals Q then I can just go here and I can say break so I'm just going to exit the while loop for us okay so if they enter that let's quit and we can even convert this to lowercase so that if they type in uppercase q we still quit all right then lastly we'll go down here we'll just say console.log it will just print out their records so we'll say wins wins losses losses and then ties colon ties like that okay I think that's gonna be it let's run this though and give it a test okay so let's just try to quit Okay so notice there you go that works uh let's enter let me zoom in a bit here Rock Okay computer scissors you won all right uh let's enter paper excuse me okay scissors the tender something invalid okay please enter a valid choice so let's go paper and let's quit says two wins one loss and one tie all right so I think with that said that's gonna wrap up this project this is definitely the hardest one so far I wanted to go a bit more challenging and show you some more different operators and things that we can use but hopefully you guys were able to complete this and most the code that you see here makes sense now let's move on to the last project which is a Choose Your Own Adventure game alright so this project is going to be a fast one with the idea that you can extend this and make it as complicated as you want I'm just going to show you probably in about five minutes the structure of a project like this but it's really extensible and something that you could even kind of combine with some of the other projects the idea is want to have a Choose Your Own Adventure game the point is that we have all these different nested paths that we can go down so you might have seen those books before where it's like do you want to fight the dragon with the sword or do you want to run away and then it says if you decide to fight turn to page 35 if you decide to run go to page 53 a lot of kids books are kind of like that right where you're picking the path you want to go down and depending on the decision you make you're going to either win or you're going to lose or you're going to end up in a different position that's what we can do with code I'm just going to start coding it for you and you'll see very very quickly how you can kind of work on this on your own all right so the idea is we're going to first need to ask the user for some information so we're going to take this prompt and we'll start with something like const answer is equal to prompt and the first thing we might ask is something like would you like to play question mark and I usually just put what I expect the answer to be inside of parentheses so the user knows what to type so why or no okay so we're going to say if answer dot to lowercase is equal to yes then we'll play otherwise we'll console.log and we'll say that's too bad okay so that's kind of the first decision right do they want to play yes or no all right now only if they said they want to play do we ask them the next question which means we put that question inside of this if statement so I'm going to say const answer 2 is equal to prompt would you like to go left or go right question mark okay and then we're just gonna put here left slash right now I do the same thing I check if they answered left we do this if they answer right go here if you want you can say if they didn't answer correctly maybe you asked them to do it again or you can just end the game you can pick what you want if they give a invalid answer I'm just gonna essentially check for one answer if they don't give me that I'm gonna assume it's the other one so I'm going to say if answer to is equal to left then I'm going to do something here otherwise we're going to assume it's right we're going to do something here so I can actually make a comment a comment to some code that will be ignored by your program by the way if I do two slashes just to indicate this else statement is what happens if I go right so let's say we go left and I do something like console.log oops you go left and fall off bridge bit extreme here but you get the idea uh you lost okay so left was not the correct path so they have to go right so if they go right we can do something like const.log nice you go right and approach a bridge okay you can be as creative here as you want and then I can ask another question so I can say cons answer three is equal to prompt and I can say would you like to cross the bridge or uh we can say something like turn around and find another way and then we'll put as the potential answers here cross slash term okay excuse me same thing we come down here let's just make this a little bit larger and we now put another if statement and we say if answer three is equal to cross then you do something here otherwise you do something here now I don't really want to continue too far with this so I'm just going to say a console.log you cross the bridge and reach the end of the game okay otherwise we can say something like console.log you turn back and trip on a log and hurt your leg you lose okay so the whole point of what I'm trying to show you here is that we can Nest these different blocks inside of each other okay so I've done this very very simply because I'm just trying to illustrate this to you quickly because this is a project that's really mad for you to work on on your own but the point is that we only go into one block if the other block is true so if this is correct or it's like we do want to play then we ask the first question depending on the answer to the first question we now Branch off and we go to the left or we go to the right so in this case we go to the left you lose but you could make it so that each answer could potentially lead you to the correct scenario right the whole point is that you can infinitely Branch as much as you want by nesting these statements so that's what we're doing we have this all right we say otherwise if you didn't answer left you're going right okay nice you approach Bridge ask you another question and then again we check inside of here and only inside of here what the correct answer is so if you cross okay you won the game otherwise you lose but we could just make it so you continue going down a bunch of other decisions now you can even make this more complicated where you have previous decisions impact future decisions now they already do but what I mean by that is at the beginning of the game you can ask something like what weapon would you like to select do you want to wear boots or do you want to wear sandals do you want to wear a hat or do you want to take this and you can kind of you know collect some different items for example and then you can use those items later in the in the game So eventually maybe you reach a dragon or something and you can say oops you didn't bring your sword with you so you lose the game because you can't fight the dragon so the decision they made maybe 20 steps ago is now affecting them here and they have to restart get all the way back there but make sure they make the correct decision so let me run this just so you get an idea of how it works okay uh so sorry we don't want script three so close that we want script four would you like to play yes do you want to go left or right we go left and it says we lost right so we can run again yes let's go right uh nice you go right into pressure Bridge would you like to cross the bridge or turn around and find another way Let's cross and we win but again you can see if we go the wrong way so I decide to turn it says you turn back and trip on a log and hurt your leg you lost you get the point that's how the game functions now I actually worked as a uh kind of coding teacher at a summer camp where I was teaching kids or between about 10 and 15 how to make this exact game this was kind of the final project they worked on at the end of the week and I'll just say that they came up with some super creative and really interesting projects where they had like hundreds of lines of code you know 20 30 40 different paths and they absolutely loved it it was super super fun so I know this is a simple like relatively simple thing to do but it makes really interesting games and something that's really cool that you can show to your friends family whatever and you can see if they can actually get to the correct uh path and obviously the more complex and more interesting you make it the better the game's gonna be so please make something like this extend it you even could do something crazy where like one of the paths requires you to play Rock Paper Scissors and if you lose then you then you lose right and you have to go back and do it again so all kinds of interesting stuff you can do anyways with that said I think I'm gonna wrap up the video here all of this code will be available from the description in case you'd like to download it and play along with it and again remember I do have a programming course called programmingexpert.io for any of you that are really serious about getting better at programming if you enjoyed this video please give me a like subscribe the channel leave a comment let me know what you thought of it and I look forward to seeing you in the next one foreign [Music] foreign [Music]

Channel: Tech With Tim

Views: 16,607

Keywords: tech with tim, javascript projects for beginners, javascript projects, javascript project, html css javascript project, javascript api projects, javascript api tutorial, javascript, web developer, tech2 etc, api tutorial, hindi, react, coding, quality, java, coding for beginners, programming for beginners, computer science

Id: ZIw7QGVwaNI

Length: 70min 0sec (4200 seconds)

Published: Wed Jul 19 2023