Budgety

javascript

Synopsis

We have the Controller that acts as the middleman between a data controller (budgetCtrl) and UI controller (UICtrl).
In the Controller, we declare click events for user actions. Once that click event happens, the Controller takes in data and stores it into a data structure.

In the case of adding an item, the Controller takes data from the DOM by using function querySelector and gives it to budgetCtrl to store and manipulate.

Once it finishes, it calls budgetCtrl’s related getXXXXXXX() function and gets the data it needs to display. It passes that data to the UICtrl to be displayed.

BudgetController

The budget controller holds data that stores expenses and incomes.

Specifically, it will store individual expenses and incomes via array:

It then stores a total for all the expenses and incomes.

It also has:

Leftover Budget – incomes – expenses
total percentage – expenses / income

And thus, our budgetController keeps track and hold data. Naturally, it will have functions that manipulate these data.

Let’s look at the simple functionality of adding an item.

On the data side, we want three things:
– type (income or expense)
– description of the income or expense
– value of the income or expense

Then we simply use the string ‘inc’ or ‘exp to act as the property name inc/exp.

Thus we are able to dynamically use arrays data.allItems.inc or data.allItems.exp simply by using data.allItems[type] where type is “inc” or “exp”.
This is how we get the array we want to use.

The idea is for adding items is that we append it to the end.
So we first have to assign an ID for the item. The ID is simply the index of the next available element.

For example, if the array is empty, then the ID for our item should be 0. If the index of the next available item is 2, then the ID we assign to our item should be 2:

We then create a newItem according to the type. If its a ‘exp’, we simply create a new Expense. If its ‘inc’, then we create income object.

After that, we stick the item into the respective array.

Controller

In the controller, we first set up some basic key press features for when user enters their data.
We do this in setupEventListener function.

We add a click event listener to when the user clicks on the button which has id/class of DOM.INPUT_BUTTON.
In our case, the button has class ‘.add__button’. When the element with that class is clicked, we call on ctrlAddItem.

We store the DOM elements’ classes and ids strings into an object literal.

By using querySelector along with these macros, querySelector will go into the DOM, find the elements with those strings as id/class and retrieve data.

So continuing on, when the button was clicked, it executes ctrlAddItem. In ctrlAddItem, we first get data from three elements and put them into an object called ‘input’.
The three data is type, description, and value, which represents the item you are inserting.

Then we do an error check for the data stored in object input. If everything checks through then we have enough information to feed our budgetCtrl’s addItem function.
After adding the data into our budgetCtrl (data container), we then have our UI controller add it into our UI.
Then we clear fields.

Notice the last updateBudget and updatePercentages.

Once we have new data stored in our arrays, we need to call those functions to calculate what we need.

updateBudget

We have access to budgetCtrl and UICtrl. So the main idea is for budgetCtrl to calculateitself. Then get the data we want, i.e budget.
Once we have the budget data, we just pass to the UICtrl to be displayed.

updatePercentages

Same goes for updating percentages. The main idea is that we calculate data in budgetCtrl, and then using getXXXXXX() we get the needed data from budgetCtrl.
We pass this data into the UICtrl, which then takes care of displaying the changed data onto the UI.

Notice updatePercentages operates the same way. We first have budgetCtrl, which keeps track of all our data, to calculate what it needs. Specifically the percentages of the expenses in relation to the income. We then extract the percentage array from budgetCtrl.

Using that array, we insert it into the UI controller to be displayed.

UIController

The data gets calculated many times in budgetCtrl, and we must make sure that change gets reflected in our UI. The UI controller does exactly this by making use of document.querySelector A LOT.

querySelector takes an argument of a string which represents the element’s class or id name. In our case, for the type, we want to get what was selected.

We first create an object to keep tract of these classes and ids.
Notice class add__type. We will store it as a macro in DOMStrings object.

We see that we have a select control in HTML. When the user makes a selection on the web page, the string ‘+’ or ‘-‘ will be given to the select tag. By using querySelector function to retrieve that value, we can then store it into a property called selectedType. Same goes for the description and amount.
Now we want to add this item to the UI. We do this by first getting two objects. First is the parameter type so we know whether to add the data to the income div or expense div.
When we know whether to add expense or income, we can safely get the parameter obj and literally just do a data dump.

Full Source code