on this project we're going to create a
budget application now this project is
going to be special because we're going
to be using classes instead of
constructor functions so now let's look
at what we're going to be creating in
this application well as you notice
we're going to have a budget so whatever
money we have
then whatever expenses we are going to
accumulate and what would be the ending
balance so let's say we have two forms
one is going to be 40 expenses and the
one our other one is going to be for the
budget now if i try to insert let's say
5000 and i'm going to press submit or
calculate i'm going to have a budget and
the balance because obviously there's no
expenses yet now if i want to change the
budget and if i would say you know what
i'm actually getting two grant more so
instead i'm just going to say that this
is going to be 7 000 you notice how
automatically my budget is updated and
so is my balance however if i'm trying
to insert the value that's going to be
empty or negative notice i'm going to
have feedback and it's going to be
complaining that it's not possible and
if you notice the 0 hasn't been passed
to my budget or to my balance so once we
set the budget next is going to be the
expense so what would be expense so
let's say start with a fixer car so i'm
just going to say that fix the car is
going to be 200 bucks so now i have the
budget of 7 grand still 7 000
expense is going to be 200 and the
balance is going to be shown off 6800
because we're going to take into account
of expenses of 200.
now there's a couple of things that we
can do first if we would want we can get
rid of expense we can say you know what
i don't need to fix the car it was a
mistake the mechanic called and
everything is fine so i remove and again
my balance is going to be to a 7000
because i removed my 200 expense but
let's say that we have another rent
so another expense and this would be a 2
000. so again we're adding the expense
and you know it just to show you that
that everything is working fine we can
have two of them and next month came
along and we need to fix the car for a
thousand bucks so again we are
calculating whatever our expenses are so
in our case this is gonna be three
thousand so now our balance is only
going to be four thousand because we are
spending three thousand dollars and you
know what our landlord showed up and he
said you know what buddy the rent is not
going to be 2 000 is actually going to
be 3 000. so now i can click edit and i
can say painfully that instead of 3 000
i'm paying three thousand i'm sorry
instead of two thousand i'm paying three
thousand so i'm adding the expense and
now my balance is even less because now
my rent went up and i was able to edit
it and now these are all my expenses and
also another bad news came in my boss
came in and he said you know what you're
dreaming that you're getting seven grand
instead of you're let's say getting a 2
500 he says i don't know what you were
smoking but there's no way you're making
that much money so i'm going to press
calculate and now my balance is actually
negative so now i need to reach for
credit cards or something because my
budget is a low of 2500 or my expenses
are way more now obviously we can add as
many expenses as we want and we can set
our budget however high or low we would
want and depending on that either our
balance is going to be negative which is
in this case or if our boss says you
know what actually we had a huge
investor and now our salary went up
again so now we have a balance of six
thousand so like i said before we're
going to be using classes instead of
constructor functions so that's going to
be really really interesting and like i
said yeah enough of me talking and let's
start working on the project
the project setup files are located on
my github so you can either go directly
and just find by the project's name or
you can follow the link that i have left
in the description of the video
now hopefully you downloaded a setup
folder and you are as eager as i am
working on this project so whenever we
have a download folder or setup folder
available we can just open it up and we
can notice what we have regarding the
html and css
now there's not going to be any
functionality so it doesn't matter what
i'm pressing you notice that i'm just
going to be submitting the empty form
and i can just add expense nothing is
happening and also there's no feedback
so i can click everything but nothing is
happening so now this is our job to add
javascript to this html and css so we're
going to have a working app so in this
case we can just maybe close it because
we really don't need it and let's open
up this folder in our favorite text
editor now as always probably for the
45th time you're already hearing me
saying that my favorite editor is going
to be visual studio code however you can
use whatever editor you would want
now i'm already skipping a little bit
ahead
notice we have the index.html
where we're going to have the forms and
we're really going to have our lists and
we all have two types of form this time
now in the main css this is where all
classes are and notice that we were just
selecting styles so i'm just using a
main styles and just applying them as a
classes and then we'll also have the
app.js
now
because this is a bigger project you
notice that there's quite a few things
that i already right away added to the
app.js now let me go over this just to
make some clarifications well first
things first prior to this project we
have been setting up a constructor
function that was responsible for all
our instances so in this case if we
would want to have a constructor
function for the ui we created a
constructor function and then we added
all the properties to a prototype and if
we had some other constructor function
and if we would want to add some type of
properties in there we added in a
parameter and then we set it equal to
this so this idd was equal to id and
here we passed the id now like i said
this project is going to be different
because we were going to make use of the
es6 and we have the class syntax now the
class syntax is
with a class keyword first so we need to
have a class keyword then we would need
to have the name
of the class
and then this would be curly braces so
now again we would use a
the variable we're going to set it equal
to a new
ui
a new ui class instance and then we
would be getting the instance of this
class
whenever we have class we also have an
option of having a constructor method
that's going to run every time we're
going to instantiate the class
and we we have two options we can either
pass the parameters again let's say that
we would say id so every time we would
be passing this id and we would say this
id so for every instance obviously this
id would be different we'll just set it
equal to id or in our case we're going
to be using this constructor and we're
going to preset the properties so i
already know that i'm going to have
property of this budget feedback and i'm
just going to use a document query
selector and i'm just going to set a
budget feedback or expense feedback and
this is what i skipped so i skipped all
these selections because by now we for
sure should have a good handle of
selecting something so i don't think
that we need to write this for let's say
20 minutes because this should make all
sense to us now obviously as i'm working
we will going to be switching back to
html maybe just to show you where
exactly i'm getting this but we already
should have a good handle of this where
we have the form so if i have a form i
obviously have the id of budget form so
this is the form that i'm talking about
then the budget input the budget amount
so the input would be the input field
the amount is what i'm getting at
so the budget amount would be here and
so forth and so on now after that since
we have the construction constructor
that we run every time we instantiate
the class
this is going to be added to our
instance and basically what we're going
to do is we're going to set up a methods
on this class and we're going to use
this instance and we're going to run the
methods now most of our work we're going
to be doing in the class in fact we're
going to be just adding these methods to
our event listener function and then
what's going to be calling this function
once the dom loads so let's do that
first because later on only thing we're
going to be doing is creating methods
and what is going to be making use of
the fact that we have access to these
variables i'm sorry to these properties
so this budget feedback we we can right
away grab it so we will going to be
working with the function and we're just
going to grab this
let's say variable or not variable the
property we're going to grab this
property and we're going to make use of
the property so like i said there's
going to be two more things outside of
this class now the first one is going to
be the function of event listeners
event listeners
listeners and we would want to run this
function as the dom content loads so
let's make that other thing that i was
talking about and we would just say
document
a add event listener now we're going to
be listening for a dom
content
loaded event and once this event fires
we're going to have a callback function
and within this callback function we
would run we would want to run this
event
listeners function so this is going to
be very straightforward and once within
this
event listeners we would need to create
a new instance of this ui class and then
like i said was going to be listening
for a three events in this event
listener and everything else we're going
to be doing within the class so first
let's select three things
in the event listeners function because
we will still going to make use of that
because we're going to be listening for
those domains and let's make a new
instance of this ui class so first
things first
let's get a budget form
we're going to set this
into our variable of budget
form and again we're going to do this by
id
get document get element by id and we're
going to be
listening or looking for a budget
form id now the budget form id is the
one with a green porter i also would
want the expense form so this would be
in this form and here obviously we're
just going to change this around a
little bit this is not going to be
budget form this is going to be
expense form
and the last one is going to be the
expense list we're going to have a title
and the expense value so again let me
copy and paste this this is going to be
expense list
so here let me delete the form
and also let me delete the list
so here this would be a list so we're
going to have budget form expense form
and expense list so these are going to
be my three variables that are going to
hold the elements that i'm getting back
from the dab then let's create a new
instance of the
ui class so instance of ui
class and
if we would want to create an instance
we do the same thing as we're doing with
a constructor function so const ui and
this would be new ui and like i said
before if we would be passing something
in a constructor since we're running
this constructor every time we
instantiate the class we would pass it
over here like i did an example with an
id so obviously for each and every
instance the idea would be that these
properties would be different well since
i only have one instance and i just want
these properties that would hold these
dom values on i can just place them in a
constructor without passing any
parameters so now sure enough i'm going
to have access to all these properties
and more importantly not just properties
to the methods that we're going to be
creating here in the event listeners and
just be careful though whenever you're
working with a function constructor
you can place it anywhere i mean i can
go 100 lines down and i can still have a
constructor function and because it is a
function
this is going to be available to me
anywhere in the document
but since this is going to be as a
variable then be careful because you
need to make sure that you declare it
first and then you're making use of it
so if i'm going to use this if i'm going
to move this class ui somewhere down
over here you're not going to have
access to it so just be careful and then
once we have the new instance of ui like
i said we would want to add
three event listeners one is going to be
for the budget form the other one is
going to be expense form and then we're
going to have expense list so let's do a
budget
form submit
submit and then maybe let's just create
this budget from submit
so budget form submit and add event
listener so we're going to be listening
for a submit event and then this is
going to be our callback function now
for now we're just going to be passing
the event and we're just going to ignore
everything because we don't really care
we haven't created these methods yet so
only thing i want to do is just set up
the bones and so basically the structure
of my event listeners function and then
once we're going to have the methods
available then we can start passing them
because otherwise this is not going to
make sense so this would be the expense
form and the third one is going to be
expense
expense list however the expense list
we're not listening for a submit
we're actually looking for a click
so click because we're going to be
attaching these events to expenses that
we're adding so whether this is going to
be a deleting or editing or something
like this so this would be not a budget
form the second one this would be a
expense form and i'm assuming that you
already have watched quite a few
projects already with me or done some
quite a few projects with me so since
this is already last project on a
object so i'm assuming you have watched
quite a few of them so i'm going to be
skipping a few things ahead so this is
not like three hours long so then let's
do expense list so we're adding the
click event instead of submit so we'll
have to submit events and then we'll
have one click of it now why i'm passing
for the first to the event object
because we know with the form this is
going to be automatically submitting and
we would want to prevent that so we
would want to prevent default so event
prevent default and we would run a we
would want to run this
method from the
event object and this way this is not
going to be resubmitting every time
because we are preventing the default so
we are done with our structure so now
i'm glad to tell you that we can start
working in our ui class of creating the
methods now the first method that we're
going to be creating is when we are
submitting the form
i would want to make sure that the value
is not 0
or
less than 0 and if everything is fine
i would want to show the balance
and i would also want to show the budget
amount so let's go ahead and let's start
working now within the classes and es6
we can skip right now any kind of
function
let's say declarations so we can do only
a comment if you would want to so submit
budget
method and we can just write the name of
the method that we're going to be
creating so submit
budget
form so this is going to be the method
that we're going to be creating and
that's all we have to do so now we have
the method and just to show you that
everything is working so we have a
submit budget form now let's do log and
hello from es6 since now we're using es6
and let's go to budget form
submit event and let's run this we have
the instance of ui and sure enough we
have what we have submit budget form the
only thing we need to do is just run
this method so as you can see a lot of
things are the same however this just
makes a way more cleaner code since we
don't have to deal with the prototypes
we just have class constructor that has
all the properties and now we can start
creating the methods
so once we save it let's open up the
google developer tools
because this is where we're going to be
spending the last
sorry next 10 hours i'm kidding uh well
hopefully i'm kidding and here let's do
calculate since only thing we have to do
is submit the form and we have hello
from es6 and as you notice
nothing is refreshing because we
prevented the default behavior
so so far so good now this is great now
we have the submit budget form method
then we can start working now first
thing i would want to get the value now
where i'm getting the value is from the
budget input
because this input of the form has the
id of budget input and i already have
assigned it to this again property now
again with the first one we're going to
go back and we're going to look at
index.html later on i'm just going to
assume that if you have issues then just
go back to index.html and you can find
it now you can press command f if you
want to find it faster so let's say i'm
looking for a budget input i can just
write budget
budget and the name would be input here
so now let's see that we have no
values because probably i misspelled it
or something so we have budget this
would be the name and this would be the
input so budget input and yeah sure
enough because this was the class that i
was selecting i'm sorry yeah my property
was with a capital letter because i
cannot use dashes and then if i'm
looking for the id then i need to use
the dashes so therefore if you're
confused about something that you're
getting at you can use the command f or
make sure that you're not typing like
this with my input that i was looking
for instead of type with dashes and
everything is going to be fine so what
you're getting back from is this form
group that is within the budget form and
then this would be the input so
basically this is the money that we're
adding so let's go back to app.js and
first i would want to get the value so
const value is going to be equal to this
now since i have again access to the
property i'm using this and now the name
of this would be budget input the one
that i was trying to find with my
command f with a fine and here let's
just get a value
so what would be the value now since we
have done this quite a few times i'm not
going to cancel log it we can just do
right away value and we can just check
whether value is going to be empty or
so here this would be our operator the
value is going to be less than zero so
let's do less than zero now if this is
the case
then again we have access to a feedback
now feedback is going to be showing i
believe somewhere here i mean again i
don't want to go back to index.html
because we can spend the whole day like
this so basically we have the feedback
that i have selected and i have access
to this feedback so let's do this budget
feedback now let's again
use the class list now with the class
list we have an option of add or remove
or
i believe it was contained
now in this case we just want to add
show item because like with other
projects all we did is we created this
budget feedback i gave it in the main
css of budget feedback and expense
feedback display of none and now i would
want to add this show item so this would
be the show of block so this is all
we're doing we're just dynamically
adding this so let's do add show of item
and also let's add some text inside here
so let's say this
budget feedback again the same
property then let's add as an inner html
and since we're using the inner html we
can pass the html tags over here and for
this we'll using the template literals
so backticks and now we can just write
that we would want to pass the paragraph
now the paragraph would contain value
cannot be
empty
or negative
so pretty standard what we have been
writing before so negative then we can
close the paragraph and again we're able
to do this because we're using the inner
html we wouldn't be able to do this with
the text content because then it's gonna
well you would be able to do it but this
is gonna show the actual tags and this
is not what you would wanna do
so so far so good let's test it out what
we have
now as i'm submitting the form i'm
purposely going to put 0 and now my
feedback is going to be showing so now
we selected the feedback and we added
the class of show item now obviously
again like the previous project we would
want to hide it after three seconds four
seconds ten seconds
i mean i would want to hide it no you
could
leave it it's not a big deal but i just
always like to work with a bunch of
functions in the project just so you get
to know them and i would want to hide it
i mean long story short let's just hide
this now how we're going to hide this
we're going to use again the set timeout
and we're going to have a set timeout
now this is going to be a function now
this function is going to require a
callback function and this would be the
callback function that we're passing in
and then the second parameter is going
to be
how long this in how long this function
is going to run so again let's do 4 000
seconds and now let's do a this now we
know that we have the access to a budget
feedback class list
so budget
feedback and let's do class list and
remove so here we added this class to a
feedback and now we would want to remove
the class so the moment we're going to
remove the class what's going to happen
well we're going to go back to the
default what was the default default was
a display of none so let's remove class
and the class is going to be the same of
show of item and i want to let you know
right away if everything is correctly
this shouldn't work but let's just test
it out so once we're on it now once
again i want to test with the zero value
so now i run it and interesting
i have the value cannot be empty and
after four seconds i have some kind of
error
well i mean everything is correct
correct
i don't know why i'm saying two times
correct but everything is correct so we
have this budget feedback class list i
mean we had an access literally one line
up now what is an issue why we cannot
access this
and again the same thing like we had
with a constructor function
we can make a great use of this
but we always need to be aware of it
what is actually pointing to
so if you have been watching the
previous tutorials or projects you know
that there is an issue where
at this moment this
is pointing to a global window object
and it's looking for the method on this
i'm sorry for the property on this
global window object and it's trying to
add the class list and it's saying that
it's it cannot read this property
because there's no such thing there's no
property on this
global object because obviously the
property is on this ui so again we need
to make sure that as we're running this
function
within this method
now within this method still this is
pointing back to the class everything is
correct however since we're running this
function within this method now this is
not pointing anymore back to a class
it's pointing to a global object so
again we need to do something with a
self or you can name this really
whatever you would want so basically
what you would do you would say const
and again i'm going to use self but you
can write whatever variable you want and
i'm going to set this equal to this so
now i'm grabbing the value of this
that is going to be pointing back to the
class and just to show you let's do a
log
and let's do this so in this case let me
show you what is this pointing to now
let's also have a look at what happens
within this function where this is
pointing to just so you don't think that
i'm
i don't know making this step up and
let's also console log this so if
everything is correct we should have
this that's pointing back to our class
then we can have this to the global
object and then self is again going to
be pointing back to a class so let's
check it out again empty value and sure
enough we have a few things we have the
ui
so this would be the ui
now the second one is going to be what
now the second one is going to be div
over here and then we have the third one
that's basically not going to make sense
so we have a div expense feedback alert
and then we're gonna have a on call type
error cannot read property off now
so obviously this wasn't working as we
expected even though we had the ui of
feedback now this
wasn't pointing to a correct
way now obviously i cannot run these
actually because they i have run this
after i called already this budget
feedback so this is not going to make
sense let me fix this this is why we
cannot see anything my apologies because
you notice the error runs and so we're
not able to see this so let's do this
one more time
let's calculate and let's see it's more
interesting what we have in console log
so we're going to have a budget feedback
so i'm going to have ui this would be
our first this
then we're going to have the budget
input and sure enough after four seconds
now we have the window notice this is
the window object that i was talking
about so this is why we're trying to
access it and we cannot
and next again we have the ui so like i
said we have the ui
then we have the window object and then
we have the ui and again i'm spending
probably way more time than i should but
i find it really really important
whenever you're working
with a javascript to understand what is
this because
this is really helpful but you need to
know where it is pointing to so anyway
long story short we need to change this
so instead of this we're just going to
use self so now we're reassigning this
so now in this case everything is going
to be working fine and in four seconds
we're going to remove it so again let's
go up let's say that this is going to be
empty value now this is going to console
log this and
over here you can see that several i
mean this is not what i wanted
i mean keep on making mistakes but
that's great
calculate again trying to add negative
value and in four seconds this is going
to be gone because everything is working
fine
now after we have removed the feedback
now there's two more things that i would
want to do first i want to grab the
value that i'm placing in the form and
add it to the budget
and also i would want to remove and make
this value empty because obviously i
would want to later on maybe pass some
other value so i don't want the value to
stay there
and the third one is going to be show
balance and this is where we're going to
be doing a little bit of calculation so
we're going to call another method that
we're going to create in ui class and
like i said most of the work is going to
be in ui class so i know that maybe this
is going to be frustrating for somebody
but we i mean most of the work here is
just going to be passing one or the
other method now here we have one method
but then we're going to keep on adding
other methods from the same class within
this submit budget form method because
again i find it important to understand
how we are working with a keyword of
this so here let's do a first budget
amount now what is budget amount i'm
selecting budget about get element by d
this would be the amount over here
so budget amount
then let's have it as a text content and
we're just going to pass the value so if
there is some kind of value i want to
pass it here that's as simple as it gets
if the value is going to be
zero or less than zero
then i would want to show them or tell
the person tell the user that they need
to fix something if the value is there
the rate which is going to pass the
value
after that i also like i said i would
want to remove whatever i have the in
the input so for this we have a budget
input
property now this is also going to have
a value since we're selecting the dom
element and this down element has a
property of value since this is a form
and this is important so the forms have
the value and we're gonna set it equal
to zero and the last one we're gonna
call this and show balance and again for
now i'm not going to write anything in
this function i'm just going to
call the function and we're going to do
what we did before what's going to write
console.log now in this case i have the
this and this is not inside some kind of
other function that we're running here
so everything is fine this keyword now
is going to be again pointing back to a
class so now in this case i can use this
show balance this natural balance
because i know that i'm going to be
creating another method now the method
is going to be well surprise surprise
show balance
so now i have access to it so now again
like i said we don't need to use any
kind of
function keywords created we can just
write show balance and for now we're
going to do very simple again console
log and we're going to do hey
uh i am really
or i don't know why i'm doing like this
we can just do a
backtext so template literals
hey i'm
getting a hold
of this keyword
well i mean this keyboard yeah
this keyword
and once i save it hopefully i don't
make like 10 000 mistakes with this
keyboard otherwise this is gonna sound
very cocky and you know what let me just
uh comment out this
now keep it for your reference and
always if you have any questions about
this one of the best ways is just to
console log everything out
so let's add some value since we have
tested already quite a few times with
the zeros calculate 4 000 and now sure
enough i'm running the method so so far
so good now we need to create the method
of show balance right correct because
the first thing that we did was just
call the method so now we need to write
something within this method
okay first things first now we have the
method of show balance
however like i said this
method is going to be interesting
because from this method we're going to
call another method so we're going to
have const and here we're going to write
expense now here basically all i'm
trying to do is calculate the expenses
and i'm going to create a method that's
going to do this for me so we're going
to have total
total and expense as you notice i'm not
selecting the properties that i had on
my constructor
i'm not doing that i'm actually
selecting a method again with this the
same as here however again we haven't
created the method so here let's do a
this total expense or
to be more correct we can just do
comment of total
expense
and let's write it this is going to be
total expense
this is going to be our method now again
we can do a console log just to check
that everything is working but i think
that after a few times of doing that
this is becoming a redundant so we know
that we're going to have access to it
and the way we're going to have access
to it that we're going to
add this to the value so basically this
method
is going to calculate everything that we
have in a list now obviously in our list
we have nothing right now so right now
we're going to be
working a little bit in the dark so
we're going to be writing a function
that in maybe right now is not going to
make sense but the moment we're going to
be starting adding the values this is
going to make way more sense than we
think right now and here the basic idea
behind this method is i would want to
run through i would want to calculate
whatever items i have over here and once
i calculate items i would just want to
return them so let's do very simple
let's do let
and we'll just going to call this total
again we're going to be using this later
on and let's just set it i don't know to
400 something like this so we always
have this value let's do very simple
return of total now again like i said
later on once we're going to have the
actual values we will going to make this
functionality where this is gonna make
way more sense but for now i don't see
the point of going through if there is
no values really i mean just kind of it
doesn't really make sense so let's add
this and now we know that this expense
should have 400 because we have total
expense and we're just returning the
total so good enough we have a hard
coded value of 400. now next we're going
to be working with a total so we're
going to have const
total
now this is going to be the variable now
here i would want to parse int so i'm
going to use this method that i have
with parse interior and the reason for
that is because i would want to grab the
value that's going to be in the budget
so whatever
value has been passed in the budget and
again remember important thing i'm only
running this after i have added already
in the budget now this is another
stumbling point
now we need to only call this callback
whenever already there's some value
otherwise this is not going to make
sense you cannot get some value back
from the dom element if there's nothing
there if you're just running this
function right away as the document
content loads so we need a parse integer
now here again we're going to use the
property that we have and we'll have a
budget amount text content so only thing
i'm doing here here i'm passing the
value
so here i'm saying this budget amount
text content value is equal to this
value and then i'm getting it back so
basically with the show balance i'm
getting it back now we could have set it
up that i'm passing it as a parameter or
let's say here argument i mean we could
have done a lot of things so i just
chose to do it this way and again don't
judge me for this everybody can do
however they want so here let's do an
expense now what is an expense now like
i said later on like spence is going to
make sense because we're going to be
calculating all the values for now all
we're doing is just
returning to 400 since we're getting
back this from the method and now
let's do a this balance amount text
content is going to be the total because
as you notice i have the expression
where i have the budget amount is going
to be subtracted from the expense and
now i just want to show it so whatever
value i have in the balance so this
balance amount again this is a property
that holds the dom element
with a budget amount and let's do a text
content that's going to be equal to
total so very simple we just grab the
expense that we're going to calculate
later but for now we have 400 then we
grab the budget amount but since we're
taking a text
uh input then we i'm sorry not text
input text content i want to
run it through the parse integer so i
want to get the integer and then i would
want to get whatever total i have and
now since i have the total i use this
balance amount text content and again
this would be a balance amount so
balance amount over here and i would
just want to check
if this value is going to be less than
zero then we're going to show it with a
class of red so we're going to add a red
color and then else if it's bigger than
zero then we're going to be green and
then last one is going to be if it's
equal to 0 then we're going to have a 0.
so let's write if
and total so now we're looking for a
total if total is less than zero so what
we should do so we have a dis balance
and class list again we first can find a
class list and then we're going to find
what we have in the css so we're going
to remove show of green because i don't
want to continuously keep on adding the
classes so basic idea is since this is
going to be changing we can have more
expenses or we can have bigger budget or
smaller budget
i don't want to keep on adding and
adding and adding classes so every time
i'm adding the class i want to make sure
that i'm removing the other classes that
i'm going to be adding hopefully this
makes sense and here we have this that
balance and again this is going to be
balance class list
and again instead of removing now we
would want to add red so whenever it is
below zero we would want to add a color
of red but we would want to remove the
show of green of show black if it was
there before because obviously we made
it this can always change now two things
the balance is again the easiest thing
is going to be finding
balance
balance now where we have the balance
the balance is going to be here
so we have the expenses this would be 0
and then we have a heading 6 of balance
then the balance icon and the actual
class of balance is going to be where we
have the dollar sign so this is what's
going to be turning red or green or
something like this so this is what we
have
now after that in the main css classes
are very straightforward show red is
going to be red green is going to be
green show black i mean we can guess is
it going to be blue no it's going to be
black so let's go back to
js and let's figure out so we have if
the total is less than zero so now we
have very easy task so we can just grab
this and we can just copy in first time
here we're going to say else if
and if the total is bigger than zero
then we would want to do the opposite we
would want to remove
uh show red
and show black and instead we would want
to add
show green and after that we have one
more where this is gonna be equal to
zero and i don't know why why but i
looks like i copied two times hopefully
um i don't know i'm not just uh having
some kind of
uh i don't wanna say heart attack but uh
some kind of brain freeze or something
let's know um show
red
show green so with the zero we would
want to add the black one
show black
and we would want to remove what we
would want to remove show red and show
green again
whenever class we're adding the other
twos we would want to remove so this
would be the show balance now like i
said later on we're going to still work
on a total
expense so this would be the case right
now so let's save it and let's figure
out what we have so for now there's not
going to be an expenses so this should
be all green
calculate and sure enough we have
everything green over here now if i'm
gonna have the adding on expenses
this if everything is working correctly
this should be black and i mean we can
just check it out with a black one this
should be black with zero this is black
so i think that everything is going to
be working fine now as we have the show
of balance now everything is working
fine with a submitting of the form now
the next one is going to be really
interesting because then we're going to
be working with an expenses and this is
going to be
well let's just put it this way there's
going to be a little bit more code than
this
so let's start
in our event listeners since this was a
submit budget form and the next one
would be the expense form now for the
expense form again the uh method name is
not going to be very original
submit and i'm not going to say budget
i'm going to say expense
because this is going to be the most
original probably method name ever now
here i have the submit expense form
and now we can save it and obviously we
need to go back and now it's saying that
there is a well now it's actually saying
that there's just no snow slow it's not
snow slow network and
it doesn't really matter to us we're
working locally
but
now we had a what we had a submit budget
form
now we need a
submit of expense form because this is
going to be way more interesting so
after a show of balance and we can just
maybe leave this uh total expense all
the way in the bottom we can do a submit
submit uh
submit
expense form so this is going to be our
comment now within this method of submit
expense form
we're going to be selecting few
properties and we're going to be
creating the variables so first is going
to be const
expensed value now expense value is
going to be very similar to what we had
in a budget now the difference is this
is not going to be budget input it's
going to be expense input we have
expense input and an amount input so
whatever the actual expense is and
whatever the amount for that expenses so
this not expense input and again i
suggest if you are have confusion where
we're getting this you can use the
command find and you can just find the
class that we're searching for
const amount value
so
amount value and this is going to be
equal to a input amount so amount input
and again we're going to use value and
again since these are forms we can use
this property value to get back the
value
now we really don't care what we're
going to be console logging if we really
want we can cancel log the amount value
but this should be straightforward what
we're getting back and again this is
going to be very similar to what we had
before so we're going to be checking for
three things this time so x if expense
value
isn't going to be zero so if you're
passing something that uh well passing
with no name
then we're going to have or so in this
case we're going to say amount value
so amount value and in this case we're
going to say this is equal to zero and
last one is going to be if the amount is
less than zero because these both of
them are type number so we can also put
zero but less than zero but this
wouldn't make sense if we're trying to
actually set up our budget so again or
operator and amount value is going to be
equal to less than zero so if any of
them are true since we're using the or
operator again we would need to work
with this feedback we would need to add
the feedback so this in this case this
is not going to be budget feedback this
is going to be expense feedback and
again this is set up in the properties
of our constructor
so let's go down and expense feedback
let's do the same thing we had before
class list now again we're going to
first show the item and then we're going
to add some text in there so let's do
show item and again the setup was
exactly the same like we had with a
budget feedback where the initial was a
display of none and now we're just going
to show the item
so let's save this and still is going to
be complaining about some slow network
and then we'll have expense feedback
class list now after that i would want
to work with a inner html so this
expense feedback inner html and then
let's look at a template literal since
we can use the inner inner html and
we're doing the same thing that we had
before so we have paragraph values
cannot be
empty
or
negative
so this is going to be passing and then
since we're using temple literals we can
just
write whatever tags we would want over
here and again since we're doing the
same thing as before we need to reassign
so we'll have const self and this is
going to be equal to this because we're
going to be calling the same thing we're
all going to have a set timeout function
now this like i keep repeating this
function is going to
expect a callback function now this
callback function is going to be run
after specific amount of time which is a
second parameter again in our case 4 000
milliseconds which is 4 seconds
and since we already have covered the
self
and expense feedback
again we're still accessing the class or
the instance of the class and we have a
class list and now in this case we would
want to remove so remove what we would
want to remove well it's simple enough
we would want to remove the show item so
as we save this everything should be
working fine and we're going to have or
we can just test it out you know what
let's do a first fix a car and add
expense and sure enough we have a values
cannot be empty or negative even though
if only one of them is so you can
already guess if both of them are going
to be negative then we're going to have
the same thing now after that let's do
you know what let's do just the second
one
so let's say that or let's try you know
what let's try
uh adding a negative value
so here fix a car and still we have the
values cannot be empty or negative so
basically this is all we're doing we're
just checking for the values now this
was a first
code block for the if so this was if now
we need to else because obviously
there's going to be cases where
hopefully most times there's going to be
cases where all the values are there
so let's do another variable this is
going to be ml
now we are getting back the amount value
now the amount value we're getting back
is again a string so we need to use
again parse integer so we need to
convert it otherwise this is not going
to make sense so we're going to have
amount value and we're using the parse
integer so now this variable is going to
hold whatever amount we're passing in
however this is going to be turned into
number
not like we had before as a string so
here let's say this and this would be an
expense value now the expense input
sorry not expense value and we're just
set it setting again equal to a empty
values so if everything is fine we added
an expense i would just want to delete
the fields so the leads the field should
be empty and again i have the access to
the properties because of a constructor
and then this would be expense
input then i have the amount input
so i have expense input and amount input
and they all going to be cleared once
everything works fine then i also would
want to set up first a
object and we're going to create an
object and then we're going to pass the
object right here notice we have a item
list which is the array that we have so
i'm going to create a
object that's going to contain the value
of expense and the amount expense and
also i'm going to grab the id and i'm
gonna
add a 1 to id
and before that i'm just going to add it
to a item list
so we're going to do a incrementation of
id so first let's create an object of
let
expense so this is going to be our
expense and this is going to be an
object now id is going to be equal to
what well this
dot item id now where we're getting back
the id well if we'll scroll up this is
going to be our item id so this is where
we're getting the id now second is going
to be what this is going to be title
title is going to be equal to expense
value so expense value is going to be
here we have access to it so expense
and here we have the expense value now
for the amount i would want to grab the
amount not the amount value because
remember now this is a number so amount
and this is going to be equal to amount
and just a quick note uh technically
with es6 we could have just skipped this
if the both names are the same we don't
need to add the property name and the
value if they both match we can just
skip it and just say amount since we
have the access for this amount just
that's just a side note and here we'll
do a this item id like i said we would
want to increment and this is going to
make sure that each and every item we're
adding is going to have a unique id
and then we're going to do the same
thing as we did in the previous project
where we will grab the array the item
list array and we'll just going to add
using the push method and what we're
going to be adding well the expense that
we're creating so whatever we have here
this variable and this object will be
more precise than we're just going to be
adding now after that i would want to do
two things
i would want to call two methods again
which we haven't created yet now the
first one is going to be show i'm sorry
add expense so basically the display the
expense and then i would want to show
the balance so here we're going to call
this first the add expense and again we
have the access to it because we are
within the method still we are not
within some other function so this is
going to point to whatever
method we have and this expense is going
to expect a parameter of an object so
since we have the object this would be
our expense object we're going to be
passing it so we're passing in this as
an argument but we're going to be
expecting that in our parameter so let's
just make sure that we are outside the
previous method and let's maybe leave a
comment just so i don't forget we also
have a
show balance i just don't want to create
it right now
so we'll have a show balance so once we
create this we have a ad expense so
let's make a comment
add
expense
and here again this is going to be a
method that expects to have a
object
so add expense and we can name this
whatever we want again this is a
parameter so let's just go with the same
one as we had with an expense but we can
name this really independently so again
we're going to create a div and again
why we're creating the div now if i'm
going to go back to index.html i believe
this time i commented out
notice we have the title value
first we have the expense list
this is this is where we have all our
expenses then this would be the title
and for the title value and
expense title and then we'll have a
single expense now each and every time
obviously we're going to be adding this
single expense so only thing we can do
is we can just grab this div this is
going to be my single expense because
we're going to be doing a lot of things
that we did before we're going to create
a div we're going to add this class and
then we're going to place everything
with within this div so actually you
know what i'm selecting the wrong div
because i only need this guy
because i'm going to be creating this
parent div i only need whatever is
inside
so again let me select this for a third
time you're probably sick of watching do
this but cons div
then we're going to do a document and
we're going to create an element so
let's do create element we're going to
be creating a div now we know that this
div is going to have class of expense
because i just show you so we'll have
class list of ad expense and just as a
side note you can really do however you
would want
but i find it much more easier first to
do it in html now obviously you cannot
see it because i commented out but in
general you make it in html then you
apply the classes and then at the end
you can just comment it out and add it
with a template literal and i think this
is the fastest and best way to do this
now again this is just my opinion i
don't i'm not saying that i'm right or
wrong i'm just saying what i prefer to
do you really can do however you would
want and let's just copy and paste this
now i have the expense id and also here
i have the expense id now where i'm
getting the expense id i'm getting back
from the object so it's just as simple
as that now i could have left these
empty but for now we already have done
so many projects a lot of things are
making already sense where we're getting
this from i'm getting back the object
and i just want to have access to this
id and i'm going to add this to a
attribute of data id to a edit icon and
to a delete icon so basically every time
i'm going to be clicking icons i want to
know the id because this is going to
help me to filter out
the list that we're creating and to make
sure that we're getting the proper
element and we're deleting the proper
element most importantly deleting i
guess well editing probably is also
important
so we have the expense id and expense id
we also need a title and we need an
amount
so let's find out where we have the
amount so first this would be a amount
so again we are using a template string
so we can access
the variable with a
dollar sign expense
title here and then now you know what
this was the amount
i don't know who i am maybe having some
kind of brain freeze right now uh title
it's right here
good one good going uh again we use a
dollar i don't know why we had the ah
now you know what this was this is the
wrong dollar cent so this is fine uh
oh you know what no it wasn't sorry so i
apologize and just keep on seeing too
many dollar cents right now uh expense
title this is what we need so expense
uh this was going to be our object and
then we'll have a title so once we saved
it now we obviously need to use the
again some kind of method to append this
to something
now
since we're working within our class the
method has access to what has access to
this property now this property holds
the value the value is what the element
that we're getting back from the id
let's scroll down let's
look where is our method then this would
be this expense and we would name this
expense list and we're going to do the
method of
guess what up in child and what we're
happening
well i mean we can spend half an hour
thinking about it but i would probably
say the div since we created the div but
i mean we can happen whatever we would
want really but let's just do the div i
think it's going to make a little bit
more sense
so
we have the budget complete we have the
expense complete
i guess we're done
um nah probably not we still need to fix
something so we have fixed car
400 at expense boom
fixed car 400 great
why nothing is showing here
uh well we haven't done anything right
so this is why nothing is showing so
fixed car 400 awesome
now we still have an issue here why this
is not empty
we i thought we were working on this we
had the expense input was supposed to be
a empty now also we had the amount input
that was supposed to be empty so let's
figure out what is an issue why we don't
have the proper way of doing that and
the reason that is because we need to
select the value so for now we're just
targeting the whole input see over here
we have the input now this is why it's
important whenever we're working with a
forms we need to use actually value this
is kind of crucial otherwise you can see
what's happening we cannot get the value
if we'd be getting the value or we
cannot set the value now in this case
we're setting the value so let's try
again let's try the fixing the car let
me let's do this time five
thousand and sure enough everything's
fine we cleared it and i want to say
boom again
because we added an expense and i can
keep on adding as many expenses as we
would want now like i said
the second one
that we are interested
is showing the balance
so again this would be the method that
we're interested so we have a show of
balance
now if you remember we already had this
one-time show of balance
and remember the reason why we did not
want to
run the expenses
is or add anything to the expenses that
we were creating is because there was no
values
so i think now it's going to make a
little bit more sense if first we're
going to add this show balance the
method that we already worked before and
again this method is what we used
clearly when we were working with a
budget so nothing has changed with this
method so we can have the same method
so this
this show balance and now once we run
this method
then something should happen and that
something is going to be first of all
budget
so
5
000
calculate then we're going to have a 4
600 and again the reason for this 4 600
because we run this show balance and we
have hard coded the values so every time
i'm going to be adding this fix a car
nothing is should be changing yeah you
notice nothing is changing even though
i'm running
so we need to go and fix this um
total form otherwise this is not going
to make sense we i mean total expense
i'm sorry we have total expense so we
need to fix this so first let's set a
amount equal to zero because this is
going to be our starting point
then i would want to check
if the item list length so the item list
is the element that holds all the items
if there's more than one item
i want to start calculating this if
there is no item i don't want to
calculate anything so here i'm going to
say like this i'm going to say if this
and i have access to the item list
because it is in my properties then i'm
going to calculate if the length of the
item list is bigger than 0 then i'm
going to want to do something other than
that i wouldn't want to do anything
other than that i'm just going to say
very simple i'm going to say this and
now i'm going to use the expense amount
is going to be text content so again we
have the budget amount we have the
balance amount so this would be the
expense amount i was going to set it
equal to total so all i'm saying is if
there's no list items in expense list
this should be zero there's no reason
for it to be anything other than zero
because we haven't added any expenses
and last thing i also would want to
return the total which would be zero so
this is all correct however we need to
add the logic where we have the item
list length is bigger than zero and what
we're going to do over here
well well it's going to be very simple
we're going to have a total
then we're going to set it equal to
this that item list
so we're going to have a item list now
what we're selecting this item list for
we're going to be selecting so we can
run the method of reduce
now why we're running the method off
reduce because we want to calculate the
values over here so this is all we're
doing we just would want to get the
values that we have over here so first
things first maybe in this case you know
what let's run the console.log just so
we can have a better understanding of
what's happening so let's first let's do
a console log of what we have in the uh
item list and let's add some items just
so we can see what's happening so i'm
going to have item item
list over here and let's just
console.log item list
and let's do a again fix a car
300
adding once and item list is actually
not defined we have 019 well that oh
yeah obviously because i need to use
this
i'm selecting the this again so let's do
fix a car
300 add expense so notice
empty array
okay so why i'm getting the item list
well the reason for the item list is
very simple the item list is our array
so every time
we're adding something in the item list
what do we have sorry i said empty it's
not empty we have one value over here
i'm sorry i misspoke
but the idea is every time we're going
to be running this and we're going to be
adding
this to a item list remember the
itemlist.push
now we have access to it this is the
whole purpose of the creating of array
so what i would want to do right now if
the length of this array
is bigger than zero i know that there's
some items so only thing i'm doing is
i'm just gonna use the reduce function
and i'm just going to count all the
values for the amount property
because i know that i'm setting the all
my amounts to all the objects that i
have so let's do another one just again
i don't know buy milk
something redundant buy milk
and what would be the expense i don't
know let's say milk went up to price and
it's 200 bucks
uh two items two items perfect again
amount 300 and 200. so again the idea is
i'm not going to be looking this in a
dom i have access this in the array so
only thing i'm doing is just getting my
reduce method that i can use and i can
just count all these values together
it's all it is so let's do again total
now we're going to set this total equal
to what we're going to set this total
equal to reduce now unlike the
i believe 4h and the filter in the map
this is not going to it can return more
than just over not more than just not
just an array it convert
using the reduce method we can return
whatever we want so in our case we just
want to return zero so the number i'm
sorry not the zero and we're going to
start with 0.
just a number we want to return the
number so let's do a reduce now reduce
function is again going to take a cobalt
function and this callback function is
going to take two parameters now a lot
of times they're called accumulator and
current now you can really name them
however you would want but again i'm
just going to use the accumulator and
current now we can also set it maybe
this one to total
then this would be a function block so
the callback function block and then for
reduce we need the initial value so this
is what i was saying with zero so all
i'm saying is i can write here whatever
i want i can write array i can write
object however what i'm looking for is
number because i'm setting this total to
number so each and every time i'm going
to be adding these values i would want
to get the sum of it and display
whatever i'm getting back and also
calculate my balance
now how do i do this so first of all
whenever we're using the uh the reduce
we need to return the accumulator so
what we what needs to be understood that
every time we're running this reduce
we were going to loop to this array and
think of this as a total that it's going
to be returned
each and every iteration so we have
access to this accumulator and we're
going to probably maybe do let's do some
console logs just so it gives us a
little bit better idea
but here let's do first a console log
and let's do a console log off
accumulator so let's call this uh i
don't know a
i mean this is not totally correct but
let's say just total
total
and let's do template strings this is
going to be a little bit easier
so
total
is now we're going to access the
accumulator so first let's look at
accumulator and then let's say
and the current value
value is
and now let's do again access the value
of current so let's do a first of
console log
then let's do right away our um whatever
logic we would want and here all i'm
saying is that with each of iteration i
would want to grab the
value that i'm accumulating and i just
want the add the current amount that i
have now why i'm getting the current
amount because i'm looping through this
array item list now the item wrist has
the atoms of objects correct
so current reflects the object
now where i have the value in the object
i have the in amount property so this is
why i'm going to say current so current
object that
i am
iterating through that i'm using
in my iteration and i would just want to
add the amount
and like i said last thing remember
always return the amount otherwise i'm
sorry the accumulator otherwise this is
not going to make sense
so let's save this and now we're going
to run this every time we're going to be
adding values so i'm sorry i'm going to
be sticking with fixing the car because
it's saved here and i just saves me
typing
add expense now i have the total is zero
and the current value is an object now
notice because i made a mistake i'm not
looking for a current i know that this
is going to be an object i need a amount
because this is what i need so this is
what i'm saying is as we're
going through this we're getting these
values as an object because we have
stored them in the item list as an
object so again let's do fixing the car
for the
45th 000 time
so here we have total is zero so we
start with zero and the current value is
400 now what do you think here the
amount right now is because we added
this 400
this should be 400 right so in the next
iteration we're going to start the total
should be 400 and the current value is
going to be something so let's try this
out let's do another fixed car because
we really don't give a damn about it
whatever name it is and let's just add
100
ad expense
notice the total is 400 the current
value is 100 so this is going to be
added again to a 400 the next iteration
we're going to have 500 so this is how
we're getting back the values and i mean
the reduced function is
extremely extremely powerful i mean the
real i mean this is one of those things
if you want to learn something learn or
juice because this is going to save you
tons of time it really one of the in my
opinion one of the most
definitely out of the all the array
methods the most powerful method uh
let's save this now we have the uh what
it was total expense done so now it kind
of made a little bit more sense as we
were adding the values and now we need
to figure out what we're doing
so we have everything set up so we have
submit expense form and we have the
balance and if i'm correct everything is
working correctly right so we're gonna
have a five grand
we're gonna calculate
and we're gonna fix a car again
i'm gonna have eight two thousand so
everything's fine so we have two
thousand and the balance is three
thousand so if i'm going to change this
to a grand
now this should be a expenses it's still
gonna stay
two thousand and now the balance is
going to be negative thousand because
obviously our budget is uh one thousand
now we have the submit expense form done
now the last one is going to be working
with these icons
with a edit icon and with a delete icon
so let me go up and let me show you what
i have
so now i would want to select them
somehow
because i still want to have a
functionality i would want to remove it
or
meaning delete it or edit it and edit it
is going to happen like this again we're
going to remove it from the dom we're
going to remove from the list
and then we're going to place the item
here so if you want to edit then we can
be able to edit if we just want to
remove we're just removing we're just
deleting from the dom and from the item
list
now this we're going to set up within
expense list
because as we're added again we could
have technically done this as a callback
function
as we're adding the items here
but in our case we're just going to do a
event propagation where we can just use
the event target now this would be
another option again it really doesn't
matter how you do it i just for the sake
of the tutorial i just thought if you do
another callback that might be confusing
so let's just skip this and let's do it
with event listener so only thing we're
doing is since we don't have an access
to it
normally since we run the function
because the items we're adding
dynamically
i would want to do the
click handler i wouldn't want to attach
the listener for a parent the parent is
going to be expense list so anywhere i'm
going to be clicking on expense list i
would want to get back what i'm clicking
on and the moment i found out what i'm
clicking on
then i would want to do some kind of
action so this is going to be happening
in the event listeners
now again we can do the simple event
target
and i don't know why i'm not actually
doing the event
why i'm so brave i'm trying to find the
event target without actually getting
the event so we need the event object
first and then let's do again a console
log of target and this is going to
because this
usually clears everything up because the
event and event target sometimes can be
a little bit misleading so we always can
do a console log
now obviously this is not going to make
sense now i'm pressing on the titles so
this is not what i want what i would
want is get back the element that i'm
clicking on once we have added the items
and this is like i said we can do
dynamically because there's no way for
us to select those classes just i mean
there is with a callback but not let's
say not to write a function here where
you're going to be clicking where you're
going to be looking for the edit or
delete item class
500
at expense so now this is more
interesting now we have the expense the
expense is 500
and now we have these two icons
this is what i'm looking for so i'm
looking for this icon of edit and in
fact i'm actually looking for the
uh the element
the not not the actual icon i'm not
looking for the icon in fact i would
want to get a
link that is apparent of this so we're
actually going to be using again the
parent element property and the second
one is going to be i the trash icon so
this is all good
we just need to use the parent element
because the parenthood has the class so
this is the case where we're going to be
going back to a index html and notice
what i have now we could have looked
this in objects since we're obviously
adding them but anyway we have the edit
this is the icon that we're getting back
what i need is this edit icon i want to
make sure that
the parent element of the element that
i'm clicking on has this class because
then i know that i'm selecting this icon
or the lead icon so these are the two
icons that i have so i should be
listening to it and the way we do this
we use the parent element now again we
have done this before so we're not going
to be going crazy with the console logs
anymore we can just use a parent element
console.log not console.log the property
now if you have confusion about this
again i suggest just console.log out the
event target parent element and
everything is going to be way more clear
than if i spend another half an hour
explaining this so we're going to have a
target and like i said we are looking
for a parent element and what is the
parent element this is going to be a
link now the link has what link has
class now the way access to class we can
use the classlist property now what
classlist we we can use we can use
contains so what contains
contains offers us to check
whether this element the has the class
of whatever we're writing here or not
so again this is really really uh useful
uh property of classlist and obviously
of contains
and now we're looking for the edit icon
this is obviously what we want
as one option and the second one is
going to be delete icon now here i can
do the if so this is going to be my
first if and then we can just do the
elsif so let me just grab copy and paste
this and here let's say else and if now
i'm not going to be looking for edit
icon this is where i'm going to be
looking for a delete icon now what do
you think we need over here
we need some function because obviously
for now we're just always saying is well
if it is or if it's not i mean we can
write something here that that might be
fun
but we need a function now what is the
function well we can get the function
from the method of our class instance
right so we can do ui
then let's write what method we're going
to be creating edit
and we're going to write expense
expense now this method again i created
obviously before and this
expense is going to take one parameter
and that parameter is going to be the
parent element so basically a link so
here we're going to do the same thing so
if we're looking for the
element that has the class i also would
want to select the same element so i'm
just going to use
event target and parent element that's
all i'm doing so i'm basically getting
back to link now this would be the
editing expense and the same is going to
be for the delete expense now here we're
just going to
use a different name so delete expense
and again the same thing it accepts the
parameter of event target parent element
so some kind of object
or
my apology is some kind of element now
obviously since we're working with dom
we're really going to be getting back an
object
but now we will gonna go up again to a
class so total expense was our last one
then
i don't know either underneath or above
it doesn't really matter whatever it
makes sense to you it's sometimes it's
hard to for me to decide for the
tutorial where to place everything uh
but um yeah we just need to create these
methods and we're done now these methods
might be a little bit lengthy but we're
going to be fine
edit expense
the name of the method
expense and expensive first of all i
need to
learn how to
properly write everything and here this
is the element so this is the element
that i'm
getting back now obviously this is a
parameter and here this is an argument
there i'm expecting the element here i'm
passing the element now the second one
is going to be delete expense where i'm
going to do the same thing
i'm just going to write delete expense
and again we're going to pass the
element
so some kind of dom element that we're
getting back
and first you know what we're just going
to write first edit
edit expense this might be a little bit
longer and then we'll have a delete
expense so we're almost there i mean we
all we have pretty much two methods that
we need to work on
this is going to be a little bit maybe
probably complicated than before but
delete expense
now
comments done
the method's done
great so let's work on it
remember again we had the id correct
remember we passed this id so we're
going to make use of this id how do we
access this
attribute well we need to use data set
so we will use a data set
and we're going to access this by using
dataset.id
now this is important because again this
is going to help us tremendously because
otherwise then we really need to do a
lot of a dom traversing so we need to
have access to this id now how do i have
access to this id first i'm going to
create a variable i'm going to set this
is going to be equal to id
then what i'm going to be getting back
is going to be string again so again
we're going to use parse and so parse
integer
now
what i would need i would need element
now element has what it has the data id
attribute
now i could use a data set like i said
property now for the data set only thing
that matters is what name it is since
this is data id i'm using data dot id
because i couldn't write like this this
is not going to make sense i need to
write it as a object property so i'm
getting back the id
then i'm going to work with a parent
and i'm going to remove this parent from
the list again why am i getting the
parent because look at the expense list
i have the
expense list and i need to
go up to dom i'll traverse the home all
the way up to the expense list and make
sure that it deletes whatever
parent element
of my icon now it's not going to be
direct parent element because notice
again the icons are sitting within a div
then this div is sitting within
something so we need to kind of hop up
to the dom get to the proper parent
element and just delete it and
trust me whenever you're working this is
a lot of pretty much console logging
you're just okay parent element okay
what is the okay next parental okay now
i got to the point where i need okay
let's just get this sucker out of this
expense list so let's go up
and again we'll just going to be doing
very simple we're going to say let
parent and now we just need to hop a few
steps up so the first one is going to be
element so i'm getting back the element
then i'm getting back the parent element
and again if this is confusing just
console log it it's going to make way
more sense so again another parent
element another hop on above and then
another one so basically we hopped uh
three times so we'll have a element
whatever element we got back but
remember already within this element we
did the parent element so technically we
have four hops we're doing first here
with the parent element property and
then we're doing three more so we have
element one more two more add three more
so here we're selecting the parent
parent which is actually this whole item
and then after that we would want this
expense list so the list that's holding
all the items we just want to remove it
now we know that we can remove it by
first well first probably it's going to
make sense if we're going to adding a
from dom the comment
this expense list this is
the grandfather of all these elements
you can call it like this now obviously
stitch thing doesn't exist but
let's just call it uh grandfather
and we just want to remove the parent so
whatever parent we're getting back we
just want to remove from the expense
list
then the second one is way more
interesting this is again using the
filter
where we would want to
remove
from the array that we had
remember we even though we remove it
from dom
we still have this in the array because
remember we placed the item whenever we
had the expenses so remember we had the
item list now i also would want to
filter this out and i would want to
filter out for two reasons
first i would want to filter out so i
get the value so i can place
whatever i have within the item let's
say the value and the amount so i can
edit it and the second one is i would
want to return the array without that
item so first things first
let's get the value my friends so we
have the remove from the list
and we have completed already removed
from the dom
remove from the list
uh remove
from the list
and i'm sorry sometimes it's hard to
talk and type so
sometimes i'm gonna talk i'm just going
to stop and type so let
expenses
expense
this item list again this is the array
that holds all our values now we can use
the filter to find and what we would
want to find we would want to find the
item so we'll have a function
the item that has the id
the has the id of this id
so whatever item in our array that has
this id we would want to return it and
we would return it to this specific
variable so here we're going to have
item but remember the filter is going to
return the new array so again we're
going to have to select a
zero
parent so not zero parents sorry i've
been talking about parents too much uh
zero item so zero index item not not
just this is not going to return the
variable this is going to return a new
array so callback function
now within the callback function we're
iterating through the whole array and
i'm going to say like this if the item
that i'm iterating through so that that
exact item in my array if this item id
matches whatever id
i'm getting back from my element data
set
then i'm solid and i just wanna
return this if not then i just move on
and in the perfect world if everything
is correct
since the all the ids are unique this
should return only value there should be
no other value so first we're going to
get expense now the second one is we
would want to work with a rest of the
list correct
because we have a
one that is the item and the second
thing we need we need to remove this
item from the list at least temporary
because what is the point of editing if
it was going to be adding a new value so
how do we do this we're going to say
remove from the website list is dom
sorry
list
remove from the list and again we're
doing filtering
now what is the filtering this time
now
i'm going to set a variable
so i'm going to say let and this is
going to stand for temporary list so
temp list i can name this whatever you
would want so this
item list again selecting the same array
again using the same filter now this
time i don't want to return this one
item
i don't care about i already got the
item i'm fine
i would need the rest of the list and
then i'm going to use this temp list and
i'm going to assign this to a my list
that i have right now so filter again
callback function within the callback
constraint the parameter the parameter
refers to every item in the list and
here we're going to say return
and i only want to return what i want to
return
the item
item that does not have the same id so
rest of the items that does not have the
id so that id can stay in the original
list but in the temporary list we'll
just gonna remove all the items that
don't have that id and now it's very
simple we're just gonna say you know
what
since we have this i'm just gonna say
this item list so whatever original list
we have we'll just reassign it i'm just
gonna say temp list
bam here we go so now this item does not
exist anymore at least in a list right
now
now once we're gonna again press add
expense once we have edited everything
is gonna be fine however right now
we don't want it and also what we want
is we want to show the balance because
remember that every time we're changing
something in a list we would want to run
the show the balance otherwise we're
going to be updating something and this
is not going to show up over here so
we're going to run the out of balance
i'm sorry show the balance that we had
before
and now we have the item list and this
would be the temp list now the last
thing i just want to add the values here
because remember as i'm editing i would
want them to show up over here so again
we can do this in the bottom we can do
this after we have selected the item it
doesn't really matter
here we're going to say show value and
remember what i was saying with the
filter the filter is going to return the
array so if i want to access this item
because i know this is an object now
obviously because i placed it as an
object so i'm getting back as an object
but it is an object as a zero index in
the array so now i'm just going to say
this expense input now this is i'm
getting back from the selections with
the properties
value
and we're going to do expense since this
is what i'm getting back 0 so
0 index value and here we're going to
say title and again we can do a bunch of
console logs here alone but just to skip
a little bit ahead uh let's just uh
do this without console logs and if you
have any issues again you can just
console log in and you'll see what i'm
talking about so we'll have a expense
and now instead of title i would want to
select the amount
so this is all that's happening so we
have the expense
which is an array which is going to hold
one object and again you can come to log
it and you'll see what i'm saying is
true and then we're going to be getting
back the
titles over here so let's least test it
out so everything is working so let's do
a budget of five grand
let's calculate fix the car
for a 33 000 time adding expense sure
enough we have 300 so this is going to
be 4 700.
now if i'm gonna click edit what's gonna
happen
notice
first
i'm getting the values back so this is
the last thing that we did expense zero
dot title great so we have these values
now
also we removed from the expenses and
now the balance is back to the 5000. so
again this was the reason for the show
of balance that we were running and if
i'm going to change this expense to
let's say 800
boom now i have the fix the car is going
to be 800 and everything is calculated
directly now the last thing is the
delete expense so the lead expense
however the good news is a lot of this
is exactly the same
so we can do a first of all removing the
parent so this is going to be exactly
the same we just want to remove from the
dom
so let's just copy and paste it
then uh i don't know why i've removed
from the down ties
i guess i messed it up again with my
comments which is pretty typical
remove from the list this is not from
list we're removing from the list
and again we're going to do the same
thing
we're just grabbing the items whatever
we have remove from the list temp list
id again temp list and reassigning and
showing the balance
that's it so the a
the deletion is actually very simple we
can just
fix it in like what 30 seconds without
me well imagine without me talking
that's what i'm talking 30 seconds with
me yapping this could be another three
hours um yeah so i think everything
works correctly and i want to feel brave
and i want to actually open up in the
browser now i'm probably going to regret
this because there's going to be a
mistake and you're going to be laughing
like your
heads off but anyway yeah let's test it
out
so we have the budget
budget is great i mean it's great if
you're probably positive not negative
but
anyway five thousand
great awesome five grand you know what
let's do ten
ten is even better let's add zero well
no way buddy
okay expenses let's start with the zero
let's say there's no expenses well
that's not possible
okay fixing the car but you know what
mechanic actually paid me
ah no way didn't pay you let's do maybe
negative budget because i forgot the
negative budget again
yep no can do
awesome great everything is working fine
uh we probably you know what we should i
you know now we're going to leave we
could technically add input where it's
zero right now if we add the incorrect
value but i don't think it makes sense
so we have fixed car let's just leave it
so let's let the user actually fix it if
it's his mistake then you should fix it
now i have fix a car
removed from budget blah blah blah
budget nine nine nine seven nine expense
value is 21. let's add another one let's
do the same of
the buying of the milk buy them buying
or buy the milk here
by the milk um we're going to want 300
3 000
let's make some fun milk
expenses budget balance bam so 6979
and yeah so we have expense value what
we can do we can delete if we want to
delete goes back to 21 if we would want
to edit again it removes temporarily and
now let's do fixing the car of i don't
know 21 000 and sure enough
poor sucker is in the
death of 11 000 not that death depth
uh yeah so this would be it for the
project guys i hope you enjoyed it and i
hope you i hope to see you in the next
project