JSFiddle - React, Tailwind, and code Playground

by kushmuffin

HTML

<div class="container">
  <h1>待辦事項</h1>
  <div class="input-area">
    <input type="text" id="input" value="" placeholder="想記住什麼?">
    <button class="add-btn" onclick="add()">✓</button>
  </div>
</div>

<div class="container">
  <ul id="list">

  </ul>
</div>

<div class="export">
  <button class="export-btn" id="exportid" onclick="output()">匯出</button>
</div>
 

<!-- <i class="fa-solid fa-trash-can"></i> -->

CSS

*{
  box-sizing: border-box;
  font-size: 12px;
  color: black;
}
body{
  background-color: SeaShell;
}
.container{
  width: 400px;
  margin: auto;
}
h1{
  text-align: center;
  font-size: 3rem;
}

/* input */

.input-area{
  display: flex;
  justify-content: center;
}
#input{
  flex: 1;
  margin: 5px;
  padding: 0.7rem;
  font-size: 1.5rem;
  border: 0px;
  border-radius: 5px;
}
#input:focus{
  border: 0.5px;
  outline: 2px solid lightgreen;
}
.add-btn{
  margin: 5px;
  width: 40px;
  font-size: 1.5rem;
  background-color: darkgray;
  color: black;
  cursor: pointer;
  border: 0px;
  border-radius: 5px;
}
.add-btn:hover{
   color: white;
   background-color: lightpink;
}

/* list */

.container #list{
  justify-content: center;
  padding: 0px;
}
#list li{
  display: flex;
  justify-content: space-between;
  margin: 5px;
  padding: 0.7rem;
  background-color: white;
  border-radius: 5px;
}
#list button{
  border: none;
  color: white;
  background-color: red;
  border-radius: 20px;
  cursor: pointer;
}
#list button:hover{
  background-color: lightgray;
  color: red;
}
li > span{
  font-size: 20px;
}
.export{
  text-align: center;
}
.export-btn{
  padding: 10px;
  background-color: lightgray;
  border: 0px;
  border-radius: 5px;
  cursor: pointer;
}
.export-btn:hover{
   color: white;
   background-color: lightpink;
}

JavaScript

/* 新增liat */
function add(){
	let input_ = document.getElementById('input');
  let list_ = document.getElementById('list');
  
  let li_ = document.createElement('li');
  let span_ = document.createElement('span');
  let btn_ = document.createElement('button');
  
  
	list_.append(li_);
  li_.append(span_);
  li_.append(btn_);
  
  let inputValue = input.value;
  span_.textContent = inputValue;
  btn_.textContent = 'Delete';
  btn_.onclick = remove;
  input.value = '';
}

/* 刪除 */
function remove(){
	event.target.parentElement.remove();
}

/* 匯出至alert */
function output(){
  let exportBtn = document.getElementById('exportid');
  let outputlist = document.getElementById('list').children;
  let result = '';
  let num = 1;
  console.log(outputlist);
    
for (let text of outputlist){
    result += "\n" + num.toString() + "." + text.children[0].textContent + ",";
    num++;
  }
  if(result === '' || outputlist.lenght === 0){
    alert("請輸入代辦事項");
		return;}
  alert("代辦事項 :" + result)
}