JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<div class="container" id="contain">
<input class="inputvalue"/>
 <select onchange="importance()" class="task">
      <option class="normal" value="normal">一般</option>
      <option class="important" value="important">重要</option>
      <option class="urgent" value="urgent">緊急</option>
    </select>
<button id='addbtn' 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-important">
    <span class="todolistspan-important">倒垃圾</span>
    <button onClick="deletebtn()" class="deletebtn-important">刪除</button>
  </li>
  <li class="todoistli-urgent">
    <span class="todolistspan-urgent">繳電話費</span>
      <button onClick="deletebtn()" class="deletebtn-urgent">刪除</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;
}
.container-important {
  background-color:orange;
  display:flex;
  justify-content:space-between;

  padding:10px 10px;
  width:300px;
  height:25px;
  border-radius:10px;
  margin: 30px auto;
}
.container-urgent {
  background-color:red;
  display:flex;
  justify-content:space-between;

  padding:10px 10px;
  width:300px;
  height:25px;
  border-radius:10px;
  margin: 30px auto;
}
.inputvalue {
  width:180px;
  border-radius:10px;
}
.add {
  border:none;
  background-color:#80ffff;
  font-size: 15px;
  margin:1px auto;
   position: relative;
   left:10px;
}
.add:hover {
    color: white;   
}
.add-important {
  border:none;
  background-color:orange;
  font-size: 15px;
  margin:1px auto;
   position: relative;
   left:10px;
}
.add-important:hover {
    color: white;   
}
.add-urgent {
  border:none;
  background-color:red;
  font-size: 15px;
  margin:1px auto;
   position: relative;
   left:10px;
}
.add-urgent:hover {
    color: white;   
}

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

.todoistli-important {
  background-color:orange;
  border-radius:5px;
  height:25px;
  margin:10px auto;
  display:flex;
  justify-content: space-between; 
}
.todoistli-urgent {
  background-color:red;
  border-radius:5px;
  height:25px;
  margin:10px auto;
  display:flex;
  justify-content: space-between; 
}
.todoistli {
  background-color:white;
  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;
    

}
.deletebtn {
  border:none;
  background-color:white;
  font-size: 15px;

}
.deletebtn:hover {
  color:...

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');
const select = document.querySelector(".task");
ul.append(li);
li.append(span);
li.append(deletebutton);
span.textContent = inputvalue;
deletebutton.textContent = '刪除';
deletebutton.onclick = deletebtn;

if (select.value === 'important') {
span.classList.add('todolistspan-important');
li.classList.add('todoistli-important');
deletebutton.classList.add('deletebtn-important');
} else if (select.value === 'urgent') {
span.classList.add('todolistspan-urgent');
li.classList.add('todoistli-urgent');
deletebutton.classList.add('deletebtn-urgent');
} else {
span.classList.add('todolistspan');
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) {
   const selectclassName = item.children[0].className;
  
 if (selectclassName == 'todolistspan-urgent') {
  if (item.children[0].textContent === "代辦事項") { continue; } 
  text = text + num.toString() + '.**' + item.children[0].textContent +'**' + ` `;
   } else if (selectclassName == 'todolistspan-important') {
    if (item.children[0].textContent === "代辦事項") { continue; } 
   text = text + num.toString() + '.*' + item.children[0].textContent +'*' + ` `;
  } else {
   if (item.children[0].textContent === "代辦事項") { continue; } 
  text = text + num.toString() + '.' + item.children[0].textContent + ` `;  
  }
  num = num + 1;
 
  }
  alert('今日待辦：' + text);
}
const importance = () => {
const taskvalue =  document.querySelector(".task").value;
const add =...