BudgetNote 預算筆記

 

這個「預算筆記」的設計初衷很單純：讓你快速算出這個月銀行帳戶還剩多少餘額，以及有哪些支出還沒有付清。透過簡單的輸入與計算過程，你可以即時看到可能的缺口，幫助管理每月預算。

使用的是 HTML + Javascript，因此可以複製走原始碼另存為 *.html 就能使用。如果是臨時要使用，也可以使用 CodePen 提供的示範頁面來使用。 

示範頁：https://codepen.io/Li-Fong-Chen-the-bashful/full/ZYbPBzw 

原始碼：https://codepen.io/Li-Fong-Chen-the-bashful/pen/ZYbPBzw

 

使用方法

• 輸入總預算：在頁面上方填入這個月的可用總金額。
• 新增支出項目：輸入每筆支出的名稱與金額。
• 查看結果：
• 頁面頂端的 Topbar 與底部的 Footbar 都會動態顯示：
• 總額
• 項目數
• 已分配金額
• 可支配金額
• 點擊這兩個欄位即可將完整報告複製到剪貼簿，方便存檔或分享。

編輯操作

• 編輯總預算或支出項目：
• 按下「編輯」按鈕後，輸入框背景會變成淺黃色，表示目前可以修改。
• 確認完成：
• 按下「確認」後，輸入框會變成淺灰色，進入唯讀狀態，避免誤改。