Expense tracker project code is not working(can you please fix this):

#1

HTML:

expense tracker
Expense tracker
Add Expense
Expenses
Amount Category Date Note
Amount: Category: Food Travel Groceries Entertainment Date: Note: Submit
Add Category
Categories
Food Travel Groceries Entertainment Others
Category Name: Submit

CSS:
body{
box-sizing: border-box;
margin: 0px;
padding: 0px;
font-family:‘Open sans’, sans-serif;
}

.full_body{
font-size: 18px;
background-image: linear-gradient(to right top,#1b92ac,#00aeb2,#00c7a3,#6fdd83,#c1ec5f);
height: 800px;
}

.title{
color: white;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
}

.container{
display: flex;
justify-content: space-between;
margin: 100px;
}

.buttons{
outline: none;
border: none;
padding: 10px 20px;
color: white;
background-color: rgb(233,60,60);
text-decoration:none;
font-family: ‘Open sans’,sans-serif;
font-size: 18px;
border-radius: 4px;
}

table{
background-color: rgba(0, 0, 0,0.164);
color: white;
border: 1px solid white;
margin-top: 30px;
font-family: ‘Open sans’,sans-serif;
border-radius: 4px;
}

th{
font-size: 18px;
}
.add-new-expense,.add-category{
margin-top: 10px;
background-color: rgb(175, 224, 41);
padding: 10px;
border: 1px solid grey;
border-radius: 4px;
display:none;
}

.add-new-expense span,.add-category span{
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0px;
font-size: 15px;
}

.form-input{
background-color: rgba(0,0,0,0.164);
color:white;
padding: 8px 10px;
border: 1px solid white;
font-family: ‘Open sans’,sans-serif;
border-radius: 4px;
}

.form-input:focus{
background-color: rgba(0,0,0,0.164);
border: 1px solid white;
outline: none;
font-family:‘Open sans’,sans-serif;
}

.available-categories{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 15px;
border: 1px solid white;
background-color: rgba(0,0,0,0.164);
color:white;
font-size: 18px;
border-radius:4px;
}

.available-categories > span{
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
border-bottom: 1px solid white;
}

.sub-title{
font-size: 23px;
color: white;
margin: 20px;
}

JAVASCRIPT:
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;//made change, wrong index
var date = document.getElementsByClassName(“form-input”)[2].value;//made change, wrong index
var note = document.getElementsByClassName(“form-input”)[3].value;//made change, wrong index
var category = document.getElementById(“category”).selectedIndex;//made change, wrong element was selected, new category instead of category
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;> ${amount} ${selected} ${date} ${note} ";
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”;
}
}

when i press the buttons the forms are appearing but the submit button is not working… please fix the code and post the right one …

#2

There are multiple errors in the provided code:

  1. Incorrect quotation marks: The CSS code contains incorrect quotation marks. Replace all instances of ‘ and ’ with ' or ".
  2. Missing space: In the JavaScript code, there is a missing space between getElementsByClassName and display. Replace getElementsByClassName.display with getElementsByClassName("add-new-expense")[0].style.display.
  3. Incorrect indexes: In the add_expense() function, the amount, date, and note variables are being assigned incorrect values due to using the wrong indexes for the document.getElementsByClassName() method. Replace the indexes with the correct ones: 0, 2, and 3, respectively.
  4. Incorrect element selected: In the add_expense() function, the category variable is selecting the wrong element. Replace document.getElementById(“category”).selectedIndex with document.getElementsByName("category")[0].selectedIndex.
  5. Incorrect element created: In the add_category() function, the new_category_option and new_category_span elements are being created incorrectly. Replace new_category_option.innerHTML = <option>${new_category_value}</option> with new_category_option.innerHTML = "<option>" + new_category_value + "</option>" and replace new_category_span.innerHTML = <span>${new_category_value}<span class = "sum"> - ${expense_per_category[count]}Rs spent </span></span> with new_category_span.innerHTML = "<span>" + new_category_value + "<span class='sum'> - " + expense_per_category[count] + "Rs spent </span></span>".
  6. Missing parentheses: In the new_row.innerHTML line of the add_expense() function, there are missing parentheses around the template literal. Replace <tr style = border-bottom: 1px solid white;> ${amount} ${selected} ${date} ${note} " with <tr style = "border-bottom: 1px solid white;"> ${amount} ${selected} ${date} ${note} </tr>".
  7. Incorrect quotation marks: In the add_expense() function, the alert message contains incorrect quotation marks. Replace “ and ” with ".

Update your code and check it again from your side also then let us know is it resolved.