update

04-dom-events-async/10-final-dashboard/starter.js

@@ -20,3 +20,85 @@ function fakeLoadExtraLessons() {
 // 3. 点击列表项时切换 done 状态
 // 4. 提交表单时阻止默认提交，并新增课程
 // 5. 点击加载按钮时显示加载状态，并把异步返回的课程追加到列表
+/* 一个课程列表区域
+- 一个表单区域
+- 一个添加课程的交互
+- 一个点击课程切换完成状态的交互
+- 一个异步加载提示或远程数据模拟
+- 清晰的状态文案更新*/
+const page = document.querySelector(".page")
+const hero = document.querySelector("hero")
+const text = document.getElementById("status-text")
+const panel = document.querySelector(".panel")
+const btn = document.getElementById("load-btn")
+const list = document.getElementById("lesson-list")
+const formPanel = document.querySelector(".form-panel")
+const lessonForm = document.getElementById("lesson-form")
+const lessonInput = document.getElementById("lesson-input")
+
+function renderLessons() {
+  lessons.forEach(item => {
+    const li = document.createElement("li")
+    li.classList.add("li")
+    li.setAttribute("title", item.title)
+    li.setAttribute("done", item.done)
+    li.textContent = `
+    标题：${item.title}
+    状态：${item.done}`
+
+    list.appendChild(li)
+  })
+}
+renderLessons()
+
+//event.target,closest,
+list.addEventListener("click", function (event) {
+  const a = event.target.closest(".li")
+  if (a) {
+    a.textContent = `
+    标题：${a.title}
+    状态：${!a.done}`
+
+    a.done = !a.done
+  }
+})
+
+lessonForm.addEventListener("submit", function (event) {
+  event.preventDefault()
+  const c = document.createElement("li")
+  const d = lessonInput.value.trim()
+  c.textContent = `
+  标题：${d}
+  状态：true`
+  c.setAttribute("title", d)
+  c.setAttribute("done", true)
+  c.classList.add("li")
+  lessonInput.value = ""
+  list.appendChild(c)
+})
+
+async function load() {
+  text.textContent = "加载中"
+  text.innerHTML = ""
+  try {
+
+    const s = await fakeLoadExtraLessons()
+    text.textContent = "加载完成"
+    s.forEach(item => {
+      const li = document.createElement("li")
+      li.classList.add("li")
+      li.setAttribute("title", item.title)
+      li.setAttribute("done", item.done)
+      li.textContent = `
+    标题：${item.title}
+    状态：${item.done}`
+
+      list.appendChild(li)
+    })
+  } catch (error) {
+    text.textContent = "加载失败"
+
+  }
+}
+
+btn.addEventListener("click", load)