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

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

# 家計簿入力
![スクリーンショット 2025-04-04 070552.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3556875/ff4f9750-90d4-4cae-a600-cce7abecef05.jpeg)

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


## class section
フッターからそれぞれの機能の画面が表示されるようにしたかった。
~~~html: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>
~~~
~~~css:style.css
.section {
    display: none;
}

.section.active {
    display: block;
}
~~~
~~~js: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収入
~~~html:index.html
        <div class="income-expense-toggle">
            <button id="expenseBtn">支出</button>
            <button id="incomeBtn">収入</button>
        </div>
~~~
buttonタグにidを設けることでjs側で識別可能になる
~~~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君が頑張ってくれる。

### 金額入力のフォームで支出→支出を入力 収入→収入を入力ってしたい
~~~html
        <div class="amount-section">
            <label for="amount">金額</label>
            <input type="number" id="amount" placeholder="金額">
        </div>
~~~
~~~js
        if (type === "expense") {
            amountInput.placeholder = "支出を入力";
        } else {
            amountInput.placeholder = "収入を入力"; 
        }
~~~
plaseholderさん便利やん

## カテゴリー選択
~~~html
<div id="categoryGrid" class="category-grid">
~~~
~~~js
    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は分かるため割愛
引数を参照してって感じが少なくてむずむずしちゃう