# 现代JavaSript教程打卡网页应用

**Repository Path**: SmallSheep123/modern-js-tutorial-checkin-page

## Basic Information

- **Project Name**: 现代JavaSript教程打卡网页应用
- **Description**: 这是一个专注于 JavaScript 学习挑战的网页，适配于 https://zh.javascript.info/ 现代JavaScript教程网站，让你清晰掌握学习进展。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-29
- **Last Updated**: 2025-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript

## README

# JavaScript 学习挑战

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

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

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

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

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

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