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="請輸入代辦事項">
<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;
}
#text-btn{
  position: absolute;
  right: 20px;
  padding: 12px;
  border: none;
  border-radius: 60%;
  background-color: #3F7FBF;
  color: white;
}

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")
  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 = ""
}

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

function exportList(){
let listText = document.querySelectorAll('#ul li')
let num = 1
let result =''
console.log(listText)
for(let i of listText){
result = result +num.toString()+" ."+i.children[0].textContent+' ';
num++
}
if(result!==""){
alert('代辦事項:'+result)
}else{
alert('無代辦事項')
}

}