f3bdaa4e88
- Introduced a new script to check TypeScript lesson files for errors. - Created a main TypeScript file to render lessons and their details. - Added lesson definitions with starter and answer codes. - Implemented a user interface for navigating and running lessons. - Styled the application with CSS for a better user experience. - Updated README to reflect the new TypeScript section and usage instructions.
35 lines
1.0 KiB
Markdown
35 lines
1.0 KiB
Markdown
# 练习 10：综合页面
|
||
|
||
## 目标
|
||
|
||
把 DOM、事件和异步知识拼起来，做一个可以真实互动的小页面。
|
||
|
||
## 项目名称
|
||
|
||
学习面板
|
||
|
||
## 任务
|
||
|
||
请完成一个控制台之外可见的页面交互，要求至少包含：
|
||
|
||
- 一个课程列表区域
|
||
- 一个表单区域
|
||
- 一个添加课程的交互
|
||
- 一个点击课程切换完成状态的交互
|
||
- 一个异步加载提示或远程数据模拟
|
||
- 清晰的状态文案更新
|
||
|
||
## 建议顺序
|
||
|
||
1. 先看 HTML 结构
|
||
2. 先写元素获取和渲染函数
|
||
3. 再写表单提交和点击事件
|
||
4. 最后补异步加载逻辑
|
||
|
||
## 文件
|
||
|
||
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/starter.html)
|
||
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/starter.js)
|
||
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/answer.html)
|
||
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/answer.js)
|