Hello everyone and welcome back.
We have an obligation to build.
So let's get started.
Yeah we are in words to your code and as you can see I've created a new file that is specifically for
this project and instead of this I've created two files of course in each the file and a javascript
file as always.
However considering that in this lesson we are coding together at one of the possible solutions for
a competency assessment project.
The only boilerplate code that I've already added is this age AML code right here JavaScript file as
you can see is empty so that we can have the opportunity to talk about all the different concepts that
we've discussed during the section conceding that as you can see I have already included these are in
the file a link to see the N provide Nass Abuja yes we can create a root of your instance right away
so var output equals new view and it view we passed the options object and the first property that we
want to define is a lump and eat well we pass at CSX selector that corresponds to our H the email element
where we want to mount our instance on.
So in this case they can create as always and leave them we've I.D. Apple and considering that we are
creating a to do application the next thing that we want to do is to define the data object and inside
of the detail object we can define tasks as an empty array.
We also know that we need to keep track of how many tasks we have left in our array and to do so we
can use a computed property which are really powerful because they cache the result of data processing
until the values involved change.
So yeah we can define task count and simply write to her.
These tasks not linked we cannot define two methods.
So methods the two methods will allow us to add and remove tasks from the array and we are going to
call them using a meter from within a component that you are going to create so other new Task Group
which accepts as a parameter new task hope and we can just push it inside of the array.
So these not tasks are not
new task like so we can then define remove Tasker which accepts a task as a parameter and to remove
these specific tasks from the array.
We can do like so and thought tasks that supplies which of course allows us to remove elements from
an array.
And so yeah we can pass these both tasks that index of Tosca 1.
We now need to decide which strategy we want to adopt to keep developing our application and considering
that we are developing a relatively small application and view yes is really powerful.
One of the best choices we can make is to just develop a view component a to do component and inside
of that component we can then define all the rest of the code for the application.
So right here on top.
Going to define view dot component and as always first of all we need to give a name for the component.
We can just call it to do.
And of course considering that we're going to pass data to the component itself we need to define props
and getting props so we have tasks to of course type array acquired through.
And we also need to define in other proper we can just call it remaining which is of type No.
And of course will tell us how many tasks we have left.
We can now finally go back to the theme of the file and Europe.
We can use our component so to do day component.
You can help us the props.
So tasks are and remaining and to remain of course we're going to assign our computer the property task
count like so.
So now going back to the J Yes file in there to do component we can define template
we can use vector excel.
So first of all we need to remember that all the HDMI code is to be inside one root adamant.
Therefore we can just define a deep glass container and maybe you can also add a bit of margin.
Now that you have Europe like so.
So yeah we can define a paragraph maybe even strong.
Like so many other remaining tasks that we can just pass remaining thanks so so strong and paragraph.
We now have enough code to open our application in a browser.
So I'm just going to pass the path and this you see we have very many tasks zero.
Let's also inspect the application using beauty of tools.
So view and of course we have a.
It says we've computed and data and instead of it are to do component let's go back to these words to
your code now.
So I'm going for script and considering that we're going to have an input field which will allow us
to submit new tasks.
The next step is to define data so that within data we can define the properties that we're going to
need to create and add a new task.
So data which is a function.
And so yeah we can return it and we need at least two fields to ask.
We can just initialize it with no an error.
And we also need to come up with new task and error.
We can now think about getting user input and to get user input.
We could use a form.
But considering that we only need one single field we can just use any input of type text instead.
So yeah we can define input type text so considering that we are using Bootstrap it can the class from
control we've placed order.
What you need to do the model directive are very important directive model.
New Tasker and then we can listen on that keep up even enter on enter.
So we can basically wait for the user to press center to actually submit the new task.
Now of course I'm passing a method name for a matter that we haven't defined yet.
So let's now define a method suddenly task and.
Yeah.
First of all we want to be sure that something has in fact been added to the input field.
If these not new ASCO then we're going to do something else we're going to add an error message.
So these dot error equals a string something like deep input field can't be empty but if a new task
is in fact being added We don't want to use a meter to emit a signal that will tell that application
to call the add new task method.
So yeah we can write this dot dollar sign a meter.
We need a name simply add Tasker and we also need to pass the new task.
So this dot you know task and going back to the HDMI file we can at least input the add task event into
entities we want to pass as you said you ask.
Let's go back to the GM file because of course we have a lot of work to do Steele.
So first of all these new tasks equals Nola.
And we also want to reset the airfield.
So if this error is not there equals notice.
So we now can add new tasks to their tasks Saturday but of course we need to show that in the age demo
code of our component so that I can add a line break.
And yet I can define in another diva class we can add a single task.
And of course we can use the V for directive so V for task index tasks the binding task on Tosca and
keep on index.
Yeah.
Inside we can add that task.
And of course we need to close the deal.
Let's now go back to the browser.
So I'm going to screen like so mean to refresh the page and we have our input field of course.
So yeah I can.
For example just add finish the application and this is See as soon as I understand it and your task
has been added specifically of course it's been added to these tasks array in the detail object of our
Edwards this.
But of course because of user activity we also have it here as a prop.
We can of course make our application better by implementing one of bootstrap classes.
And as a matter of fact here I have a linkup you see to the documentation where we have our alert dismissal.
And so I'm just going to copy this code.
Let's close this page and going back to business to your code.
Now we can just pass and decode Yeah incited Eve with class.
Single Desk.
Of course we don't need all this code at all.
As a matter of fact we can just delete this line and instead move this one here.
And here we can also delete all of these code like so and instead here we can't add the success classes.
So I let I let success.
And we can also delete this code like so and yeah he did just as well.
So I'm not going to indent the code.
So yeah we have type bottom class close.
And of course we need to call the method the same way we've called it here.
But this time to delete to remove a task so on click I'm just going to quote remove Tasker and we're
going to pass it these specific tasks.
Keep in mind that of course I imagine the indentation like so.
But if you find it more readable you can just keep it but if you need one line.
So let's go back to the browser once again let's refresh our page.
Yes we can at first Tasker and yeah we have our beautiful left with class success.
So going back to these words to your code once again we now need to define the remove task method of
course.
So you're going to add a comma remove task up and yet we can just emit a signal like so we're going
to pass Tosca and we can just call it remove task.
So going back to the HMO file you can listen for every move Tosca sign and it's you remove desk mattered
in our view instance like so we can't now go back to Chrome once again so full screen refresh and had
the Tosca in if now pressed the axle as you see.
The task is removed so everything is working as expected.
We now need to add the app and edit the messages.
So let's go back to visit to your code.
Once again we can now define a paragraph V.
If error in that case we can't pass the error message.
Now we also want to define the ADF message as so the remaining is equal to zero.
We want a like so in that case we can show a message.
So to add a new task to write something then press enter.
Let's check.
However if he looks like refresher we have the message and trying to submit an empty task.
We get an error.
The input field can't be empty.
So let's add a couple of entries.
While 2 free first of all we see that the counter is increased and by the way there is also is more
typo to fix it.
But there is also one other thing that I want to show you.
If you try to delete it Tasker you'll see that we have this border around the axle which is in fact
part of bootstrap but because of the way view is managing to dumb it basically gets passed to the other
alert and therefore we can just create a new CSX class to fix these mold problem.
Notice also how the X is black and not grey so let's go back to these W did your code and going back
to the HDL file right away.
Yeah we can define the style tag and instead of this type of tag we can define a class and we can just
call it no outline.
And here we can define that we want no outline so outline 0.
Important we also want the color of the X to stay Grey.
Therefore yet I I'm just going to pass this code they have previously defined in here.
Therefore I'm going to define color as the same grey used by bootstrap and opacity to 1.
It's just some simple CSX but it's going to make it look much better.
And by the way we also need to fix the typo here.
We also need of course to pass the new CSX class up not outline to the baton.
So this is going to be baton class.
No outline so let's go back to the browser one last time.
Going full screen refresh.
So yeah I can add.
Pay the bills.
Work on the side project study for the exam.
And if I now try to delete one of them you'll see that more there is gone.
And the app is now perfect.
Okay.
So that was it for this lesson and for the future.
Yes section.
Get ready for the next one.
Well we're going to create their full fledged single page application we view any genuine framework
introducing and discussing a lot of new and powerful tools.
That is a real pleasure to work with.
See you in the next lesson.