Simple & Sober "Wallet Tracker" in Modern JavaScript
Tags: javascript, beginners, webdev, tutorial
Published: 2020-01-12 15:53:51

> *Hi, my name is Gitanshu Choudhary and being a JavaScript enthusiast I am penning down my second Tech Story on "DEV".*

In this story, we will be creating a Modern JavaScript application called "Wallet Tracker" with its interface implemented on Cmder.

**Info-Pinch :** Cmder pronounced "Commander" is a pre-configured software package that provides you with an awesome terminal emulator, and best shell you'll ever have on Windows.

**Our Application** will be based on Simple yet Key JavaScript elements such as :
* Functions / Methods
* Arrays
* Objects
* Built-In Array Functions
* Loops

**"Wallet Tracker"** will consist of Three Major methods for implementing its functionality :
1. First method will be used to add the flow of Income in the user's Wallet.
2. Second method will be used to add the flow of Expense out of the user's Wallet.
3. Third method will be used to calculate the Balance left in the user's Wallet, And display the Lists of all Income & Expense transactions along with their Descriptions/Sources.

#"One Man Army",
In our application the whole logical code is stored in One Single Object called "myWallet".
From initializing the Basic Key-Value Pairs to creating Logical Methods, everything is embedded in a single object.

#3 Key-Value Pairs,
We will be creating 3 Key-Value pairs to initialize our application.
1. First key is named as "name" which will contain the name of the Wallet holder.
2. Second Key is "incomes" which act as an Array to store Objects with properties as "amount" & "source".
3. Third Key is "expenses" which act as an Array to store Objects with properties as "amount" & "source".

![3 Key-Value Pairs](https://thepracticaldev.s3.amazonaws.com/i/ypsh7xf44s6by57t0t11.png)
<figcaption> 3 Key-Value Pairs </figcaption>

#3 Dynamic Methods,
We will be creating 3 Methods which will Dynamically process the 3 Key-Value pairs which we defined above.

##First Method, 
We will be creating is called addIncome(amount, source), where "amount" will store the cash in-flow while the "source" stores the description regarding this deposit.

![addIncome() method](https://thepracticaldev.s3.amazonaws.com/i/iem1kbdqyt11w1pjqiq3.png)
<figcaption> addIncome() method </figcaption>

##Second Method, 
We will be creating is called addExpense(amount, source), where "amount" will store the cash out-flow while the "source" stores the description regarding this withdrawal.

![addExpense() method](https://thepracticaldev.s3.amazonaws.com/i/bs48xjsrv6ewxnxre8ba.png)
<figcaption> addExpense() method </figcaption>

##Third Method, 
We will be creating is called walletReceipt(), it takes no arguments. In this method we will be calculating following things :

* **Total Expenses :** Using a forEach() loop, we will be calculating the total Expenses spent by the user & will also be printing a list of all the Withdrawals along with their descriptions.
* **Total Incomes :** Using a forEach() loop, we will be calculating the total Incomes earned by the user & will also be printing a list of all the Deposits along with their descriptions.
* **Balance :** Using the Return Value of above loops, we will be calculating the Balance value left in the Wallet. We will be printing a Final Statement showcasing the "name" of the user with the final values of his/her Expense, Income and Balance.

![walletReceipt() method](https://thepracticaldev.s3.amazonaws.com/i/xq7u0qyr3s6vvvx4ef3b.png)
<figcaption> walletReceipt() method </figcaption>

#Finally, 
We will be calling these methods to showcase the functionality of our application by Calling Statements.

![Calling Statements](https://thepracticaldev.s3.amazonaws.com/i/563dfhi8n5r80qsk9xqo.png)
<figcaption> Calling Statements </figcaption>

**Output** of our application will be shown as :

![Output](https://thepracticaldev.s3.amazonaws.com/i/jpiyhm9zluz09znsge6b.png)
<figcaption> Output </figcaption>

At the end, we have successfully created our "Wallet Tracker" application using simple yet major Elements of Pure Modern Javascript.

###Attaching below the code via public GitHub gist link.

{% gist https://gist.github.com/gitanshu-choudhary/8ab55535222a7b352be21575c7c49df8 %}

> *If you liked my efforts, do encourage this post via Feedbacks & Comments.
I appreciate the support.
Thank You !*

---

{% user gitanshu_choudhary %}

---