JSFiddle - React, Tailwind, and code Playground

by shnny

HTML

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

  <input type="text" id="Memos">
  <button class="send">傳送</button>
  <p class="warn"></p>
  <ul class="ul"></ul>
  <button class="export" >匯出</button>

</div>

CSS

.box{
  width: 400px;
}
#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:	#EA7500;
  color: #FFF;
  cursor:pointer;
}

li{
  margin-top: 5px;
   width: 260px;
   display: flex;
   justify-content: space-between;
}

JavaScript

const sendBtn = document.querySelector('.send')
const exportBtn = document.querySelector('.export')

function add() {
  const Memos = document.querySelector('#Memos')
  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
  }
}
function remveData(){
		event.target.parentElement.remove();
}



function exportData(){
  let todoList = document.querySelectorAll('span');
  let str = '今日代辦 :'
  for(let i =0 ; i<todoList.length ; i++){
    str += ` ${i+1}. ${todoList[i].textContent}`
  }
	alert(str)

}
 


sendBtn.addEventListener('click', add)
exportBtn.addEventListener('click', exportData)