JavaScript 学习挑战

项目介绍

这是一个专注于JavaScript学习者设计的网页，适配于 https://zh.javascript.info/ 学习网站。旨在帮助用户高效完成 JavaScript 学习挑战。通过动态更新学习进度、每日励志语录和树形结构展示学习路径，用户可以清晰掌握学习进展，保持学习动力。

使用方法

1. 克隆项目：git clone https://github.com/smallSheep123/modern-js-tutorial-checkin-page.git
   启动项目：打开 index.html 文件即可在浏览器中运行。
2. 网页浏览：输入 https://smallsheep123.github.io/modern-js-tutorial-checkin-page/ 网址即可在线使用，由于使用了loaclStorage本地化存储，所以可以保持之前的记录。

使用功能

• 每日摘要：查看今日完成章节数、剩余章节数和学习进度百分比
• 每日语录：每天更新一句励志语录，激励学习
• 树形结构：通过侧边栏的树形结构查看学习进度
• 章节内容：在主内容区查看各章节详情，并标记完成状态

特点

• 动态更新：实时显示学习进度和完成情况
• 每日激励：随机显示励志语录，保持学习动力
• 树形结构：清晰展示学习路径和完成情况
• 进度条：直观展示整体学习进度
• 响应式布局：适配不同设备，提供良好的用户体验

响应式布局

• 桌面端：侧边栏和内容区并排显示，充分利用屏幕空间
• 移动端：侧边栏会隐藏，只有内容区显示，确保在小屏幕上也能清晰浏览

代码结构

• HTML：定义页面结构和内容区域
• CSS：提供样式和响应式布局支持
• JavaScript：动态生成内容、更新进度和处理用户交互