Smart Expense Analyzer | Vijay Pancholi

by Vijay Pancholi

HTML

<div class="app">
  <h1>Smart Expense Analyzer</h1>

  <div class="input-box">
    <input type="text" id="title" placeholder="Expense title (e.g. Pizza, Uber)">
    <input type="number" id="amount" placeholder="Amount">
    <button onclick="addExpense()">Add Expense</button>
  </div>

  <ul id="expenseList"></ul>

  <div class="analysis">
    <h2>Analysis</h2>
    <p id="summary"></p>
    <p id="suggestion"></p>
  </div>
</div>

CSS

body {
  font-family: Arial;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  justify-content: center;
  padding: 40px;
}

.app {
  background: #fff;
  padding: 20px;
  width: 350px;
  border-radius: 10px;
}

.input-box input {
  width: 100%;
  padding: 8px;
  margin: 5px 0;
}

button {
  width: 100%;
  padding: 10px;
  background: #667eea;
  color: white;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

.analysis {
  margin-top: 15px;
  background: #f4f4f4;
  padding: 10px;
}

JavaScript

const expenses = [];

const rules = {
  food: ["pizza", "burger", "coffee", "restaurant"],
  travel: ["uber", "bus", "train", "flight"],
  shopping: ["amazon", "flipkart", "mall"]
};

function detectCategory(title) {
  title = title.toLowerCase();
  for (let category in rules) {
    if (rules[category].some(word => title.includes(word))) {
      return category;
    }
  }
  return "other";
}

function addExpense() {
  const title = document.getElementById("title").value;
  const amount = Number(document.getElementById("amount").value);
  if (!title || !amount) return;

  const category = detectCategory(title);
  expenses.push({ title, amount, category });

  render();
}

function render() {
  const list = document.getElementById("expenseList");
  list.innerHTML = "";

  expenses.forEach(e => {
    const li = document.createElement("li");
    li.textContent = `${e.title} - ₹${e.amount} (${e.category})`;
    list.appendChild(li);
  });

  analyze();
}

function analyze() {
  const total = expenses.reduce((s, e) => s + e.amount, 0);
  const foodTotal = expenses
    .filter(e => e.category === "food")
    .reduce((s, e) => s + e.amount, 0);

  document.getElementById("summary").innerText =
    `Total Spent: ₹${total}`;

  document.getElementById("suggestion").innerText =
    foodTotal > total * 0.4
      ? "⚠ You are spending too much on food."
      : "✅ Spending looks balanced.";
}