Skip to content

Latest commit

 

History

History
88 lines (57 loc) · 2.22 KB

File metadata and controls

88 lines (57 loc) · 2.22 KB

💰 Expense Tracker - Personal Finance Manager

A modern, responsive expense tracking application built with vanilla JavaScript to help users manage spending, track expenses, and gain insights into financial habits.


🌐 Live Demo

🔗 View Live App

Live Demo


🎯 Overview

This project is a client-side expense tracker that allows users to add, manage, and analyze their expenses in real time. It focuses on clean UI design, responsive layouts, and efficient data handling using browser storage.


✨ Features

💡 Core Functionality

  • Add, delete, and manage expenses with categories
  • Real-time updates of total spending and expense count
  • Persistent data storage using LocalStorage

🎨 UI & User Experience

  • Clean and responsive design (mobile, tablet, desktop)
  • Smooth animations and visual feedback
  • Keyboard support for faster input
  • User-friendly error handling and validation

📊 Organization

  • Categorized expenses with color-coded labels
  • Automatic sorting by most recent entries
  • Clear and intuitive layout for easy tracking

🛠️ Tech Stack

  • Frontend: HTML5, CSS3, JavaScript (ES6)
  • Storage: LocalStorage API
  • Styling: CSS Grid, Flexbox
  • Tools: Font Awesome, Google Fonts

📂 Project Structure

expense-tracker/ ├── index.html ├── style.css ├── script.js └── README.md


🚀 Getting Started

git clone https://github.com/yourusername/expense-tracker.git
cd expense-tracker
open index.html

💡 Key Highlights

  • Implemented LocalStorage for persistent client-side data
  • Built dynamic UI updates using vanilla JavaScript
  • Designed responsive layouts for cross-device compatibility
  • Focused on usability, performance, and clean code structure

Video Demo

Screen.Recording.2026-04-03.121905.1.mp4

📫 Contact