Instructor: So with the last lecture
we completed the first step of our app.
Congratulations for that.
You have come a really long way.
So let's now take a look at the structure of the app
that we have built so far
so that we can then outline what to do next.
All right so this is how I like to represent
the structure and architecture of an app
like the one that we're building right now.
So we have our three modules.
So the budget controller,
the app controller,
and the UI controller,
and in each one of them
we can see the functions or methods
that we have written so far
and then with these green arrows
we see the connections between them
so that we can see functions calling other functions.
So this really helps us
to get a nice overview of what we're doing here, right.
So it really makes it easier
to plan and organize our app and code.
For example we can see
that effect that a simple click on our input button has,
which is this green dot here
that represents an event,
and there will be more of them in the future.
So as we know from our code
clicking this button will call the control at item function
which will then call all of the other functions and methods
that we see here connected with the green arrows.
So again this gives us a
very nice high level overview of our app
and I really advise you
that you always draw up something like this
for your own apps
or whatever you're going to do with JavaScript.
Let's now continue with the planning
and see what we can do in step two of building our app.
So far we can input data into our app,
which is then stored in a data structure
and displayed on a user interface.
What's missing here
is the functionality of deleting an item from this list.
So let's take care of that now.
So we already have our delete buttons in the UI,
but they are not doing any work yet, right.
So once more
we start by adding an event handler to them.
We then go ahead and delete this entire row
as soon as the user clicks the button,
both from our data structure and from the UI,
and after that of course
we also need to recalculate the budget
and update it here on the user interface.
All right so we have a nice little to do list here again
so let's get back to work right now.