Personal expense App using Vanilla Js! 🍦

As the title suggests we will be writing vanilla Js code and making a mini project to calculate our personal expenses. Please visit Xpens.

We will be following a playlist from Mr. Tanay Pratap. To know more about Tanay, visit tanaypratap.com, I have been following him for the past 2-3 months now and everything he says and does is just pure gold for people who are trying to get a new job in web development.

So I went to his YouTube channel and found a playlist on javascript. Before this, I completed a course from freecodecamp.org for JavaScript Algorithms and Data Structure. After completing the first module I was familiar with almost all the basic concepts for Js.

Now coming to the playlist which Tanay has on YouTube, our aim was to make an app that calculates your personal expense using vanilla Javascript. I went through all the videos and then started writing the code on my own. While going through it I jotted down my learning and the steps that we will be following for the same.

• We declare all the references from the web page to our Js script. for eg.

            //get the heading element
            const headingEl = document.querySelector("#headingTotal");

            //get the reference to description element
            const inputDescEl = document.querySelector("#inputDesc");

• We declare an array of objects to store all the expenses.

            //allExpenses at one place, declaring array of objects
            const allExpenses = [];

• Now, every time the button is clicked we will push the elements to our array of objects and add the expenses and show the total amount spent with the function totalExpenseDisplay().

//onButtonClick add input Amount to totalExpense
            function addExpenseToTotal(){

                const expenseItem = {};

                //read value from inputAmount
                const textAmount = inputElement.value;

                //read the desc from inputDesc
                const textDesc = inputDescEl.value;

                //converting the text input we got into number 
                const expense = parseInt(textAmount, 10);

                //put it in object 
                expenseItem.desc = textDesc;
                expenseItem.amount = expense;

               // Required for giving a special id for each entry
                expenseItem.moment = new Date(); 

                allExpenses.push(expenseItem);

                //Add value to totalExpense
                totalExpenseDisplay(allExpenses);

                //set heading element to totalExpense
                renderList(allExpenses);

            }

Now that we have completed the above steps we need to simply work on deletion.

For Deletion:

• We need a unique value for each and every entry we have. We will be using Javascript Date. You can see in the above snippet where we mentioned

  expenseItem.moment = new Date();

• A method called as .toLocaleDateString will be used to give value to expenseItem.moment . You can read more about .toLocaleDateString on MDN docs.

• As we know for each entry we have expense, description, and moment values stored in an array of objects. So now for deletion, we just need to delete the entry from the array by searching the unique value.

The delete function is as follows:

function deleteItem(dateValue,totalExpense){

                let x = allExpenses.length;
                console.log(x);
                console.log(totalExpense);
                for(let i=0; i<allExpenses.length;i++){
                    if(allExpenses[i].moment.valueOf() === dateValue)
                    {   
                        totalExpense = totalExpense - allExpenses[i].amount;
                        allExpenses.splice(i,1);
                    }
                    totalExpenseDisplay(allExpenses);
                }
               renderList(allExpenses);
            }

In the above code snippet, we use Splice, which is a different approach from what Tanay took. We could also have done it with mapping, but I also wanted to try out loops.

For the other method(mapping), you can refer to my code on Github Github.

The blog only explains the Javascript part of the code and not how it is linked with the style/rendering of the output. I will be writing a new blog for that, for now, we have kept the layout similar to Tanay's.

Future of this app:

1. We will be getting clear with the concepts of local storage and session storage and use them in our app.
2. We will be improving the way the app looks right now by using some good colors and a better layout.