All right guys.
Welcome back.
In this module, we're going to learn about some other really useful features of JavaScript, for example
Randomization and Control Flow.
And I believe in learning through doing, so while we're picking up all of these skills, we're going to
be building a love calculator.
So this is a bit of a throwback to the '90s.
And for those of you guys who are snapchatting away, then, you know, you might not remember this, but it was
kind of a complicated process where you would put down one person's name, then your crush’s name, and
then through a process of complicated maths, you would arrive at some random percentage, basically, that
dictated how well matched these two people were.
So let's try and replicate this using JavaScript code.
Now, I hate to break it to you, but it's not really a love calculator. It doesn't actually work.
It's essentially a way of generating a random number to satisfy young girls’ needs to predict the future.
And we can replicate this using code.
So JavaScript has a really handy way of generating random numbers. As you can imagine, especially when
you're creating things like games,
you need a lot of random numbers to be generated. So you can do this using JavaScript by simply writing
Math.random().
And this is a function that generates a random number. And the random number that gets generated is a
16 decimal place number, and it can be any number between 0 and 0.9999999...
So essentially it never reaches 1. And the number that you get out,
so in this case n, will be different every single time you run the code, but it will always be between
0 and 0.9 to 16 decimal places, and it never ever reaches 1.
Now, this is useful because it allows us to generate up to a billion random numbers.
So, for example, say if I were to say, variable n = Math.random(), and remember we need to
use the parentheses to run the function even though it doesn't take an input.
Now say that in this case we get 0.3647 etcetera, etcetera.
Now, say if we were trying to simulate a dice roll,
so we have 6 possibilities. When we roll a dice we get any number between 1 and 6, right?
So how do we take this random number that we get from Math.random() and turn it into a number between
1 and 6?
Well, we could first multiply it by 6,
so we get 2.188.
Next we take that number and we perform Math.floor(n).
So you can see here, from our functions knowledge, we know that
n in this case is being used as an input to this function floor, which essentially rounds it down to
the nearest whole number.
In this case, it would be 2.
And now we have a number that we can work with and we can give back to the user.
So I'm going to open up my Snippets inside Chrome, and I'm going to create a variable called n that
is equal to Math.random(),
and then I'm going to console.log() whatever the number n might be.
So now I'm going to run my code and you can see we get 0.187 and then we get
0.03, 0.147, 0.8446.
So you can see that they’re random numbers between 0 and 1 and it never reaches 1, but it can in fact
be 0.
So it would be 0.0 to 16 decimal places.
That is possible with Math.random(). And we know this because if we head over to the MDN Developer
Docs and we search for Math.random(), then it tells us that this function creates a floating point number,
so a number that has decimal places, and it is a pseudo-random number in the range from 0 inclusive up
to but not including 1,
so hence the 0.99999.
And then you can use this number to scale to your desired range.
So say if we wanted to simulate a dice roll using our code, then we would be able to scale this up if
we simply did n = n * 6. And if we run the code now, then you can see that we're
getting numbers between 0 and 5.
Now, it never ever reaches 6,
the highest number we got was 5.99 and the lowest was 0.2 something.
So remember if we do Math.floor() on this, then we will get numbers that are between 0 and 5, and you can
run this for as many times as you wish but it will never show 6.
So our range currently is between 0 and 5,
so, in order to increase it to 1 and 6, to simulate that dice roll, because when we roll the dice we never
get 0,
instead we get a range between 1 and 6, then all we need to do is just to add 1 over here.
So now we get the range between 1 all the way through to 6, and this is what's called a pseudo-random
number generator.
And the reason why it's pseudo is because a computer is essentially a whole bunch of switches, just a
giant box of many, many billions of switches, and, depending on whether the switch is on or off, you essentially
get 1 or 0, and it's through these 1s and 0s
it does all this computing and all of this glorious work.
But there's one thing that it's not very good at, and that is being random. Whereas in nature it's very
easy to get randomness, in a computer, because it's a completely deterministic process,
it’s not very easy to get a true random number.
So people have come up with all sorts of ways and mathematical formulas to get this non-random computer
to generate what looks like or appears to be, at least statistically, random numbers.
Now, if you're interested in learning more about pseudo-random number generators, or what's the difference
between random and pseudo-random, then take a look at the Resources section of this lesson.
There's a link to this video by Khan Academy
that’s really really good at explaining this in more detail.
So view this as a bit of extra reading or extra curricular work if you want.
And, if we just review that process, we created a variable called n that is equal to whatever we get
back from the Math.random() function. And we know that Math.random() gives us a number within the
range between 0 to 0.9 to 16 decimal places, so 0.9999999...
Now, it can be any number in that range, but it's not very useful to us until we scale it.
So we take that number and we multiply it by whatever range we need.
So if we need numbers between 1 and 12 then we would multiply it by 12, if we need it as a dice then
we would maybe multiply it by 6 because we want numbers between 1 and 6.
So this then changes the range from 0 to 5.99999,
and we can now get any number within that range from this code.
Now, very rarely will you want to use the random number as a floating point number,
so you tend to use Math.floor() to round that number down to the nearest whole number,
and that range then becomes 0 to 5.
Now, finally, because we want a range for our dice between 1 and 6, then all we need to do is add 1 to
our code and we end up with code that generates random numbers between 1 and 6.
So now here's your challenge.
As we said we're going to be building a Love Calculator.
And the way the love calculators work is that you enter two names and it should give you back a percentage
between 1 and 100, and that number is supposed to have some sort of meaning.
So I want you, as a challenge, to create a love calculator.
So it should have two prompts that ask for the names of the two people, and then it should be able to
completely ignore that and then calculate a random number that is a percentage.
So your random number generator should generate a number between 1 and 100.
And finally you should give this information back to the user in the form of an alert telling them what
is their love score.
So pause the video now and see if you can complete this challenge.
All right.
So let's clear the screen and start from the beginning.
So the first thing I'm going to do is I'm going to create two prompts. Now, because we're not actually
doing anything with the values that they're giving us,
we’re not going to save the data that the user gives us into a variable, because we're not actually going to
be using it.
It's just there for authenticity’s sake.
So the next thing is where the real stuff happens and which is where the randomization comes in.
So let's create a very well called loveScore, and let's create this using Math.random().
And, remember, this will give us a number between 0 and up to but not including 1.
So now, if we wanted this number to be between 1 and 100, we would have to multiply that by 100.
So, if we console.log() this as it is, then you can see that we're getting numbers between 0 and 99,
and also they have lots and lots of decimal places after the number.
So let's change that.
Let's round that number down.
So let's say loveScore = Math.floor() the previous value of loveScore.
So now, if we hit run, we're getting 75, 17, so we're getting whole numbers now,
but it still does not go all the way up to 100,
but it can include 0.
So, in order to fix this, we are going to add 1 to the value, and that shifts our range up by 1, moving
it from 0 to 99, to 1 to 100.
So now that we've got our loveScore,
we can send this to the user using an alert,
"Your love score is " + loveScore.
So now, if we uncomment our prompt and hit run, then it’ll say, “What is your name?”, and it’ll say, “What is their
name?”,
and of course none of that information is used
and it just gets discarded,
because at the end of the day love is a random process. And we get back a loveScore a nd I can also
add a percentage at the end of this, and now it gives us a love score.
So pretty cool, right? Now,
wouldn’t it be nice if we could give them a custom message depending on how high or how low their score is?
So that's what we'll explore in the next lesson when we learn about Control Flow
and If-Else statements using JavaScript.
So for all of that and more, I'll see you on the next lesson.