f3bdaa4e88
- 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.
85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
const lessons = [
|
|
{ title: "获取元素", done: false },
|
|
{ title: "修改 DOM", done: true },
|
|
];
|
|
|
|
function fakeLoadExtraLessons() {
|
|
return new Promise(function (resolve) {
|
|
setTimeout(function () {
|
|
resolve([
|
|
{ title: "事件委托", done: false },
|
|
{ title: "异步渲染", done: false },
|
|
]);
|
|
}, 900);
|
|
});
|
|
}
|
|
|
|
const statusText = document.getElementById("status-text");
|
|
const loadButton = document.getElementById("load-btn");
|
|
const lessonList = document.getElementById("lesson-list");
|
|
const lessonForm = document.getElementById("lesson-form");
|
|
const lessonInput = document.getElementById("lesson-input");
|
|
|
|
function renderLessons() {
|
|
lessonList.innerHTML = "";
|
|
|
|
lessons.forEach(function (lesson, index) {
|
|
const item = document.createElement("li");
|
|
item.className = "lesson-item";
|
|
|
|
if (lesson.done) {
|
|
item.classList.add("done");
|
|
}
|
|
|
|
item.dataset.index = index;
|
|
item.textContent = lesson.title;
|
|
lessonList.appendChild(item);
|
|
});
|
|
}
|
|
|
|
lessonList.addEventListener("click", function (event) {
|
|
const currentItem = event.target.closest(".lesson-item");
|
|
|
|
if (!currentItem) {
|
|
return;
|
|
}
|
|
|
|
const index = Number(currentItem.dataset.index);
|
|
lessons[index].done = !lessons[index].done;
|
|
renderLessons();
|
|
});
|
|
|
|
lessonForm.addEventListener("submit", function (event) {
|
|
event.preventDefault();
|
|
|
|
const value = lessonInput.value.trim();
|
|
|
|
if (!value) {
|
|
return;
|
|
}
|
|
|
|
lessons.push({
|
|
title: value,
|
|
done: false,
|
|
});
|
|
|
|
lessonInput.value = "";
|
|
statusText.textContent = "已新增一门课程";
|
|
renderLessons();
|
|
});
|
|
|
|
loadButton.addEventListener("click", async function () {
|
|
statusText.textContent = "正在异步加载课程...";
|
|
|
|
const newLessons = await fakeLoadExtraLessons();
|
|
newLessons.forEach(function (lesson) {
|
|
lessons.push(lesson);
|
|
});
|
|
|
|
statusText.textContent = "额外课程加载完成";
|
|
renderLessons();
|
|
});
|
|
|
|
statusText.textContent = "页面初始化完成";
|
|
renderLessons();
|