JSFiddle - React, Tailwind, and code Playground

by superyngo

HTML

<body>
    <div class="container" id="title">
      <h1>待辦事項</h1>

      <div id="input_wrap">
        <input type="text" id="input" />
        <button id="add_btn" type="button">+</button>
        <select id="importance">
          <option value="normal">一般</option>
          <option value="important">重要</option>
          <option value="urgent">緊急</option>
        </select>
      </div>

      <div id="lists_wrap">
        <ul id="to_do_list"></ul>
        <button class="other_btn" id="export_btn" type="button">
          匯出為純文字
        </button>
        <button class="other_btn" id="save_btn" type="button">儲存</button>
      </div>
    </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;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 10px;
  color: #606060;
}

body {
  background-color: #fff0df;
}

.container {
  width: 80%;
  margin: 30px auto;
}

select {
  background-color: #546a76;
  color: white;
  margin-left: 1rem;
  border-radius: 1rem;
}

option {
  color: white;
}

/* input-box */
h1 {
  text-align: center;
  font-size: 2.4rem;
}

#input_wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
select:hover,
select:focus,
#input_wrap > input:hover,
#input_wrap > input:focus,
ul :hover {
  border: 0.2rem solid black;
}

#input_wrap > input {
  width: 100%;
  padding: 10px 8px;
  border-radius: 5px 0 0 5px;
  border: 0;
  outline: 0;
  font-size: 1.5rem;
  letter-spacing: 1px;
  transition: background-color 0.5s;
}

/* list */
#lists_wrap {
  margin: 10px 0;
}

li > span {
  flex-grow: 1;
  border: none;
  pointer-events: none;
}

li > button {
  margin: 0 1rem;
  background-color: #546a76;
  color: white;
  padding: 0.5rem;
}

ul > li {
  display: flex;
  justify-content: space-between;
  padding: 6px 6px;
  margin-bottom: 8px;
  border-radius: 5px;
}

#to_do_list > li > span {
  /* display: flex; */
  /* justify-content: space-between; */
  font-size: 1.5rem;
  letter-spacing: 1px;
  height: 100%;
  margin: auto 0.5rem;
}

#add_btn {
  width: 40px;
  border-radius: 0 5px 5px 0;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
  background-color: #546a76;
  color: #fff;
  border: 0.1;
}

.del_button {
  border: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
  background-color: #546a76;
  color: #fff;
}

.other_btn {
  border-radius: 1rem;
  padding: 5px;
 ...

JavaScript

const lists = document.querySelector("#to_do_list");
const to_do_list = document.querySelector("#to_do_list");
const input = document.querySelector("#input");
const add_btn = document.querySelector("#add_btn");
const export_btn = document.querySelector("#export_btn");
const importance = document.querySelector("#importance");
const save_btn = document.querySelector("#save_btn");

importance.onchange = changeinginput;
add_btn.onclick = adding;
export_btn.onclick = exporting;
save_btn.onclick = saving;

if (localStorage.getItem("listsArray")) {
  const lists = JSON.parse(localStorage.getItem("listsArray"));
  for (i = 0; i < lists.length; i++) {
    input.value = lists[i].content;
    importance.value = lists[i].importance;

    adding(lists[i].completed);
  }
  input.value = null;
  importance.value = "normal";
}

function adding(ifDone) {
  if (input.value == "") {
    return;
  }
  let new_li = document.createElement("li");
  let new_span = document.createElement("span");
  let del_btn = document.createElement("button");
  let selected_importance = importance[importance.selectedIndex].value;
  let mark_done_span = document.createElement("span");
  let switch_done_btn = document.createElement("button");
  new_li.className = selected_importance;
  new_span.textContent = input.value;
  del_btn.textContent = "-";
  del_btn.className = "del_button";

  mark_done_span.textContent = "(已完成)";
  if (ifDone === true) {
    mark_done_span.style.display = "inline";
  } else {
    mark_done_span.style.display = "none";
  }

  switch_done_btn.textContent = "標示為已完成";
  switch_done_btn.onclick = markdone;

  del_btn.onclick = deleting;

  lists.append(new_li);
  new_li.append(new_span);
  new_li.append(mark_done_span);
  new_li.append(switch_done_btn);
  new_li.append(del_btn);
}

function deleting() {
  event.target.parentElement.remove();
}

function changeinginput() {
  let selected_importance = importance[importance.selectedIndex].value;
  input.className =...