WEBVTT 00:01.080 --> 00:06.900 As we said in the previous lecture throughout this section, I'm going to use our application note manager 00:07.320 --> 00:09.960 in order to test things that I will demonstrate. 00:10.830 --> 00:15.150 The source path for our app are attached to this lecture in some spots. 00:15.160 --> 00:21.400 I mean, starting files which contain the already indexed HTML and access files. 00:22.110 --> 00:26.420 Also, we have here cryptologists, which is empty for now. 00:27.030 --> 00:34.470 Then we have two folders, success and fonts, which we will use for inserting nice fonts and icons. 00:35.340 --> 00:37.440 You can download these files and use. 00:38.740 --> 00:42.460 OK, let's open this folder in brackets and. 00:43.770 --> 00:46.110 Then run it in browser. 00:48.910 --> 00:51.940 So you see that you have our application. 00:53.710 --> 01:00.370 At first, I'm going to describe the HTML file, which consists of multiple elements and tags, I hope 01:00.370 --> 01:05.320 that you are familiar, at least with ABC of HTML and Unsuccess. 01:06.490 --> 01:07.700 It had elements. 01:07.720 --> 01:14.590 We have the title note manager, then it is followed by three links. 01:15.670 --> 01:21.520 First one is for Standard Access File, where we have the main styling of our. 01:21.520 --> 01:26.530 Up next is a link for font awesome access. 01:26.830 --> 01:32.680 It contains some cool fonts that we use for editing and deleting the notes. 01:33.610 --> 01:37.720 And the third link contains your URL for Google Fonts website. 01:38.920 --> 01:40.210 Inside the body elements. 01:40.210 --> 01:44.920 The whole content is wrapped in development, which has the class name wrapper. 01:45.550 --> 01:51.910 It is followed by the header element which contains H2 heading note manager. 01:51.910 --> 01:57.040 And then we have formed Element with an input which is needed for search filter. 01:58.190 --> 02:04.760 Heather Element is followed by another DVH that contains an order list, the list is four notes and 02:04.760 --> 02:09.670 each list item contains paragraphs for the notes and for the icons. 02:10.640 --> 02:16.660 For now, they are placed in static mode, but using JavaScript will make them dynamic later. 02:18.300 --> 02:25.410 All right, next, we have another development which contains label and input, and we are going to 02:25.410 --> 02:28.320 use that for hiding and hiding notes. 02:29.520 --> 02:37.710 You can notice that for attributes inside label, tag and ID, inside input have the same values height 02:38.250 --> 02:42.780 because this fact allows us to use checkbox to create click event. 02:43.420 --> 02:45.480 Let's see what I'm talking about exactly. 02:46.110 --> 02:51.810 Go to Standard Xerces file and find input. 02:53.430 --> 02:58.530 You see, that checkbook's for now is hidden because it has property display not. 02:59.740 --> 03:07.780 If we commented out, the box will appear and you can see that in order to check it. 03:07.810 --> 03:10.840 We don't need definitely to click on the box. 03:12.270 --> 03:15.630 Because of that four attribute and I do have the same values. 03:16.140 --> 03:19.140 Click on the label, content is absolutely enough. 03:20.640 --> 03:21.320 Makes sense. 03:22.700 --> 03:23.120 OK. 03:24.200 --> 03:26.930 We will use this feature later in this section. 03:27.980 --> 03:32.150 Now let's get rid of the comment and go back to index extremophile. 03:33.850 --> 03:41.380 The last part of the team accountant is this element which contains form where the two inputs and they 03:41.380 --> 03:43.990 are used for adding the notes to the list. 03:45.800 --> 03:52.160 All right, because of that, throughout this section, we are going to use multiple methods, properties, 03:52.160 --> 03:54.590 and also we are going to test many other things. 03:54.950 --> 03:59.180 That's why I wanted to show and describe the content of the Offut. 04:00.440 --> 04:08.960 OK, the next thing I'm going to do is to open the developer tools, the majority of testing and illustrating 04:08.960 --> 04:12.260 things during these lectures will be in council. 04:13.190 --> 04:20.810 In order to organize the browser and console better, let's place them side by side. 04:21.830 --> 04:26.720 For that, you need to click here and choose Doc to left. 04:29.740 --> 04:33.800 And also to distinguish better the EP and council window. 04:33.970 --> 04:44.110 Let's change the color of it and make it darker, click again on Menu Bar that settings and change light 04:44.110 --> 04:45.100 into dark. 04:47.300 --> 04:55.790 All right, on the left side of council, we have a section where you can find the contents of current 04:55.800 --> 05:03.440 extremophile here we have all the elements and tax that we have described a few seconds ago. 05:03.950 --> 05:07.660 You can manipulate on extremophile from here. 05:08.210 --> 05:17.420 For that, you need to click on the right button and then click to edit as HTML and change the content. 05:17.420 --> 05:18.110 Temporary. 05:19.430 --> 05:19.940 That's right. 05:19.940 --> 05:21.410 Here, note manager app. 05:23.370 --> 05:25.590 And you see that the header is changed. 05:26.890 --> 05:32.230 But as I said, it's temporary because from here we cannot change the actual source file. 05:32.830 --> 05:40.090 I mean, the actual content, when you reload the page, you will get the initial heading. 05:42.480 --> 05:49.410 OK, it's just a simple example of how useful and powerful developer tools is, and you will see a lot 05:49.410 --> 05:51.870 of interesting things in it through this section. 05:53.590 --> 06:00.910 All right, actually, we are ready to move forward, as we already said, Don stands for document object 06:00.910 --> 06:01.360 model. 06:01.870 --> 06:09.510 It means that everything of the notes in document, the document itself is an object at first. 06:09.520 --> 06:10.150 That's right. 06:10.150 --> 06:11.740 In council document. 06:14.000 --> 06:21.830 If you drop down, it's you will see the whole HTML document, the exact same content as it was in brackets 06:22.220 --> 06:24.140 and also in Elements section. 06:25.490 --> 06:32.900 In order to prove that document is an object, I'm going to use type of operator, which returns the 06:32.900 --> 06:34.390 data type of an element. 06:34.850 --> 06:36.650 So let's write type of. 06:37.750 --> 06:38.920 That document. 06:42.490 --> 06:45.840 You see that we have here an object again. 06:45.970 --> 06:54.620 It means that document is an object, OK, when the page is loaded in browser, you already know that 06:54.620 --> 07:01.510 the global window object is created and simultaneously document becomes a property of global window 07:01.510 --> 07:01.960 object. 07:02.600 --> 07:07.270 We can prove that if we write your window dot document. 07:10.710 --> 07:12.870 We will get again documents. 07:14.010 --> 07:21.540 And if you drop down, it's you'll see again the content of HTML file with all its elements, Tug's 07:21.550 --> 07:23.150 links and so on. 07:25.690 --> 07:26.170 All right. 07:27.550 --> 07:28.900 For now, it's enough. 07:29.440 --> 07:30.640 See you in the next video.