Budżet Domowy

Grafika Kalkulator

Zapanuj nad domowym budżetem – prosto i czytelnie

Masz dość chaosu w finansach i arkuszy, które żyją własnym życiem? Nasza aplikacja do budżetu domowego pomoże Ci zapanować nad dochodami i wydatkami miesiąc po miesiącu – w przejrzystej, tabelarycznej formie, bez zbędnych komplikacji.

Co zyskujesz?

Pełną kontrolę nad finansami – dochody, rachunki, codzienne i okazjonalne wydatki w jednym miejscu
Automatyczne sumy i saldo – wszystko liczy się samo, bez ręcznych obliczeń
Czytelne wykresy – zobacz na pierwszy rzut oka, gdzie trafiają Twoje pieniądze i jak zmienia się saldo
Automatyczny zapis danych – wracasz dokładnie tam, gdzie skończyłeś, nawet po odświeżeniu strony
Elastyczność – dodawaj i usuwaj pozycje tak, jak naprawdę wygląda Twoje życie

Dlaczego warto?

Bo budżet domowy nie musi być skomplikowany. Ta aplikacja łączy prostotę arkusza kalkulacyjnego z automatyzacją i wizualizacją, które naprawdę pomagają podejmować lepsze decyzje finansowe.

Mniej zgadywania. Więcej świadomości. Lepsze decyzje finansowe.

Zacznij planować swój budżet świadomie już dziś.

Jak obsługiwać aplikację?

Wypełnij wszystkie edytowalne pola w tabeli lub pozostaw wartości zerowe. Sumy dochodów i wydatków podliczą się automatycznie. Symulacja dotyczy jednego roku rozliczeniowego. Wartości zapiszą się w Local Storage i zostaną wczytane podczas ponownego załadowania aplikacji.

Grupa	Styczeń	Luty	Marzec	Kwiecień	Maj	Czerwiec	Lipiec	Sierpień	Wrzesień	Październik	Listopad	Grudzień	Suma
Dochody
	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00
Suma	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00
Rachunki i płatności
	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00
Suma	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00
Codzienne wydatki
	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00
Suma	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00
Wydatki okazjonalne
	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00
Suma	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00
Bilans
	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00	0.00

Dochody vs Wydatki

Bilans miesięczny

Pokaż kod tej aplikacji

Kod po stronie przeglądarki

<div id="app">
  <div class="mb-3">
    <button class="btn btn-sm btn-success" onclick="addRow('income')">+ Dochód</button>
    <button class="btn btn-sm btn-secondary" onclick="addRow('bills')">+ Rachunek</button>
    <button class="btn btn-sm btn-secondary" onclick="addRow('daily')">+ Codzienny</button>
    <button class="btn btn-sm btn-secondary" onclick="addRow('occasional')">+ Okazjonalny</button>
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-sm">
      <thead>
        <tr>
          <th>Grupa</th>
          <th>Styczeń</th>
          <th>Luty</th>
          <th>Marzec</th>
          <th>Kwiecień</th>
          <th>Maj</th>
          <th>Czerwiec</th>
          <th>Lipiec</th>
          <th>Sierpień</th>
          <th>Wrzesień</th>
          <th>Październik</th>
          <th>Listopad</th>
          <th>Grudzień</th>
          <th>Suma</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="4" class="fw-medium">Dochody</td>
        </tr>
        <tr class="budget-row" data-section="income">
          <td contenteditable="true"></td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td>0.00</td>
        </tr>
        <tr class="fw-medium section-sum" data-sum="income">
          <td>Suma</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
        </tr>
        <tr>
          <td colspan="4" class="fw-medium">Rachunki i płatności</td>
        </tr>
        <tr class="budget-row" data-section="bills">
          <td contenteditable="true"></td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td>0.00</td>
        </tr>
        <tr class="fw-medium section-sum" data-sum="bills">
          <td>Suma</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
        </tr>
        <tr>
          <td colspan="4" class="fw-medium">Codzienne wydatki</td>
        </tr>
        <tr class="budget-row" data-section="daily">
          <td contenteditable="true"></td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td>0.00</td>
        </tr>
        <tr class="fw-medium section-sum" data-sum="daily">
          <td>Suma</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
        </tr>
        <tr>
          <td colspan="4" class="fw-medium">Wydatki okazjonalne</td>
        </tr>
        <tr class="budget-row" data-section="occasional">
          <td contenteditable="true"></td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td contenteditable="true">0.00</td>
          <td>0.00</td>
        </tr>
        <tr class="fw-medium section-sum" data-sum="occasional">
          <td>Suma</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
        </tr>
        <tr>
          <td colspan="4" class="fw-medium">Bilans</td>
        </tr>
        <tr class="fw-medium" id="final-balance">
          <td></td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
          <td>0.00</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="row mt-5">
    <div class="col-md-6">
      <h3 class="h5">Dochody vs Wydatki</h3>
      <canvas id="incomeExpenseChart"></canvas>
    </div>
    <div class="col-md-6">
      <h3 class="h5">Bilans miesięczny</h3>
      <canvas id="balanceChart"></canvas>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const MONTH_COLUMNS = 12;
const STORAGE_KEY = "budgetSimulatorData";
let incomeExpenseChart = null;
let balanceChart = null;

const MONTH_LABELS = [
    "Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec",
    "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"
];

function saveToLocalStorage() {
    const data = [];

    document.querySelectorAll(".budget-row").forEach(row => {
        const cells = row.children;
        const item = {
            section: row.dataset.section,
            name: cells[0].textContent.trim(),
            months: []
        };

        for (let i = 1; i <= MONTH_COLUMNS; i++) {
            item.months.push(parseFloat(cells[i].textContent.replace(',', '.')) || 0);
        }

        data.push(item);
    });

    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}

function loadFromLocalStorage() {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return;

    const data = JSON.parse(raw);

    // 1️ Zapamiętaj szablony sekcji
    const templates = {};
    document.querySelectorAll(".budget-row").forEach(row => {
        const section = row.dataset.section;
        if (!templates[section]) {
            templates[section] = row.cloneNode(true);
        }
    });

    // 2️ Usuń WSZYSTKIE wiersze danych

    let isIncome = false;
    let isBills = false;
    let isDaily = false;
    let isOccasional = false;
    let countIncome = 0;
    let countBills = 0;
    let countDaily = 0;
    let countOccasional = 0;

    data.forEach(item => {
        const section = item.section;
        if (section == 'income') isIncome = true;
        if (section == 'bills') isBills = true;
        if (section == 'daily') isDaily = true;
        if (section == 'occasional') isOccasional = true;
    });

    document.querySelectorAll(".budget-row").forEach(row => {
        const section = row.dataset.section;
        if ((section == 'income') && isIncome) {
            row.remove();
        }
        if ((section == 'bills') && isBills) {
            row.remove();
        }
        if ((section == 'daily') && isDaily) {
            row.remove();
        }
        if ((section == 'occasional') && isOccasional) {
            row.remove();
        }
    });

    // 3️ Odtwórz dane
    data.forEach(item => {
        const template = templates[item.section];
        if (!template) return;

        const newRow = template.cloneNode(true);

        newRow.querySelectorAll("td").forEach((td, i) => {

            if (i === 0) {
                if (item.section == 'income') {
                    if (countIncome == 0) {
                        td.innerHTML = `${item.name.replace(/×/g, '')}`;
                        countIncome++;
                    }
                    else {
                        td.innerHTML = `${item.name.replace(/×/g, '')}
                            <button class="btn btn-sm btn-danger ms-2 px-1 py-0" onclick="removeRow(this)">×</button>`;
                    }
                }
                if (item.section == 'bills') {
                    if (countBills == 0) {
                        td.innerHTML = `${item.name.replace(/×/g, '')}`;
                        countBills++;
                    }
                    else {
                        td.innerHTML = `${item.name.replace(/×/g, '')}
                            <button class="btn btn-sm btn-danger ms-2 px-1 py-0" onclick="removeRow(this)">×</button>`;
                    }
                }
                if (item.section == 'daily') {
                    if (countDaily == 0) {
                        td.innerHTML = `${item.name.replace(/×/g, '')}`;
                        countDaily++;
                    }
                    else {
                        td.innerHTML = `${item.name.replace(/×/g, '')}
                            <button class="btn btn-sm btn-danger ms-2 px-1 py-0" onclick="removeRow(this)">×</button>`;
                    }
                }
                if (item.section == 'occasional') {
                    if (countOccasional == 0) {
                        td.innerHTML = `${item.name.replace(/×/g, '')}`;
                        countOccasional++;
                    }
                    else {
                        td.innerHTML = `${item.name.replace(/×/g, '')}
                            <button class="btn btn-sm btn-danger ms-2 px-1 py-0" onclick="removeRow(this)">×</button>`;
                    }
                }
            } else if (i <= MONTH_COLUMNS) {
                td.textContent = (item.months[i - 1] ?? 0).toFixed(2);
            } else {
                td.textContent = "0.00";
            }
        });

        // wstaw przed wierszem sumy danej sekcji
        const sumRow = document.querySelector(`tr.section-sum[data-sum="${item.section}"]`);
        sumRow.before(newRow);
    });

    recalcAll();
}

document.addEventListener("input", e => {
    if (e.target.closest("td[contenteditable]")) {
        recalcAll();
        saveToLocalStorage();
    }
});

function getMonthlyData() {
    const income = document.querySelector('[data-sum="income"]');
    const bills = document.querySelector('[data-sum="bills"]');
    const daily = document.querySelector('[data-sum="daily"]');
    const occasional = document.querySelector('[data-sum="occasional"]');

    const incomeData = [];
    const expenseData = [];
    const balanceData = [];

    for (let col = 1; col <= MONTH_COLUMNS; col++) {
        const inc = parseFloat(income.children[col].textContent) || 0;
        const exp =
            (parseFloat(bills.children[col].textContent) || 0) +
            (parseFloat(daily.children[col].textContent) || 0) +
            (parseFloat(occasional.children[col].textContent) || 0);

        incomeData.push(inc);
        expenseData.push(exp);
        balanceData.push(inc - exp);
    }

    return {
        incomeData,
        expenseData,
        balanceData
    };
}

function renderIncomeExpenseChart() {
    const ctx = document.getElementById("incomeExpenseChart");
    if (!ctx) return;

    const {
        incomeData,
        expenseData
    } = getMonthlyData();

    if (incomeExpenseChart) incomeExpenseChart.destroy();

    incomeExpenseChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels: MONTH_LABELS,
            datasets: [{
                    label: "Dochody",
                    data: incomeData,
                    backgroundColor: "rgba(25, 135, 84, 0.7)"
                },
                {
                    label: "Wydatki",
                    data: expenseData,
                    backgroundColor: "rgba(220, 53, 69, 0.7)"
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function renderBalanceChart() {
    const ctx = document.getElementById("balanceChart");
    if (!ctx) return;

    const {
        balanceData
    } = getMonthlyData();

    if (balanceChart) balanceChart.destroy();

    balanceChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels: MONTH_LABELS,
            datasets: [{
                label: "Bilans",
                data: balanceData,
                backgroundColor: balanceData.map(v =>
                    v >= 0 ? "rgba(25, 135, 84, 0.7)" : "rgba(220, 53, 69, 0.7)"
                )
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function updateCharts() {
    renderIncomeExpenseChart();
    renderBalanceChart();
}


/* =========================
   DODAWANIE WIERSZA
========================= */
function addRow(section) {
    const template = document.querySelector(`tr.budget-row[data-section="${section}"]`);
    const sumRow = template.nextElementSibling;

    const newRow = template.cloneNode(true);
    newRow.querySelectorAll("td").forEach((td, i) => {
        if (i === 0) {
            td.innerHTML = 'Nowa pozycja <button class="btn btn-sm btn-danger ms-2 px-1 py-0" onclick="removeRow(this)">×</button>';
        } else if (i <= MONTH_COLUMNS) {
            td.textContent = '0.00';
        } else {
            td.textContent = '0.00';
        }
    });

    sumRow.before(newRow);
    recalcAll();
    saveToLocalStorage();
}

/* =========================
   USUWANIE WIERSZA
========================= */
function removeRow(btn) {
    btn.closest("tr").remove();
    recalcAll();
    saveToLocalStorage();
}

/* =========================
   SUMOWANIE
========================= */
function recalcAll() {
    recalcRowTotals();
    recalcSectionSums();
    recalcFinalBalance();
    updateCharts();
}

function recalcSectionSums() {
    document.querySelectorAll(".section-sum").forEach(sumRow => {
        const rows = [];
        let prev = sumRow.previousElementSibling;

        while (prev && prev.classList.contains("budget-row")) {
            rows.push(prev);
            prev = prev.previousElementSibling;
        }

        for (let col = 1; col <= MONTH_COLUMNS; col++) {
            let total = 0;
            rows.forEach(row => {
                total += parseFloat(row.children[col].textContent.replace(',', '.')) || 0;
            });
            sumRow.children[col].textContent = total.toFixed(2);
        }

        let yearly = 0;
        for (let col = 1; col <= MONTH_COLUMNS; col++) {
            yearly += parseFloat(sumRow.children[col].textContent);
        }
        sumRow.lastElementChild.textContent = yearly.toFixed(2);
    });
}


/* =========================
   SUMA WIERSZA
========================= */
function recalcRowTotals() {
    document.querySelectorAll(".budget-row").forEach(row => {
        let sum = 0;
        for (let i = 1; i <= MONTH_COLUMNS; i++) {
            sum += parseFloat(row.children[i].textContent.replace(',', '.')) || 0;
        }
        row.lastElementChild.textContent = sum.toFixed(2);
    });
}

function recalcFinalBalance() {
    const income = document.querySelector('[data-sum="income"]');
    const bills = document.querySelector('[data-sum="bills"]');
    const daily = document.querySelector('[data-sum="daily"]');
    const occasional = document.querySelector('[data-sum="occasional"]');
    const balance = document.getElementById("final-balance");

    if (!income || !bills || !daily || !occasional || !balance) {
        console.warn("Brak jednego z wierszy sum / salda");
        return;
    }

    for (let col = 1; col <= MONTH_COLUMNS; col++) {
        const val =
            (parseFloat(income.children[col].textContent) || 0) -
            (parseFloat(bills.children[col].textContent) || 0) -
            (parseFloat(daily.children[col].textContent) || 0) -
            (parseFloat(occasional.children[col].textContent) || 0);

        balance.children[col].textContent = val.toFixed(2);
        balance.children[col].classList.toggle("text-danger", val < 0);
        balance.children[col].classList.toggle("text-success", val >= 0);
    }

    let yearly = 0;
    for (let col = 1; col <= MONTH_COLUMNS; col++) {
        yearly += parseFloat(balance.children[col].textContent);
    }
    balance.lastElementChild.textContent = yearly.toFixed(2);
}

/* =========================
   OBSŁUGA EDYCJI
========================= */
document.addEventListener("input", e => {
    if (e.target.closest("td[contenteditable]")) {
        recalcAll();
    }
});

loadFromLocalStorage();
updateCharts();
</script>

Kod po stronie serwera

Brak kodu serwera

Ta aplikacja działa wyłącznie w przeglądarce i nie korzysta z kodu po stronie serwera.

Licencja

## BSD-3-Clause License Agreement
BSD-3-Clause
Сopyright (c) 2026 Dariusz Rorat

All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice,
   this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its
   contributors may be used to endorse or promote products derived from
   this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

12 stycznia 2026 2

Kategorie

pozostałe

Technologie

javascript

Dziękujemy!

()