WEBVTT 00:01.990 --> 00:02.890 Welcome back. 00:03.190 --> 00:06.720 In this last step, we're going to create the clock animation that lasts. 00:07.030 --> 00:08.150 All right, let's get started. 00:10.150 --> 00:12.220 All right, let's take a look at the goals first. 00:12.850 --> 00:14.530 All right, now we have five goals. 00:15.040 --> 00:21.080 After we finish, we'll be animating the clock by clearing the screen every second as a bonus. 00:21.100 --> 00:24.310 We're also going to blink the separators between the digits. 00:25.360 --> 00:28.720 Our first goal is creating an infinite loop to update the clock. 00:29.020 --> 00:30.040 Let's start with that. 00:31.090 --> 00:32.680 This task is easy. 00:33.100 --> 00:38.200 I just need to wrap this court with an infinite for loop like this, limerence? 00:38.860 --> 00:40.480 Wow, this doesn't look good. 00:41.500 --> 00:44.830 Let me add a new line here right after I draw the clock. 00:45.910 --> 00:51.820 Better, but it's still updates the clock too fast, by the way, if you are using your playground's, 00:51.940 --> 00:54.840 it won't allow you to use this infinite loop. 00:55.060 --> 01:01.660 So instead of this infinite loop, you can loop here like this is almost the same, only that this loops 01:01.660 --> 01:02.890 for limited steps. 01:03.610 --> 01:04.000 All right. 01:04.150 --> 01:05.410 Let me take this back. 01:06.700 --> 01:08.710 This brings us to our second call. 01:08.800 --> 01:12.480 Let's check it out now, I'm going to update the clock every second. 01:13.120 --> 01:16.290 To do that, I need to use a function from the time package. 01:17.080 --> 01:18.190 It's called sleep. 01:18.880 --> 01:20.080 Let me write it first. 01:20.470 --> 01:23.980 And this function stops the world for a specific duration. 01:24.610 --> 01:27.550 As you can see, it takes a time that duration value. 01:28.000 --> 01:33.040 I want to update the clock for each second, so I'm going to sleep for one second here like this. 01:34.950 --> 01:40.680 Remember time, that second is a duration value, as you can see here, if you don't remember this, 01:40.690 --> 01:42.910 you might want to check out the constant S.A.G.. 01:43.560 --> 01:43.860 OK. 01:44.460 --> 01:44.910 All right. 01:44.910 --> 01:45.510 Limerence. 01:47.850 --> 01:52.950 Better right now, it's slower, it only draws the clock every second coup. 01:53.940 --> 01:54.600 This is good. 01:54.780 --> 02:00.750 However, it doesn't update the clock in place, I mean, it throws a new clock under another clock, 02:00.750 --> 02:02.980 right, to make it look animated. 02:03.030 --> 02:05.400 We need to draw the clock in the same place. 02:05.820 --> 02:11.820 To do that, I need to clear the screen and move the cursor position to the top left position of the 02:11.820 --> 02:12.260 screen. 02:13.180 --> 02:14.910 By the way, this is our third call. 02:15.520 --> 02:16.570 All right, let's do it. 02:17.170 --> 02:19.360 Let's first start with clearing the screen. 02:19.900 --> 02:24.340 Clearing the screen on Basche comments prompts Orango playground is easy. 02:25.180 --> 02:28.450 However, it is not so on Windows command prompts. 02:28.840 --> 02:31.320 So I have created a special package to do that. 02:31.840 --> 02:35.620 My package works on Windows and bash commands prompts. 02:36.010 --> 02:36.760 I'll explain. 02:36.760 --> 02:41.640 The inner mechanics of this package in the later sections is kind of advanced for now. 02:41.650 --> 02:46.140 OK, so to use my package we need to get it from GitHub. 02:46.390 --> 02:52.990 So now I'm going to call, go get comment and I'm going to type the path or my package on get up like 02:52.990 --> 02:53.380 this. 02:54.160 --> 02:59.600 This that you argument is for updating the package if you have already downloaded, by the way. 03:00.460 --> 03:02.800 OK, now I can use the package in my code. 03:04.010 --> 03:09.300 Just before drawing the clock, I'm going to call screen that clear function like this in here. 03:10.190 --> 03:11.480 This will clear the screen. 03:11.960 --> 03:16.520 By the way, if you are using your playground, do not call this function here, OK? 03:17.370 --> 03:22.310 OK, let me show you what it looks like, the screen is full of characters right now. 03:22.680 --> 03:25.830 When I ran the God, it will clear all of them like this. 03:27.040 --> 03:33.970 As you can see, first, it has cleared the screen and then it has started drawing the clocks, however, 03:34.000 --> 03:37.570 it has started printing the clock on the bottom part of the screen. 03:38.110 --> 03:42.240 This is because the cursor is actually at the bottom of the screen. 03:42.820 --> 03:45.190 So we need to move it to the top. 03:45.550 --> 03:47.370 By the way, this is our fourth goal. 03:48.610 --> 03:49.260 Let's take a look. 03:51.620 --> 03:57.440 Here, before each step of the loop, I need to move the cursor to the top left corner, as I said, 03:58.250 --> 04:02.900 this is because I wanted to print the clock always in the same position. 04:04.340 --> 04:11.030 By the way, if you are using your playground, just print, backslash f here like this, backslash 04:11.030 --> 04:14.690 F is the form feed character, it simply clears the console. 04:15.110 --> 04:16.100 OK, all right. 04:16.100 --> 04:17.120 Let me take this back. 04:17.420 --> 04:17.900 All right. 04:18.260 --> 04:23.960 But now I'm not using your playground, so now I'm going to call my screen packages, move top left, 04:23.960 --> 04:25.130 function like this. 04:26.000 --> 04:30.230 This will simply move the cursor to the top left corner of the console screen. 04:31.500 --> 04:32.460 OK, let's try it. 04:34.280 --> 04:40.630 Cool, right now, the clock always animates in the same position, it looks like as if the clock animates 04:40.640 --> 04:47.030 actually it just redraws the whole clock on each step of the loop over and over again, first clears 04:47.030 --> 04:50.360 the screen, then it moves the cursor to the top left corner. 04:50.660 --> 04:53.190 And lastly, it throws the clock in that position. 04:53.720 --> 04:54.140 Cool. 04:54.170 --> 04:55.400 Let's check out our next call. 04:56.650 --> 05:03.340 This is our last call, so now I'm going to blink the separators between the digits, to do that, we 05:03.340 --> 05:06.980 need to hide and display the separators every two seconds. 05:07.510 --> 05:13.840 So in this court, we need to decide when to print the separators to make things easier. 05:13.840 --> 05:15.000 Down the road. 05:15.010 --> 05:19.180 I'm going to put the next line that we are going to print into a variable. 05:19.480 --> 05:23.080 Now, I'm going to cut this part from here, then just rideable. 05:23.110 --> 05:28.650 I'm going to pass it here and I'm going to put it inside a variable called Next like this. 05:29.380 --> 05:32.160 And lastly, I'm going to print the next line in here. 05:32.470 --> 05:33.760 All right, let me run it. 05:34.420 --> 05:34.900 Cool. 05:34.900 --> 05:36.430 The card steelworks. 05:37.360 --> 05:39.730 OK, now it's time to do the blinking. 05:39.970 --> 05:44.680 First of all, I need to detect whether the current digit is a separator or not. 05:45.250 --> 05:50.160 Remember this clock array here stores the separators as well here. 05:50.200 --> 05:53.530 These colored variables are actually separator arrays. 05:53.560 --> 05:53.920 Right. 05:54.520 --> 05:57.190 And as you know, we can compare arrays. 05:57.820 --> 06:03.160 So here I'm just going to compare where the next digit is a column or not like this. 06:04.110 --> 06:11.200 However, here it is, an index variable, which is an inert variable, but the column is a placeholder 06:11.200 --> 06:11.550 array. 06:12.030 --> 06:17.340 This is because I'm getting the next index in this range claws into the digit variable. 06:18.240 --> 06:24.870 Now, instead of doing it like this, let's introduce another variable, as you can see now, the index 06:24.870 --> 06:29.550 variable stores, the indexes and the digit variable stores the next digit. 06:29.580 --> 06:33.280 OK, let me also change this to the index variable. 06:34.170 --> 06:36.320 Let's take a look at this if statement up. 06:36.900 --> 06:42.650 So whenever I get a cullin from the closer, I'm going to hide it here in this if statement. 06:43.020 --> 06:47.180 By the way, each line in a placeholder has three characters, right? 06:48.300 --> 06:54.750 So now I'm going to assign a shrink with three empty spaces to the next variable like this, this will 06:54.750 --> 07:00.810 help us to keep printing the digit if it's a column or in other words, if it's a separator, OK. 07:01.320 --> 07:01.740 All right. 07:01.740 --> 07:03.780 Let me try it this time. 07:03.780 --> 07:05.180 It never prints the columns. 07:05.460 --> 07:12.180 This is because here, whenever it detects that the next digit is a column, then it overrides its lines 07:12.180 --> 07:13.620 with empty spaces. 07:14.130 --> 07:15.660 So it doesn't print anything. 07:15.870 --> 07:19.200 But we wanted the blink to do that. 07:19.200 --> 07:21.960 And we're add another condition here like this. 07:22.600 --> 07:25.410 Remember, SEC is the current second here. 07:25.410 --> 07:29.010 I'm checking whether the second is divisible by two or not. 07:29.670 --> 07:33.210 So now this card will only run every two seconds. 07:33.540 --> 07:34.200 Let me show you. 07:38.200 --> 07:39.030 Cool, right? 07:39.730 --> 07:45.550 By the way, this court is not the best court that you can write, however, at the current stage of 07:45.550 --> 07:46.120 the court. 07:46.150 --> 07:51.790 I can't give you more details, but no worries in the upcoming sections, I'm going to show you how 07:51.790 --> 07:53.770 to make this court more efficient. 07:54.400 --> 07:54.810 All right. 07:55.090 --> 07:55.920 That's all for now. 07:55.930 --> 08:00.910 We are created a cool digital clock that runs entirely in the comment line. 08:01.510 --> 08:06.190 I have prepared awesome some exercises for you to extend this project further. 08:06.790 --> 08:08.710 You can find them in the next lecture. 08:08.980 --> 08:09.550 All right. 08:09.560 --> 08:11.200 Thank you for watching so far. 08:11.230 --> 08:13.690 See you in the next section, Bhabhi.