rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add TypeScript lessons and learning panel

Browse Source 
- 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.
This commit is contained in:
charlie
2026-03-19 10:06:11 +08:00
parent 69a4ae3178
commit f3bdaa4e88
146 changed files with 5951 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
04-dom-events-async/02-text-class-style/README.md Normal file
View File

@@ -0,0 +1,25 @@
# 练习 2：修改文本、类名和样式
## 目标
学会改元素内容、切换类名和设置简单样式。
## 你要练什么
- `textContent`
- `classList.add`
- `classList.remove`
- `style`
## 任务
- 把标题改成“今天已完成 DOM 练习”
- 给状态标签加上完成样式
- 修改说明文字颜色
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/answer.js)

47
04-dom-events-async/02-text-class-style/answer.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>修改文本、类名和样式</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f3f6fb;
}
.card {
max-width: 720px;
margin: 0 auto;
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #d9e3f2;
}
.badge {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: #eef2f7;
color: #4b5563;
}
.badge.done {
background: #dcfce7;
color: #166534;
}
</style>
</head>
<body>
<section class="card">
<h1 id="title">今天的学习状态</h1>
<p id="description">当前还没有更新进度。</p>
<span id="badge" class="badge">进行中</span>
</section>
<script src="./answer.js"></script>
</body>
</html>

9
04-dom-events-async/02-text-class-style/answer.js Normal file
View File

@@ -0,0 +1,9 @@
const title = document.getElementById("title");
const description = document.getElementById("description");
const badge = document.getElementById("badge");
title.textContent = "今天已完成 DOM 练习";
description.textContent = "已经练习了元素选择、文本修改和样式切换。";
description.style.color = "#2563eb";
badge.textContent = "已完成";
badge.classList.add("done");

47
04-dom-events-async/02-text-class-style/starter.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>修改文本、类名和样式</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f3f6fb;
}
.card {
max-width: 720px;
margin: 0 auto;
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #d9e3f2;
}
.badge {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: #eef2f7;
color: #4b5563;
}
.badge.done {
background: #dcfce7;
color: #166534;
}
</style>
</head>
<body>
<section class="card">
<h1 id="title">今天的学习状态</h1>
<p id="description">当前还没有更新进度。</p>
<span id="badge" class="badge">进行中</span>
</section>
<script src="./starter.js"></script>
</body>
</html>

5
04-dom-events-async/02-text-class-style/starter.js Normal file
View File

@@ -0,0 +1,5 @@
// 任务：
// 1. 选中标题、描述、状态标签
// 2. 修改标题文字
// 3. 给标签加上 done 类名
// 4. 修改描述文字颜色