Expense Tracker Card using Tailwind CSS & JavaScript

Last Updated : 07 Mar, 2024

Expense Tracker in Tailwind CSS is a financial management tool that helps users monitor their spending habits. It allows users to record and categorize their expenses, set budgets, and track their financial progress over time. The system is built using Tailwind CSS, a utility-first CSS framework, which ensures a responsive and visually appealing design.

Approach to create Expense Tracker Card :

Begin with a basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags. Import external resources like Tailwind CSS for styling.
Create a container div with Tailwind CSS classes for styling. Inside the container, include input fields for entering the expense description and amount.
Add a button for adding expenses. Use an event listener to trigger the addition of a new expense item to the list.
Use JavaScript to handle the addition of expenses, editing, and deleting expenses. Define functions to create new expense items, edit existing items, and delete items from the list.
Display the list of expenses in a div with an id of “expenseList”. Use the innerHTML property to update the content of the div. Include buttons for editing and deleting each expense item.

Example: Implementation to design Expense Tracker.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Expense Tracker</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-100 h-screen flex 
             flex-col justify-center items-center">
    <div class="bg-white p-8 rounded-lg shadow-md w-full 
                md:w-1/2 lg:w-1/3 border-2 border-green-600">
        <h1 class="text-3xl font-bold text-center mb-8">
              Expense Tracker
          </h1>
        <div class="flex flex-col mb-4">
            <label for="expense" class="text-lg font-semibold mb-2">
                  Expense Description:
              </label>
            <input type="text" id="expense"
                   class="border border-gray-300 rounded-md 
                          py-2 px-3 focus:outline-none">
        </div>
        <div class="flex flex-col mb-4">
            <label for="amount" class="text-lg font-semibold mb-2">
                  Amount (INR):
              </label>
            <input type="number" id="amount"
                   class="border border-gray-300 rounded-md 
                          py-2 px-3 focus:outline-none">
        </div>
        <button id="addExpense"
                class="bg-green-500 text-white px-6 py-2 
                       rounded-md self-center mt-4 focus:outline-none">
            Add Expense
          </button>
        <div id="expenseList" class="mt-8">
            <h2 class="text-xl font-semibold mb-4">
                  Expense List:
              </h2>
            <ul id="expenses" class="list-disc pl-6">
            </ul>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const addExpenseButton = document.getElementById("addExpense");
            const expenseList = document.getElementById("expenses");
            addExpenseButton.addEventListener("click", function () {
                const expenseDescription = document.getElementById("expense")
                                                   .value;
                const expenseAmount = document.getElementById("amount").value;
                if (expenseDescription.trim() === "" || isNaN(expenseAmount)){
                    alert(`Please enter a valid 
                           expense description and amount.`);
                    return;
                }
                const expenseItem = document.createElement("li");
                expenseItem.textContent = `${expenseDescription}: 
                                           ₹${expenseAmount}`;
                expenseItem.classList.add("mb-2");
                const editButton = document.createElement("button");
                editButton.textContent = "Edit";
                editButton.classList.add(
                      "bg-blue-500", "text-white", 
                      "px-3", "py-1", "rounded-md", "ml-2", 
                      "focus:outline-none");
                editButton.addEventListener("click", function () {
                    const newDescription = 
                          prompt("Enter new description:", expenseDescription);
                    const newAmount = 
                          prompt("Enter new amount:", expenseAmount);
                    if (newDescription !== null && newAmount !== null) {
                        expenseItem.textContent = `${newDescription}: 
                                                   ₹${newAmount}`;
                    }
                });
                const deleteButton = document.createElement("button");
                deleteButton.textContent = "Delete";
                deleteButton.classList.add(
                      "bg-red-500", "text-white", "px-3", "py-1", "rounded-md", 
                      "ml-2", "focus:outline-none");
                deleteButton.addEventListener("click", function () {
                    expenseItem.remove();
                });
                expenseItem.appendChild(editButton);
                expenseItem.appendChild(deleteButton);
                expenseList.appendChild(expenseItem);
                document.getElementById("expense").value = "";
                document.getElementById("amount").value = "";
            });
        });
    </script>
</body>
 
</html>