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.