not getting the desired output and unable to find mistake .Please help me. here is my code:
html
<title>Expense tracker</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="expense-tracker.css">
Amount | Category | Date | Note |
---|
</select>
</span>
<span>
<label for="date">Date:</label>
<input type="text" class="form-input" name="date" placeholder="dd-mm-yy">
</span>
<span>
<label for="note">Note:</label>
<input type="text" class="form-input" name="note" 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" name="new-category" class="form-input" placeholder="Enter category name">
</span>
<span>
<a href="#" class="buttons" onclick="add_category()">Submit</a>
</span>
</form>
</div>
</div>
my css code
body{
box-sizing: border-box;
margin: 0;
padding: 0;
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{
dispaly: flex;
justify-content: space-between;
margin:100px;
}
.buttons{
outline:none ;
padding:10px 20px ;
border:none ;
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 ;
margin-top:30px ;
border:1px solid white ;
font-family:‘Open sans’,sans-serif;
border-radius: 4px;
}
td{
font-size: 15px;
}
.add-new-expense,.add-category{
margin-top:10px ;
background-color:rgb(175,224,41) ;
border-radius: 4px;
padding: 10px;
display:none ;
border:1px solid grey ;
}
.add-new-expense span, .add-category span{
margin:5px 0px ;
font-size:15px ;
justify-content:space-between ;
align-items:center ;
display:flex ;
}
.form-input{
color:white;
background-color:rgba(0, 0, 0, 0.164) ;
border-radius: 4px;
padding: 8px 10px;
font-family:‘Open sans’,sans-serif;
border:1px solid white ;
}
.form-input:focus{
background-color:rgba(0, 0, 0, 0.164);
font-family:'Open sans',sans-serif;
border:1px solid white ;
outline: none;
}
.available-categories{
display: flex;
justify-content: center;
align-items: center;
background-color:rgba(0, 0, 0,0.164) ;
padding: 15px;
flex-direction: column;
border:1px solid white ;
color: white;
font-size: 18px;
border-radius: 4px;
}
.available-categories > span{
justify-content:space-between;
align-items: center;
padding: 8px 10px;
border-bottom: 1px soid white;
display: flex;
}
.sub-title{
margin-top: 30px;
color: white;
font-size: 23px;
}
my 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(“successfull 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>${note}</td> <td>${date}</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"> - ${new_category_value[count]}Rs spent</span></span>
;
dropdown.appendChild(new_category_option);
available_categories.appendChild(new_category_span);
document.getElementsByClassName(“add-category”)[0].getElementsByClassName.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”;
}
}
this is the output