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/04-click-counter/README.md Normal file
View File

@@ -0,0 +1,25 @@
# 练习 4：点击计数器
## 目标
学会给按钮绑定点击事件，并更新页面数据。
## 你要练什么
- `addEventListener`
- 点击事件
- 数字状态更新
- DOM 渲染
## 任务
- 点击加一按钮时计数加 1
- 点击减一按钮时计数减 1
- 点击重置按钮时恢复为 0
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/answer.js)

51
04-dom-events-async/04-click-counter/answer.html Normal file
View File

@@ -0,0 +1,51 @@
<!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;
min-height: 100vh;
display: grid;
place-items: center;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f4f7fb;
}
.counter {
width: 320px;
padding: 24px;
text-align: center;
border-radius: 20px;
background: #ffffff;
border: 1px solid #dbe3ef;
}
#value {
font-size: 48px;
font-weight: 800;
}
.actions {
display: flex;
justify-content: center;
gap: 10px;
}
</style>
</head>
<body>
<section class="counter">
<h1>点击计数器</h1>
<p id="value">0</p>
<div class="actions">
<button id="decrease-btn" type="button">-1</button>
<button id="increase-btn" type="button">+1</button>
<button id="reset-btn" type="button">重置</button>
</div>
</section>
<script src="./answer.js"></script>
</body>
</html>

25
04-dom-events-async/04-click-counter/answer.js Normal file
View File

@@ -0,0 +1,25 @@
let count = 0;
const value = document.getElementById("value");
const decreaseButton = document.getElementById("decrease-btn");
const increaseButton = document.getElementById("increase-btn");
const resetButton = document.getElementById("reset-btn");
function render() {
value.textContent = count;
}
decreaseButton.addEventListener("click", function () {
count -= 1;
render();
});
increaseButton.addEventListener("click", function () {
count += 1;
render();
});
resetButton.addEventListener("click", function () {
count = 0;
render();
});

51
04-dom-events-async/04-click-counter/starter.html Normal file
View File

@@ -0,0 +1,51 @@
<!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;
min-height: 100vh;
display: grid;
place-items: center;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f4f7fb;
}
.counter {
width: 320px;
padding: 24px;
text-align: center;
border-radius: 20px;
background: #ffffff;
border: 1px solid #dbe3ef;
}
#value {
font-size: 48px;
font-weight: 800;
}
.actions {
display: flex;
justify-content: center;
gap: 10px;
}
</style>
</head>
<body>
<section class="counter">
<h1>点击计数器</h1>
<p id="value">0</p>
<div class="actions">
<button id="decrease-btn" type="button">-1</button>
<button id="increase-btn" type="button">+1</button>
<button id="reset-btn" type="button">重置</button>
</div>
</section>
<script src="./starter.js"></script>
</body>
</html>

6
04-dom-events-async/04-click-counter/starter.js Normal file
View File

@@ -0,0 +1,6 @@
let count = 0;
// 任务：
// 1. 获取数字元素和 3 个按钮
// 2. 点击按钮时更新 count
// 3. 每次修改后，把最新 count 渲染到页面