Description:
This project is a simple Expense Calculator that allows users to keep track of their daily expenses. Users can input the name of an expense and the corresponding amount, which gets added to a list. The total expenses are updated in real-time as new entries are added. Additionally, each expense can be deleted, giving the user control over their budget list.
Features:
Add Expenses:
Users can enter an expense name and amount in designated input fields.
When the user clicks "Add Expense," the expense is displayed in the list below, and the total is updated.
Delete Expenses:
Each added expense has a "Delete" button next to it.
Clicking "Delete" removes the specific expense and updates the total expense accordingly.
Total Calculation:
The total expenses are calculated dynamically and displayed below the list of expenses.
Technologies Used:
HTML: Structure of the expense calculator interface, including inputs, buttons, and the list of expenses.
CSS: Styling for layout, colors, and design elements such as the background, buttons, and container. Flexbox is used for layout alignment.
JavaScript: Logic for adding expenses, deleting expenses, and dynamically updating the total expenses. JavaScript also handles user interaction with the "Add" and "Delete" buttons.
CSS Highlights:
Container Design: The container has a light beige background (
#F1DAC4), rounded corners, and a shadow to create depth.Responsive Layout: Inputs and buttons are aligned using Flexbox for a responsive design that adjusts well to different screen sizes.
Buttons: Styled with rounded corners and hover effects for a modern look. The "Add Expense" button has a dark background (
#474973), while the "Delete" button uses a soft purple (#A69CAC).JavaScript Highlights:
Real-Time Total Update: Every time a new expense is added or deleted, the total is recalculated and displayed immediately.
Expense List Management: Each expense is stored in a list dynamically created in the DOM, allowing easy deletion and total updates.
Potential Improvements:
Local Storage: Saving expenses in local storage so that they persist after refreshing the page.
Expense Categories: Adding the ability to categorize expenses (e.g., Food, Transportation, Entertainment).
Edit Expenses: Implementing an "Edit" feature to modify expense names or amounts.
Conclusion:
This project showcases basic web development skills using HTML, CSS, and JavaScript. It demonstrates the creation of interactive user interfaces, dynamic updates through JavaScript, and user-friendly design elements. It's ideal for beginners looking to enhance their skills in DOM manipulation, event handling, and form management.
If you have any further questions or need more details, feel free to ask!
