Original subtitles

Right now we're able to buy and sell stocks, at least it looks like it works

but now, let's also add our funds, let's display how much funds we have and let's see if they get updated

correctly. Once we implemented the funds,

we also want to make sure that we're not able to buy more than we can afford and so on,

so this is what I'll work on next.

Let's start by displaying funds,

where do we display funds?

Well for one, on the home page which generally is not really in the state I want it to have,

so let's quickly work on this, let's wrap it in a div, add a h1 tag where we say trade or view

your portfolio to kind of describe what you're able to do then h6,

you may save and load your data and also h6,

click on end day which doesn't work yet but we'll soon add it to begin a new

day, like that.

All nice but now we also want to display the funds,

so here we have a paragraph which says whoops, which says your funds

and then we want to output our funds like this,

now we clearly don't have access to them yet

so let me add a new script part here where I now export a default object and in there, I will simply

set up a computed property or this computed property and I'll name it funds,

I could use map getters again but since I'm only interested in one getter, I'll access my store like this,

my getters there and then the funds to get my funds.

Now we should be able to see this if we visit the home page,

we see funds 10000,

now let's see if this updates, if I buy ten times BMW it's less

and if I now sell it 10 times, we're back to 10000,

so this indeed seems to work.

Now with that in place, let's also display it in the header and let's make sure that I check my funds

when buying stocks as well as my quantity when selling them.

So let's start by adding funds to the header

and here I simply want to display them, let's say here

after my two links before the dropdown.

So here I'll add this strong element where I say funds equals funds with string interpolation and I'll add some

classes here to position this rightly, this shall be nav bar text, nav bar right.

With that in place, it will not work of course because what I need to do is I need to add my script down

there, export my object and now load the funds there too.

Now I could use map getters for this but since I'm interested in the funds only, I can also say computed

as we learned it before, funds and then simply here return this store getters funds, like this.

Now let's see if this worked,

looks good,

we get the funds on the very right, on the very right

just because of the styles we added to this strong element, that is why it's positioned over there and

we can of course see that these funds also update as soon as we try to do some things.

Now I sold more than I had as you saw,

so that's something we'll work on in the next video

and again, challenge for you, try solving this issue, try to make sure that we're not able to buy more

than we can afford like so or sell more than we have, like so.

So that is what we should work on next, try to fix it on your own first though.