今日文章目錄：

• 需求說明
• 事前準備

需求說明

• 針對不同用途的toDoList。像是：工作用的toDoList、週末用的toDoList...等等。

事前準備

• 資料結構長這樣：

[    
    {
        categoryId: 1,
        category: "work",
        listData:[
            {
                id: 1,                // 改用Date.now()，當下時間永遠唯一！
                value: "Learn JS",    // 使用者輸入待辦內容
                status: "unfinished", // 篩選分類清單依據
                priority: 1,          // 調整排列順序依據
            },
            {
                id: 2,                
                value: "Learn JS",    
                status: "unfinished", 
                priority: 1,          
            },

            ...
        ],
    },
    {
        categoryId: 2,
        category: "weekend",
        listData:[
            {
                id: 1,                 
                value: "Watch Netflix",
                status: "unfinished",  
                priority: 1,           
            },
            {
                id: 2,                
                value: "Workout",     
                status: "finished",   
                priority: 3,          
            },

            ...
        ],
    },

    ...
] 

• 思考步驟：

  • 新增category input
  • push 到 categoryList
  • 加入監聽事件
  • 綁定category，切換顯示title card
  • 對應categoryId，render 對應toDolist

• 顯示效果：
  

• codepen 練習：https://codepen.io/chen-chens/pen/zYzdLEY?editors=1010

今天下班就攤在沙發上不想面對，感謝自己最後一刻還是起來寫下這篇文章。
每次都覺得困難，尤其是不斷面對以為自己會了，但其實不會的東西，還好沒有放棄！