Expense Tracker Issue

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&&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("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"
    }
}

It seems like the form is not visible on the webpage because the display property for both the forms has been set to none in the CSS file.

To fix this, remove the “display:none” property from the CSS for “.add-new-expense” and “.add-category” classes.

CSS code with changes -

.add-new-expense, .add-category{
    margin-top:10px;
    background-color: yellow;
    padding:10px;
    border-radius:4px;
    border:1px solid grey;
}

This should make the form visible on the webpage , do let me know if it works.

yeahhh that solved the issue.
Also, there is some error is my js code which I’m not able to figure out. The expense isn’t getting added nor the category. Kindly let me know where I’ve gone wrong

1 Like

I can see that there are some syntax errors in the JavaScript code you have provided. Here are the issues:

  1. getElementsById should be getElementById because the function is trying to get only one element by its ID.
  2. amount is used multiple times as the name attribute in the form. You need to change the name attribute for the other input fields to avoid this error.
  3. You are missing closing braces } for both add_expense() and add_category() functions.

Okay so i think the attribute bit was being an issue, I did give unique name attributes. However, I am still not getting the output. Can you please tell me in which function or on which line I have used “document.getElementsById” cuz I dont think I used that and I tried putting the closed braces until I found out its an extra brace cuz my function is closed properly. So I am really having a hard time figuring this out

Hi. In “document.getElementsById” the id refer to tagname or class name etc. give me some time and let me to check the code again.

did you get the output? or shall i share my code?

Yes please do send you code. That will help