JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能</h1>

<div class="box">
  <h1 class="title">待辦事項</h1>
  <div class="create">
    <input type="text" name="memo" id="memo" placeholder="待辦事項">
    <!-- 在第五課作業中，select標籤在此提供兩種改變input文字顏色的方法：inputColor1()和inputColor2()。請試著改變onchange屬性值 -->
    <select name="level" id="level" onchange="inputColor2()" required>
      <option value="" disabled selected>事件程度</option>
      <option value="normal">一般</option>
      <option value="crucial">重要</option>
      <option value="urgent">緊急</option>
    </select>
    <button id="submit" onclick="createMemo()">新增</button>
  </div>
  <ul class="todoList" id="todoList">
  </ul>
  <button id="store" onclick="store()">儲存</button>
  <button id="listAll" onclick="listAll()">匯出</button>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.box {
  width: 600px;
  /* 30px用來方便觀察 */
  margin: 30px auto 0;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 20px;
  border: 5px solid rgba(45, 12, 88, 1);
  text-align: center;
}

.box .title {
  padding: 10px 0;
  font-size: 24px;
  font-weight: 900;
  color: rgba(45, 12, 88, 1);
  text-align: center;
}

.box .create {
  /* 消除input button 為display: inline-block;的空白字元 */
  font-size: 0;
  text-align: center;
}

.box .create input,
.box .create select#level,
.box .create button {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  line-height: 20px;
  padding: 10px;
  border: 2px solid #ccc;
  height: 40px;
}

.box .create input {
  outline: none;
  border-right: none;
  border-radius: 30px 0 0 30px;
}

.box .create button {
  border-left: none;
  border-radius: 0 30px 30px 0;
  cursor: pointer;
  font-weight: 900;
  transition: 0.3s;
}

.box .create button:hover {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.box .todoList li {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: end;
  align-items: center;
}

/* 不同程度的li和input樣式 */

.box .normal {
  color: #2d0c58;
}

.box .crucial {
  color: #ee8f12;
}

.box .urgent {
  color: #f00;
}

.box .todoList li+li {
  border-top: 1px solid #ccc;
}

.box .todoList li span.task {
  text-align: justify;
  font-size: 18px;
  width: 50%;
  flex-grow: 1;
}

.box .todoList li span.status {
  flex-shrink: 0;
  margin-left: 10px;
}

.box .todoList li button {
  padding: 3px 10px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 30px;
  margin-left: 10px;
  flex-shrink: 0;
  border: 2px solid #ccc;
  border-radius: 36px;
  cursor: pointer;
  transition: 0.3s;
}

.box .todoList li button:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
  transform: scale(1.15);
}

.box>button {
  padding: 5px 15px;
  font-size: 20px;
  font-weight: 900;
  line-height:...

JavaScript

function createMemo() {
  // 取得要新增的待辦事項文字
  // let memos = document.getElementById("memo");
  let memos = document.querySelector("#memo");
  let memoInput = memos.value;
  let memo = memoInput.trim();
  // 取得select值
  // let level = document.getElementById("level").value;
  let level = document.querySelector("#level").value;

  // 驗證表單，不可未填入事項、不可未選擇程度
  if (memo == "") {
    alert("請輸入待辦事項");
    return;
  }
  if (level == "") {
    alert("請選擇事件程度");
    return;
  }

  // 取得待辦列表物件
  // let todoList = document.getElementById("todoList");
  let todoList = document.querySelector("#todoList");
  // 建立新的子列表
  let list = document.createElement("li");
  // 建立子列表的待辦事件文字容器
  let text = document.createElement("span");
  // 將要新增的代辦事項填入文字容器
  text.textContent = memo;
  // 給待辦事件文字容器賦予class名
  text.className = "task";
  // 將文字容器放入子列表
  list.append(text);

  // 給子列表依事件程度，賦予不同class名稱
  if (level == "normal") {
    list.className = "normal";
  } else if (level == "crucial") {
    list.className = "crucial";
  }
  // level == 'urgent'
  else {
    list.className = "urgent";
  }

  // 將子列表放入待辦列表
  todoList.append(list);
  // 新增之後，清除input已輸入的文字
  memos.value = "";

  // 建立狀態容器，預設不顯示，並給予class名
  let status = document.createElement("span");
  status.textContent = " （已完成）";
  status.style.display = "none";
  status.className = "status";

  // 將狀態容器放入子列表裡
  list.append(status);

  // 建立狀態按鈕，放入子列表裡
  let displayBtn = document.createElement("button");
  displayBtn.textContent = "標示為已完成";
  list.append(displayBtn);

  // 設定狀態按鈕點擊後要執行的函式
  displayBtn.onclick = statue;

  // 建立刪除按鈕
  let btn = document.createElement("button");
  // 設定刪除按鈕的字樣
  btn.textContent = "刪除";
  // 置入按鈕
  list.append(btn);
  // 設定點擊按鈕時，會執行的函式(刪除)
  btn.onclick = removeMemo;
}

function removeMemo() {
  // 取得哪個按鈕被點擊
  let clickedBtn = event.target;
  // 取得該按鈕的父物件(li標籤)
  // let parent = clickedBtn.parentElement;
  let parent = clickedBtn.closest("li");
  // 將li刪除
  parent.remove();
}

function listAll() {
  //...