acesdit · Tejas-Santosh-Nalawade · Oct 23, 2025 · Oct 23, 2025
diff --git a/Domains/Frontend/MiniProjects/PersonalBudgetTracker/README.md 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
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Personal Budget Tracker</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="container">
+    <h1>Personal Budget Tracker 💰</h1>
+
+    <div class="balance">
+      <h2>Your Balance</h2>
+      <p id="balance">$0.00</p>
+    </div>
+
+    <div class="income-expense">
+      <div>
+        <h3>Income</h3>
+        <p id="money-plus" class="money plus">+$0.00</p>
+      </div>
+      <div>
+        <h3>Expense</h3>
+        <p id="money-minus" class="money minus">-$0.00</p>
+      </div>
+    </div>
+
+    <h3>History</h3>
+    <ul id="list" class="list"></ul>
+
+    <h3>Add new transaction</h3>
+    <form id="form">
+      <input type="text" id="text" placeholder="Enter description..." required />
+      <input type="number" id="amount" placeholder="Enter amount..." required />
+      <button type="submit">Add transaction</button>
+    </form>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/PersonalBudgetTracker/script.js 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} <span>${sign}$${Math.abs(transaction.amount).toFixed(2)}</span>
+    <button onclick="removeTransaction(${transaction.id})">x</button>
+  `;
+
+  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
@@ -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;
+}