<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Net Worth Expense Tracker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Expense Tracker</h1>

    <div class="input-group">
      <label for="totalIncome">Total Income:</label>
      <input type="number" id="totalIncome" placeholder="Enter your income" min="0" required>
      <button class="action-btn" id="totalIncomeBtn">Set Income</button>
    </div>

    <form id="expenseForm">
      <div class="input-group">
        <label for="expenseName">Expense Name:</label>
        <input type="text" id="expenseName" placeholder="Enter expense name" required>
      </div>
      <div class="input-group">
        <label for="expenseAmount">Expense Amount:</label>
        <input type="number" id="expenseAmount" placeholder="Enter expense amount" min="0" required>
      </div>
      <div class="input-group">
        <label for="expenseCategory">Category:</label>
        <select id="expenseCategory" required>
          <option value="Housing">Housing</option>
          <option value="Utilities">Utilities</option>
          <option value="Insurance">Insurance</option>
          <option value="Groceries">Groceries</option>
          <option value="Transportation">Transportation</option>
          <option value="Healthcare">Healthcare</option>
          <option value="Dining Out">Dining Out</option>
          <option value="Entertainment">Entertainment</option>
          <option value="Clothing">Clothing</option>
          <option value="Debt">Debt</option>
          <option value="Parenting">Parenting Expenses</option>
          <option value="Savings">Savings</option>
        </select>
      </div>
      <button type="submit" class="action-btn">Add Expense</button>
    </form>

    <div class="currency-group">
      <label for="currencySelect">Currency:</label>
      <select id="currencySelect">
        <option value="USD">$ USD</option>
        <option value="INR">₹ INR</option>
        <option value="IDR">Rp IDR</option>
        <option value="LKR">රු LKR</option>
        <option value="AED">د.إ AED</option>
      </select>
    </div>

    <div class="summary">
      <p>Total Expenses: <span id="totalExpenses">0.00</span></p>
      <p>Remaining Balance: <span id="remainingBalance">0.00</span></p>
    </div>

    <ul id="expenseList" class="expense-list"></ul>

    <div class="buttons">
      <button id="exportCsvBtn" class="action-btn">Export to CSV</button>
      <button id="shareAppBtn" class="action-btn">Share App</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 50px auto;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

.input-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
}

input, select, button {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}

.action-btn {
  background-color: #28a745;
  border: none;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  margin: 5px 0;
}

.action-btn:hover {
  background-color: #218838;
}

.currency-group {
  margin-top: 20px;
}

.summary {
  text-align: center;
  margin-top: 20px;
}

.summary p {
  font-size: 18px;
}

.expense-list {
  list-style-type: none;
  padding: 0;
}

.expense-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}

.expense-item button {
  margin-left: 5px;
  background-color: #f44336;
  color: white;
  border: none;
  cursor: pointer;
}

.expense-item button:hover {
  opacity: 0.8;
}

.buttons {
  text-align: center;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .container {
    margin: 20px;
    padding: 15px;
  }
}
document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("expenseForm");
  const totalIncome = document.getElementById("totalIncome");
  const expenseList = document.getElementById("expenseList");
  const totalExpenses = document.getElementById("totalExpenses");
  const remainingBalance = document.getElementById("remainingBalance");
  const currencySelect = document.getElementById("currencySelect");

  let state = {
    income: 0,
    expenses: 0,
    currency: currencySelect.value,
  };

  const updateSummary = () => {
    totalExpenses.textContent = `${state.currency} ${state.expenses.toFixed(2)}`;
    remainingBalance.textContent = `${state.currency} ${(state.income - state.expenses).toFixed(2)}`;
  };

  const addExpense = (name, amount, category) => {
    const li = document.createElement("li");
    li.classList.add("expense-item");
    li.innerHTML = `
      <span>${name} (${category})</span>
      <span>${state.currency} ${amount.toFixed(2)}</span>
      <button class="delete-btn">Delete</button>
    `;
    expenseList.appendChild(li);

    li.querySelector(".delete-btn").addEventListener("click", () => deleteExpense(li, amount));
  };

  const deleteExpense = (li, amount) => {
    state.expenses -= amount;
    li.remove();
    updateSummary();
  };

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const expenseName = document.getElementById("expenseName").value.trim();
    const expenseAmount = parseFloat(document.getElementById("expenseAmount").value);
    const expenseCategory = document.getElementById("expenseCategory").value;

    if (!expenseName || isNaN(expenseAmount)) return alert("Please enter valid expense details.");

    addExpense(expenseName, expenseAmount, expenseCategory);
    state.expenses += expenseAmount;
    updateSummary();
    form.reset();
  });

  totalIncome.addEventListener("input", (e) => {
    state.income = parseFloat(e.target.value);
    updateSummary();
  });

  currencySelect.addEventListener("change", (e) => {
    state.currency = e.target.value;
    updateSummary();
  });

  document.getElementById("exportCsvBtn").addEventListener("click", () => {
    const expensesData = [["Expense Name", "Category", "Amount"]];
    document.querySelectorAll(".expense-item").forEach((item) => {
      const name = item.querySelector("span").textContent.split(" (")[0];
      const category = item.querySelector("span").textContent.split(" (")[1].slice(0, -1);
      const amount = parseFloat(item.querySelector("span:last-child").textContent.split(" ")[1]);
      expensesData.push([name, category, amount]);
    });
    const csvContent = expensesData.map((row) => row.join(",")).join("\n");
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
    const link = document.createElement("a");
    link.setAttribute("href", URL.createObjectURL(blob));
    link.setAttribute("download", "expenses.csv");
    link.click();
  });

  document.getElementById("shareAppBtn").addEventListener("click", () => {
    const shareText = "Check out this amazing Expense Tracker App!";
    if (navigator.share) {
      navigator.share({
        title: "Expense Tracker",
        text: shareText,
      });
    } else {
      alert("Share functionality is not available in your browser.");
    }
  });
});
const addExpense = (name, amount, category) => {
  // Ensure name is in sentence case
  const formattedName = name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();

  const li = document.createElement("li");
  li.classList.add("expense-item");
  li.innerHTML = `
    <span>${formattedName} (${category})</span>
    <span>${state.currency} ${amount.toFixed(2)}</span>
    <button class="delete-btn">Delete</button>
  `;
  expenseList.appendChild(li);

  li.querySelector(".delete-btn").addEventListener("click", () => deleteExpense(li, amount));
};
const addExpense = (name, amount, category) => {
  // Function to capitalize the first letter of each word (sentence case)
  const toSentenceCase = (str) => {
    return str
      .toLowerCase()
      .split(' ')
      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ');
  };

  const formattedName = toSentenceCase(name);  // Apply sentence case to the name
  const formattedCategory = toSentenceCase(category); // Apply sentence case to the category

  const li = document.createElement("li");
  li.classList.add("expense-item");
  li.innerHTML = `
    <span>${formattedName} (${formattedCategory})</span>
    <span>${state.currency} ${amount.toFixed(2)}</span>
    <button class="delete-btn">Delete</button>
  `;
  expenseList.appendChild(li);

  li.querySelector(".delete-btn").addEventListener("click", () => deleteExpense(li, amount));
};
const addExpense = (name, amount, category) => {
  // Function to capitalize the first letter of each word in sentence case
  const toSentenceCase = (str) => {
    return str
      .toLowerCase()
      .replace(/\b\w/g, char => char.toUpperCase()); // Capitalizes the first letter of each word
  };

  const formattedName = toSentenceCase(name);  // Apply sentence case to the name
  const formattedCategory = toSentenceCase(category); // Apply sentence case to the category

  const li = document.createElement("li");
  li.classList.add("expense-item");
  li.innerHTML = `
    <span>${formattedName} (${formattedCategory})</span>
    <span>${state.currency} ${amount.toFixed(2)}</span>
    <button class="delete-btn">Delete</button>
  `;
  expenseList.appendChild(li);

  li.querySelector(".delete-btn").addEventListener("click", () => deleteExpense(li, amount));
};