Expense Tracker

A modern, beginner‑friendly Expense Tracker built with HTML, CSS, and JavaScript. This project focuses on clean UI design, practical DOM manipulation, and real‑time expense calculations — all wrapped in a smooth, responsive layout with a subtle gradient background.

✨ Features

• Add income and expense transactions

• Automatic calculation of balance, total income, and total expenses

• Organized transaction list with clear formatting

• Modern UI using Poppins font and a layered gradient background

• Responsive layout that stays centered and readable on all screen sizes

🛠️ Tech Stack

• HTML – semantic structure

• CSS – gradient background, checkerboard texture, responsive layout

• JavaScript – dynamic rendering, form handling, real‑time calculations

📌 How It Works

1. Enter a title and amount

2. Choose whether it’s income or an expense

3. Submit the form

4. The tracker updates totals instantly and displays your transaction in the list

💡 Why I Built This

I built this Expense Tracker to strengthen my core front‑end skills and practice writing clean, functional JavaScript. It gave me hands‑on experience with DOM manipulation, dynamic UI updates, and structuring a small project from scratch. I also used this project to improve my design sense — experimenting with gradients, layout, and readability — while building something practical that mirrors real‑world app behavior.

🚀 Planned Enhancements

• Delete & edit transaction options

• Category tags (Food, Bills, Entertainment, etc.)

• LocalStorage support for saving data

• Improved mobile layout and animations

📸 Screenshots

Coming soon

🔗 Live Demo

https://romie321.github.io/expense-tracker/

Author

Ramiro Aguilera

Front-end Developer focused on clean UI, practical tools, and continuous learning.