WEBVTT 00:02.070 --> 00:07.570 In previous video, we have discussed what that object is, how to work with date object methods, and 00:07.610 --> 00:09.260 I'm going to use it in practice. 00:09.780 --> 00:12.840 I want to build a simple digital clock project. 00:13.770 --> 00:17.680 Before we actually start, let's take a look on the final version of this project. 00:18.450 --> 00:25.230 So here we have the weekday name, then the digital clock, which displays the current time and is working 00:25.230 --> 00:28.290 dynamically without refreshing or reloading the page. 00:29.010 --> 00:32.640 And also time is represented in 24 hour format. 00:34.170 --> 00:39.620 The project is not designed using Cassus because I think that at this point it's not really important. 00:39.990 --> 00:45.120 We're going to create clock from scratch and therefore I'm not going to waste time on styling it and 00:45.120 --> 00:46.710 writing Sisco's. 00:47.070 --> 00:50.280 You can feel free and design it if you wish on your own. 00:51.150 --> 00:51.600 All right. 00:52.200 --> 00:57.960 First, I'm going to create a new folder on desktop and call it digital clock. 01:01.290 --> 01:03.090 Then open 18 brackets. 01:04.970 --> 01:15.360 And create a new file in the HTML, then create another file for JavaScript, call it script. 01:20.000 --> 01:26.180 The next that we are going to do is to create a basic structure in HTML document, for that I will use 01:26.180 --> 01:30.680 the special extension Amet, which is a great package for Code Aditya's. 01:31.220 --> 01:33.890 It allows us to write some codes in a short way. 01:34.580 --> 01:40.400 So in order to get the basic structure of documents, I need to write just the exclamation mark. 01:41.180 --> 01:42.280 Then press the top. 01:42.290 --> 01:43.160 And here we go. 01:44.630 --> 01:50.600 If you don't use much package, you can just post a video for a while and write it manually, or you 01:50.600 --> 01:53.420 can just download and use source files of this lecture. 01:54.500 --> 02:03.890 All right, let's change the title of the page and write a digital clock, then link cryptologist file 02:03.890 --> 02:05.300 to indicate that HTML. 02:05.690 --> 02:09.220 You already know how to do that open script tax. 02:10.840 --> 02:16.330 And then in source attribute indicate the name of the files cryptologist. 02:17.980 --> 02:26.980 And the last thing that we have to do in HTML file is to create empty-headed elements with ID Killock. 02:29.740 --> 02:33.310 Which then will be used to display digital clock on the page. 02:34.060 --> 02:36.460 OK, everything is ready for start. 02:36.610 --> 02:38.200 Let's run this file. 02:41.110 --> 02:47.560 Then turn off live preview mode and also Open Castle up. 02:48.340 --> 02:54.580 All right, the first thing that we are going to do is to create a main function in which we will put 02:54.580 --> 02:56.020 all the stuff to build the clock. 02:56.380 --> 03:00.160 So write function and call it digital clock. 03:03.610 --> 03:11.650 The next step is to get the current state and time using date object, so create variable dates and 03:11.650 --> 03:13.660 assign to it date object. 03:16.680 --> 03:22.500 In order to explain well and test the code that we are writing better, let's call this function. 03:25.530 --> 03:31.230 And then display the current dates in council, right, cancel that club date. 03:34.970 --> 03:41.900 All right, the next we need to get the current time, so I'm going to use get date object methods, 03:42.380 --> 03:49.460 which you already know from the previous video, in order to get current hour, we have to write variable 03:49.460 --> 03:51.050 hours equal to. 03:52.570 --> 03:54.010 Dates don't get our. 03:56.950 --> 04:00.730 Let's display it in council change dating to our. 04:03.300 --> 04:10.080 So here we have the current hour, the next that's got the current minutes and you'll get minutes, 04:10.080 --> 04:17.040 method creates new variable minutes and assign to it dates that get minutes. 04:19.160 --> 04:29.750 Then again, change hours into minutes in Castle Rock and roll out the page so it works and in the same 04:29.750 --> 04:34.300 way get the current seconds creating a new variable seconds. 04:35.460 --> 04:39.720 And essentially, it did not get seconds method. 04:43.520 --> 04:46.010 Change minutes into seconds. 04:48.910 --> 04:54.820 So if you take a look on the final project, you will see that before the clock, we have here the weekday 04:54.820 --> 05:02.250 name, so therefore we need to use another get method which allows us to get the day of the week, create 05:02.260 --> 05:10.660 new variable and call a day that assign to it dates that get date method. 05:14.270 --> 05:18.470 And then in constant dialogue, change seconds into de. 05:20.920 --> 05:26.020 You see that we have three in Castle, which, as you remember, is the index number of the current 05:26.020 --> 05:33.550 day of week, our clock will consist of hours, minutes and seconds, and we need all of them always 05:33.550 --> 05:35.630 to be expressed with two digits. 05:36.880 --> 05:40.960 So let's start from our change your day into hours. 05:43.930 --> 05:52.030 You see that here we have two digits, no, but after midnight, we will have only one digit and that 05:52.030 --> 05:53.010 would be a problem. 05:53.530 --> 05:54.900 So we need to fix it. 05:55.030 --> 05:59.500 And for that, I'm going to use if statements which will check the number of digits. 05:59.800 --> 06:06.160 So if the length of the characters is less than two, then we need to manually write zero before the 06:06.160 --> 06:06.580 digit. 06:07.000 --> 06:13.090 In order to count the number of characters, we need to use a length property which generally works 06:13.090 --> 06:17.580 with strings, but not with no values. 06:18.580 --> 06:24.700 Let's demonstrate it briefly in council right a equals 15 and use a length property. 06:24.700 --> 06:25.970 Right, a total length. 06:27.580 --> 06:29.620 You see that it gives us undefined. 06:30.400 --> 06:42.670 But if we write a equals of 15 as the string and then use length property, we will get two, which 06:42.670 --> 06:45.220 means that string consists of two characters. 06:46.480 --> 06:46.950 All right. 06:47.320 --> 06:51.730 It means that we need two course hours, minutes and seconds into a string values. 06:52.150 --> 06:57.700 In order to do that, we can use a simple way just plus to the empty strings. 06:59.830 --> 07:07.510 Because of the type coercion, those numbers will be coerced into swing values, and after that, we 07:07.510 --> 07:09.450 are able to use land property. 07:10.570 --> 07:16.870 So creative statements and check if the number of digits is less than two as the condition. 07:16.870 --> 07:17.180 Right. 07:17.200 --> 07:20.980 Our thought length is less than two. 07:22.060 --> 07:30.530 If this condition is true, then we need to write hours equals zero plus again hours. 07:31.480 --> 07:33.910 Let's do the same four minutes and seconds. 07:34.090 --> 07:37.900 Create each statement and write the condition minutes. 07:37.900 --> 07:39.700 That length is less than two. 07:40.920 --> 07:45.450 Then again, inside racists, right minutes equals to. 07:46.600 --> 07:48.580 Zero plus minutes. 07:50.270 --> 07:54.880 And that creates another if statement for seconds, right? 07:55.050 --> 08:05.000 Second thought length is less than two and inside the price is right, seconds equals zero plus. 08:05.970 --> 08:06.580 Seconds. 08:09.290 --> 08:10.680 All right, let's see. 08:10.700 --> 08:19.340 As a result, what we have already got creates variable clock and display the current time in digital 08:19.580 --> 08:22.630 format assigned to this variable hours. 08:22.640 --> 08:30.730 Plus place your column that plus minutes, then again, column. 08:31.610 --> 08:34.400 And finally plus seconds. 08:36.020 --> 08:44.300 Run it in council, right, constant the clock, clock, reload, and you see that we have current time 08:44.300 --> 08:45.920 and digital clock format. 08:46.370 --> 08:47.580 OK, perfect. 08:48.500 --> 08:51.260 The next step is to define the relevant weekday name. 08:51.770 --> 08:57.680 We know that Cattai method gives us the zero based index numbers of the current days in order to get 08:57.680 --> 09:00.340 the weekday name instead of the index number. 09:00.500 --> 09:06.420 It's perfect to use a right, which also uses zero based in its numbers for its items. 09:06.890 --> 09:10.580 So creates a right and call it weekdays. 09:12.660 --> 09:17.100 Then insert here weekday names kind of short way. 09:18.240 --> 09:23.580 From Sunday to Saturday. 09:28.960 --> 09:35.320 In order to get the current day name, we need to use weekdays with a variable date which will be passed 09:35.320 --> 09:37.710 inside square brackets as an index number. 09:38.800 --> 09:44.920 So we have to write weekdays and that in square brackets, the variable date. 09:49.600 --> 09:55.840 Let's reload and see that we have current weekday name as Wednesday. 09:56.740 --> 09:58.840 I hope that everything is clear for you. 09:58.840 --> 10:01.950 If not, you can post a video and think about it. 10:02.530 --> 10:08.140 I'm sure that you will find out everything because you already have enough knowledge regarding JavaScript 10:08.140 --> 10:08.610 basics. 10:09.550 --> 10:11.260 All right, let's move on. 10:11.560 --> 10:13.990 It's time to display our clock on the page. 10:13.990 --> 10:18.610 And I'm going to use a method which actually is a part of document object. 10:18.610 --> 10:22.580 Model is the model for manipulating on Web page. 10:23.230 --> 10:25.750 Some of you may already know what Dom is. 10:26.200 --> 10:31.780 The only purpose of using this method is just to display the clock on the page so you don't have to 10:31.780 --> 10:37.000 worry if you see this matter for the first time because you will learn about it in the comic sections. 10:37.870 --> 10:43.960 In order to display the clock on the page, we need to access on having elements using it, attribute 10:44.380 --> 10:46.570 and display the clock as the content of it. 10:47.350 --> 10:52.480 So write documents that get elements by ID. 10:54.970 --> 10:58.270 Inside parentheses, insert the ID clock. 11:00.680 --> 11:02.660 Then write in HTML. 11:05.180 --> 11:13.700 And assign to it variable clock rollout and see that we have our digital clock with weekday name on 11:13.700 --> 11:19.340 the page, but we have here a little problem, it doesn't work dynamically yet. 11:19.520 --> 11:23.930 You need to refresh the page each time to get the current time that's fixed. 11:23.930 --> 11:30.050 That used one of the JavaScript built in methods, which is called set interval. 11:30.830 --> 11:37.570 The interval method calls a function at specified intervals which are counted in milliseconds. 11:38.300 --> 11:44.030 So we need to write set interval outside the main function. 11:44.750 --> 11:46.480 It uses two parameters. 11:46.820 --> 11:51.620 First, one is functioning, but we need to write it without parentheses. 11:53.370 --> 12:02.460 And the second one is the interval in milliseconds, so right here, 3000 thousand milliseconds means 12:02.460 --> 12:06.020 that the function will be called in every second. 12:08.310 --> 12:15.570 That's reload the page and you see that our digital clock is working dynamically without refreshing 12:15.690 --> 12:16.530 Avrich time. 12:17.340 --> 12:17.940 All right. 12:18.510 --> 12:19.590 Congratulations. 12:19.710 --> 12:24.040 You have just built your first project, digital clock application, using JavaScript. 12:24.690 --> 12:29.040 I know that it's a very simple one, but for the basic level, it's really perfect.