A Simple Expense Calculator Built With JavaScript
It’s important to put things down on paper or in a digital planner to keep track of what you will spend money on. When you track your spending, you know where your money goes and you can ensure that your money is used wisely.
In this article, i will be talking about how the simple expense calculator above was built. Firstly, let’s look at its HTML and CSS source code.
Here’s the HTML. As indicated in number 18 and 22, the <button> tags have onclick event attributes in which each holds a function. Each function runs a specified line of code which will be discussed in the JavaScript section. This simply means that when the user clicks on the button, the function will be executed. Please take note of the id/class attribute given to each tag. Each id/class attribute is used to point to a style in the style sheet(CSS), and by JavaScript to manipulate the element with the specific id.
The CSS shows how I styled the body and other HTML elements to give the desired result as indicated in the picture below.
And the last part of the CSS which is the media query implies that when the browser screen is smaller than 768px, the block of CSS properties as indicated should be executed. Thus, making the page responsive on smaller screens.
Now to the main deal of this article, let’s take a look at the JavaScript, how to make the expense calculator function as desired. Remember the id attributes assigned to the span, input, button, and div elements? It’s time to be used by JavaScript. Forgotten? You can always go back to the HTML
Here, there are two main functions; addMoney(), addExpense() which have been specified in the onclick event attribute of the two <button> tags. These block of code will be executed when user click on the button. So let’s take a close look at each function.
addMoney() function. Here three variables were declared: totalBudget, currentBalance, money. The parseInt() function parses a string and returns an integer. So the parseInt was used to convert the string format to integer so that it can be used for computation. Note that for the variable money, .value was used instead of .innerHTML. This was used to get the value of the input field(i.e the value entered by the user). After the variables, I have the if else statement. Remember the syntax?
if (condition) {
block of code to be executed if the condition is true
} else {
block of code to be executed if the condition is false
}
The if-else statement in my code validates the input field. This implies that if the condition is true(i.e the input field is empty or isNaN(is Not a Number)), then an alert box that says Please enter a valid number should pop up. And if the condition is false (i.e user enter the correct value), then the value(money) entered by the user should be added to the totalBudget and currentBalance.
This picture indicates that on clicking the Add Money button while the input field was empty, the alert box popped up
And this indicates that when a correct value(500000) was entered, the value was added to the totalBudget and currentBalance.
Next is the second function addExpense()
Just as before, I declared my variables and made us of the parseInt() except for the expenseName because it’s not used in the calculation. After that, i have the else if statement. The syntax is;
if (condition1) {
block of code to be executed if condition1 is true
} else if (condition2) {
block of code to be executed if the condition1 is false and condition2 is true
} else {
block of code to be executed if the condition1 is false and condition2 is false
}
In the code above(the picture), i have the first condition to be;
if (expenseName.length == “ ”) {
alert(“Please enter an expense name”);
}
This implies that if the expense name input field is empty, then an alert box that says Please enter an expense name should pop out. And if the first condition is false, execute the next code (second condition) which says;
else if (expenseAmount == “ “ || isNaN(expenseAmount) ) {
alert(‘Please enter a valid expense amount’)
}
This implies that if the expense amount input field is empty or isNaN, then an alert box that says Please enter a valid expense amount should pop out. If this is also false, execute the next code (third condition) which says;
else if (expenseAmount <= currentBalance){
currentBalance -= expenseAmount;
document.getElementById(‘currentBalance’).innerHTML = currentBalance
var para = document.createElement(‘p’)
para.innerHTML = `Expense Name : ${expenseName} <br> Expense Amount : ${expenseAmount}`;
document.getElementById(“addedExpenses”).appendChild(para);
}
This implies that if the expense amount is less than or equal to current balance, then the expense amount should be deducted from the current balance, and both the expense name and expense amount should be assigned to the element created(i.e the p element) which was appended to the div(with id “addedExpenses” ).
else{
alert(“sorry your expense amount is higher than your current balance”)
}
And finally, if the condition is false (i.e expense amount is greater than current balance), then an alert box that says Sorry your expense amount is greater than your current balance should pop up.
As the picture indicated, the current balance was 5000, and the expense amount was 6000, since 6000 > 5000 then the alert box popped out.
As indicated in the picture, since the expense amount was less than the current balance, both the expense name and expense amount was written in the paragraph created and appended to the div. This will continue to be so until the expense amount is greater than the current balance, then it will pop up the alert box.
That’s all for the simple expense calculator. Thanks for reading!
