If you have been wondering how to change the currency value to your own country’s currency, this tutorial shows you how.
Head over to the HTML folder and find the index.html file.
Find the following snippet of code:
<div id="money-container">
<div id="money-cash">
<transition name="slide-fade">
<p v-if="showCash"><span id="sign">$ </span><span id="money">{{(cash)}}</span></p>
</transition>
</div>
<div id="money-bank">
<transition name="slide-fade">
<p v-if="showBank"><span id="sign">$ </span><span id="bank">{{(bank)}}</span></p>
</transition>
</div>
<div id="money-change" v-if="showUpdate">
<p v-if="plus" id="money"><span id="plus">+ </span><span id="money">{{(amount)}}</span></p>
<p v-else-if="minus" id="minus"><span id="minus">- </span><span id="money">{{(amount)}}</span></p>
</div>
</div>
Here you see where it shows $  the $ is the currency displayed before the value and the is a non-breaking space is a space that will not break into a new line. That’s why it shows up in one line.
To change the currency is simple just replace the $ with the currency of your choice. I’m from South Africa, our currency is the Rand(ZAR), which is represented by the R. It would look like this:
<p v-if="showBank"><span id="sign">R </span><span id="bank">{{(bank)}}</span></p>
But now there is no symbol on adding or removing money
To show this do the following:
<p v-if="plus" id="money"><span id="plus">+ R </span><span id="money">{{(amount)}}</span></p>
<p v-else-if="minus" id="minus"><span id="minus">- R </span><span id="money">{{(amount)}}</span></p>
See I added the new symbol and space by adding on R
And now it looks like:
My Currency has the symbol at the end of the value
It’s simple. Just move the span tag <span id="sign">$ </span> before the closing </p > tag. Example of Swedish Krona(KR):
<p v-if="showCash"><span id="money">{{(cash)}}</span><span id="sign"> kr</span></p>
If you want to find out how I made the currency have commas and decimal points check, you can find it in the following topic: