Expense tracker not getting desired output

2001721075007 · May 4, 2023, 11:37am

my html code:

<title>Expense Tracker</title>
<link rel="stylesheet" href="../css/expense_tracker.css">

Expense Tracker

Add Expense

Expenses

Amount	Category	Date	Note

            <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 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>
                <span>
                    <a href="#" class="buttons" onclick="add_category()">Submit</a>
                </span>
            

            </form>
        </div>
    </div>
</div>

MY CSS CODE:

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(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;
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: rgb(175,224,41);
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(0,0,0,0.164);
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 solid white;
background-color: rgb(0,0,0,0.164);
font-size: 18px;
border-radius: 4px;
}
.available-categories > span{
padding: 8px 10px;
border-bottom: 1px solid white;
display:flex;
justify-content: space-between;
align-items:center;
}
.sub-title{
font-size: 23px;
color:white;
margin-top: 30px;
}

MY JS 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.getElementsByClassName(“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("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_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”;

}

I DON’T KNOW WHAT MISTAKE I DID …i am not able to enter any expense or category

himanshu.arya · May 7, 2023, 3:28am

There are several issues in your code:

Syntax error:

There is a syntax error in this line:

expense_per_category[category]=parseInt(expense_per_category[category]+parseInt(amount);

The parseInt() function is not closed properly. Change it to:

expense_per_category[category]=parseInt(expense_per_category[category])+parseInt(amount);

2.Incorrect element selection:
There are several places in the code where the elements are being selected incorrectly. For example:

var amount=document.getElementsByClassName(“form-input”)[0].value;

The quotes around form-input are the wrong type. Change them to normal double quotes, like this:

var amount=document.getElementsByClassName("form-input")[0].value;

Make sure you do this for all occurrences of the same error

Incorrect assignment:
There are a few places in the code where you are using == instead of = to assign values to variables. For example:

document.getElementsByClassName("add-new_expense")[0].getElementsByClassName.display="none";

This should be:

document.getElementsByClassName("add-new_expense")[0].style.display="none";

Make sure you do this for all occurrences of the same error.

Typos:
There are also some typos in your code. For example:

new_category_option.innerHTML=<option>${new_category_value}</option>;

The quotes around option should be double quotes, like this:

Make sure you do this for all occurrences of the same error

Event listeners:
There are no event listeners attached to the buttons to trigger the functions add_category_page() and add_expense_page(). You need to add these listeners using addEventListener().
Here is the corrected 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.getElementsByClassName("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].style.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>`;

Do try this and let us know if it works.

2001721075007 · May 8, 2023, 8:14am

everything is fine but expenses are not getting added its still showing rs 0

himanshu.arya · May 13, 2023, 6:28am

Hi @2001721075007 I Apologize for the delay, share me your code in message after update the code and also let me know the current issue with your code.

himanshu.arya · May 20, 2023, 4:25pm

Hi @2001721075007 Am sharing you correct code github link -

Do check and let me know if it helps you.