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

24
04-dom-events-async/03-create-and-remove/README.md Normal file
View File

@@ -0,0 +1,24 @@
# 练习 3：创建和删除节点
## 目标
学会动态新增和删除页面节点。
## 你要练什么
- `createElement`
- `appendChild`
- `remove`
- 事件绑定
## 任务
- 点击“新增任务”时往列表里加一个新项
- 点击“删除最后一项”时删除最后一个列表项
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/answer.js)

47
04-dom-events-async/03-create-and-remove/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: #f5f7fb;
}
.panel {
max-width: 720px;
margin: 0 auto;
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #dce4ef;
}
ul {
padding-left: 20px;
}
button {
margin-right: 10px;
}
</style>
</head>
<body>
<section class="panel">
<h1>任务列表</h1>
<button id="add-btn" type="button">新增任务</button>
<button id="remove-btn" type="button">删除最后一项</button>
<ul id="task-list">
<li>学习 querySelector</li>
<li>学习 classList</li>
</ul>
</section>
<script src="./answer.js"></script>
</body>
</html>

20
04-dom-events-async/03-create-and-remove/answer.js Normal file
View File

@@ -0,0 +1,20 @@
const addButton = document.getElementById("add-btn");
const removeButton = document.getElementById("remove-btn");
const taskList = document.getElementById("task-list");
let taskIndex = 3;
addButton.addEventListener("click", function () {
const item = document.createElement("li");
item.textContent = `新任务 ${taskIndex}`;
taskList.appendChild(item);
taskIndex += 1;
});
removeButton.addEventListener("click", function () {
const lastItem = taskList.lastElementChild;
if (lastItem) {
lastItem.remove();
}
});

47
04-dom-events-async/03-create-and-remove/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: #f5f7fb;
}
.panel {
max-width: 720px;
margin: 0 auto;
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #dce4ef;
}
ul {
padding-left: 20px;
}
button {
margin-right: 10px;
}
</style>
</head>
<body>
<section class="panel">
<h1>任务列表</h1>
<button id="add-btn" type="button">新增任务</button>
<button id="remove-btn" type="button">删除最后一项</button>
<ul id="task-list">
<li>学习 querySelector</li>
<li>学习 classList</li>
</ul>
</section>
<script src="./starter.js"></script>
</body>
</html>

4
04-dom-events-async/03-create-and-remove/starter.js Normal file
View File

@@ -0,0 +1,4 @@
// 任务：
// 1. 获取新增按钮、删除按钮和列表
// 2. 点击新增按钮时创建一个新的 li 并追加到列表
// 3. 点击删除按钮时删除最后一个 li