Expense Tracker Project

Not getting the desired output,

Here is the html code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Expense Tracker</title>
	<link rel="stylesheet" type="text/css" href="expense_tracker.css">
</head>
<body>
	<div class="full_body">
		<div class="title">Expense Tracker</div>
		<div class="container">
			<div class="expenses">
				<a href="#" class="buttons" onclick="add_expense_page()">Add Expense</a>
				<br>
				<div class="available_expenses">
					<div class="sub-title">Expenses</div>
					<table class="expense-table" cellspacing="10px" cellpadding="8px 20px">
						<tr style="border-bottom: 1px solid white;">
							<th>Amount</th>
							<th>Category</th>
							<th>Date</th>
							<th>Note</th>
						</tr>
					</table>
				</div>
				<form action="#" class="add-new-expense">
					<span>
						<label for="amount">Amount:</label>
						<input type="text" class="form-input" name="amount" placeholder="How much?">
					</span>
					<span>
						<label for="category">Category:</label>
						<select name="category" id="category">
							<option value="Food">Food</option>
							<option value="Travel">Travel</option>
							<option value="Groceries">Groceries</option>
							<option value="Entertainment">Entertainment</option>
							<option value="Others">Others</option>
						</select>
					</span>
					<span>
						<label for="date">Date:</label>
						<input type="date" class="form-input" name="date" placeholder="dd-mm-yyyy">
					</span>
					<span>
						<label for="note">Note:</label>
						<input type="text" class="form-input" name="note" placeholder="What did you spen on?">
					</span>
					<span>
						<a href="#" class="buttons" style="font-size:15px;padding: 8px 10px;" onclick="add_expense()">Submit</a>
					</span>
				</form>
			</div>
			<div class="category">
				<a href="#" class="buttons" onclick="add_category_page()">Add Category</a>
				<br>
				<div class="sub-title">Categories</div>
				<div class="available-categories">
					<span>Food<span class="sum"></span></span>
					<span>Travel<span class="sum"></span></span>
					<span>Groceries<span class="sum"></span></span>
					<span>Entertainment<span class="sum"></span></span>
					<span>Others<span class="sum"></span></span>
				</div>
				<form action="#" class="add-category">
					<span>
						<label for="category">Category Name:</label>
						<input type="text" class="form-input" name="new-category" placeholder="Enter category name">
					</span>
					<span>
						<a href="#" class="buttons" onclick="add_category()">Submit</a>
					</span>
				</form>
			</div>
		</div>

	</div>

</body>
<script type="text/javascript" src="expense_tracker.js"></script>
</html>

Here is the Javascript code:

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("Successfully 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("Plaese 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_categories_option=document.createElement("option");
		new_categories_option.innerHTML=`<option>${new_category_value}`;
		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_categories_option);
		available_categories.appendChild(new_category_span);
		document.getElementsByClassName("add-category")[0].style.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";
	}
}

I am unable to find the error, if any one has the solution please suggest.

@tejasshinde210 Could you please share the link to your HTML, CSS, and JS code? I shall look into it and will solve your concern on priority.

I am uploading the github link, where I have uploaded the code.
Link - https://github.com/Tejas124/Expense-Tracker

@tejasshinde210 Apologies for the delay in response from our end. I have made a few edits to the code. Please check the new working files of the project using this link.

Yes, its working! Thank you very much.
Can you please tell me where it was going wrong…

Hi @shobhit.kumawat
Can you grant me access to this link ? I have sent a request

@ShreyPatnaik I have already resolved your issue here.

@shobhit.kumawat was our previous community manager and his account has been deactivated. You can always tag me @raghav.srivastava for any queries.