[備忘録]家計簿アプリ-1-1

前書き

• 独学大学生
• フロント初心者がFlask, jsを用いて家計簿アプリを作る
• バックはDB管理とユーザー認証ができるくらい

家計簿入力

家計簿入力のフロント部分を実装したので
自分用に学んだことを残しておく。

class section

フッターからそれぞれの機能の画面が表示されるようにしたかった。

index.html

    <div id="budget" class="section active">
        <h2>家計簿入力</h2>
    </div>
    <div id="calendar" class="section">
        <h2>カレンダー</h2>
    </div>
    <div id="report" class="section">
        <h2>レポート</h2>
    </div>
    <div id="menu" class="section">
        <h2>メニュー</h2>
    </div>

style.css

.section {
    display: none;
}

.section.active {
    display: block;
}

script.js

function changeSection(sectionId) {
    let sections = document.querySelectorAll(".section");
    sections.forEach(function (section) {
        section.classList.remove("active");
    });
    document.getElementById(sectionId).classList.add("active");
}

document.getElementById("budgetBtn").addEventListener("click", function () {
    changeSection("budget");
});
document.getElementById("calendarBtn").addEventListener("click", function () {
    changeSection("calendar");
});
document.getElementById("reportBtn").addEventListener("click", function () {
    changeSection("report");
});
document.getElementById("menuBtn").addEventListener("click", function () {
    changeSection("menu");
});
document.getElementById("categoryBtn").addEventListener("click", function () {
    changeSection("category");
});

方法の一つとして
htmlでsectinoクラスを設けて、それらにjsでactiveクラスを削除・追加
cssで表示・非表示って感じ

ボタン-支出or収入

index.html

        <div class="income-expense-toggle">
            <button id="expenseBtn">支出</button>
            <button id="incomeBtn">収入</button>
        </div>

buttonタグにidを設けることでjs側で識別可能になる

script.js

    document.getElementById("expenseBtn").addEventListener("click", function () {
        toggleIncomeExpense("expense");
    });
    document.getElementById("incomeBtn").addEventListener("click", function () {
        toggleIncomeExpense("income");
    });

    function toggleIncomeExpense(type) {
        let expenseBtn = document.getElementById("expenseBtn");
        let incomeBtn = document.getElementById("incomeBtn");
        let amountInput = document.getElementById("amount");

        // すべてのボタンの `active` を解除
        expenseBtn.classList.remove("active");
        incomeBtn.classList.remove("active");

        if (type === "expense") {
            expenseBtn.classList.add("active");
            amountInput.placeholder = "支出を入力"; 
        } else {
            incomeBtn.classList.add("active"); 
            amountInput.placeholder = "収入を入力";
        }
    }

さらにactiveクラスの付与・解除を行うことで、
css君が頑張ってくれる。

金額入力のフォームで支出→支出を入力 収入→収入を入力ってしたい

        <div class="amount-section">
            <label for="amount">金額</label>
            <input type="number" id="amount" placeholder="金額">
        </div>

        if (type === "expense") {
            amountInput.placeholder = "支出を入力";
        } else {
            amountInput.placeholder = "収入を入力"; 
        }

plaseholderさん便利やん

カテゴリー選択

<div id="categoryGrid" class="category-grid">

    let categories = [
        '食費', '交通費', '娯楽', '日用品', '医療', '通信費',
        '交際費', '教育', '光熱費', '家賃', '貯金', 'その他'
    ];
    const categoryGrid = document.getElementById("categoryGrid");
    let selectedCategory = null;
    function populateCategories() {
        categoryGrid.innerHTML = '';
        categories.forEach(category => {
            const button = document.createElement("button");
            button.textContent = category;
            button.classList.add("category-button");
            button.addEventListener("click", function () {
                document.querySelectorAll(".category-button").forEach(btn => {
                    btn.classList.remove("active");
                });
                button.classList.add("active");
                selectedCategory = category; 
            });
            categoryGrid.appendChild(button);
        });
    }
    populateCategories();

あとがき

Fetchは分かるため割愛
引数を参照してって感じが少なくてむずむずしちゃう