WEBVTT

00:00:07.160 --> 00:00:10.370
In this video we're going to learn while loops.

00:00:10.470 --> 00:00:13.210
So what do we need to look for.

00:00:13.220 --> 00:00:17.090
We're going to use while loops to execute a piece of code.

00:00:17.340 --> 00:00:21.410
As far as a certain condition is true.

00:00:21.420 --> 00:00:22.220
So.

00:00:22.650 --> 00:00:27.170
So let's create an example let's write a piece of code.

00:00:27.240 --> 00:00:35.810
So for example we want to add to the javascript's paragraph A-number you know using a variable.

00:00:35.850 --> 00:00:46.690
So you just going to use the guess elements by id method and then refer to my paragraph and access the

00:00:46.800 --> 00:00:54.550
Ishmail and on the line break first.

00:00:56.760 --> 00:01:00.350
And the variable.

00:01:00.480 --> 00:01:04.100
So we will need to declare these variable here.

00:01:04.260 --> 00:01:07.520
So are we then we can set it to zero.

00:01:07.560 --> 00:01:08.770
No.

00:01:09.720 --> 00:01:16.890
So let's say we would like to run this piece of code as far as I is less than 5.

00:01:17.340 --> 00:01:19.630
So we're going to need to use a while loop.

00:01:19.800 --> 00:01:25.830
So the syntax is pretty easy we need the key word while then between parenthesis we going to put the

00:01:25.830 --> 00:01:32.990
condition and OFSAA that's the piece of code is going to be between curly brackets.

00:01:33.270 --> 00:01:38.520
So the condition could be he is less than 5 for example.

00:01:38.550 --> 00:01:44.910
OK so if we run this what's going to happen is that the condition is going to be tested and then we

00:01:44.910 --> 00:01:46.550
will run the code every time.

00:01:46.740 --> 00:01:48.520
The condition is true.

00:01:48.650 --> 00:01:51.340
So at the beginning he's equal to zero.

00:01:51.390 --> 00:01:59.250
We can run the code and we're going to add zero to the paragraph and then if we test again he's still

00:01:59.250 --> 00:02:02.880
equal to zero so nothing has changed.

00:02:02.910 --> 00:02:08.610
And then we're going to keep running this code unless we and then the browser is going to crash.

00:02:08.610 --> 00:02:12.910
So we definitely need something in the code to change.

00:02:13.710 --> 00:02:16.080
So we get to odd or increase.

00:02:16.120 --> 00:02:21.560
By one every time we run this piece of code and then we are sure that's the condition at some point

00:02:21.870 --> 00:02:22.920
it's going to be false.

00:02:22.950 --> 00:02:26.040
And then we are going to stop the loop.

00:02:26.430 --> 00:02:28.660
OK so let's try this and see.

00:02:29.310 --> 00:02:30.280
So it is working.

00:02:30.480 --> 00:02:35.990
So it's kept working from zero to four but once is equal to five.

00:02:36.360 --> 00:02:38.830
The code is not executed.

00:02:38.830 --> 00:02:39.590
All right.

00:02:39.600 --> 00:02:42.650
So this how while that loops work.

00:02:42.870 --> 00:02:45.630
So now we get to read a simple game.

00:02:45.900 --> 00:02:54.000
Basically we're going to have a balance of $1000 and we're going to go to a store and randomly pick

00:02:54.000 --> 00:02:58.610
items from the store between with the price between zero and $100.

00:02:58.700 --> 00:03:05.430
Are we're going to keep buying items until our balance is zero and we are interested to see what's what's

00:03:05.760 --> 00:03:11.040
what's going to happen how many items are we going to buy and also what's happening to our balance every

00:03:11.040 --> 00:03:13.160
time we buy an item.

00:03:13.230 --> 00:03:20.430
So we're going to define a variable balance and we're going to sell it to $1000.

00:03:21.450 --> 00:03:25.290
Then we need another variable.

00:03:25.290 --> 00:03:29.310
This one is items bought.

00:03:29.310 --> 00:03:29.980
OK.

00:03:30.060 --> 00:03:33.420
So this is referring to how many items we have bought so far.

00:03:33.420 --> 00:03:36.010
So at the beginning he's going to be zero.

00:03:36.330 --> 00:03:37.640
Right.

00:03:38.580 --> 00:03:45.480
And then we're going to run a loop on the condition of the loop is going to be our balance needs to

00:03:45.480 --> 00:03:46.220
be positive.

00:03:46.240 --> 00:03:47.640
So while

00:03:51.270 --> 00:03:59.640
our balance is positive then inside this code we're going to buy stuff and then we're going to change

00:04:00.360 --> 00:04:02.680
the balance and change a number of items bought.

00:04:02.700 --> 00:04:05.960
And also we will display something in here.

00:04:06.270 --> 00:04:06.790
Okay.

00:04:06.990 --> 00:04:10.940
So first of all we're going to need a second paragraph.

00:04:11.190 --> 00:04:13.220
Okay.

00:04:13.710 --> 00:04:17.200
And you're going to say current.

00:04:17.970 --> 00:04:20.010
Okay kind of balance is

00:04:22.620 --> 00:04:24.990
$1000 at the beginning.

00:04:26.140 --> 00:04:32.150
Okay let's give us an ID balance.

00:04:33.060 --> 00:04:33.830
Okay.

00:04:34.320 --> 00:04:41.130
So while the balance is positive we're going to pick up an item from the store with a price between

00:04:41.130 --> 00:04:43.310
0 and 100.

00:04:44.070 --> 00:04:54.610
So we define a variable item price and we want something between 0 and 100 so we're going to use the

00:04:54.970 --> 00:04:59.420
math method to run them.

00:04:59.740 --> 00:05:03.710
So this will return something between 0 and 1.

00:05:04.180 --> 00:05:06.000
We want something between zero and 200.

00:05:06.000 --> 00:05:11.130
So we're going to multiply these by 100 but we need a whole number.

00:05:11.130 --> 00:05:17.590
So we're just going to copy this and put it in the promise of another function.

00:05:17.620 --> 00:05:19.480
So it's going to be math floor.

00:05:19.660 --> 00:05:26.500
So this method takes this number and change it to a whole number.

00:05:27.300 --> 00:05:29.220
OK.

00:05:29.300 --> 00:05:34.300
Or it's also inside the loop.

00:05:34.310 --> 00:05:36.860
We would like to.

00:05:37.160 --> 00:05:37.530
OK.

00:05:37.660 --> 00:05:42.860
So now we've got a price so we've got something between zero and hundred pound $100.

00:05:42.880 --> 00:05:49.600
But we don't know we don't know whether we are capable of buying that because we don't know if our balance

00:05:50.410 --> 00:05:53.080
is as efficient or not.

00:05:53.080 --> 00:06:03.110
So we're going to need to test whether the item price is within our balance.

00:06:05.030 --> 00:06:18.390
Okay so if that's verified then a number of items bought is going to increase by one because we are

00:06:18.380 --> 00:06:30.450
buying the item and also our balance is going to be reduced by the item price.

00:06:32.410 --> 00:06:33.630
Okay.

00:06:34.600 --> 00:06:37.280
And also just to know what's going on.

00:06:37.310 --> 00:06:44.170
We're going to add to the balance barograph we're going to add some text showing the item price and

00:06:44.250 --> 00:06:46.090
the new balance.

00:06:46.090 --> 00:06:58.950
So we're going to use the elements by id method and we are accessing the Ishmail of the paragraph ID

00:06:58.960 --> 00:07:05.910
balance and we're adding we're adding a paragraph.

00:07:06.480 --> 00:07:07.530
Okay.

00:07:08.060 --> 00:07:19.150
I was going to say purchase amount in dollars you're going to need the variable item price for this

00:07:19.210 --> 00:07:19.880
.

00:07:20.600 --> 00:07:21.680
Okay.

00:07:21.750 --> 00:07:35.080
Followed by a full stop and then new balance in our lives as well that we need the variable balance

00:07:36.370 --> 00:07:39.130
and then a full stop.

00:07:39.310 --> 00:07:43.430
It was part of it.

00:07:46.610 --> 00:07:48.330
Okay.

00:07:48.740 --> 00:07:51.140
Ok so let's try this.

00:07:52.720 --> 00:07:56.800
Our current balance is $1000.

00:07:58.190 --> 00:08:02.400
So we've got an error in line 26.

00:08:02.680 --> 00:08:04.920
Looks like you cause an extra rockets.

00:08:04.990 --> 00:08:05.890
So it is try again.

00:08:05.880 --> 00:08:07.800
Looks like we made a mistake here.

00:08:07.810 --> 00:08:11.970
So it's plus equal.

00:08:12.320 --> 00:08:15.010
You know OK now it's working.

00:08:15.270 --> 00:08:21.930
So you can see those the beginning because our original paragraph and we added these lines as we going

00:08:21.930 --> 00:08:26.250
through the first one first item was price was seventy three dollars.

00:08:26.290 --> 00:08:32.030
And when your balance went down down down until the new balance is zero.

00:08:32.250 --> 00:08:33.140
Okay.

00:08:33.490 --> 00:08:40.120
We can add a a button just before the paragraph so that once we click on the button the code is executed

00:08:40.120 --> 00:08:40.600
.

00:08:40.600 --> 00:08:42.070
So let's let's do that.

00:08:42.120 --> 00:08:50.290
So it just creates a button and starts.

00:08:51.000 --> 00:08:54.450
We need the on click property.

00:08:54.880 --> 00:08:55.820
OK.

00:08:55.890 --> 00:08:57.910
Now we're going to need to use a function.

00:08:58.140 --> 00:09:05.100
So we're going to call it initiate game then we're going to define the function here and put all our

00:09:05.110 --> 00:09:11.340
code inside the function Shade's game.

00:09:11.360 --> 00:09:15.650
OK.

00:09:18.620 --> 00:09:19.580
OK.

00:09:19.720 --> 00:09:22.150
So noise is working once we click on the button.

00:09:22.410 --> 00:09:24.580
The code is executed.

00:09:24.580 --> 00:09:32.920
Also we can add something at the end so we can add something to the paragraph showing the number of

00:09:33.100 --> 00:09:34.800
items that we want.

00:09:34.810 --> 00:09:44.910
So you can just say document get elements point Id balance and we're adding to the in a shared bill

00:09:46.030 --> 00:09:46.950
a new paragraph

00:09:49.500 --> 00:09:53.990
you bought.

00:09:56.190 --> 00:10:06.730
You know the number of items or items bought plus items and we close the program

00:10:06.920 --> 00:10:12.860
.

00:10:14.070 --> 00:10:14.970
All right

00:10:15.820 --> 00:10:23.270
.

00:10:25.220 --> 00:10:27.950
It is right.

00:10:28.160 --> 00:10:28.470
No

00:10:31.990 --> 00:10:35.480
extra Calibra OK there.

00:10:35.860 --> 00:10:38.050
Now it's working and we can see that's the end.

00:10:38.130 --> 00:10:47.070
We can see how many items we have bought so twenty eight items is refresh the page and run again.

00:10:48.810 --> 00:10:49.660
That is exciting.

00:10:49.670 --> 00:10:49.940
OK