Project 4: Expense Tracker

The HTML, CSS JS code which I wrote isn’t working for the Expense Tracker project. The add category and add expense buttons are not working. I have uploaded the codes in Github. Please help me with this.

Hi @rishavsaha37,

We have previously answered a similar query. Please refer to Expense Tracker Project - #4 by shobhit.kumawat.

Do let me know if you are still stuck

Hi @shobhit.kumawat
Even I’m facing the same issue when I try to add expenses it doesn’t get updated in the categories table. Rest all components are working fine. Can you please look into it ? I have pasted my Js code below:-

let expense_per_category = [0, 0, 0, 0, 0];
var count = 4;
update_sum();
function update_sum() {
var sum = document.querySelectorAll(".sum");
for (var i = 0; i < sum.length; i++) {
sum[i].innerHTML = " - " + expense_per_category[i] + " Rs. Spent";
}
}
function add_expense() {
var amount = document.getElementsByClassName(“form-input”)[0].value;
var date = document.getElementsByClassName(“form-input”)[2].value;
var note = document.getElementsByClassName(“form-input”)[3].value;
var category = document.getElementsByClassName(“form-input”)[1].selectedIndex;
var selected = document.getElementsByTagName(“option”)[category].value;

if (amount && date && note && selected) {
alert(“Succesfully added expense!”);
var table = document.getElementsByTagName(“table”)[0];
var new_row = document.createElement(“tr”);
new_row.innerHTML = <tr style = border-bottom: 1px solid white;> <td>${amount}</td> <td>${selected}</td> <td>${date}</td> <td>${note}</td> </tr> ;
table.appendChild(new_row);
expense_per_category[category] =
parseInt(expense_per_category[category]) + parseInt(amount);
update_sum();
console.log(count);
document.getElementsByClassName(
“add-new-expense”
)[0].getElementsByClassName.display = “none”;
} else {
alert(“Please enter all details!”);
}
}
function add_category() {
var new_category_value = document.getElementsByName(“new-category”)[0].value;
if (new_category_value) {
var dropdown = document.getElementsByName(“category”)[0];
var available_categories = document.getElementsByClassName(
“available-categories”
)[0];
var new_category_option = document.createElement(“option”);
new_category_option.innerHTML = <option>${new_category_value}</option>;
count++;
expense_per_category[count] = 0;
var new_category_span = document.createElement(“span”);
new_category_span.innerHTML = <span>${new_category_value}<span class = "sum"> - ${expense_per_category[count]}Rs spent </span></span>;
dropdown.appendChild(new_category_option);
available_categories.appendChild(new_category_span);
document.getElementsByClassName(
“add-category”
)[0].getElementsByClassName.display = “none”;
}
}
function add_category_page() {
if (
document.getElementsByClassName(“add-category”)[0].style.display == “block”
) {
document.getElementsByClassName(“add-category”)[0].style.display = “none”;
} else {
document.getElementsByClassName(“add-category”)[0].style.display = “block”;
}
}
function add_expense_page() {
if (
document.getElementsByClassName(“add-new-expense”)[0].style.display ==
“block”
) {
document.getElementsByClassName(“add-new-expense”)[0].style.display =
“none”;
} else {
document.getElementsByClassName(“add-new-expense”)[0].style.display =
“block”;
}
}