在前幾天的重構與 SPA 架構完成後，我們的記帳網站已經有了大概的的骨架。今天，我們要把「預算」這個分頁的功能補齊，並在總覽儀表板加上 UI/UX 設計：預算超支警示。只要使用者的花費超過了他設定的週預算或月預算，總覽卡片的邊框就會立刻變成警告的紅色，提醒使用者：「該停手啦，要吃土ㄌㄜ！」

一、 預算設定與 localStorage 儲存

和記帳資料時一樣，當使用者的預算設定也必須能夠跨網頁保留。我們宣告一個 budgets 物件，在點擊「儲存預算」時存入 localStorage：

let budgets = JSON.parse(localStorage.getItem('my_budgets')) || { weekly: 0, monthly: 0 };

setBudgetBtn.addEventListener('click', function() {
    budgets = {
        weekly: Number(weeklyBudgetInput.value) || 0,
        monthly: Number(monthlyBudgetInput.value) || 0
    };
    localStorage.setItem('my_budgets', JSON.stringify(budgets));
    renderExpenses(); 
    alert("預算設定已成功儲存！");
});

二、 如何用 JavaScript 計算本週的區間？

要判斷本週是否超支，首先要算出「本週的總花費」。比起「本月」只要比對 YYYY-MM，計算「本週」麻煩許多，因為我們必須找出這週的星期一到星期日是幾號。

這裡我們利用了 Date 物件的 getDay() 與 getDate() 來推算：

const today = new Date();

// 計算本週的起始日（週一）
const dayOfWeek = today.getDay(); // 取得今天是星期幾 (0 是週日)
const diffToMonday = today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
const monday = new Date(today.setDate(diffToMonday));
monday.setHours(0, 0, 0, 0); // 設為週一凌晨 00:00

// 計算本週的結束日（週日）
const sunday = new Date(monday);
sunday.setDate(monday.getDate() + 6);
sunday.setHours(23, 59, 59, 999); // 設為週日深夜 23:59

有了 monday 跟 sunday 的時間戳記後，只要跑迴圈檢查消費紀錄的時間是否介於兩者之間，就能比較輕鬆的算出「本週已花費」金額！

三、 UI/UX 小巧思：超支紅色警示

最後，我們利用 CSS 寫好一個 .warning 的 class，將左側邊框設為紅色。
在渲染畫面時，用 JavaScript 判斷：如果預算大於 0，且花費超過預算，就把卡片加上 .warning。

CSS 預先寫好超支樣式

.card.warning { border-left-color: #e74c3c; }

JS 動態判斷是否超支

const weekCard = document.getElementById('week-card');
if (budgets.weekly > 0 && weekTotal > budgets.weekly) {
    weekCard.classList.add('warning'); // 超支加上紅框
} else {
    weekCard.classList.remove('warning');
}