WEBVTT 00:00.120 --> 00:01.980 Hello everyone and welcome back. 00:01.980 --> 00:03.140 We have an obligation to build. 00:03.210 --> 00:04.640 So let's get started. 00:05.220 --> 00:10.080 Yeah we are in words to your code and as you can see I've created a new file that is specifically for 00:10.080 --> 00:16.320 this project and instead of this I've created two files of course in each the file and a javascript 00:16.320 --> 00:17.520 file as always. 00:17.850 --> 00:22.410 However considering that in this lesson we are coding together at one of the possible solutions for 00:22.410 --> 00:24.500 a competency assessment project. 00:24.540 --> 00:30.840 The only boilerplate code that I've already added is this age AML code right here JavaScript file as 00:30.840 --> 00:36.060 you can see is empty so that we can have the opportunity to talk about all the different concepts that 00:36.090 --> 00:40.740 we've discussed during the section conceding that as you can see I have already included these are in 00:40.740 --> 00:47.400 the file a link to see the N provide Nass Abuja yes we can create a root of your instance right away 00:47.490 --> 00:57.570 so var output equals new view and it view we passed the options object and the first property that we 00:57.570 --> 01:05.820 want to define is a lump and eat well we pass at CSX selector that corresponds to our H the email element 01:06.120 --> 01:08.690 where we want to mount our instance on. 01:08.700 --> 01:16.340 So in this case they can create as always and leave them we've I.D. Apple and considering that we are 01:16.340 --> 01:24.120 creating a to do application the next thing that we want to do is to define the data object and inside 01:24.120 --> 01:29.090 of the detail object we can define tasks as an empty array. 01:29.130 --> 01:34.890 We also know that we need to keep track of how many tasks we have left in our array and to do so we 01:34.890 --> 01:43.530 can use a computed property which are really powerful because they cache the result of data processing 01:43.830 --> 01:46.200 until the values involved change. 01:46.200 --> 01:52.700 So yeah we can define task count and simply write to her. 01:52.860 --> 01:59.860 These tasks not linked we cannot define two methods. 02:00.000 --> 02:06.540 So methods the two methods will allow us to add and remove tasks from the array and we are going to 02:06.540 --> 02:13.610 call them using a meter from within a component that you are going to create so other new Task Group 02:13.770 --> 02:20.240 which accepts as a parameter new task hope and we can just push it inside of the array. 02:20.270 --> 02:23.190 So these not tasks are not 02:27.300 --> 02:37.690 new task like so we can then define remove Tasker which accepts a task as a parameter and to remove 02:37.690 --> 02:39.810 these specific tasks from the array. 02:39.850 --> 02:48.160 We can do like so and thought tasks that supplies which of course allows us to remove elements from 02:48.160 --> 02:48.700 an array. 02:48.820 --> 02:57.610 And so yeah we can pass these both tasks that index of Tosca 1. 02:58.080 --> 03:03.940 We now need to decide which strategy we want to adopt to keep developing our application and considering 03:03.940 --> 03:08.920 that we are developing a relatively small application and view yes is really powerful. 03:08.920 --> 03:15.670 One of the best choices we can make is to just develop a view component a to do component and inside 03:15.670 --> 03:19.930 of that component we can then define all the rest of the code for the application. 03:19.930 --> 03:21.600 So right here on top. 03:21.970 --> 03:29.850 Going to define view dot component and as always first of all we need to give a name for the component. 03:29.860 --> 03:32.040 We can just call it to do. 03:32.380 --> 03:38.390 And of course considering that we're going to pass data to the component itself we need to define props 03:39.640 --> 03:48.820 and getting props so we have tasks to of course type array acquired through. 03:49.090 --> 04:01.310 And we also need to define in other proper we can just call it remaining which is of type No. 04:01.630 --> 04:05.070 And of course will tell us how many tasks we have left. 04:05.200 --> 04:09.100 We can now finally go back to the theme of the file and Europe. 04:09.310 --> 04:14.310 We can use our component so to do day component. 04:14.610 --> 04:16.190 You can help us the props. 04:16.210 --> 04:27.640 So tasks are and remaining and to remain of course we're going to assign our computer the property task 04:27.850 --> 04:29.820 count like so. 04:30.010 --> 04:36.280 So now going back to the J Yes file in there to do component we can define template 04:39.430 --> 04:41.360 we can use vector excel. 04:41.580 --> 04:49.060 So first of all we need to remember that all the HDMI code is to be inside one root adamant. 04:49.110 --> 04:55.240 Therefore we can just define a deep glass container and maybe you can also add a bit of margin. 04:55.270 --> 04:58.960 Now that you have Europe like so. 04:59.550 --> 05:03.380 So yeah we can define a paragraph maybe even strong. 05:03.440 --> 05:16.770 Like so many other remaining tasks that we can just pass remaining thanks so so strong and paragraph. 05:16.770 --> 05:20.630 We now have enough code to open our application in a browser. 05:21.060 --> 05:27.700 So I'm just going to pass the path and this you see we have very many tasks zero. 05:27.790 --> 05:30.900 Let's also inspect the application using beauty of tools. 05:31.170 --> 05:35.320 So view and of course we have a. 05:35.340 --> 05:42.570 It says we've computed and data and instead of it are to do component let's go back to these words to 05:42.570 --> 05:43.610 your code now. 05:43.720 --> 05:49.050 So I'm going for script and considering that we're going to have an input field which will allow us 05:49.050 --> 05:51.070 to submit new tasks. 05:51.120 --> 05:56.190 The next step is to define data so that within data we can define the properties that we're going to 05:56.190 --> 05:59.130 need to create and add a new task. 05:59.460 --> 06:03.160 So data which is a function. 06:04.100 --> 06:11.060 And so yeah we can return it and we need at least two fields to ask. 06:11.940 --> 06:17.430 We can just initialize it with no an error. 06:17.430 --> 06:21.030 And we also need to come up with new task and error. 06:21.030 --> 06:25.140 We can now think about getting user input and to get user input. 06:25.200 --> 06:27.050 We could use a form. 06:27.180 --> 06:34.460 But considering that we only need one single field we can just use any input of type text instead. 06:34.470 --> 06:46.300 So yeah we can define input type text so considering that we are using Bootstrap it can the class from 06:46.350 --> 06:50.820 control we've placed order. 06:51.270 --> 07:00.710 What you need to do the model directive are very important directive model. 07:00.960 --> 07:08.080 New Tasker and then we can listen on that keep up even enter on enter. 07:08.220 --> 07:15.060 So we can basically wait for the user to press center to actually submit the new task. 07:15.060 --> 07:20.450 Now of course I'm passing a method name for a matter that we haven't defined yet. 07:20.460 --> 07:29.210 So let's now define a method suddenly task and. 07:29.240 --> 07:29.470 Yeah. 07:29.470 --> 07:34.710 First of all we want to be sure that something has in fact been added to the input field. 07:34.990 --> 07:44.170 If these not new ASCO then we're going to do something else we're going to add an error message. 07:44.170 --> 07:56.820 So these dot error equals a string something like deep input field can't be empty but if a new task 07:56.820 --> 08:03.300 is in fact being added We don't want to use a meter to emit a signal that will tell that application 08:03.840 --> 08:06.350 to call the add new task method. 08:06.360 --> 08:13.780 So yeah we can write this dot dollar sign a meter. 08:14.800 --> 08:20.960 We need a name simply add Tasker and we also need to pass the new task. 08:20.980 --> 08:31.810 So this dot you know task and going back to the HDMI file we can at least input the add task event into 08:33.080 --> 08:38.300 entities we want to pass as you said you ask. 08:38.560 --> 08:42.750 Let's go back to the GM file because of course we have a lot of work to do Steele. 08:42.850 --> 08:47.810 So first of all these new tasks equals Nola. 08:48.370 --> 08:50.880 And we also want to reset the airfield. 08:50.950 --> 08:57.840 So if this error is not there equals notice. 08:58.300 --> 09:05.500 So we now can add new tasks to their tasks Saturday but of course we need to show that in the age demo 09:05.500 --> 09:09.660 code of our component so that I can add a line break. 09:09.940 --> 09:15.110 And yet I can define in another diva class we can add a single task. 09:15.580 --> 09:31.990 And of course we can use the V for directive so V for task index tasks the binding task on Tosca and 09:32.500 --> 09:35.360 keep on index. 09:35.600 --> 09:36.070 Yeah. 09:36.100 --> 09:39.310 Inside we can add that task. 09:39.370 --> 09:42.030 And of course we need to close the deal. 09:42.610 --> 09:44.050 Let's now go back to the browser. 09:44.470 --> 09:51.310 So I'm going to screen like so mean to refresh the page and we have our input field of course. 09:51.310 --> 09:52.540 So yeah I can. 09:52.540 --> 10:01.480 For example just add finish the application and this is See as soon as I understand it and your task 10:01.570 --> 10:07.920 has been added specifically of course it's been added to these tasks array in the detail object of our 10:07.940 --> 10:08.800 Edwards this. 10:08.890 --> 10:13.570 But of course because of user activity we also have it here as a prop. 10:13.570 --> 10:20.100 We can of course make our application better by implementing one of bootstrap classes. 10:20.340 --> 10:27.320 And as a matter of fact here I have a linkup you see to the documentation where we have our alert dismissal. 10:27.760 --> 10:30.100 And so I'm just going to copy this code. 10:30.100 --> 10:34.600 Let's close this page and going back to business to your code. 10:34.600 --> 10:39.380 Now we can just pass and decode Yeah incited Eve with class. 10:39.400 --> 10:40.510 Single Desk. 10:40.510 --> 10:43.350 Of course we don't need all this code at all. 10:43.390 --> 10:51.560 As a matter of fact we can just delete this line and instead move this one here. 10:51.620 --> 10:59.630 And here we can also delete all of these code like so and instead here we can't add the success classes. 10:59.650 --> 11:01.430 So I let I let success. 11:01.490 --> 11:09.630 And we can also delete this code like so and yeah he did just as well. 11:09.630 --> 11:11.690 So I'm not going to indent the code. 11:11.880 --> 11:15.850 So yeah we have type bottom class close. 11:15.930 --> 11:19.720 And of course we need to call the method the same way we've called it here. 11:19.860 --> 11:29.700 But this time to delete to remove a task so on click I'm just going to quote remove Tasker and we're 11:29.730 --> 11:33.390 going to pass it these specific tasks. 11:33.390 --> 11:36.420 Keep in mind that of course I imagine the indentation like so. 11:36.420 --> 11:40.310 But if you find it more readable you can just keep it but if you need one line. 11:41.100 --> 11:45.480 So let's go back to the browser once again let's refresh our page. 11:45.630 --> 11:52.000 Yes we can at first Tasker and yeah we have our beautiful left with class success. 11:52.200 --> 11:59.640 So going back to these words to your code once again we now need to define the remove task method of 11:59.640 --> 12:00.190 course. 12:00.690 --> 12:09.780 So you're going to add a comma remove task up and yet we can just emit a signal like so we're going 12:09.780 --> 12:15.290 to pass Tosca and we can just call it remove task. 12:15.860 --> 12:27.490 So going back to the HMO file you can listen for every move Tosca sign and it's you remove desk mattered 12:28.240 --> 12:38.770 in our view instance like so we can't now go back to Chrome once again so full screen refresh and had 12:38.830 --> 12:43.190 the Tosca in if now pressed the axle as you see. 12:43.190 --> 12:47.180 The task is removed so everything is working as expected. 12:47.180 --> 12:50.530 We now need to add the app and edit the messages. 12:50.690 --> 12:53.440 So let's go back to visit to your code. 12:53.510 --> 12:58.430 Once again we can now define a paragraph V. 12:59.030 --> 13:05.830 If error in that case we can't pass the error message. 13:08.740 --> 13:17.440 Now we also want to define the ADF message as so the remaining is equal to zero. 13:17.450 --> 13:22.060 We want a like so in that case we can show a message. 13:22.080 --> 13:30.500 So to add a new task to write something then press enter. 13:30.890 --> 13:31.340 Let's check. 13:31.340 --> 13:39.570 However if he looks like refresher we have the message and trying to submit an empty task. 13:39.650 --> 13:40.450 We get an error. 13:40.520 --> 13:42.650 The input field can't be empty. 13:42.890 --> 13:44.700 So let's add a couple of entries. 13:45.010 --> 13:53.300 While 2 free first of all we see that the counter is increased and by the way there is also is more 13:53.300 --> 13:54.320 typo to fix it. 13:54.590 --> 13:56.960 But there is also one other thing that I want to show you. 13:56.990 --> 14:04.220 If you try to delete it Tasker you'll see that we have this border around the axle which is in fact 14:04.220 --> 14:10.810 part of bootstrap but because of the way view is managing to dumb it basically gets passed to the other 14:10.880 --> 14:16.940 alert and therefore we can just create a new CSX class to fix these mold problem. 14:16.940 --> 14:25.890 Notice also how the X is black and not grey so let's go back to these W did your code and going back 14:25.890 --> 14:28.100 to the HDL file right away. 14:28.470 --> 14:35.220 Yeah we can define the style tag and instead of this type of tag we can define a class and we can just 14:35.220 --> 14:39.060 call it no outline. 14:39.060 --> 14:46.100 And here we can define that we want no outline so outline 0. 14:46.740 --> 14:50.560 Important we also want the color of the X to stay Grey. 14:50.580 --> 14:55.000 Therefore yet I I'm just going to pass this code they have previously defined in here. 14:55.080 --> 15:02.930 Therefore I'm going to define color as the same grey used by bootstrap and opacity to 1. 15:02.970 --> 15:07.350 It's just some simple CSX but it's going to make it look much better. 15:07.350 --> 15:10.750 And by the way we also need to fix the typo here. 15:10.890 --> 15:16.820 We also need of course to pass the new CSX class up not outline to the baton. 15:16.830 --> 15:18.740 So this is going to be baton class. 15:19.050 --> 15:22.530 No outline so let's go back to the browser one last time. 15:22.530 --> 15:24.900 Going full screen refresh. 15:25.110 --> 15:26.600 So yeah I can add. 15:26.610 --> 15:29.220 Pay the bills. 15:29.280 --> 15:35.590 Work on the side project study for the exam. 15:35.690 --> 15:40.460 And if I now try to delete one of them you'll see that more there is gone. 15:40.550 --> 15:42.600 And the app is now perfect. 15:42.740 --> 15:43.020 Okay. 15:43.050 --> 15:45.470 So that was it for this lesson and for the future. 15:45.480 --> 15:46.380 Yes section. 15:46.530 --> 15:47.940 Get ready for the next one. 15:48.010 --> 15:52.950 Well we're going to create their full fledged single page application we view any genuine framework 15:53.310 --> 15:56.770 introducing and discussing a lot of new and powerful tools. 15:56.850 --> 15:58.940 That is a real pleasure to work with. 15:58.980 --> 16:00.420 See you in the next lesson.