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

Last Updated : 04 Mar, 2024

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:

maha123

Improve

Article Tags :

JavaScript

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

Approach to create Budget Management Tool

Similar Reads

Thank You!

What kind of Experience do you want to share?