JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<div class="container">
<input class="inputvalue"/>

<button class="add" onClick="addbtn()">
新增
</button>
</div>
  <ul class="todolistul">
    <li class="list-title">
    <span class="todolistspan">代辦事項</span>
    <button class="export" onClick="exportbtn()">
匯出</button>
</li>
     <li class="todoistli">
    <span class="todolistspan">倒垃圾</span>
    <button onClick="deletebtn()" class="deletebtn">刪除</button>
  </li>
  <li class="todoistli">
    <span class="todolistspan">繳電話費</span>
      <button onClick="deletebtn()" class="deletebtn">刪除</button>
  </li>
  <li class="todoistli">
    <span class="todolistspan">採買本週食材</span>
    <button onClick="deletebtn()" class="deletebtn">刪除</button>
  </li>
  </ul>

CSS

* {
  list-style:none;
}
.container {
  background-color:#80ffff;
  display:flex;
  justify-content:space-between;

  padding:10px 10px;
  width:300px;
  height:25px;
  border-radius:10px;
  margin: 30px auto;
}
.inputvalue {
  width:230px;
  border-radius:10px;
}
.add {
  border:none;
  background-color:#80ffff;
  font-size: 15px;
  margin:1px auto;
}
.add:hover {
    color: white;   
}

.todolistul {
  margin-top: 20px;
    background-color: #80ffff;
    margin: 10px auto;
    width:300px;
    border-radius: 8px;
    padding: 0 10px 10px 10px;
}

.todoistli {
  background-color:orange;
  border-radius:5px;
  height:25px;
  margin:10px auto;
  display:flex;
  justify-content: space-between; 
}
.list-title {
  text-align: center;
  position: relative;
  left:20px;
      padding: 8px 0;
    

}
.todolistspan {
    font-weight: bold;          
}
.deletebtn {
  border:none;
  background-color:orange;
  font-size: 15px;
  margin:1px ;
}
.deletebtn:hover {
  color: white;   
}
.export {       
  position: relative;
  left:75px;
  cursor: pointer;
  background-color: #80ffff;
  border:none;
  font-size: 15px;
}
.export:hover {
  color:white;
  font-size: 15px;
}

JavaScript

const addbtn = () => {
const inputvalue = document.querySelector(".inputvalue").value;
const ul = document.querySelector(".todolistul");
const li = document.createElement('li');
const span = document.createElement('span');
const deletebutton = document.createElement('button');
ul.append(li);
li.append(span);
li.append(deletebutton);
span.textContent = inputvalue;
deletebutton.textContent = '刪除';
deletebutton.onclick = deletebtn;
li.classList.add('todoistli');
deletebutton.classList.add('deletebtn');
document.querySelector(".inputvalue").value = '';
};
const deletebtn = () => {
event.target.parentElement.remove();
}
const exportbtn = () => {
 const list = document.querySelector('.todolistul').children;
  let text = ''; 
  let num = 1;
  for (let item of list) {
  if (item.children[0].textContent === "代辦事項") { continue; } 
  text = text + num.toString() + '.' + item.children[0].textContent + ` `;
  
  num = num + 1;
  
  }
  alert('今日待辦：' + text);
}