codelove jsbasic2-1

by CryptoMars

HTML

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&amp;display=swap"></script>
<main>
  <div class="container m-auto max-w-lg mt-10">
    <div
         class="border bg-yellow-100 rounded-lg px-5 py-5 shadow-lg shadow-yellow-600/50">
      <div class="flex">
        <input
               id="todoField"
               class="flex-1 p-2 mr-4 border-2 border-sky-600 rounded-lg outline-none"
               type="text"
               placeholder="新增待辦事項" />
        <select
                id="category"
                class="p-2 mr-4 border-2 border-sky-600 rounded-lg outline-none"
                onchange="addTodotheme()">
          <option value="normal">一般</option>
          <option value="important">重要</option>
          <option value="urgent">緊急</option>
        </select>
        <button
                id="addTodoBtn"
                class="text-slate-300 font-semibold tracking-widest px-8 py-2 bg-sky-600 rounded-md hover:bg-opacity-70 outline-none"
                onclick="addTodo()">
          新增
        </button>
      </div>
      <div id="todoBox" class="mt-4 border-t-2 hidden">
        <div class="flex justify-between items-center my-4">
          <h2 class="text-slate-500 font-semibold">Tasks</h2>
          <button
                  class="bg-slate-500 text-white px-3 py-1 rounded-md hover:bg-opacity-70"
                  onclick="exportText()">
            匯出
          </button>
        </div>
        <ul id="todolist" class="mt-1">
          <!-- <li
                class="bg-red-300 flex items-center justify-between text-slate-700 p-3 mb-2 rounded-sm shadow-lg">
                <span>倒垃圾</span>
                <button
                  class="text-slate-300 font-semibold tracking-widest px-3 py-1 bg-rose-600 rounded-md hover:bg-opacity-70"
                  onclick="delTodo()">
                  刪除
                </button>
              </li>
              <li
   ...

CSS

body {
  font-family: "Noto Sans TC", sans-serif;
}

JavaScript

// 新增一筆
function addTodo() {
  // 變數以$開頭表示是選取html的元素
  const $todoField = document.querySelector("#todoField"); // input
  const $todolist = document.querySelector("#todolist"); // ul
  const $category = document.querySelector("#category"); // select

  // 創建li, span, button元素
  const newLi = document.createElement("li");
  const newSpan = document.createElement("span");
  const newBtn = document.createElement("button");

  // 沒有輸入內容就跳提醒，使用return程式就不會再往下執行
  if (!$todoField.value) return alert("請輸入待辦事項內容");

  // 取得一般、重要、緊急的選擇結果
  const selectedValue = $category[$category.selectedIndex].value;

  // 依照一般、重要、緊急的選擇結果，判斷要輸出的class樣式
  const selectedStyle =
        selectedValue == "normal"
  ? "sky"
  : selectedValue == "important"
  ? "orange"
  : "red";

  // 使用dataset屬性，在待辦事項中加入normal, important, urgent識別，方便在匯出純文字時使用
  newLi.dataset.priority = selectedValue;

  // 幫創建的li元素加上class樣式
  newLi.classList.add(
    `bg-${selectedStyle}-300`,
    "flex",
    "items-center",
    "justify-between",
    "text-slate-700",
    "p-3",
    "mb-2",
    "rounded-sm",
    "shadow-lg"
  );

  // 幫創建的button元素加上class樣式
  newBtn.classList.add(
    "text-slate-300",
    "font-semibold",
    "tracking-widest",
    "px-3",
    "py-1",
    "bg-rose-600",
    "rounded-md",
    "hover:bg-opacity-70"
  );

  // 幫創建的button元素加入文字內容
  newBtn.textContent = "刪除";

  // 幫創建的button元素加上刪除功能(delTodo is a Function)
  newBtn.onclick = delTodo;

  // 幫創建的span元素加入user輸入的待辦事項內容
  newSpan.textContent = todoField.value;

  // 將創建的span, button元素依序加入到新創的的li元素內(子元素)
  newLi.append(newSpan, newBtn);

  // 將創建的li元素加入到ul元素內的最下面, 嘗試使用其他的method：insertAdjacentElement()
  // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentElement
  $todolist.insertAdjacentElement("beforeend", newLi);

  // 清除 user 輸入內容，並將游標定位到 user 輸入欄位
  $todoField.value = "";
  $todoField.focus();

  showHiddenTodo();
}

// 選取到目前點擊的button的父元素li，把li刪除
function delTodo() {
  event.target.parentElement.remove();
 ...