<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo List</title>
<!--  引入 Bootstrap  -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- 引入 jQuery -->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="container">
    <div class="card mx-auto mt-5 w-50">
      <div class="card-body">
        <h2 class="text-center">Todo List</h2>
        <div class="input-group mb-3">
          <input type="text" class="form-control input-todo" placeholder="新增待辦事項...">
          <div class="input-group-append">
            <button class="btn btn-dark btn-add" type="button" id="button-addon2">新增</button>
          </div>
        </div>
        <ul class="list-group todos">
          <!-- todo -->
        </ul>
      </div>
    </div>
  </div>
</body>
</html>
    // Todo component: 傳入物件作為參數
    function Todo(props) {
      return `
        <li class="todo list-group-item d-flex justify-content-between align-items-center">
          <div class="todo-title ">${props.content}</div>
          <div class="btn-group">
            ${Button({
              className: 'btn-undone btn-outline-secondary',
              content: '未完成'
              })}
            ${Button({
              className: 'btn-delete btn-outline-danger',
              content: '刪除'
              })}
          </div>
        </li>
      `
    }
    // Button component: 傳入物件作為參數
    function Button(props) {
      return `
        <button class="btn ${props.className}" type="button">${props.content}</button>
      `
    }

    $('.btn-add').click(() => {
      const content = $('.input-todo').val();
      if (!content) return;
      $('.input-todo').val('');
      $('.todos').append(
        Todo({
          content
        })
      );
    });

    $('.todos').on('click', '.btn-delete', e => {
      $(e.target).parents('.todo').remove();
    });

    $('.todos').on('click', '.btn-undone', e => {
      const todo = $(e.target).parent();
      e.target.remove();
      todo.prepend(
        Button({
          className: 'btn-done btn-outline-success',
          content: '已完成'
        })
      );
    }); 

    $('.todos').on('click', '.btn-done', e => {
      const todo = $(e.target).parent();
      e.target.remove();
      todo.prepend(
        Button({
          className: 'btn-undone btn-outline-secondary',
          content: '未完成'
        })
      );
    });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.