WEBVTT 00:01.440 --> 00:07.170 In this lecture, we are going to continue programming our application, he will have finished the version 00:07.170 --> 00:13.170 of our project and in this video, I'm going to show you how to edit the notes and also how to delete 00:13.170 --> 00:15.060 them by clicking on the proper icons. 00:16.200 --> 00:22.140 So, for example, when we click on edit button down, the input appears and you are able to edit the 00:22.140 --> 00:22.500 note. 00:23.220 --> 00:28.320 If we add here some text and then press enter, the note will be updated. 00:29.220 --> 00:34.620 Also, if we clear the input and press enter that the note will be deleted. 00:35.910 --> 00:39.650 If we click on delete icon after that, the note will be removed. 00:41.280 --> 00:42.500 How to get this result? 00:42.520 --> 00:44.290 You will see step by step in this video. 00:45.400 --> 00:53.550 OK, I'm going to demonstrate some unknown and new things in this lecture, and because of that I've 00:53.550 --> 00:55.490 decided not to give it as a task. 00:55.500 --> 01:01.530 But anyway, before I show you how to program it, you can post a video and try it on your own. 01:02.910 --> 01:05.120 All right, let's get started. 01:05.700 --> 01:06.900 Go back to brackets. 01:07.770 --> 01:10.020 You have the codes from previous video. 01:10.020 --> 01:12.720 And also we have here our working project. 01:13.830 --> 01:22.140 If we click on those icons, they obviously didn't work yet as we have seen edit and it happens on click 01:22.140 --> 01:22.590 events. 01:22.590 --> 01:28.080 And therefore, you may think that we need to attach add event listeners for all of these icons. 01:28.770 --> 01:32.940 Of course, this is one of the ways, but there is much better and interesting solution. 01:33.360 --> 01:40.470 I'm going to use only one add even listener, which will be attached to your element and will work for 01:40.470 --> 01:43.380 all of those icons you will. 01:43.380 --> 01:47.340 Element is already defined on global level, so I'm going to use it. 01:47.970 --> 01:55.050 But before I actually start writing the codes, let's separate different parts of our project with comments. 01:56.500 --> 01:59.500 That's right, about eight items. 02:03.900 --> 02:08.760 And below, right, edit and delete items. 02:13.840 --> 02:22.210 OK, as we said, let's attach to you elements at event listener, so right, you will not add event 02:22.210 --> 02:30.760 listener and he said the parentheses that indicate the click event, right click and then function. 02:34.680 --> 02:39.370 As usually I'm going to test and castle how it works. 02:39.780 --> 02:41.760 So right, Castle, good luck. 02:42.840 --> 02:43.350 Hello. 02:47.910 --> 02:52.410 Reload and click on any part of your element. 02:52.650 --> 02:57.660 It doesn't matter, you see that on each click, the event is fired. 02:59.100 --> 03:07.470 OK, actually we want to execute the code inside function when we click exactly on those icons that 03:07.470 --> 03:14.910 at first thought from added feature and for testing proposals, I want to see hello in council only 03:14.910 --> 03:20.640 when I click on added icon products again, we need to use event object and the target property. 03:21.420 --> 03:28.060 So let's pass it as a parameter in function and also in cancel that log instead of hello. 03:28.080 --> 03:30.420 Right e dot target. 03:32.430 --> 03:38.190 Then reload and click a couple of times on different parts of your element. 03:39.790 --> 03:46.420 You've seen council that we are getting the exact elements where we click on and all of these elements 03:46.420 --> 03:52.190 are contained in, you will aren't OK from the previous videos. 03:52.210 --> 03:58.080 You remember that you don't target property and especially what these were acting in the same way. 03:58.570 --> 04:08.890 But in this case, if we change a target into this that reloads and again click several times anywhere 04:08.890 --> 04:15.270 on your element, each time it will return, only you will and not its children. 04:17.580 --> 04:24.120 All right, it was just for your information, in order to become more powerful developer, you need 04:24.120 --> 04:25.650 to know such details. 04:26.830 --> 04:36.810 OK, let's go ahead and get back to Target inside, console, reload and then click on edit button. 04:38.310 --> 04:43.110 So you see, I element in console with its class names. 04:44.380 --> 04:46.680 You see that it has two class names. 04:47.160 --> 04:51.110 First, it's common for all icons, but the second one is unique. 04:51.720 --> 04:58.320 Therefore, I'm going to use it in order to access on second class name, we need to use class leased 04:58.320 --> 04:58.950 property. 05:00.150 --> 05:04.230 So we write to your DOT class at least. 05:06.360 --> 05:14.640 And then indicate the proper index number in this case, we need to select a second class name, therefore 05:14.640 --> 05:16.140 we need to write one. 05:19.210 --> 05:23.980 Reload, then click again on added buttons. 05:26.490 --> 05:30.360 And you see that we have second class name in Castle. 05:32.700 --> 05:38.260 OK, so the code inside function should be executed in the case. 05:38.280 --> 05:42.760 If I click on that icon so that we need to use if conditional statement. 05:43.470 --> 05:44.130 So right. 05:44.130 --> 05:48.210 If done inside the parenthesis, right. 05:48.480 --> 05:52.950 To target DOT at least. 05:55.510 --> 06:03.280 And again, indicate the index number as one than triple equals. 06:06.370 --> 06:14.430 Let's go to Extremophile and copy the class name and then paste it here. 06:17.480 --> 06:25.370 Then please consider log inside curly braces and write inside parentheses. 06:26.370 --> 06:26.850 Hello. 06:28.970 --> 06:38.840 Refresh, then click anywhere except edit button, you see that it doesn't work, but if we click on 06:38.840 --> 06:42.250 added button then we will have hello in council. 06:43.910 --> 06:45.210 OK, great. 06:45.800 --> 06:47.470 I think that it makes sense. 06:48.830 --> 06:53.050 Let's move on to the next step and take a look again on a finished project. 06:53.900 --> 06:58.770 So when we click on Add Button, you see that icons become hidden. 06:59.870 --> 07:00.770 So let's do it. 07:00.980 --> 07:07.700 At first we need to access on parent elements of those icons, which is a second paragraph. 07:09.460 --> 07:17.440 But first, let's remove this castle dialogue, then create variable and call it parent paragraph, 07:18.070 --> 07:20.080 so rights of parents power. 07:22.840 --> 07:32.700 Then we use again to target, so write it on target and let's reach the element using paranoid property. 07:33.520 --> 07:34.960 So right here, paranoid. 07:38.360 --> 07:48.640 In order to hide it on Callick event, we need to use style property, so right below parent power dot 07:48.650 --> 07:55.010 style dot display equals not. 07:58.500 --> 08:03.360 Reload, click, and you see that icons are hidden. 08:04.570 --> 08:06.440 OK, perfect. 08:06.750 --> 08:08.160 Let's move on to the next step. 08:09.060 --> 08:15.340 As we know, at least element includes two paragraphs and input, which is hidden from success. 08:16.950 --> 08:23.720 The second paragraph is already defined and now I'm going to define the rest of these elements, create 08:23.730 --> 08:28.980 variable and call it notes, because actually this paragraph contains the text of note. 08:33.340 --> 08:38.760 The first paragraph is proving a sibling for a second paragraph that we have just created. 08:39.250 --> 08:46.090 So in order to access on it, I'm going to use previous elements, sibling property, so. 08:46.090 --> 08:46.540 Right. 08:46.660 --> 08:55.150 Parent power, dot, previous element, sibling in the same way. 08:55.330 --> 08:58.540 Input element is the next sibling for the second paragraph. 08:59.140 --> 09:02.290 Therefore, I'm going to use next element sibling property. 09:02.860 --> 09:04.840 So create variable input. 09:05.860 --> 09:13.490 Write for input equals parent power dot next sibling. 09:15.100 --> 09:19.210 Let's again test in council and get these variables on Callick. 09:19.750 --> 09:21.400 So write council that log. 09:24.460 --> 09:25.000 Notes. 09:26.350 --> 09:27.550 And then he put. 09:30.690 --> 09:40.740 Reload, click on edit button and you see that we have first paragraph and inputs in council at the 09:40.740 --> 09:41.310 same time. 09:42.750 --> 09:43.250 All right. 09:43.950 --> 09:48.680 The next step is that we need to appear input element and click again. 09:48.690 --> 09:52.350 I'm going to use excessive style property, so. 09:52.350 --> 09:52.710 Right. 09:52.710 --> 09:56.610 Input dot style, dot display. 09:59.930 --> 10:02.690 And in this case, we need to assign a value block. 10:05.470 --> 10:07.390 Reload Kalik. 10:09.020 --> 10:12.830 And you see that the input has appeared all right. 10:14.350 --> 10:20.690 The last thing that I'm going to show you in this video is to insert the text of the note as the value 10:20.690 --> 10:21.330 of the input. 10:21.680 --> 10:26.930 So for that, I'm going to write input that value. 10:29.020 --> 10:29.680 Equals. 10:32.280 --> 10:38.430 Note not and use here the text property by text content. 10:41.450 --> 10:42.110 Refresh. 10:43.380 --> 10:46.370 Click and here we go. 10:48.670 --> 10:57.280 All right, I'm going to stop here, but we have not done editing and deleting part yet, we will continue 10:57.280 --> 10:58.330 it in the next video.