ppraneesh/expensetracker

Expense Tracker

Click here to check the project

Project Overview

This project is an Expense Tracker, designed to help users manage and track their expenses and income. The application provides a user-friendly interface for adding new expenses, viewing a summary of total income, total expenses, and current balance. It also allows users to delete specific expenses from the list.

Features

• Add New Expense:

  • Users can add new expenses by providing details such as expense type (income or expense), name, and amount.
  • Empty values for name or amount will trigger an alert, ensuring that users enter valid information.

• Balance Overview:

  • The main section displays the current balance along with the total income and total expenses, providing users with a quick overview of their financial status.

• Expense List:

  • The application maintains a list of expenses, showing details such as the name, amount, and type (income or expense).
  • Users can delete specific expenses from the list by clicking the "x" button.

• Responsive Design:

  • The user interface is optimized for lower-sized displays, making it accessible and usable on various devices, including phones.

• Navigation Bar:

  • The navigation bar contains buttons for Home, History, and Profile. Currently, these buttons display an alert indicating that they are not functional yet.

Usage

1. Open index.html in a web browser to launch the Expense Tracker application.
2. To add an expense first select the "entry type"
3. Add "expense-name" and "expense-amount"
4. Use the "Add Expense" form to input details for a new expense
5. The balance section will update accordingly, showing the current balance, total income, and total expenses.
6. Expenses are listed at the bottom, and users can delete specific entries by clicking the "x" button.
7. The navigation buttons in the navbar provide alerts indicating that they are not yet functional.

Project Structure

• HTML File: index.html - Defines the structure of the webpage.
• CSS File: styles.css - Provides styles for visual enhancement and responsiveness.
• JavaScript File: index.js - Implements the functionality of adding expenses, updating balances, and handling delete operations.

Notes

• The project is designed to be a simple and effective tool for tracking expenses, providing users with an organized way to manage their financial activities.
• The navigation buttons are currently placeholders and do not have any functional implementation.

Feel free to explore, use, and contribute to the project to enhance its functionality and features. If you encounter any issues or have suggestions, please submit them through the appropriate channels.