
今天主要是重新整理記帳 App 的資料結構,讓每筆記帳資料不只是記錄「名稱、金額和分類」,還能知道這筆交易是收入還是支出,以及發生的日期,為之後做按月、按日分類和金額統計打下基礎。
資料結構前後對照
原本結構:
後來的結構:

除了這些,我也學到了 .padStart() 的用法,可以把月份和日期補成兩位數,確保格式符合 HTML 的要求。
在修改的時候,我也調整了表單的驗證方式。
原本要求使用者一定要輸入項目名稱和金額,這次改成只要有輸入金額就可以完成記帳。如果沒有填寫名稱,列表中就會顯示分類名稱,讓記帳流程更快速、彈性也更高。
我也順便處理了資料的排序,利用 Object.keys().sort() 搭配 localeCompare(),讓月份可以按照最新到最舊的順序排列,方便之後使用者查找不同月份的記帳紀錄。
在給其他使用者使用前,測試一定是最重要的,隨著功能越做越多後,資料結構也需要跟著調整。一開始看起來只是增加幾個欄位,但其實這些資料會直接影響之後的分類、統計和畫面呈現,帶給使用者的感覺也會隨之不同。
下面是第七天的成果展示: