WEBVTT 00:00:06.620 --> 00:00:13.260 Know we are going to start writing the code corresponding to the page load which will hide certain elements 00:00:13.290 --> 00:00:14.600 and show certain elements. 00:00:14.730 --> 00:00:20.790 So when we load our page we want to show only the six inputs and we start reading button and also we 00:00:20.790 --> 00:00:22.440 can write code to execute. 00:00:22.500 --> 00:00:29.730 Once we click on the signs reading and so when we look at our page we want to hide all all elements 00:00:29.760 --> 00:00:31.730 except for these two. 00:00:32.040 --> 00:00:40.790 So this includes all the buttons that we are using while they're reading like the New button. 00:00:40.940 --> 00:00:48.600 Is use the ID of the button and use the height method to hide it it's also going to hide the Resume 00:00:48.600 --> 00:00:55.220 button and the pause button will need to hide. 00:00:55.230 --> 00:00:58.930 Also the sliders. 00:00:59.830 --> 00:01:00.440 OK. 00:01:00.720 --> 00:01:11.490 So an easy way to do that is by placing all these sliders inside a div and this gives us an idea. 00:01:11.640 --> 00:01:12.150 So 00:01:18.540 --> 00:01:22.750 let's open the div right there. 00:01:24.240 --> 00:01:24.770 OK. 00:01:24.810 --> 00:01:28.550 Give it an ID controls. 00:01:28.560 --> 00:01:35.070 For example let's close the div right after the. 00:01:35.070 --> 00:01:37.720 Progress later. 00:01:39.610 --> 00:01:42.810 OK right. 00:01:44.420 --> 00:01:50.550 OK so it is in then's all the contents inside the div 00:01:53.520 --> 00:01:54.740 save. 00:01:54.750 --> 00:02:02.170 No we're just going to be accessing the Dave of the controls and hiding it. 00:02:03.400 --> 00:02:04.090 OK. 00:02:04.770 --> 00:02:11.350 So if we try this let's refresh our page. 00:02:12.600 --> 00:02:17.230 No we don't see the slides and we don't see all these three buttons. 00:02:18.030 --> 00:02:18.300 OK 00:02:21.060 --> 00:02:25.530 now let's hide the reading books and the error message. 00:02:25.560 --> 00:02:31.530 So if we look inside the index was a simple file. 00:02:31.540 --> 00:02:38.850 The reading box is the result of the error message ID error. 00:02:41.860 --> 00:02:47.820 That's what I save. 00:02:48.460 --> 00:02:53.410 And now we only see the text inputs and the signs reading button. 00:02:54.060 --> 00:02:55.320 OK. 00:02:55.800 --> 00:02:59.830 Now let's move to code corresponding to clicking on these signs reading wasn't. 00:03:00.330 --> 00:03:04.140 So it's access the button first using its ID 00:03:06.930 --> 00:03:11.350 which is starts Elitch's sickness 00:03:14.950 --> 00:03:16.660 and it starts. 00:03:16.800 --> 00:03:17.400 And 00:03:20.100 --> 00:03:22.750 now we get to use the click method. 00:03:22.800 --> 00:03:29.430 Jay Querrey which will take a function as promised. 00:03:31.300 --> 00:03:32.160 OK. 00:03:33.030 --> 00:03:44.910 So first of all as we said in the logic of the OP we will need to get the text ok and split it two words 00:03:45.330 --> 00:03:46.320 inside an array. 00:03:46.440 --> 00:03:47.070 OK. 00:03:47.340 --> 00:03:48.020 So religious right. 00:03:48.030 --> 00:04:00.810 I come in there to make our code readable so I guess that text and splits two words that we will store 00:04:00.840 --> 00:04:04.790 inside an array. 00:04:05.980 --> 00:04:07.910 OK. 00:04:08.820 --> 00:04:14.940 So to do this we are going to use a variable for our array. 00:04:15.030 --> 00:04:19.350 So is declared this variable at the beginning. 00:04:21.450 --> 00:04:24.070 We're going to call this my array. 00:04:26.310 --> 00:04:29.190 And we're going to say that's very well 00:04:35.160 --> 00:04:38.790 using the value of the inputs. 00:04:38.790 --> 00:04:39.320 OK. 00:04:39.750 --> 00:04:43.100 And then we're going to use a method called splits. 00:04:43.350 --> 00:04:45.280 OK so first let's get the puts. 00:04:45.480 --> 00:04:54.810 So you get to select the input using its ID which is the user inputs and then you get to get the value 00:04:54.810 --> 00:04:56.220 of the inputs which is 00:05:00.600 --> 00:05:06.050 those values you can get is using the value method and then you get to use the splits method 00:05:08.790 --> 00:05:14.110 OK which will take a regular expression in the Bahamas. 00:05:15.540 --> 00:05:22.330 So we want a regular expression that matches spaces tabs newlines and so on. 00:05:22.380 --> 00:05:22.980 OK. 00:05:22.980 --> 00:05:28.900 So this regular expression is going to be inside for life for lunch. 00:05:29.130 --> 00:05:37.920 There's going to be backslash is OK and we're going to add a plus sign. 00:05:39.000 --> 00:05:48.580 OK so that we can merge these elements like spaces tub's new lines even if they are repeated. 00:05:48.660 --> 00:05:53.000 OK so we were looking at one or more spaces one or more tabs and so on. 00:05:53.140 --> 00:05:57.570 OK so this is write a comment there 00:06:01.290 --> 00:06:13.900 so forth slash backslash as we'll merge spaces tub's new lines etc.. 00:06:14.190 --> 00:06:18.000 Ok the beginning of the quantifier 00:06:20.670 --> 00:06:25.240 plus means one or more. 00:06:25.930 --> 00:06:27.110 OK. 00:06:27.780 --> 00:06:29.690 All right so now we've course our array. 00:06:29.760 --> 00:06:31.920 And of course are words inside the erate. 00:06:32.280 --> 00:06:35.540 So we need to check the length of the array. 00:06:35.700 --> 00:06:42.570 If the text is too small then we're going to show an error message just like this 00:06:42.790 --> 00:06:48.310 . 00:06:48.360 --> 00:06:48.830 OK. 00:06:49.170 --> 00:06:52.550 So it get the length of the array we're going to use another variable. 00:06:52.550 --> 00:06:53.370 So let's call it 00:06:57.790 --> 00:06:59.650 input lenth. 00:07:00.690 --> 00:07:02.510 OK. 00:07:05.010 --> 00:07:08.370 So this will correspond to the length of the array and 00:07:16.570 --> 00:07:21.130 you set it to the array. 00:07:21.450 --> 00:07:24.720 Then we're going to use the option length of the array. 00:07:25.590 --> 00:07:27.170 OK. 00:07:28.710 --> 00:07:30.000 It's just a comment. 00:07:30.000 --> 00:07:34.710 So we are getting here the number of words. 00:07:35.250 --> 00:07:35.940 OK. 00:07:36.330 --> 00:07:40.400 Now let's check the if the number of words is too small. 00:07:40.590 --> 00:07:43.470 OK so if 00:07:47.460 --> 00:08:01.290 the variable input array is greater than 1 OK which means that there is enough input then we are going 00:08:01.290 --> 00:08:03.510 to start reading. 00:08:03.640 --> 00:08:04.490 OK. 00:08:04.870 --> 00:08:12.470 Otherwise we are going to show the error message if we don't have enough text input. 00:08:12.510 --> 00:08:12.720 OK 00:08:18.120 --> 00:08:19.640 so you show the error message. 00:08:19.650 --> 00:08:28.500 Is it just going to access the div which is ID error and we're going to use the show method to show 00:08:28.500 --> 00:08:28.720 it 00:08:29.660 --> 00:08:37.670 .