I have a problem accessing the form. Kindly help.
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="preconner" href=""> -->
<title>Expense Tracker</title>
<link rel="stylesheet" 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="expenses-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="Amount">
</span>
<span>
<label for="amount">Category:</label>
<input type="text" class="form-input" name="category" id="category" placeholder="Amount">
<select>
<option value="food">Food</option>
<option value="travel">Travel</option>
<option value="groceries">Groceries</option>
<option value="food">Entertainment</option>
<option value="others">Others</option>
</select>
</span>
<span>
<label for="date">Date:</label>
<input type="date" class="form-input" name="amount" placeholder="Amount">
</span>
<span>
<label for="note">Note:</label>
<input type="text" class="form-input" name="amount" placeholder="What did you spend 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>
<a href="#" class="buttons" onclick="add_category()">Submit</a>
</form>
</div>
</div>
</div>
<script src="expense_tracker.js"></script>
</body>
</html>
CSS -
body{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Open-sans', 'sans-serif';
}
/* entire body including title and the content of webpage */
.full_body{
font-size: 18px;
background-image: linear-gradient(to right top, #1b92ac, #00aeb2, #00c7a3, #6fdd83, #c1ec5f);
height: 800px;
}
/* expense tracker title */
.title{
color:white;
font-size: 30px;
display:flex;
justify-content: center;
align-items: center;
padding: 30px;
}
/* entire body including only content of webpage */
.container{
display: flex;
justify-content:space-between;
margin: 100px;
}
/* add category, add expense and submit buttons */
.buttons{
outline:none;
border: none;
padding:10px 20px;
color: white;
background-color: rgb(225, 75, 75);
text-decoration: none;
font-family: 'Open-sans', 'sans-serif';
font-size: 18px;
border-radius: 4px;
}
table{
background-color: rgb(43, 43, 43);
color:white;
border: 10xp solid white;
margin-top: 30px;
font-family: 'Open-sans', 'sans-serif';
border-radius: 4px;
}
td{
font-size: 15px;
}
.add-new-expense, .add-category{
margin-top:10px;
background-color: yellow;
padding:10px;
border-radius:4px;
border:1px solid grey;
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);
padding:8px 10px;
border:1px solid white;
border-radius: 4px;
color:white;
font-family: 'Open Sans', sans-serif;
}
form-input:focus{
background-color: rgb(32, 32, 32);
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 sloid white;
background-color: rgb(45, 45, 45);
font-size: 18px;
margin-top: 30px;
border-radius: 4px;
}
.available-categories >span{
padding: 8px 10px;
border-bottom: 1px solid white;
display:flex;
justify-content: space-between;
align-items:center;
color:white;
}
.sub-title{
font-size: 23px;
color:white;
margin-top: 30px;
}
JS
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 category=document.getElementsByClassName("form-input")[1].value;
var date=document.getElementsByClassName("form-input")[2].value;
var note=document.getElementsByClassName("form-input")[3].value;
var selected=document.getElementsByClassName("form-input")[category].value;
if(amount&&date&¬e&&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("Pls 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_span}<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].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"
}
}