JSFiddle - React, Tailwind, and code Playground

by shnny

HTML

<label for="Memos">請輸入備忘事項 : </label> 
<br>
<input type="text" id="Memos"> <button class="send" onClick="btn()">傳送</button>
<p class="warn"></p>
<ul class="list"><ul>

CSS

input {
  width: 150px;
  border-radius: 5px;
  padding: 3px;
}

.warn {
  color: red;
  margin: 0;
  font-size: 14px;
}

button {
  width: 100px;
  padding: 3px;
  background: #EA0000;
  color: #FFF;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #6F00D2;
  opacity: 0.7;
  transition: 1s;
}

JavaScript

let list = document.querySelector('.list')
let warn = document.querySelector('.warn')

function btn(){
	let memos = document.querySelector('#Memos')
	let newList = document.createElement('li')
  let elem = document.createElement('span')
  //表格為空時停止傳送
  if(memos.value === ''){
  	warn.textContent = '請輸入文字'
    return;
  }
  
  elem.textContent = memos.value.trim()
  list.append(newList)
  newList.append(elem)
  memos.value = ''
}