Build an Expense Tracker 💰

[nunyvega]

Objective

Hello Max! Ready to dive into another exciting project? This time, let's create an Expense Tracker that allows users to input expenses, categorize them, and keep track of the total expenditure.

An important note here is that you'll need to learn new concepts, like events and event listeners. You'll also need to investigate approaches to add functionality that you have not worked on yet, like filtering content on user request.

Preview

This is how your project should look once you're done:

https://github.com/ByteBiteChef/ByteBiteChef.github.io/assets/16329583/8efbc652-1921-4f75-9841-b5046beb763e

I centered all the text by adding:

<style>
    * {
        text-align: center;
    }
</style>

We'll improve the styling of your first three projects once we're done with this one.

---

Task Breakdown

Step 1: Setup HTML Structure 🏗

• [x] Create an HTML file to layout the basic structure.
• [x] Include input fields for the expense description, amount, and category.
• [x] Add a button to submit new expenses. (this may require preventing the default form behavior when submitting)
• [x] Create a section to display the list of expenses and the total expenditure.

Step 2: Link a JavaScript File 🖇

• [x] Create a JavaScript file.
• [x] Link this file to your HTML.

Step 3: Capturing Expense Data 📥

• [x] Setup event listeners to capture the data entered by the user.
• [x] Ensure you capture the description, amount, and category of each expense.

Step 4: Displaying Expenses 📋

• [x] Display each expense in a list or table.
• [x] Ensure that each entry shows the description, amount, and category.

Step 5: Calculating Total Expenditure 🧮

• [x] Keep a running total of all expenses entered.
• [x] Display the total expenditure prominently so that it is easy to see.

Step 6: Category Filtering 🔍

• [x] Allow expenses to be filtered by category.
• [x] Users should be able to see expenses from only one category at a time if they wish.

Step 7: Testing and Debugging 🐞

• [x] Test your expense tracker thoroughly to ensure all functionalities work correctly.
• [x] Debug and fix any issues that might arise during testing.

Notes 📝

• Tackle each step one at a time, making sure each functionality works before proceeding to the next.
• Feel free to reach out if you encounter any challenges or need clarification on any of the steps.

• Learning and googling is part of this project, focus on searching for specific solutions instead of project-wide explanations.

Max, your progress so far has been incredible, excited to see your Expense Tracker come to life! Best of luck, and happy coding! 🚀

[ByteBiteChef]

HI! Thanks for this new project! It seems challenging, but I'm looking forward to applying what I've learned and keep learning too. kind regards.

[ByteBiteChef]

Hello, I completed steps 1 and 2 creating the HTML and JS file. In the HTML I created the structure, the three required inputs, a button to add the expenses, and a UL to display all the expenses.

The JS file is linked to the HTML, and I wrote the steps to start with my code.

Cheers!

[nunyvega]

Looks good! Good approach dividing the logic into smaller steps with pseudocode 💪

[nunyvega]

We may revisit the approach of the input films to use a form, but this is once your project is working, so you learn about forms. Feel free to also use onclick instead of event listeners and then we iterate on your approach.

[ByteBiteChef]

Hi! Step 3 is done using the '.value' method instead 'event listener' It's already committed and pushed. Thanks

[ByteBiteChef]

I completed steps four and five, now we can see the values of the inputs displayed on a list. Also, above the list is the total amount of expenses.

[nunyvega]

The total expenses is not working on the live site. Maybe you forgot to push?

[nunyvega]

Recap of today's talk:

step 0: add a class to each li element that you create programmatically.
step 1: create a select in the HTML with 3 options, each with a value attribute containing the class.
step 2: create an event listener that listens for changes in the select element.
step 3: create a function that does a querySelectorAll and selects the category
step 4: add style.display = "none" to all li elements with the class in the same function

[ByteBiteChef]

Hi! After a small pause to revisit some concepts of datatypes among others, I came back to this project while doing a DOM course. I completed step six using a 'for each' loop. Now you can visit the expenses tracker on my website.

Thanks!

[nunyvega]

Nice! once you're done with testing, we'll move to a new project to get some more experience with CSS 🎨

[ByteBiteChef]

Hello! Thank you for this project, it was very entertaining and challenging at the same time. Filtering by category in step 6, was definitely the most difficult. But there were different levels of challenge in every step for sure. To have a better understanding of this project, I did a course in parallel about DOM https://www.udacity.com/course/javascript-and-the-dom--ud117#. Also, Alvaro gave me 'data-type' exercises. Check it out here! https://github.com/nunyvega/js-tests

If you want to take a look at the Expense tracker I leave a link below. https://bytebitechef.github.io/Exp-Tracker.html

Thanks!

[nunyvega]

Your next project is live! Here are the steps to continue learning, we'll not tackle CSS and revisit styling as a whole:

Enhance Projects with CSS Styling and Improved HTML 🎨 #5