My React Journey: Day 20

Budget Tracker Project

Today, I worked on a project titled Budget Tracker. The goal of this project was to apply previously learned concepts in a practical and functional way. Here's an overview of the concepts I implemented and how they enhanced my skills:

Concepts Learned and Applied

1.HTML Structure and Semantics

• I used a semantic and well-structured HTML layout for the budget tracker, ensuring clarity and easy maintenance. For instance, the table element was used to organize budget entries, and input fields were added for data collection.

2.CSS for Styling
Learned to style the project for both functionality and aesthetics:

• Used classes like .budget-tracker, .input, and .delete-entry to design and structure the UI.
• Focused on responsive design principles, ensuring the tracker works across different screen sizes.
• Added hover effects for buttons like .delete-entry to improve interactivity.

3.JavaScript Modules

• I modularized my JavaScript by creating a separate BudgetTracker.js class. This improved code reusability and separation of concerns.

4.Local Storage

• I implemented Local Storage to persist budget entries across sessions. Users can reload the app without losing their data:

localStorage.setItem("budget-tracker-entries-dev", JSON.stringify(data));

5.Dynamic DOM Manipulation

• Dynamically created and updated rows in the budget table using JavaScript:

this.root.querySelector(".entries").insertAdjacentHTML("beforeend", BudgetTracker.entryHtml());

6.Event Handling
I used event listeners to make the app interactive. For example:

• Clicking the "New Entry" button adds a new row.
• Clicking the "Delete" button removes a row.

row.querySelector(".delete-entry").addEventListener("click", e => {
    this.onDeleteEntryBtcClick(e);
});

7.Data Validation and Formatting

• Applied logic to calculate the total income or expenses and displayed it in the appropriate format using Intl.NumberFormat:

const totalFormatted = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD"
}).format(total);

8.Version Control and Debugging

• Used browser dev tools to debug errors and inspect the behavior of dynamic components.

Project Outcomes

This project gave me a deeper understanding of:

• Designing user-friendly interfaces with HTML and CSS.
• Integrating JavaScript logic to handle data dynamically.
• The importance of code modularity for scaling projects.
• Using Local Storage to maintain state.

The project also sharpened my problem-solving skills, as I faced challenges like handling empty input fields and ensuring accurate calculations, etc.

The tracker consists of input fields for date, description, type, and amount, with a dynamic summary section displaying the total balance.

This project reinforced my confidence in building real-world applications! ?

Ready to dive into React Native

The above is the detailed content of My React Journey: Day 20. For more information, please follow other related articles on the PHP Chinese website!