JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列二：第3課 ── 認識 for 迴圈</h1>

<div class="box">
  <h1 class="title">待辦事項</h1>
  <div class="create">
    <input type="text" name="memo" id="memo" placeholder="待辦事項">
    <button id="submit" onclick="createMemo()">新增</button>
  </div>
  <ul class="todoList" id="todoList">
  </ul>
  <button id="listAll" onclick="listAll()">匯出</button>
</div>

CSS

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

.box {
  width: 300px;
  /* 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 button {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  line-height: 20px;
  padding: 10px;
  border: 2px solid #ccc;
}

.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;
}

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

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

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

.box .todoList li span {
  text-align: justify;
  font-size: 18px;
}

.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;
}

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

.box #listAll {
  padding: 5px 15px;
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
  border-radius: 40px;
  cursor: pointer;
  border: 3px solid #2d0c58;
  background-color: #fff;
  color: #2d0c58;
  margin-top: 5px;
}

.box #listAll:hover {
  background-color: #2d0c58;
  color: #fff;
  transform: scale(1.15);
  transition: 0.3s;
}

JavaScript

function createMemo() {
  // 取得要新增的待辦事項文字
  let memos = document.getElementById("memo");
  let memoInput = memos.value;
  let memo = memoInput.trim();
  if (memo == "") {
    alert("請輸入待辦事項");
    return;
  }
  // 取得待辦列表物件
  let todoList = document.getElementById("todoList");
  // 建立新的子列表
  let list = document.createElement("li");
  // 建立子列表的文字容器
  let text = document.createElement("span");
  // 將要新增的代辦事項填入文字容器
  text.textContent = memo;
  // 將文字容器放入子列表
  list.append(text);
  // 將子列表放入待辦列表
  todoList.append(list);
  // 新增之後，清除input已輸入的文字
  memos.value = "";

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

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

function listAll() {
  // 取得待辦列表物件
  let todoList = document.getElementById("todoList");
  // 取得待辦列表裡的所有子物件
  let lists = todoList.children;
  // 初始化序號
  let num = 1;
  // 初始化alert字串容器
  let text = "";

  // 歷遍所有子物件，然後儲存到變數x
  for (let x of lists) {
    // 選取子物件裡的第一個子物件(相當於todoList的孫物件)，然後分配給alert字串容器
    text = text + num.toString() + ". " + x.children[0].textContent + " ";
    // 序號遞增
    num++;
  }

  alert("今日待辦： " + text);
}