DEV Community

Vinkal Prajapati
Vinkal Prajapati

Posted on

Expense Tracker web application using HTML, CSS, and JavaScript.

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

** 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.**

Top comments (0)