todo lists

by superyngo

HTML

<body>
    <div class="container">
      <input type="text" placeholder="請輸入待辦事項" />
      <select id="selectImportance" onchange="selectImportanceChange()">
        <option value="normal">一般</option>
        <option value="important">重要</option>
        <option value="urgent">緊急</option>
      </select>
      <button onclick="add()">新增</button>
      <button onclick="exportTodos()">匯出</button>
      <button onclick="save()">儲存</button>
    </div>
    <hr />
    <div id="root"></div>
  </body>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
video {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  font: inherited;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100svh;
  width: 100%;
}

div.container {
  width: 90%;
  margin: 1rem auto;
}

ul {
  /* margin: 1rem; */
}

li {
  position: relative;
  margin: 1rem auto;
  list-style-type: lower-roman;
  width: 90%;
}

li > button {
  float: right;
  margin: 0 0.1rem;
  /* right: 0; */

  /* font-size: 10; */
}

li > span {
  position: absolute;
  right: 50%;
}

JavaScript

const selectElement = document.querySelector("#selectImportance");
const input = document.querySelector("input");

var todos = JSON.parse(localStorage.getItem("todoList")) ?? [
  {
    title: "倒垃圾",
    category: "normal",
    isCompleted: false,
  },
  {
    title: "繳電話費",
    category: "important",
    isCompleted: false,
  },
  {
    title: "採買本週食材",
    category: "urgent",
    isCompleted: false,
  },
];

const importanceBackgroundColor = {
  normal: "white",
  important: "orange",
  urgent: "red",
};

function render() {
  // console.log(todos);
  const root = document.querySelector("#root");
  root.textContent = "";
  const ul = document.createElement("ul");
  root.append(ul);
  todos.forEach((todo, index) => {
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const toggleBtn = document.createElement("button");
    li.textContent = todo.title;
    li.style.backgroundColor = importanceBackgroundColor[todo.category];
    delBtn.textContent = "刪除";
    delBtn.onclick = () => del(index);
    if (!todo.isCompleted) {
      toggleBtn.textContent = "標示為已完成";
    }
    if (todo.isCompleted) {
      toggleBtn.textContent = "標示為未完成";
      const span = document.createElement("span");
      span.textContent = "(已完成)";
      li.append(span);
    }
    toggleBtn.onclick = () => toggleDone(index);
    ul.append(li);
    li.append(delBtn, toggleBtn);
  });
}

function selectImportanceChange() {
  input.style.backgroundColor =
    importanceBackgroundColor[
      selectElement.options[selectElement.selectedIndex].value
    ];
}

function add() {
  todos.push({
    title: input.value,
    category: selectElement.options[selectElement.selectedIndex].value,
    isCompleted: false,
  });
  // console.log(input);
  render();
}

function del(index) {
  todos.splice(index, 1);
  render();
}

function toggleDone(index) {
  todos[index].isCompleted = !todos[index].isCompleted;
  render();
}

function exportTodos() {
 ...