今日文章目录

• 需求说明
• 事前准备
• 过程纪录
• 参考纪录

需求说明

• 在每个ToDoList项目中，纪录花费时间。
• 在番茄钟视窗上也可以勾选完成，显示完成时间。

事前准备

• 资料结构：

[    
    {
        categoryId: 1,
        category: "work",
        listData:[
            {
                id: 1,                
                value: "Learn JS",    
                status: "unfinished", 
                priority: 1,          
                spendTime: 180,            // 新增：纪录花费时间(秒数)
            },
            {
                id: 2,                
                value: "Learn React", 
                status: "finished",   
                priority: 3,          
                spendTime: 0,         
            },

            ...
        ],
    },
    
    ...
]

过程纪录

• 大致想法规划：
  • 点击项目播放番茄键： 显示番茄钟视窗
  • 番茄钟视窗点击完成键，将花费时间纪录下来。（每次花费的时间累加）
• codepen 练习：https://codepen.io/chen-chens/pen/XWgERoN?editors=0010
• 显示效果：
  • 点击完成键，显示花费时间完成
    
  • 取消完成键，显示已花费时间
    

觉得code 越来越脏了...