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 border-gray-400 rounded-lg focus:outline-sky-600"
               type="text"
               placeholder="新增待辦事項" />
        <button
                class="text-slate-300 font-semibold tracking-widest px-8 py-2 bg-sky-600 rounded-md hover:bg-opacity-70"
                onclick="addTodo()">
          新增
        </button>
      </div>
      <hr class="mt-4" />
      <div class="flex justify-between items-center my-2">
        <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-sky-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
            class="bg-sky-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
            class="bg-sky-300 flex items-center justify-between text-slate-700...

CSS

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

JavaScript

function addTodo() {
  const $todoField = document.querySelector("#todoField"); // 變數以$開頭表示是選取html的元素
  const $todolist = document.querySelector("#todolist"); // 變數以$開頭表示是選取html的元素

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

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

  // 幫創建的li元素加上class樣式
  newLi.classList.add(
    "bg-sky-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();
}

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

function exportText() {
  let copyMsg = "【直接在alert視窗按 ctrl + c 就可以複製】\n\n";
  let exportContent = copyMsg + "今日待辦：\n---------------\n";
  let num = 1; // 匯出時的項目編號

  // document.querySelector("#todolist").children 表示ul中有多少個li
  for (let item of document.querySelector("#todolist").children) {
    // 跑一次迴圈就在要輸出結果的字串中加入一筆待辦事項
    exportContent +=
      num.toString() + ". " + item.children[0].textContent + "\n";

    num++; // 跑一次迴圈，編號就+1 → 1, 2, 3.....
   ...