WEBVTT 00:00.810 --> 00:06.870 All right, so we can say that you already know everymen concept of Don, you know, how to select elements, 00:06.870 --> 00:10.070 how to manipulate and change the content and style of them. 00:10.680 --> 00:15.150 You also know how to attach events to actual elements and lots of other stuff. 00:16.200 --> 00:20.700 Now it's time to put all of these together and start to program a little application. 00:21.090 --> 00:24.060 During this process, you have a chance to do some tasks. 00:24.060 --> 00:26.500 And this is the first one in this section. 00:27.660 --> 00:28.200 All right. 00:29.320 --> 00:33.080 Let's take a look on the screen here we have our note manager. 00:33.970 --> 00:40.870 We already know that before we have a forum which includes input and submit button, they are for adding 00:40.870 --> 00:41.560 the new notes. 00:41.560 --> 00:44.740 And your current task is exactly to do that. 00:45.940 --> 00:49.140 So you need to write the code to get the following results. 00:49.630 --> 00:59.890 When I enter something here, for example, for note and then click on add button, it automatically 00:59.890 --> 01:08.710 is added to the list and also the input becomes a new note has the same style and also it has the same 01:08.710 --> 01:10.340 icons for added and delete. 01:11.260 --> 01:12.580 So what do you need to do? 01:13.030 --> 01:14.990 Let's take a look on HTML file. 01:16.690 --> 01:22.570 Obviously you need to create a new list element with all its including elements, I mean paragraphs, 01:22.570 --> 01:27.580 icons with their class attributes and also the input with class type attribute. 01:28.210 --> 01:33.460 This input from access is hidden because it has the property display none. 01:34.480 --> 01:35.880 So it won't appear. 01:35.890 --> 01:38.170 And don't be confused about it. 01:38.770 --> 01:42.050 This input element will be used for editing notes later. 01:43.540 --> 01:44.950 There is one thing to note. 01:45.490 --> 01:51.370 As I have seen when I have typed something in input, that tax value was added as a note in the list. 01:52.240 --> 01:56.800 So you will need to access and grab the value that will be written in the form. 01:57.710 --> 02:02.540 For that, you need to use dot value property like we have used it previously. 02:04.060 --> 02:10.990 The next feature of this application is that when the input is empty and I click on add button, it 02:10.990 --> 02:12.060 doesn't do anything. 02:12.880 --> 02:15.450 So you need to take it into account as well. 02:16.730 --> 02:19.010 All right, is it difficult? 02:20.000 --> 02:20.800 I don't think so. 02:21.380 --> 02:26.360 You know, everything all the stuff we're writing this program, I want you to try your best. 02:26.990 --> 02:30.590 You may find a different solution, and that will be very nice. 02:31.220 --> 02:33.560 But if you're having trouble, it's not a problem. 02:34.100 --> 02:36.710 You will see the solution of this task in the next video. 02:37.930 --> 02:39.820 OK, let's go ahead. 02:40.450 --> 02:40.990 Good luck.