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

26
04-dom-events-async/05-form-submit-and-prevent-default/README.md Normal file
View File

@@ -0,0 +1,26 @@
# 练习 5：表单提交和 preventDefault
## 目标
学会拦截表单默认提交，并把输入内容渲染到页面。
## 你要练什么
- `submit` 事件
- `preventDefault()`
- 表单值读取
- 动态追加列表项
## 任务
- 提交表单时阻止页面刷新
- 读取输入框内容
- 把内容加入到待办列表
- 提交后清空输入框
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/answer.js)

51
04-dom-events-async/05-form-submit-and-prevent-default/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>表单提交和 preventDefault</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;
}
form {
display: flex;
gap: 10px;
}
input {
flex: 1;
padding: 10px 12px;
}
</style>
</head>
<body>
<section class="panel">
<h1>学习待办</h1>
<form id="todo-form">
<input id="todo-input" type="text" placeholder="输入今天要学的内容" />
<button type="submit">添加</button>
</form>
<ul id="todo-list">
<li>完成 DOM 选择练习</li>
</ul>
</section>
<script src="./answer.js"></script>
</body>
</html>

18
04-dom-events-async/05-form-submit-and-prevent-default/answer.js Normal file
View File

@@ -0,0 +1,18 @@
const form = document.getElementById("todo-form");
const input = document.getElementById("todo-input");
const list = document.getElementById("todo-list");
form.addEventListener("submit", function (event) {
event.preventDefault();
const value = input.value.trim();
if (!value) {
return;
}
const item = document.createElement("li");
item.textContent = value;
list.appendChild(item);
input.value = "";
});

51
04-dom-events-async/05-form-submit-and-prevent-default/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>表单提交和 preventDefault</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;
}
form {
display: flex;
gap: 10px;
}
input {
flex: 1;
padding: 10px 12px;
}
</style>
</head>
<body>
<section class="panel">
<h1>学习待办</h1>
<form id="todo-form">
<input id="todo-input" type="text" placeholder="输入今天要学的内容" />
<button type="submit">添加</button>
</form>
<ul id="todo-list">
<li>完成 DOM 选择练习</li>
</ul>
</section>
<script src="./starter.js"></script>
</body>
</html>

6
04-dom-events-async/05-form-submit-and-prevent-default/starter.js Normal file
View File

@@ -0,0 +1,6 @@
// 任务：
// 1. 获取表单、输入框和列表
// 2. 监听 submit 事件
// 3. 用 preventDefault() 阻止默认提交
// 4. 读取输入框内容，创建新 li，追加到列表
// 5. 清空输入框