JSFiddle - React, Tailwind, and code Playground

by shnny

HTML

<div class="box">
  <label for="Memos">請輸入備忘事項 : </label> 
  <br>

  <input type="text" id="Memos">
  <select >
  <option class="normal" value="normal">一般</option>
  <option class="important" value="important">重要</option>
  <option class="urgent" value="urgent">緊急</option>
</select>
  <button class="send">傳送</button>
  <p class="warn"></p>
  <ul class="ul"></ul>
  <button class="export" >匯出</button>

</div>

CSS

#Memos {
  width: 150px;
  border-radius: 5px;
  padding: 3px;
  margin-top: 15px;
}
.warn {
  color: red;
  margin: 0;
  font-size: 12px;
}
.send {
  width: 100px;
  padding: 3px;
  background: #EA0000;
  color: #FFF;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.send:hover {
  background: #6F00D2;
  opacity: 0.7;
  transition: 1s;
}
.export{
  width: 100px;
  margin-top: 5px;
  padding: 5px;
  cursor:pointer;
  border: 0;
  border-radius:5px ;
  background: #3A006F;
  color: #FFF;
  
}
.del{
  width: 80px;
  border: 0;
  border-radius:5px ;
  background:#FF0000;
  color: #FFF;
  cursor:pointer;
}

li{
  width: 81%;
  margin-top: 5px;
  background:	#B15BFF;
  display: flex;
  justify-content: space-between;
  border-radius:3px;
  color: #fff;
}
select{
  width: 70px;
  padding: 3px;
  border-radius:5px ;
}

.red{
  background:#FF9797;
}
.ora{
  background:#FFAF60;
}
.important{
  background:	#EA7500;
  color: #FFF;
}
.urgent{
  background:	#FF2D2D;
  color: #FFF;
}
.finish{
  width: 80px;
  border: 0;
  border-radius:5px ;
  background:#6C3365;
  color: #FFF;
  cursor:pointer;
}
.spanfinish{
  font-size: 10px;
  margin-left: 5px;
}

JavaScript

const Memos = document.querySelector('#Memos')
const sendBtn = document.querySelector('.send')
const exportBtn = document.querySelector('.export')
const normal = document.querySelector('.normal').value
const important = document.querySelector('.important').value
const urgent = document.querySelector('.urgent').value
const select =  document.querySelector('select')
function add() {
  const warn = document.querySelector('.warn')
  const ul = document.querySelector('ul')
  const li = document.createElement('li')
  const span = document.createElement('span')
  const spanFinish = document.createElement('span')
  const spanDiv = document.createElement('div')
  const delBtn = document.createElement('button')
  const div =  document.createElement('div')
  const finishBtn = document.createElement('button')
  
  delBtn.classList.add('del')
	finishBtn.classList.add('finish')
  spanDiv.classList.add('spanDiv')
  spanFinish.style.display = 'none'
  span.classList.add('spanText')
  //spanFinish.classList.add('spanfinish')
  if (Memos.value === '') {
    warn.textContent = '請輸入文字'
    return
  } else {
  	warn.textContent = ''
    span.textContent = Memos.value
    delBtn.textContent = '刪除'
    finishBtn.textContent = '標示已完成'
    spanFinish.textContent ='(已完成)'
    ul.append(li)
    li.append(spanDiv)
    
    spanDiv.append(span)
    spanDiv.append(spanFinish)
    
    li.append(div)
    div.append(delBtn)
		div.append(finishBtn)
    Memos.value = ''
    
    delBtn.onclick = remveData
   
    //已完成按鈕
    finishBtn.addEventListener('click',finish)
  }
  //新增Li緊急程度表單
  const selectValue = document.querySelector('select').value

  if(selectValue === urgent){
  	li.className = li.className + 'red'
  }else if(selectValue === important){
  	li.className = li.className + 'ora'
  }
}
function remveData(){
		let nowDom = event.target.parentElement;
		nowDom.parentNode.remove();
}
function exportData(){
  let todoList = document.querySelectorAll('.spanText');
  let str = '今日代辦 : \n'
 ...