codelove jsbasic2

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 text-slate-700 p-3 mb-2 rounded-sm shadow-lg">
                <span
                  class="w-6 h-6 bg-rose-600 text-white rounded-full text-center hover:opacity-70 mr-3">
                  &#10004;
                </span>
                <span
                  class="bg-slate-400 text-white rounded-lg p-1 text-xs mr-1"
                  >已完成</span
               ...

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 newSpanIcon = document.createElement("span");
  const newSpanDone = document.createElement("span");
  const newSpanText = 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",
    "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",
    "ml-auto"
  );

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

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

  // 幫創建的span元素加入樣式和user輸入的待辦事項內容
  newSpanIcon.innerHTML = "&#10004;";
  newSpanIcon.className =
    "w-6 h-6 bg-gray-300 text-white rounded-full text-center hover:opacity-70 mr-3 cursor-pointer";
  newSpanIcon.onclick = todoDone;

  newSpanDone.textContent = "已完成";
  newSpanDone.className =
    "bg-slate-400 text-white rounded-lg p-1 text-xs mr-1";
  newSpanDone.style.display = "none";

  newSpanText.textContent = todoField.value;
  newSpanText.className =...