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="show()">
<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: 300px;
  margin: auto;
}
li{
  display: flex;
  justify-content: space-between;
  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;
  
}
.del-btn{
  font-size: 16px;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 5px;
  padding: 3px;
  border: none;
  border-radius: 4px;
  background-color: #7F9966;
  cursor: pointer;
}
#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 button = document.createElement("button")

  const select = document.getElementById('select')
  let index = select.selectedIndex;
  let optionValue = select.options[index].value
  span.className = optionValue

  button.classList.add('del-btn');
  let str = input.value
  if (str == "") return
  span.textContent = str;
  button.textContent = '刪除'
  button.onclick = remove;

  ul.append(li)
  li.append(span);
  li.append(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 show() {
  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{
  input.className = 'normal'
  }
}