今日文章目录：

• 需求说明
• 事前准备

需求说明

• 针对不同用途的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

今天下班就摊在沙发上不想面对，感谢自己最後一刻还是起来写下这篇文章。
每次都觉得困难，尤其是不断面对以为自己会了，但其实不会的东西，还好没有放弃！