<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expense Tracker</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Expense Tracker</h1>
    <div class="form-group">
      <input type="text" id="expenseDescription" placeholder="Enter expense description">
      <input type="number" id="expenseAmount" placeholder="Enter amount">
      <button id="addExpenseBtn">Add Expense</button>
    </div>
    <div class="expense-list">
      <h2>Expense List</h2>
      <ul id="expenseList">
        <!-- Expenses will be dynamically added here -->
      </ul>
    </div>
    <div class="total-expenses">
      <h2>Total Expenses: <span id="totalExpensesAmount">0</span></h2>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
}

.form-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.form-group input {
  padding: 10px;
  flex: 1;
  margin-right: 10px;
}

.form-group button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

.expense-list {
  margin-bottom: 20px;
}

.expense-list h2 {
  margin: 0;
}

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

.expense-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.expense-list li:last-child {
  border-bottom: none;
}

.total-expenses h2 {
  margin: 0;
  text-align: right;
}

.total-expenses span {
  font-weight: bold;
}

document.addEventListener("DOMContentLoaded", () => {
  const expenseList = document.getElementById("expenseList");
  const expenseDescriptionInput = document.getElementById("expenseDescription");
  const expenseAmountInput = document.getElementById("expenseAmount");
  const addExpenseBtn = document.getElementById("addExpenseBtn");
  const totalExpensesAmount = document.getElementById("totalExpensesAmount");

  // Retrieve expenses from local storage or set an empty array
  let expenses = JSON.parse(localStorage.getItem("expenses")) || [];

  // Function to update the total expenses amount
  function updateTotalExpenses() {
    const totalExpenses = expenses.reduce((total, expense) => total + expense.amount, 0);
    totalExpensesAmount.textContent = totalExpenses;
  }

  // Function to render the expense list
  function renderExpenses() {
    expenseList.innerHTML = "";
    expenses.forEach((expense, index) => {
      const li = document.createElement("li");
      li.innerHTML = `
        <span>${expense.description}</span>
        <span>${expense.amount}</span>
        <button class="delete-btn" data-index="${index}">Delete</button>
      `;
      expenseList.appendChild(li);
    });
    updateTotalExpenses();
  }

  // Function to add a new expense
  function addExpense() {
    const description = expenseDescriptionInput.value.trim();
    const amount = parseFloat(expenseAmountInput.value);

    if (description === "" || isNaN(amount) || amount <= 0) {
      return;
    }

    const newExpense = { description, amount };
    expenses.push(newExpense);
    localStorage.setItem("expenses", JSON.stringify(expenses));
    renderExpenses();

    // Clear input fields
    expenseDescriptionInput.value = "";
    expenseAmountInput.value = "";
  }

  // Function to delete an expense
  function deleteExpense(index) {
    expenses.splice(index, 1);
    localStorage.setItem("expenses", JSON.stringify(expenses));
    renderExpenses();
  }

  // Event listener for adding an expense
  addExpenseBtn.addEventListener("click", addExpense);

  // Event delegation for deleting an expense
  expenseList.addEventListener("click", (event) => {
    if (event.target.classList.contains("delete-btn")) {
      const index = event.target.dataset.index;
      deleteExpense(index);
    }
  });

  // Initial rendering of expenses
  renderExpenses();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.