front-end-example/04-dom-events-async/10-final-dashboard/answer.js

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();