Skip to content

smallSheep123/modern-js-tutorial-checkin-page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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:动态生成内容、更新进度和处理用户交互

About

这是一个专注于 JavaScript 学习挑战的网页,适配于 https://zh.javascript.info/ 现代JavaScript教程网站,让你清晰掌握学习进展。

Resources

Stars

Watchers

Forks

Contributors