JSFiddle - React, Tailwind, and code Playground

by tsaii

HTML

<html>

  <body>
    <div id="title">
      <h1>
        Todo-List
      </h1>
      <div class="divInput">
        <input type="text" id="input" placeholder="請輸入代辦事項">
        <select id="select" onchange="change()">
          <option value="normal">一般</option>
          <option value="important">重要</option>
          <option value="urgent">緊急</option>
        </select>
        <button id="btn" onclick="todoList()">
          新增
        </button>
        <button id="text-btn" onclick="exportList()">
          匯出
        </button>
      </div>
    </div>
    <div id="list">
      <ul id="ul">

      </ul>
    </div>
  </body>

</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1 {
  color: #6DB6DD;
}

body {
  background-color: #C2D6EA;
}

#title {
  border-bottom: 0.01px solid blue;
  box-shadow: 2px 3px 7px rgba(99, 153, 192, 0.7);
  padding: 15px;
  text-align: center;
  margin-bottom: 25px;
}

.divInput input {
  padding: 10px 8px;
  border-radius: 5px 0 0 5px;
  border: 0;
  outline: 0;
  font-size: 16px;
}

.divInput {
  display: flex;
  justify-content: center;
  margin: 10px;
  position: relative;

}

#btn {
  border-radius: 0 5px 5px 0;
  border: 0;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

#list {
  width: 400px;
  margin: auto;
}

li {
  display: flex;
  justify-content: flex-end;
  border-radius: 4px;
  text-align: center;
  list-style-type: none;
  margin: 10px;
  margin-bottom: 8px;
  background-color: rgb(131 170 74/ 0.32);
}

.span {
  padding: 8px;
  flex: 1;
  text-align: left;
}

.span1 {
  text-align: center;
  padding: 8px 0 0 4px;

  display: none;
}

.del-btn {
  font-size: 12px;
  text-align: center;
  display: flex;
  justify-content: end;
  margin: 5px;
  padding: 3px;
  border: none;
  border-radius: 4px;
  background-color: #7F9966;
  cursor: pointer;
}

.done-btn {
  font-size: 9px;
  justify-content: flex-end;
  padding: 3px;
  border: none;
  background-color: rgb(131 170 74 / 0);
  cursor: pointer;
  color: #7FA559;
  margin: 8px;
}

.done-btn:hover {
  transform: scale(1.2);
}

#text-btn {
  position: absolute;
  right: 20px;
  padding: 12px;
  border: none;
  border-radius: 60%;
  background-color: #3F7FBF;
  color: white;
  cursor: pointer;
}

.important {
  color: #F66212;
}

.urgent {
  color: red;
}

.normal {
  color: darkgreen;
}

#select {
  border: none;
  outline: none;
  padding: 3px;
}

JavaScript

function todoList() {
  let input = document.getElementById('input')
  let ul = document.getElementById('ul')
  let li = document.createElement('li')
  let span = document.createElement("span");
  let span1 = document.createElement("span")
  let button = document.createElement("button")
  let done = document.createElement('button')
  const select = document.getElementById('select')
  let index = select.selectedIndex;
  let optionValue = select.options[index].value
  span.className = optionValue
  span1.textContent = '✔️'
  span.classList.add('span')
  span1.classList.add('span1')
  done.classList.add('done-btn')
  button.classList.add('del-btn');
  let str = input.value
  if (str == "") return
  span.textContent = str;
  done.textContent = '標示為已完成'
  done.onclick = show;
  button.textContent = '刪除'
  button.onclick = remove;

  ul.append(li)
  li.append(span1, span, done, button);
  input.value = ''
  input.className = ''
  select.value = "normal"
}

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

function exportList() {
  let listText = document.getElementById('ul').children
  let num = 1
  let result = ''


  for (let i of listText) {
    let getclass = i.children[0].className
    if (getclass == 'important') {
      result = result + num.toString() + " .*" + i.children[0].textContent + '* ';
    } else if (getclass == 'urgent') {
      result = result + num.toString() + " .**" + i.children[0].textContent + '** ';
    } else {
      result = result + num.toString() + " ." + i.children[0].textContent + ' ';
    }
    num++
  }
  if (result !== "") {
    alert('代辦事項:' + result)
  } else {
    alert('無代辦事項')
  }

}

function change() {
  let changeColor = event.target.options[event.target.selectedIndex].value
  let input = document.getElementById('input')
  /* console.log(changeColor) */
  if (changeColor == 'important') {
    input.className = 'important';
  } else if (changeColor == 'urgent') {
    input.className = 'urgent';
  } else {
   ...