Expense Tracker web application using HTML, CSS, and JavaScript.
Tags: codepen, expensetracker, vinkalprajapati, beginners
Published: 2023-07-22 04:03:21

{% codepen https://codepen.io/vinkal-93/pen/BaGPQNq %}

## HTML

```
<!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>

```

## CSS

```
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;
}

```

## Java Script

```
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();
});

```

** I can provide you with a simple Expense Tracker web application using HTML, CSS, and JavaScript. This application will allow users to add and manage their expenses. The data will be stored in the browser's local storage for simplicity.**