Open In App

How to create Budget Management Tool using JavaScript and Tailwind CSS ?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

A budget management tool is a web application designed to help individuals or businesses track their income, expenses, and savings to maintain financial stability and achieve their goals. In this project, we will develop a budget management tool using the TailwindCSS a utility-first CSS framework that allows for rapid UI development.

Output Preview: Let us have a look at how the final output will look like.

aq1111111

Approach to create Budget Management Tool

  • Create an HTML file with the necessary structure for the budget management tool.
  • Use Tailwind CSS classes to style the tool's elements and layout, ensuring it is visually appealing and responsive.
  • Add input fields for income, expenses, and savings along with the buttons to add and remove transactions.
  • Implement JavaScript functionality to handle the logic of adding and removing transactions when the corresponding buttons are clicked.
  • Use event listeners to capture button clicks and execute the appropriate actions such as updating the displayed transactions or performing calculations.
  • Ensure the application is user-friendly and intuitive to use, providing the user feedback when transactions are added or removed.

Example: Implementation of Budget management tool in Tailwind CSS

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Budget Management Tool</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body class="bg-gray-100">
    <div class="flex flex-col items-center 
                justify-center min-h-screen">
        <div class="bg-white p-8 rounded-lg 
                    shadow-lg max-w-md w-full">
            <h2 class="text-2xl font-semibold 
                       text-gray-800 mb-4">
                Budget Management Tool
            </h2>
            <form id="budgetForm">
                <label for="income" class="text-gray-700">
                    Income:
                </label>
                <input type="number" 
                       id="income" 
                       name="income" 
                       class="w-full border border-green-500
                              rounded-lg p-2 mb-4">
                <label for="expenseAmount" class="text-gray-700">
                    Expense Amount:
                </label>
                <input type="number" 
                       id="expenseAmount" 
                       name="expenseAmount" 
                       class="w-full border border-green-500
                              rounded-lg p-2 mb-4">
                <label for="expenseCategory" class="text-gray-700">
                    Expense Category:
                </label>
                <select id="expenseCategory" 
                        name="expenseCategory" 
                        class="w-full border border-green-500
                               rounded-lg p-2 mb-4">
                    <option value="Groceries">Groceries</option>
                    <option value="Utilities">Utilities</option>
                    <option value="Transportation">
                        Transportation
                    </option>
                    <option value="Entertainment">
                        Entertainment
                    </option>
                </select>
                <button type="button" 
                        id="addExpense" 
                        class="bg-blue-500 hover:bg-blue-600 
                               text-white rounded-lg px-4 py-2 
                               w-full mb-4">
                    Add Expense
                </button>
                <div id="expenseList" class="mb-4"></div>
                <div class="flex justify-between items-center mb-4">
                    <span class="text-gray-700">
                        Total Expenses:
                    </span>
                    <span id="totalExpenses" 
                          class="text-green-600 font-semibold">
                    </span>
                </div>
                <button type="submit" 
                        class="bg-green-500 hover:bg-green-600
                               text-white rounded-lg px-4 py-2 
                               w-full">
                    Calculate
                </button>
            </form>
            <div id="savings" class="mt-4 text-gray-700"></div>
        </div>
    </div>
    <script>
        let expenses = [];
        document.getElementById('addExpense')
            .addEventListener('click', function () {
                const expenseAmount = parseFloat(document
                    .getElementById('expenseAmount')
                    .value);
                const expenseCategory = document
                    .getElementById('expenseCategory')
                    .value;
                if (!isNaN(expenseAmount) && expenseCategory) {
                    expenses.push({
                        amount: expenseAmount,
                        category: expenseCategory
                    });
                    renderExpenseList();
                } else {
                    alert(`Please enter a valid expense 
                              amount and select a category.`);
                }
            });
        function renderExpenseList() {
            const expenseListElement = document.getElementById('expenseList');
            expenseListElement.innerHTML = '';
            let totalExpenses = 0;
            expenses.forEach(expense => {
                const expenseItem = document.createElement('div');
                expenseItem.textContent = `${expense.category}: 
                $${expense.amount.toFixed(2)}`;
                expenseListElement.appendChild(expenseItem);
                totalExpenses += expense.amount;
            });
            document.getElementById('totalExpenses')
                .textContent = `$${totalExpenses.toFixed(2)}`;
        }
        document.getElementById('budgetForm')
            .addEventListener('submit', function (event) {
                event.preventDefault();
                const income = parseFloat(document.getElementById('income')
                    .value);
                const totalExpenses = expenses.reduce((acc, expense) =>
                    acc + expense.amount, 0);
                if (!isNaN(income)) {
                    const savings = income - totalExpenses;
                    document.getElementById('savings')
                        .textContent = `Savings: $${savings.toFixed(2)}`;
                } else {
                    document.getElementById('savings')
                        .textContent = "Please enter a valid income amount.";
                }
            });
    </script>
</body>

</html>

Output:

budgetgif
Output

M
maha123
Improve
Article Tags :

Explore

Lightbox