-: So, let's finally start our big project.
In this lecture, we'll take a first look
at the application that we're gonna build
throughout the section
and set up our project.
So this is our budget app,
and I called it "Budgety" here
for lack of a better name.
But it serves, right?
So this app allows us to add incomes
and expenses for a certain month,
which is in this case September 2016.
And the app then calculates how much money we have made,
and how much we spent,
and then it gives us a nice budget here in this field.
So just to test it, let's add some incomes here.
Let's say we have made a website project
and that we made 2500 Euros or dollars,
and then we hit this button
and then our income appears here in this list.
So the value,
and then here,
these total income updates and a budget, as well.
So let's put another income
and suppose we sold our car.
We didn't need it anymore,
so for 1500 Euros or dollars.
So this gets added to the list,
and then our income gets added together.
So 2500 plus 1500 makes 4000 dollars (or Euros).
And then of course, we can add expenses.
So we need to change this to minus here
and then let's say we have to pay rent.
So 900 dollars,
and here we go.
So now it's in the expense list,
and this budget here got updated.
So 4000 minus 900 is 3100, right?
So this is the budget.
Now let's say we went grocery shopping...
So groceries, and we spent 97.42.
Okay, so commas also work in here, right?
And now let's say we went on a holiday
and spent $1700.
And if we make some kind of mistake,
or just want to remove an item here from the list,
we just need to click on these icons
that appear as we hover over them, right?
So, imagine that we didn't pay this amount after all.
So we can just hit here, and then it disappears
and everything else gets nicely updated here.
So really cool, right?
And there is more.
So here we see in these percentages here
the percentage that each of these expenses
is of the total income.
So for example, this holiday that we went on
accounts for a total of 43%
of our total income of $4000.
And then this 900 Euros here or dollars for the rent
is 23% of our income, right?
And in total, we see that our expenses
account for 65% of the money that we made in this month.
So, in September.
So these are basically the futures of the app
that we're gonna code.
And I also gave this app a nice design
so that the whole project gets more exciting for you.
So you're gonna really end up with
a cool and great-looking app
that you can show to your friends or someone else,
and not just some boring, ugly, you know, toy application.
So I really put a lot of effort
in this app to make it the perfect
first real project for you.
So, you see?
We have a lot of code to write to make all of this work.
So let's get to work and start
by setting up the project.
So, the starter project that you can download
is already on the desktop, as always.
So again, the name Budgety,
and then just open the project folder
and here is our project.
So as in our pig game project,
we have an already coded HTML file
which we will see in greater detail later,
as we start coding the app.
And then of course, a CSS file
where all the styles,
where all the design of the application sits.
But that doesn't matter to us,
because what we want is of course this app.js file,
which is the file
where all of our Javascript code will go, right?
So now we know how our final app looks like,
how it works,
and we have our project all set up.
So we're ready to move on to the next lecture.
See you there!