WEBVTT 00:00:06.960 --> 00:00:13.200 Now we are going to start translating our J.A.G. code structure into actual day Querrey code. 00:00:13.410 --> 00:00:16.380 So we're going to start by defining our variables. 00:00:17.040 --> 00:00:18.960 So we're going to start with the OP mode. 00:00:19.260 --> 00:00:19.870 OK. 00:00:20.100 --> 00:00:26.730 So as mentioned before we're going to have two votes off and on and once we click on the salesperson 00:00:26.880 --> 00:00:33.380 the upload is going to be on it's going to define a boolean mode. 00:00:33.890 --> 00:00:36.440 It is going to be false at the beginning. 00:00:36.710 --> 00:00:37.340 OK. 00:00:37.710 --> 00:00:45.080 So we can also use 0 and 1 rather than false and true which is exactly the same. 00:00:45.800 --> 00:00:46.370 OK. 00:00:46.620 --> 00:00:50.590 Now let's create our time counter variable. 00:00:50.880 --> 00:01:01.030 So this variable is going to count the number of 60 seconds that's elapsed since the beginning. 00:01:01.770 --> 00:01:10.350 So the way it's going to work is that we're going to be counting how many Sandee seconds elapsed and 00:01:10.350 --> 00:01:14.730 we're going to convert that to minutes seconds and seconds. 00:01:15.190 --> 00:01:15.910 OK. 00:01:16.590 --> 00:01:23.970 So it's like counting the number of seconds and converting that's two hours minutes and seconds is exactly 00:01:23.970 --> 00:01:25.710 the same way. 00:01:25.950 --> 00:01:34.230 So we're going to call this variable time counting and it's going to start at zero at the beginning 00:01:34.240 --> 00:01:35.160 . 00:01:36.090 --> 00:01:38.720 We're going to do the same thing for the lab counter. 00:01:39.020 --> 00:01:39.400 OK. 00:01:39.530 --> 00:01:45.960 What is going to correspond to the values of the lab counter. 00:01:46.930 --> 00:01:51.060 And we're going to call it Lab count. 00:01:52.490 --> 00:01:58.320 OK so the first one is for time the second one is for the current lab. 00:01:58.850 --> 00:01:59.330 OK. 00:01:59.670 --> 00:02:05.010 Now we're going to find another variable which is going to be used for the set interval function. 00:02:05.070 --> 00:02:09.850 So as you would have guessed we are going to use the set interval function. 00:02:10.200 --> 00:02:17.790 OK as we are dealing here with timing events as we've done before in the modern game and also in the 00:02:17.790 --> 00:02:26.140 fruits game we get to use a variable where we can to store the outputs of the set interval function 00:02:26.140 --> 00:02:26.660 . 00:02:26.790 --> 00:02:28.610 We're going to come back to this later. 00:02:29.040 --> 00:02:29.890 OK. 00:02:29.970 --> 00:02:39.330 Now we need the number of laps so we're going to need that number to specify which lap we are producing 00:02:39.330 --> 00:02:39.820 here. 00:02:40.120 --> 00:02:41.100 OK. 00:02:41.100 --> 00:02:48.960 So variable Lopp number is going to start at 0 beginning. 00:02:50.250 --> 00:02:57.540 And finally we're going to need a few variables minutes seconds sunny seconds which are going to correspond 00:02:57.540 --> 00:03:02.150 to the values of our time counter and love count. 00:03:02.460 --> 00:03:03.150 OK. 00:03:03.150 --> 00:03:12.060 So when we get the time counter variable we are going to convert that to three variables the minutes 00:03:12.540 --> 00:03:14.860 seconds and send in seconds. 00:03:15.350 --> 00:03:19.180 Or when you can hear the minutes seconds and then seconds of the time. 00:03:19.470 --> 00:03:26.040 And similarly when we get the lung cancer we can convert that to minutes seconds and say seconds of 00:03:26.040 --> 00:03:27.020 the lap. 00:03:27.210 --> 00:03:27.680 OK. 00:03:27.960 --> 00:03:28.770 So we're going to have 00:03:40.950 --> 00:03:42.680 three variables for each. 00:03:42.870 --> 00:03:45.390 Three four time and three four lap. 00:03:45.840 --> 00:03:55.140 So you don't have time minutes of that time seconds. 00:03:55.880 --> 00:03:56.350 OK. 00:03:56.430 --> 00:04:00.100 So we can define all variables in one go like this. 00:04:00.150 --> 00:04:01.580 It's OK to do it like this. 00:04:01.860 --> 00:04:07.180 And then time study seconds and then similarly for the lab. 00:04:07.180 --> 00:04:14.880 We're going to have a lot minutes love seconds and lup 70 seconds 00:04:17.410 --> 00:04:21.080 and just make sure you spell these right. 00:04:21.090 --> 00:04:24.640 Just avoid having any errors later on in the code. 00:04:25.080 --> 00:04:26.160 OK. 00:04:26.880 --> 00:04:31.920 Now we're going to move to what happens when we load the app. 00:04:32.040 --> 00:04:38.750 So when we load our up we are going to show only two buttons. 00:04:38.880 --> 00:04:45.440 So in total we have five buttons so to show two buttons there is a nice trick we can do here. 00:04:45.600 --> 00:04:47.600 We can hide all the buttons. 00:04:48.270 --> 00:04:48.690 OK. 00:04:48.810 --> 00:04:53.570 And then we're going to show only to the ones that we want. 00:04:53.940 --> 00:04:56.830 So for this we get to use a function. 00:04:57.060 --> 00:04:57.300 OK. 00:04:57.300 --> 00:05:01.250 We're going to call it hide show buttons. 00:05:01.320 --> 00:05:03.570 This function is going to take a couple of promises. 00:05:03.630 --> 00:05:06.840 It's going to take the IDs of the buttons we want to show. 00:05:07.320 --> 00:05:08.430 OK. 00:05:08.430 --> 00:05:11.890 So in our case we want to show the stars of the opposite. 00:05:12.300 --> 00:05:22.390 If you remember the IDs of these buttons were started ok and love button 00:05:25.650 --> 00:05:26.290 . 00:05:26.850 --> 00:05:27.370 OK. 00:05:27.570 --> 00:05:31.340 Now let's define this function of the end. 00:05:33.350 --> 00:05:33.650 So 00:05:40.830 --> 00:05:42.600 it's going to take a couple of time at this. 00:05:42.930 --> 00:05:46.730 So I'm going to call them x and y. 00:05:47.840 --> 00:05:48.760 OK. 00:05:49.800 --> 00:05:58.040 Given that X and Y represents the IDs of the elements we all do show including the number site. 00:05:58.110 --> 00:05:59.690 OK. 00:06:00.240 --> 00:06:01.880 All right. 00:06:02.760 --> 00:06:09.800 So to hide all the buttons we are going to hide all the elements of glass control. 00:06:10.280 --> 00:06:12.570 OK. 00:06:13.670 --> 00:06:17.840 So going to access these elements using their class. 00:06:17.970 --> 00:06:18.350 OK. 00:06:18.360 --> 00:06:21.510 Which is control. 00:06:21.780 --> 00:06:24.630 And then we're going to hide them using the hide method. 00:06:25.560 --> 00:06:31.470 And after that we're going to show the two elements which we have in the promises. 00:06:31.680 --> 00:06:32.400 So x 00:06:36.030 --> 00:06:38.220 and y. 00:06:40.310 --> 00:06:41.670 OK. 00:06:41.940 --> 00:06:43.130 We're going to have a quick look. 00:06:43.230 --> 00:06:47.300 This curly brackets which belongs to the documents ready function. 00:06:47.460 --> 00:06:50.890 It's going to need a princess on the end and a semi-colon. 00:06:50.970 --> 00:06:57.170 OK so now let's save our code and make sure this is working perfect. 00:06:57.300 --> 00:06:59.750 So of course it's only the start and lock button. 00:06:59.820 --> 00:07:01.860 When we load the page. 00:07:02.060 --> 00:07:04.330 All right let's continue our code. 00:07:04.650 --> 00:07:12.660 So now we get to write code corresponding to clicking on the start button. 00:07:12.660 --> 00:07:14.890 So we're going to do a few things. 00:07:15.110 --> 00:07:21.480 We're going to set the mode 2 on. 00:07:22.080 --> 00:07:27.480 OK so before we do that let's access the source wasn't using its ID 00:07:31.750 --> 00:07:33.260 source. 00:07:34.200 --> 00:07:38.330 OK and then going to use the click method. 00:07:38.490 --> 00:07:43.200 And inside this method we're going to have a function to execute. 00:07:44.610 --> 00:07:47.490 OK and let's. 00:07:47.500 --> 00:07:47.800 Right. 00:07:47.840 --> 00:07:49.040 OK. 00:07:50.490 --> 00:08:02.880 So first we're going to set the mode 2 on we can do that by setting the variable mode to 1 and then 00:08:02.880 --> 00:08:09.690 we're going to show the slope and LA muttons again we're going to use the hide show buttons function 00:08:09.690 --> 00:08:11.910 . 00:08:11.910 --> 00:08:20.930 So this time we are going to show stop and loop. 00:08:21.280 --> 00:08:22.000 OK. 00:08:22.380 --> 00:08:24.210 And then we're going to start the counter. 00:08:24.590 --> 00:08:29.760 And for this we're going to use another function that I'm going to call it's action. 00:08:30.510 --> 00:08:31.680 OK. 00:08:32.760 --> 00:08:37.160 So let's define this function at the end. 00:08:38.890 --> 00:08:39.490 OK. 00:08:39.640 --> 00:08:42.790 These are the few comments for these functions. 00:08:42.900 --> 00:08:43.380 So 00:08:46.800 --> 00:08:51.350 this one shows two buttons. 00:08:52.100 --> 00:08:53.370 OK. 00:08:53.700 --> 00:09:01.920 And the following one is going to start as the count. 00:09:01.950 --> 00:09:06.350 Am going to call its start action. 00:09:08.110 --> 00:09:11.740 OK. 00:09:11.940 --> 00:09:18.250 So this function is going to increase our counters by one every 10 seconds. 00:09:18.930 --> 00:09:19.310 OK. 00:09:19.440 --> 00:09:26.460 So our counters are the time counter and the loved count which are the variables we're going to need 00:09:26.460 --> 00:09:31.590 later to convert to these values minutes seconds and then seconds. 00:09:31.600 --> 00:09:32.050 OK. 00:09:32.370 --> 00:09:39.000 So a second would go up by one every second a millisecond would go up by 1 every millisecond. 00:09:39.180 --> 00:09:44.400 But a Sunday second is going to go up by one every 10 milliseconds. 00:09:44.400 --> 00:09:45.010 OK. 00:09:45.210 --> 00:09:45.510 So 00:09:48.750 --> 00:09:55.890 to increase the time counted by one we're going to use the syntax time counter plus plus. 00:09:56.210 --> 00:09:59.740 And the same thing for the lap counter. 00:10:01.410 --> 00:10:05.350 OK. 00:10:07.740 --> 00:10:09.870 But we're not going to do this straight away. 00:10:09.870 --> 00:10:12.890 We want to do this every 10 milliseconds. 00:10:12.960 --> 00:10:20.040 So we're going to need a time event function or a timing event function which is going to be set interval 00:10:20.050 --> 00:10:20.540 . 00:10:21.060 --> 00:10:21.930 So we're going to do. 00:10:21.930 --> 00:10:28.170 We're going to set our variable action as we said earlier we're going to use for the set of all function 00:10:29.010 --> 00:10:33.710 and we're going to it to the outputs of the set interval function. 00:10:33.720 --> 00:10:39.480 So again if you remember this function is going to take a couple of times as a function in the first 00:10:39.570 --> 00:10:43.910 chromosome OK and a duration in milliseconds. 00:10:44.100 --> 00:10:48.990 In the second Brahmin's we were saying it's going to be every 10 seconds. 00:10:49.790 --> 00:10:56.340 So every 10 20 seconds are we going to do we're going to increase our time count by 1 and our flop counter 00:10:56.520 --> 00:11:06.810 by one and then we are going to convert these numbers into minutes seconds and seconds and updates the 00:11:06.810 --> 00:11:09.600 time inside these elements. 00:11:09.660 --> 00:11:14.790 So I'm going to use another function for this I'm going to call it update time just to make our code 00:11:15.330 --> 00:11:16.460 more readable. 00:11:16.980 --> 00:11:18.570 OK. 00:11:18.570 --> 00:11:24.260 Now let's define this function a baseline. 00:11:26.580 --> 00:11:27.060 So 00:11:32.100 --> 00:11:42.560 he's going to convert counters to minutes seconds and seconds. 00:11:43.880 --> 00:11:44.090 OK 00:11:44.110 --> 00:11:51.440 . 00:11:57.510 --> 00:11:59.680 So it starts with the time counter. 00:11:59.920 --> 00:12:00.400 OK. 00:12:00.770 --> 00:12:04.260 And let's convert the time counter into these values. 00:12:04.410 --> 00:12:08.000 So we know that's inside one minute. 00:12:08.190 --> 00:12:10.760 We've got 60 seconds. 00:12:10.770 --> 00:12:12.310 OK. 00:12:12.360 --> 00:12:17.020 And inside one second we've got 100 seconds. 00:12:17.580 --> 00:12:27.560 So one minute is the equivalent of 60 multiplied by a hundred seven seconds. 00:12:28.380 --> 00:12:29.280 OK. 00:12:29.400 --> 00:12:34.470 Which is 6000 since seconds. 00:12:34.680 --> 00:12:35.190 OK. 00:12:35.190 --> 00:12:42.620 So to get the number of minutes we need to divide the number of senti seconds by six thousand. 00:12:42.860 --> 00:12:43.130 OK. 00:12:43.140 --> 00:12:48.330 So the variable time minutes. 00:12:49.800 --> 00:12:51.120 OK we're going to set it to 00:12:54.930 --> 00:12:59.730 the time counter divided by six thousand. 00:13:00.540 --> 00:13:01.030 OK. 00:13:01.200 --> 00:13:03.290 Well we want a whole number here. 00:13:03.360 --> 00:13:11.490 So we're going to use math floor to get the right value. 00:13:11.520 --> 00:13:11.820 All right 00:13:11.840 --> 00:13:20.750 .