Simple Budget Calculator

Need to calculate Simple Budget? Use this free Simple Budget Calculator in your browser. It works on phone, tablet and computer.

How to use the Simple Budget Calculator

Enter a value for “Total Income”.
Type or paste your input in “Expense Name”.
Enter a value for “Expense Amount”.
Click “Add Expense”.
Your result shows on the page.

Why use this Simple Budget Calculator?

The Simple Budget Calculator is handy for school, work and everyday decisions. It is free, easy to use and works on any device.

Try different values as often as you like
Skip manual maths and avoid simple mistakes
Get a result as soon as you enter your numbers

Simple Budget Calculator – frequently asked questions

Is the Simple Budget Calculator free to use?

Yes. The Simple Budget Calculator on Ilmhunt is free to use, and you do not need to create an account.

Do I need to install anything?

No installation is needed. Open this page and use the tool right away.

Is my data safe when I use the Simple Budget Calculator?

The tool runs in your browser, so what you enter is processed on your own device and is not sent to our servers.

How accurate is the Simple Budget Calculator?

It follows standard formulas and shows the result on the page. For important choices, such as money, health or exams, please double-check the result with an official source or a professional.

More free Calculators

Browse all Calculators on Ilmhunt, or see all free online tools.

Embed this tool on your website — free

Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.

<iframe srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Simple Budget Calculator&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 100%;
            max-width: 400px;
        }

        h1 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }

        .input-group {
            margin-bottom: 15px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 0.9rem;
            color: #555;
        }

        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }

        .button {
            width: 100%;
            padding: 10px;
            background: #27ae60;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            margin-bottom: 15px;
        }

        .button:hover {
            background: #219653;
        }

        .budget-display {
            text-align: center;
            margin-bottom: 20px;
        }

        .budget-display h2 {
            font-size: 1.2rem;
            color: #333;
            margin-bottom: 10px;
        }

        .budget-display p {
            font-size: 1.5rem;
            font-weight: bold;
            color: #27ae60;
        }

        .expense-list {
            margin-top: 20px;
        }

        .expense-list h3 {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 10px;
        }

        .expense-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: #f8f8f8;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .expense-item span {
            font-size: 0.9rem;
            color: #555;
        }

        .expense-item .amount {
            font-weight: bold;
            color: #e74c3c;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1&gt;Simple Budget Calculator&lt;/h1&gt;

        &lt;!-- Income Input --&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;income&quot;&gt;Total Income&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;income&quot; placeholder=&quot;Enter your income&quot;&gt;
        &lt;/div&gt;

        &lt;!-- Expense Input --&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;expenseName&quot;&gt;Expense Name&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;expenseName&quot; placeholder=&quot;Enter expense name&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;expenseAmount&quot;&gt;Expense Amount&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;expenseAmount&quot; placeholder=&quot;Enter expense amount&quot;&gt;
        &lt;/div&gt;
        &lt;button class=&quot;button&quot; id=&quot;addExpense&quot;&gt;Add Expense&lt;/button&gt;

        &lt;!-- Budget Display --&gt;
        &lt;div class=&quot;budget-display&quot;&gt;
            &lt;h2&gt;Remaining Budget&lt;/h2&gt;
            &lt;p id=&quot;remainingBudget&quot;&gt;$0.00&lt;/p&gt;
        &lt;/div&gt;

        &lt;!-- Expense List --&gt;
        &lt;div class=&quot;expense-list&quot;&gt;
            &lt;h3&gt;Expenses&lt;/h3&gt;
            &lt;div id=&quot;expenses&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        class BudgetCalculator {
            constructor() {
                this.income = 0;
                this.expenses = [];
                this.initialize();
            }

            initialize() {
                this.incomeInput = document.getElementById('income');
                this.expenseNameInput = document.getElementById('expenseName');
                this.expenseAmountInput = document.getElementById('expenseAmount');
                this.addExpenseButton = document.getElementById('addExpense');
                this.remainingBudgetDisplay = document.getElementById('remainingBudget');
                this.expensesList = document.getElementById('expenses');

                this.addExpenseButton.addEventListener('click', () =&gt; this.addExpense());
                this.incomeInput.addEventListener('input', () =&gt; this.updateBudget());
                this.loadBudget();
            }

            addExpense() {
                const name = this.expenseNameInput.value.trim();
                const amount = parseFloat(this.expenseAmountInput.value);

                if (name &amp;&amp; amount &gt; 0) {
                    this.expenses.push({ name, amount });
                    this.expenseNameInput.value = '';
                    this.expenseAmountInput.value = '';
                    this.updateBudget();
                    this.renderExpenses();
                }
            }

            updateBudget() {
                this.income = parseFloat(this.incomeInput.value) || 0;
                const totalExpenses = this.expenses.reduce((sum, expense) =&gt; sum + expense.amount, 0);
                const remainingBudget = this.income - totalExpenses;
                this.remainingBudgetDisplay.textContent = `${remainingBudget.toFixed(2)}`;
                this.saveBudget();
            }

            renderExpenses() {
                this.expensesList.innerHTML = this.expenses
                    .map(
                        (expense) =&gt; `
                        &lt;div class=&quot;expense-item&quot;&gt;
                            &lt;span&gt;${expense.name}&lt;/span&gt;
                            &lt;span class=&quot;amount&quot;&gt;-${expense.amount.toFixed(2)}&lt;/span&gt;
                        &lt;/div&gt;
                    `
                    )
                    .join('');
            }

            saveBudget() {
                const budgetData = {
                    income: this.income,
                    expenses: this.expenses,
                };
                localStorage.setItem('budgetData', JSON.stringify(budgetData));
            }

            loadBudget() {
                const budgetData = JSON.parse(localStorage.getItem('budgetData')) || {
                    income: 0,
                    expenses: [],
                };
                this.income = budgetData.income;
                this.expenses = budgetData.expenses;
                this.incomeInput.value = this.income;
                this.updateBudget();
                this.renderExpenses();
            }
        }

        const budgetCalculator = new BudgetCalculator();
    &lt;/script&gt;
&lt;style&gt;html,body{height:auto!important;min-height:0!important;max-height:none!important}&lt;/style&gt;&lt;script&gt;(function(){function wpcPost(){try{parent.postMessage({wpcId:209,wpcH:document.body.scrollHeight},'*');}catch(e){}}window.addEventListener('load',wpcPost);try{new MutationObserver(wpcPost).observe(document.body,{childList:true,subtree:true,attributes:true});}catch(e){}window.addEventListener('resize',wpcPost);setInterval(wpcPost,600);})();&lt;/script&gt;&lt;/body&gt;
&lt;/html&gt;" id="wpc-frame-209" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe>
<p><a href="https://ilmhunt.com/simple-budget-calculator/" target="_blank" rel="noopener">Simple Budget Calculator</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — free online tools</p>