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
}
select{
  width: 70px;
  padding: 3px;
  border-radius:5px ;
}

.red{
  background:#FF9797;
}
.ora{
  background:#FFAF60;
}
.important{
  background:	#EA7500;
  color: #FFF;
}
.urgent{
  background:	#FF2D2D;
  color: #FFF;
}

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 delBtn = document.createElement('button')
  delBtn.classList.add('del')

  if (Memos.value === '') {
    warn.textContent = '請輸入文字'
    return
  } else {
  	warn.textContent = ''
    span.textContent = Memos.value
    delBtn.textContent = '刪除'
    ul.append(li)
    li.append(span)
    li.append(delBtn)

    Memos.value = ''
    
    delBtn.onclick = remveData
    
  }
  //新增Li緊急程度表單
  const selectValue = document.querySelector('select').value

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

  for(let i =0 ; i<todoList.length ; i++){
    if(todoList[i].parentNode.className === 'red'){
      //str += ` ${i+1}. *${todoList[i].textContent }* `
      
      str += `${i+1} . **${todoList[i].textContent}** \n`
    }else if(todoList[i].parentNode.className === 'ora'){
    	str += `${i+1} . *${todoList[i].textContent}* \n`
    }else{
    	str += `${i+1} . ${todoList[i].textContent} \n`
    }
    
  }
	alert(str)
}
//修改Input框顏色
function inputchange(){
Memos.className = select.value
}
 


sendBtn.addEventListener('click', add)
exportBtn.addEventListener('click', exportData)
select.addEventListener('change',inputchange)