WEBVTT 00:00:07.160 --> 00:00:10.030 In this video are we going to learn conditions. 00:00:10.200 --> 00:00:12.930 So what do we mean by conditions. 00:00:12.930 --> 00:00:19.200 Basically we are going to be executing some code depending on some conditions that we get to define 00:00:19.230 --> 00:00:22.550 ourselves so it starts with an example. 00:00:23.070 --> 00:00:31.470 So we're going to build some code where we're going to send an alert message to the user depending on 00:00:31.650 --> 00:00:32.940 a volley. 00:00:32.940 --> 00:00:37.060 So I'd say this value is the speed of a car. 00:00:37.320 --> 00:00:40.520 So you get to define a variable speed. 00:00:40.920 --> 00:00:47.430 OK let's set this variable for example to 50 mph. 00:00:47.880 --> 00:00:54.590 Now we would like to send an alert message depending on the value of the speed. 00:00:54.930 --> 00:01:03.670 So the syntax is going to be if OK followed by the condition and the condition needs to be between baroness's 00:01:03.670 --> 00:01:04.990 . 00:01:05.400 --> 00:01:14.810 So the condition could be if speed is greater than 70 mph. 00:01:15.210 --> 00:01:19.600 OK now we're going to send an alert message. 00:01:20.220 --> 00:01:25.390 The code is going to be within curly brackets. 00:01:25.540 --> 00:01:36.420 Are you going to say window alerts you are going too fast. 00:01:36.450 --> 00:01:37.870 So again what we have done here. 00:01:38.070 --> 00:01:41.690 So we said the condition. 00:01:41.700 --> 00:01:49.060 So if speed is great in an 7c and then the code executes if that condition is true. 00:01:49.170 --> 00:01:49.720 OK. 00:01:49.770 --> 00:01:52.050 Is this so. 00:01:52.890 --> 00:01:54.000 Let's try and see. 00:01:54.000 --> 00:01:56.880 So a five day refresh. 00:01:56.880 --> 00:02:03.670 Nothing happens because our condition is not true it's because the speed is too low. 00:02:03.720 --> 00:02:06.480 So let's change the speed to 80 and safe. 00:02:06.510 --> 00:02:11.870 And now we can see the alert message you are going too fast. 00:02:11.880 --> 00:02:22.170 All right so now we can add another piece of code so we can say if the speed is greater than 7c send 00:02:22.170 --> 00:02:28.330 this message and if otherwise we want to see something else happening. 00:02:28.470 --> 00:02:29.100 OK. 00:02:29.100 --> 00:02:31.350 So you can say else 00:02:35.350 --> 00:02:39.530 and then we're going to put the other piece of code to execute. 00:02:39.570 --> 00:02:46.020 If the first condition is not verified so you can say when do alerts 00:02:55.740 --> 00:02:57.060 or your speed is fine 00:02:57.070 --> 00:03:04.000 . 00:03:11.280 --> 00:03:12.390 OK. 00:03:12.900 --> 00:03:14.940 Now let's change speed to 00:03:17.910 --> 00:03:20.070 50 for example. 00:03:21.300 --> 00:03:23.430 OK so what about what the code is doing now. 00:03:23.430 --> 00:03:25.600 So first is going to check this condition. 00:03:25.950 --> 00:03:31.280 So the condition is not verified because Rhodri of 50 so we're going to go to the else piece of code 00:03:31.350 --> 00:03:34.610 and then we're going to run this code on you gets your speed is fine. 00:03:34.710 --> 00:03:43.190 OK so now let's say that if the speed is less than 70. 00:03:43.530 --> 00:03:50.670 But if it's too low below 40 for example we want to send another message. 00:03:50.730 --> 00:03:54.570 We want to say you are going too slow so I say we are on the motorway. 00:03:54.570 --> 00:03:58.780 If the speed is less than 40 it is actually slow. 00:03:59.490 --> 00:04:01.990 So how are we going to do that. 00:04:02.160 --> 00:04:09.080 Basically we're going to have three or two conditions and then else. 00:04:09.090 --> 00:04:17.220 So the first condition is if the speed is more than 70 OK and the second condition is going to be else 00:04:17.520 --> 00:04:20.230 if the speed is less than 40. 00:04:20.280 --> 00:04:22.680 So this is the syntax we need to use. 00:04:22.680 --> 00:04:23.580 So we were going to use. 00:04:23.580 --> 00:04:27.530 Else if and then we put the other condition. 00:04:28.050 --> 00:04:47.270 OK so else if the speed is less than 40 OK then we can alert you are going to slow. 00:04:47.370 --> 00:04:58.330 And finally we can have else and then executes the final piece of code. 00:04:59.340 --> 00:05:02.810 Your speed is fine. 00:05:04.770 --> 00:05:05.420 OK. 00:05:05.670 --> 00:05:07.490 So what is Troy. 00:05:07.650 --> 00:05:09.430 It's 50 so speed is fine. 00:05:09.600 --> 00:05:10.590 Let's try 30 00:05:14.970 --> 00:05:16.580 OK you're going to slow so. 00:05:16.720 --> 00:05:19.170 So how how the code works. 00:05:19.310 --> 00:05:21.380 It will check the first condition. 00:05:21.380 --> 00:05:21.650 OK. 00:05:21.680 --> 00:05:22.880 It's not verified. 00:05:22.890 --> 00:05:24.270 And then we'll go to else. 00:05:24.310 --> 00:05:28.220 If speed is less than 40 then we that's very fine. 00:05:28.210 --> 00:05:32.170 So then we need to execute this piece of code. 00:05:33.220 --> 00:05:33.980 All right. 00:05:34.680 --> 00:05:35.060 OK. 00:05:35.080 --> 00:05:42.350 Now we're going to move to let's change dickered a little bit and have our page a little more interactive 00:05:42.880 --> 00:05:47.110 so we can create an input I'd say 00:05:51.570 --> 00:05:56.110 this creates a paragraph and we say speed 00:06:00.130 --> 00:06:08.760 on the motorway then we're going to create any inputs. 00:06:10.400 --> 00:06:15.060 All right. 00:06:20.320 --> 00:06:21.340 Let me give you an ID 00:06:35.620 --> 00:06:39.370 speed and also a site 00:06:45.380 --> 00:06:48.190 it's in them. 00:06:49.070 --> 00:06:50.890 OK. 00:06:51.230 --> 00:06:53.380 All right. 00:06:53.380 --> 00:06:55.420 And we're going to create a button 00:07:00.400 --> 00:07:01.580 right and 00:07:04.560 --> 00:07:08.050 it's put some text there. 00:07:08.480 --> 00:07:11.740 Check. 00:07:14.500 --> 00:07:21.010 OK so now we can see that of course an inputs and all we'd like to do is we want to use it to improve 00:07:21.010 --> 00:07:22.040 their speed there. 00:07:22.150 --> 00:07:25.860 And once they click on check then we can run this code. 00:07:26.140 --> 00:07:32.260 Ok so all we need to do is to put this code inside a function and link the button to that function. 00:07:32.260 --> 00:07:37.330 So this creates a function that we call check speed. 00:07:37.770 --> 00:07:38.980 OK. 00:07:39.190 --> 00:07:44.130 And let's copy all. 00:07:44.620 --> 00:07:48.550 OK so now we put all these code inside the function. 00:07:49.060 --> 00:07:50.550 OK. 00:07:51.510 --> 00:07:52.520 Actually it's going to be like this. 00:07:52.520 --> 00:07:58.720 I'm going to put all the code we had previously on rather than defining the speed this time so we want 00:07:58.730 --> 00:08:04.350 to retrieve the speed from the inputs of the user which is this. 00:08:04.370 --> 00:08:12.120 So we need to set the speed to documents gets elements by ID. 00:08:12.570 --> 00:08:15.500 In our case the inputs ID is speed. 00:08:16.520 --> 00:08:17.560 All right. 00:08:18.070 --> 00:08:24.040 And when I said that to when I retrieve the value of that input. 00:08:25.690 --> 00:08:28.520 OK. 00:08:28.540 --> 00:08:32.320 And we need to link the button to the function by saying unclick 00:08:35.020 --> 00:08:38.320 we are running check speed. 00:08:39.470 --> 00:08:41.420 So that's at least right. 00:08:41.500 --> 00:08:52.050 So let's try 80 mph and check you are going to force destroy 50 mph. 00:08:52.180 --> 00:08:54.330 It says speed is fine. 00:08:54.470 --> 00:08:59.200 And if we try 30 mph you say you're going to slow. 00:08:59.360 --> 00:09:01.500 The code is working. 00:09:02.230 --> 00:09:02.850 All right. 00:09:03.040 --> 00:09:06.240 So this is for conditions using if. 00:09:06.520 --> 00:09:12.670 Now we're going to move to something else we're going to move to conditions using switch. 00:09:12.760 --> 00:09:14.310 So it's a little bit different. 00:09:14.500 --> 00:09:20.860 So basically the switch function will actually check a few conditions. 00:09:21.380 --> 00:09:22.210 OK. 00:09:22.250 --> 00:09:26.900 Then it will execute some could just just as we have done with it. 00:09:27.010 --> 00:09:31.030 It's a little bit different so let's let's have a look. 00:09:31.030 --> 00:09:39.640 So we're going to create another input where the user is going to input a season and the code is going 00:09:39.640 --> 00:09:43.390 to return and alerts a message depending on the input of the user. 00:09:43.660 --> 00:09:44.140 OK. 00:09:44.260 --> 00:09:48.760 So we're just going to copy paste the paragraph we created earlier and get it and then we're going to 00:09:48.760 --> 00:09:49.820 take you to a little bit. 00:09:50.170 --> 00:09:50.530 So 00:09:53.410 --> 00:09:54.310 you have here 00:09:56.990 --> 00:09:57.970 your season 00:10:00.760 --> 00:10:07.890 now and then I'm going to give you an idea. 00:10:08.630 --> 00:10:09.100 Season 00:10:13.410 --> 00:10:17.480 it which is my input. 00:10:19.050 --> 00:10:19.410 OK. 00:10:19.410 --> 00:10:23.840 And we don't decide for now. 00:10:24.120 --> 00:10:31.850 And then the Butson can name it submit and we're going to run a function. 00:10:31.860 --> 00:10:33.220 We're going to be fine later on. 00:10:33.420 --> 00:10:41.060 So let's is called this function check Texian for example. 00:10:41.400 --> 00:10:41.900 OK. 00:10:42.360 --> 00:10:53.910 So now let's create this function so function check season. 00:10:56.240 --> 00:10:57.770 All right. 00:10:58.110 --> 00:11:06.510 So first of all so we need to retrieve the value that the user has input so you can define a variable 00:11:06.810 --> 00:11:07.640 x. 00:11:07.890 --> 00:11:15.430 And we're going to set the value of x to the input of the user using the Get elements by ID. 00:11:15.540 --> 00:11:25.980 So we're looking at the inputs we ID my inputs and we get to get the value of this. 00:11:25.980 --> 00:11:28.080 This includes OK. 00:11:28.620 --> 00:11:31.210 And then we're going to use the switch function. 00:11:31.690 --> 00:11:37.000 So see the syntax so we need to use the switch function. 00:11:37.200 --> 00:11:38.890 It needs a parameter. 00:11:39.460 --> 00:11:39.880 OK. 00:11:39.930 --> 00:11:46.350 So our Paromita is going to be X because we are going to be assessing the value of x and looking at 00:11:46.350 --> 00:11:48.640 different cases. 00:11:50.000 --> 00:11:58.940 OK so so first case then we need to use the case keyword is going to be summer. 00:11:59.850 --> 00:12:01.660 All right. 00:12:02.910 --> 00:12:08.880 And if this case is verified then the last message is going to be window or that 00:12:12.510 --> 00:12:14.780 it is summertime. 00:12:15.880 --> 00:12:17.960 OK. 00:12:18.300 --> 00:12:23.250 And then we going to have another case but before we do that we need to break. 00:12:23.250 --> 00:12:25.910 So if the case is verified. 00:12:26.060 --> 00:12:34.470 So if we have this case then we need to run that code and then we're going to break the the code is 00:12:34.470 --> 00:12:35.520 going to stop here. 00:12:35.520 --> 00:12:38.050 We're not looking at the rest of the function. 00:12:38.180 --> 00:12:47.050 Ok but if the case is not true then we need to have a look at the next case which is winter. 00:12:47.600 --> 00:12:49.760 OK. 00:12:50.330 --> 00:12:56.690 And we just need to do another alerts. 00:12:56.850 --> 00:12:59.670 It is wintertime. 00:13:01.040 --> 00:13:02.490 OK. 00:13:02.550 --> 00:13:04.340 And then we break that. 00:13:04.380 --> 00:13:08.870 So after each case we have a piece of code and then a break. 00:13:08.910 --> 00:13:13.280 So just make sure that there is no nothing between the case. 00:13:13.290 --> 00:13:14.930 I mean said there is only space. 00:13:15.100 --> 00:13:17.420 OK. 00:13:17.940 --> 00:13:21.760 And here's how the syntax of break works so. 00:13:21.940 --> 00:13:26.460 Now let's add two other cases 00:13:29.590 --> 00:13:34.880 one for spring and one for autumn so spring. 00:13:35.430 --> 00:13:36.480 It is springtime 00:13:39.990 --> 00:13:44.390 and then the last one. 00:13:47.940 --> 00:13:48.160 OK 00:13:52.140 --> 00:13:57.370 so now what happens if the user inputs something else. 00:13:57.390 --> 00:13:59.310 So we don't have any of these cases. 00:13:59.400 --> 00:14:03.990 So now we're going to need to use defaults. 00:14:04.140 --> 00:14:04.710 OK. 00:14:04.710 --> 00:14:07.320 So this is the code that's going to be executed. 00:14:07.440 --> 00:14:10.790 If none of these conditions is verified. 00:14:10.800 --> 00:14:13.420 So you just going to run this piece of code. 00:14:13.440 --> 00:14:16.520 I do not recognize this. 00:14:18.060 --> 00:14:21.560 I did not recognize this. 00:14:22.140 --> 00:14:24.260 OK. 00:14:26.670 --> 00:14:31.160 So let's try it and see how it works so spraying for example 00:14:34.470 --> 00:14:37.340 is not working. 00:14:37.470 --> 00:14:48.200 Let's have a look at our console and see what's it called something unexpected expected token 28. 00:14:50.030 --> 00:14:51.360 OK. 00:14:51.360 --> 00:14:55.950 So following the case he'd say it's not a semi-colon. 00:14:56.010 --> 00:15:01.880 He said Colon's we need to read music there. 00:15:03.660 --> 00:15:04.070 OK. 00:15:04.140 --> 00:15:04.890 So it's now 00:15:08.390 --> 00:15:10.280 spring. 00:15:11.510 --> 00:15:11.990 OK. 00:15:12.030 --> 00:15:12.950 The is working. 00:15:13.080 --> 00:15:14.340 OK you put into 00:15:18.030 --> 00:15:19.080 it is working as well. 00:15:19.200 --> 00:15:20.460 OK. 00:15:20.490 --> 00:15:25.840 Now let's Troy winter with a capital letter for W.. 00:15:26.190 --> 00:15:27.020 It doesn't recognize that. 00:15:27.020 --> 00:15:34.430 So how do we make sure that even if the user puts copies of letters we still run the code with we still 00:15:34.430 --> 00:15:36.120 can recognize their inputs. 00:15:36.210 --> 00:15:43.650 We can actually get the elements by id value and then change that to lowercase. 00:15:44.040 --> 00:15:49.190 OK so we can do to lower case. 00:15:52.260 --> 00:15:52.810 OK. 00:15:53.040 --> 00:16:01.170 So this method is going to turn whatever inputs the user is that to all lowercase. 00:16:01.170 --> 00:16:04.970 All right so let's try let's save and try again. 00:16:04.970 --> 00:16:14.430 So if you put small letters it is working and we've put winter with capital letters. 00:16:14.580 --> 00:16:15.960 Now it is working as well. 00:16:16.230 --> 00:16:16.810 OK. 00:16:17.010 --> 00:16:20.030 So let's how switch conditions work. 00:16:20.160 --> 00:16:21.080 So again. 00:16:21.300 --> 00:16:26.920 So we need to give a performance just to the switch function and then we have cases. 00:16:27.030 --> 00:16:34.710 OK so the syntax is case space and then the value we want to check for the parameter followed by a colon 00:16:35.410 --> 00:16:39.480 and then we put the the piece of code we would like to run. 00:16:39.510 --> 00:16:42.760 If this condition is is true. 00:16:43.230 --> 00:16:48.780 And then we break if the condition is true and then if if this doesn't work the code is going to look 00:16:48.780 --> 00:16:49.960 at other cases. 00:16:49.980 --> 00:16:50.480 OK. 00:16:50.580 --> 00:16:57.150 And if not of the look of the case is verified then the code is going to run the defaults code which 00:16:57.150 --> 00:16:59.500 follows the default keyword. 00:16:59.520 --> 00:16:59.870 All right 00:16:59.890 --> 00:17:13.010 .