WEBVTT 00:01.740 --> 00:03.960 OK, let's continue in this election. 00:03.990 --> 00:11.280 I will show you two main things, how to use key press event in order to add note using and Turkey and 00:11.280 --> 00:13.910 then how to delete notes clicking on delete button. 00:15.150 --> 00:20.810 OK, we need to use another ADD event listener, which will be attached to input elements. 00:21.390 --> 00:25.860 And here I'm going to use key press event using key press event. 00:25.860 --> 00:29.310 Events are fired when we press on any key on keyboard. 00:30.150 --> 00:38.370 So write input stored at event listener then inside the parentheses indicate the event. 00:38.370 --> 00:39.030 Key press. 00:42.310 --> 00:43.750 And also right to function. 00:46.860 --> 00:49.720 Then test again in council how it works. 00:50.250 --> 00:52.960 So right inside the collaborationist council, good luck. 00:53.290 --> 00:53.730 Hello. 00:57.920 --> 01:07.580 Reload the page, click, and when we write something down on each key press, the event is fired. 01:08.900 --> 01:13.610 All right, so when I click on added button, the input is appeared. 01:14.060 --> 01:19.280 But you notice that there is no any button in order to add updated content to the note. 01:19.910 --> 01:22.210 And I'm going to do it using and Turkey. 01:22.820 --> 01:28.910 So for that, again, we need to use event object and one of its property called Key Code. 01:30.580 --> 01:35.490 Let's pass it as a parameter and then write it in council as well. 01:38.110 --> 01:48.760 Reload, click on edit, then type one character, and you see that in console we have event object 01:48.760 --> 01:50.230 called keyboard object. 01:51.100 --> 01:58.000 If we drop it you will see that it has multiple properties which are a little bit different than it 01:58.000 --> 01:58.240 was. 01:58.240 --> 02:03.910 In case of click event from these properties, we need to focus on key called property. 02:04.360 --> 02:09.810 In this case, it has the value one zero one, which is relevant to key. 02:11.950 --> 02:16.350 As we mentioned, we need the value of key code properties when we press on enter key. 02:16.960 --> 02:18.310 So let's press on it. 02:20.350 --> 02:26.080 And you see that we have another event object and instead of E, we have key names. 02:26.080 --> 02:28.750 Enter, let's drop down it. 02:30.100 --> 02:34.810 And you see that the value of key called property for entry is thirteen. 02:36.220 --> 02:36.730 All right. 02:37.420 --> 02:38.620 This is what we needed. 02:38.870 --> 02:43.450 Now let's use if conditional statement and pass the following condition. 02:43.810 --> 02:51.030 As we said, we need to execute a bunch of code when we press on and Turkey therefore in condition e 02:51.040 --> 02:53.820 dot key code must be equal to thirteen. 02:54.340 --> 02:54.550 So. 02:54.550 --> 02:54.760 Right. 02:54.760 --> 02:58.000 If that idot key code. 03:00.740 --> 03:03.110 Triple equals to 13. 03:06.880 --> 03:10.330 Let's test again in Castle right here. 03:13.030 --> 03:14.770 You pressed and Turkey. 03:20.540 --> 03:25.670 And then create statements and Rights Council dialogue. 03:29.200 --> 03:30.670 You pressed other key. 03:36.830 --> 03:46.490 Then reload, click on added button and then press at first and you have the keys on keyboard, you 03:46.490 --> 03:54.380 see that we have you press the other key and when we press on enter, then we have you pressed and tricky. 03:56.270 --> 03:56.780 All right. 03:57.500 --> 03:58.720 It works perfect. 03:59.510 --> 04:02.330 Let's remove our statement and the council as well. 04:04.910 --> 04:12.760 Now, the next step is to grab the updated value from input and assign it to the note as a new content. 04:13.280 --> 04:16.400 So we need to write note that text content. 04:19.300 --> 04:21.700 Equals it puts that value. 04:24.600 --> 04:30.750 Now we need to appear again icons for added and delete and at the same time, we need to hide the input 04:31.230 --> 04:33.840 so that I'm going to use, again, stand properties. 04:34.830 --> 04:38.700 As you know, I consult content in second paragraph, which is parent power. 04:39.090 --> 04:39.720 So we need to. 04:39.720 --> 04:45.000 Right parent park, dot style, dot display. 04:48.010 --> 04:49.180 Equals to block 04:52.390 --> 05:01.630 and then for input elements, right, input, dot style, dot display equals to not. 05:06.030 --> 05:16.020 Then reload and just click on add it, then type something pressed the enter key and here we go, it 05:16.020 --> 05:25.530 works but if we clear inputs and then press enter, then the item will be updated as empty. 05:26.550 --> 05:27.510 We don't want it. 05:27.520 --> 05:30.110 We want the item to be deleted if it's empty. 05:30.450 --> 05:35.070 So then we need another if statement in which those codes should be included. 05:35.880 --> 05:49.310 So right here, if the condition as input dot value, which not equals to just rink's. 05:54.170 --> 05:57.620 Then pass these coats inside the curly braces. 06:02.990 --> 06:08.960 And then we need Elsah statements where we will pass the codes in order to delete item if the updated 06:08.960 --> 06:10.690 value is empty, so. 06:10.700 --> 06:16.790 Right, or else I'm going to use a remote child method in order to delete item. 06:17.270 --> 06:19.900 In this case, we need to delete at least element. 06:20.570 --> 06:26.250 Therefore, as you remember, we need to access on its parent, which is in this case, you will. 06:27.620 --> 06:37.490 So at first let's access on at least elements create variable Varelli equals input that parent node. 06:41.340 --> 06:42.870 And then delete the item. 06:45.050 --> 06:56.030 Right, well, I got a note, so now we have access on all elements, and from here we are able to delete 06:56.030 --> 07:11.720 the item by remove a child and cross the parameter as like let's reload, then click on edit and clear 07:11.720 --> 07:16.160 the input, then press the enter and you see that the whole item is gone. 07:17.750 --> 07:18.880 OK, great. 07:19.820 --> 07:21.760 Regarding added feature, we are done. 07:21.770 --> 07:26.900 And now let's move on to the next step, which is to delete the item when we click on Delete Icon. 07:27.530 --> 07:33.650 I'm going to use the same approach as it was in case of editing the items we need to use or else if 07:33.650 --> 07:36.260 statement with the similar condition. 07:37.010 --> 07:40.760 But in this case, we need to use the last name of delete icons. 07:41.570 --> 07:45.080 So let's copy and paste your. 07:47.760 --> 07:52.830 So we need to grab the name of the icon from the Extremophile. 07:54.630 --> 07:59.620 That's copy and paste here. 08:01.320 --> 08:08.490 All right, the condition is ready now let's test again in Castle, right, Castle, good luck. 08:10.830 --> 08:11.580 It works. 08:14.550 --> 08:19.500 Then reload, click on delete button and see if it works. 08:21.240 --> 08:28.150 OK, let's get rid of cancel that log and then write the similar code as it was in previous ALSA statement. 08:28.830 --> 08:32.110 Again, we need to delete list item using its parent. 08:32.640 --> 08:34.880 So at first, let's define list element. 08:35.460 --> 08:39.120 But in this case, I'm going to access on it with a different way. 08:39.630 --> 08:41.640 So let's create a variable list, right. 08:41.640 --> 08:47.610 For our list equals and I'm going to use your target property. 08:47.610 --> 08:47.940 Right. 08:48.360 --> 08:48.930 Target. 08:51.880 --> 08:57.610 And then use Parad note and again note. 09:01.590 --> 09:04.900 After that removed the element using remote child method. 09:05.220 --> 09:08.730 So, right, at least that parent node. 09:11.510 --> 09:12.920 That remote child. 09:15.790 --> 09:18.160 And passed the parameter, as least. 09:20.940 --> 09:30.840 Reload the page, then click on delete and you see that the items are deleted perfect, so the additon 09:30.840 --> 09:31.950 delete part is done. 09:32.190 --> 09:36.510 Let's move on and program hiding elements in the next video.