diff --git a/Domains/Frontend/MiniProjects/PersonalBudgetTracker/README.md b/Domains/Frontend/MiniProjects/PersonalBudgetTracker/README.md new file mode 100644 index 00000000..16d3a15c --- /dev/null +++ b/Domains/Frontend/MiniProjects/PersonalBudgetTracker/README.md @@ -0,0 +1,46 @@ +# 💰 Personal Budget Tracker + +**Contributor:** [Tanvi2307](https://github.com/Tanvi2307) + +--- + +## 🧾 Description +A **simple and intuitive Personal Budget Tracker web app** built with **HTML**, **CSS**, and **JavaScript**. +Easily track your income and expenses, visualize your balance, and manage your finances — all in one clean, responsive interface. + +--- + +## 🚀 Features +- 💸 **Income & Expense Tracking** – Add and remove transactions with descriptions and amounts. +- 📊 **Real-time Balance Update** – See your current balance, total income, and total expenses instantly. +- 🗑️ **Delete Transactions** – Remove any transaction with a single click. +- 📱 **Responsive Design** – Works seamlessly on desktop and mobile devices. +- ⚡ **Lightweight & Fast** – Pure vanilla JavaScript for smooth performance. + +--- + +## 🧩 Tech Stack +- **HTML5** – Structure and content +- **CSS3** – Styling and responsive layouts +- **JavaScript (Vanilla)** – Interactive logic and DOM manipulation + +--- + +## 💡 Bonus Features +- 📝 Clear and descriptive transaction entries. +- 🛠️ Easy to customize and extend. +- 🎨 Clean UI with intuitive user experience. + +--- + +## 📂 Installation & Usage +1. Clone or download the repo. +2. Open `index.html` in any modern web browser. +3. Start adding your budget entries and keep track of your finances! + +--- + +Feel free to contribute and improve this project! + +--- + diff --git a/Domains/Frontend/MiniProjects/PersonalBudgetTracker/index.html b/Domains/Frontend/MiniProjects/PersonalBudgetTracker/index.html new file mode 100644 index 00000000..33f8a991 --- /dev/null +++ b/Domains/Frontend/MiniProjects/PersonalBudgetTracker/index.html @@ -0,0 +1,42 @@ + + + + + + Personal Budget Tracker + + + +
+

Personal Budget Tracker 💰

+ +
+

Your Balance

+

$0.00

+
+ +
+
+

Income

+

+$0.00

+
+
+

Expense

+

-$0.00

+
+
+ +

History

+ + +

Add new transaction

+
+ + + +
+
+ + + + diff --git a/Domains/Frontend/MiniProjects/PersonalBudgetTracker/script.js b/Domains/Frontend/MiniProjects/PersonalBudgetTracker/script.js new file mode 100644 index 00000000..60e6e619 --- /dev/null +++ b/Domains/Frontend/MiniProjects/PersonalBudgetTracker/script.js @@ -0,0 +1,77 @@ +const balance = document.getElementById('balance'); +const money_plus = document.getElementById('money-plus'); +const money_minus = document.getElementById('money-minus'); +const list = document.getElementById('list'); +const form = document.getElementById('form'); +const text = document.getElementById('text'); +const amount = document.getElementById('amount'); + +let transactions = []; + +function addTransaction(e) { + e.preventDefault(); + + if(text.value.trim() === '' || amount.value.trim() === '') { + alert('Please enter description and amount'); + return; + } + + const transaction = { + id: generateID(), + text: text.value, + amount: +amount.value + }; + + transactions.push(transaction); + addTransactionDOM(transaction); + updateValues(); + text.value = ''; + amount.value = ''; +} + +function generateID() { + return Math.floor(Math.random() * 1000000); +} + +function addTransactionDOM(transaction) { + const sign = transaction.amount < 0 ? '-' : '+'; + const item = document.createElement('li'); + item.classList.add(transaction.amount < 0 ? 'minus' : 'plus'); + + item.innerHTML = ` + ${transaction.text} ${sign}$${Math.abs(transaction.amount).toFixed(2)} + + `; + + list.appendChild(item); +} + +function updateValues() { + const amounts = transactions.map(t => t.amount); + const total = amounts.reduce((acc, item) => acc + item, 0).toFixed(2); + const income = amounts.filter(item => item > 0) + .reduce((acc, item) => acc + item, 0) + .toFixed(2); + const expense = (amounts.filter(item => item < 0) + .reduce((acc, item) => acc + item, 0) * -1) + .toFixed(2); + + balance.innerText = `$${total}`; + money_plus.innerText = `+$${income}`; + money_minus.innerText = `-$${expense}`; +} + +function removeTransaction(id) { + transactions = transactions.filter(transaction => transaction.id !== id); + init(); +} + +function init() { + list.innerHTML = ''; + transactions.forEach(addTransactionDOM); + updateValues(); +} + +form.addEventListener('submit', addTransaction); + +init(); diff --git a/Domains/Frontend/MiniProjects/PersonalBudgetTracker/style.css b/Domains/Frontend/MiniProjects/PersonalBudgetTracker/style.css new file mode 100644 index 00000000..0d5836d4 --- /dev/null +++ b/Domains/Frontend/MiniProjects/PersonalBudgetTracker/style.css @@ -0,0 +1,122 @@ +* { + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f5f5f5; + margin: 0; + padding: 20px; +} + +.container { + max-width: 400px; + background: #fff; + padding: 20px; + margin: 0 auto; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1, h2, h3 { + margin-bottom: 10px; + color: #333; +} + +.balance p { + font-size: 2rem; + margin: 0; +} + +.income-expense { + display: flex; + justify-content: space-between; + margin: 20px 0; +} + +.income-expense div { + flex: 1; + padding: 10px; + border-radius: 5px; + background: #f1f1f1; + margin-right: 10px; +} + +.income-expense div:last-child { + margin-right: 0; +} + +.money { + font-size: 1.5rem; + margin-top: 5px; +} + +.plus { + color: #2ecc71; +} + +.minus { + color: #e74c3c; +} + +.list { + list-style-type: none; + padding: 0; + margin: 0 0 20px 0; + max-height: 200px; + overflow-y: auto; +} + +.list li { + background: #fafafa; + padding: 10px; + margin-bottom: 10px; + border-right: 5px solid; + display: flex; + justify-content: space-between; + align-items: center; +} + +.list li.plus { + border-color: #2ecc71; +} + +.list li.minus { + border-color: #e74c3c; +} + +.list li button { + background: transparent; + border: none; + color: #888; + cursor: pointer; + font-size: 1.2rem; +} + +form input[type="text"], +form input[type="number"] { + width: calc(50% - 10px); + padding: 10px; + margin-right: 10px; + border-radius: 5px; + border: 1px solid #ccc; +} + +form input[type="number"] { + margin-right: 0; +} + +form button { + width: 100%; + padding: 10px; + background: #3498db; + border: none; + color: white; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; +} + +form button:hover { + background: #2980b9; +}