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="想記住什麼?">
    
    <select class="situation" id="situation" onchange="change1()">
      <option value="normal">一般</option>
      <option value="important">重要</option>
      <option value="urgent">緊急</option>
    </select>
    
    <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>

CSS

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

/* input */

.input-area{
  display: flex;
  justify-content: center;
  align-items: center;
}
input{
  flex: 1;
  margin: 5px;
  padding: 0.7rem;
  font-size: 1.5rem;
  height: 40px;
  border: 2px solid lightgreen;
  border-radius: 5px;
}
input:focus{
  border: 0.5px;
  outline: 2px solid lightgreen;
}

input.normal{
  border: 2px solid lightgreen;
}

input.important{
  border: 2px solid orange;
}

input.urgent{
  border: 2px solid red;
}

.situation{
  margin: 5px;
  width: 50px;
  height: 40px;
  justify-content: center;
  border: 0;
  border-radius: 5px;
}

.add-btn{
  margin: 5px;
  width: 40px;
  height: 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;
}
li{
  display: flex;
  justify-content: space-between;
  margin: 5px;
  padding: 0.7rem;
  /* background-color: white; */
  border-radius: 5px;
}
li>div{
  display: flex;
  align-self: center;
  gap: 10px;
}
span#check_done{
  width: 45px;
  text-align: center;
  border: 1px solid;
  border-radius: 10px;
  cursor: pointer;
}
button{
  border: none;
  color: black;
  background-color: pink;
  border-radius: 20px;
  cursor: pointer;
}
button:hover{
  background-color: lightgray;
  color: red;
}
li > span{
  font-size: 16px;
}
.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;
}

ul>li.normal{
  color: black;
  background-color: white;
}

ul>li.important{
  color: white;
  background-color: orange;
}

ul>li.urgent{
  color: white;
 ...

JavaScript

/* 新增list */
function add(){
	let input_ = document.querySelector('#input'); 
  let list_ = document.querySelector('#list');
  let situation_ = document.querySelector('#situation');

  let li_ = document.createElement('li');
  let span_ = document.createElement('span');
  let done_ = document.createElement('span');
  let div_ = document.createElement('div');
  let span_state_ = document.createElement('span');
  let btn_ = document.createElement('button');

  let inputValue = input_.value;
	console.log(inputValue)

//驗證input& 動態生成
  if(inputValue === ''){
  	alert("請輸入代辦事項");
		return
  }else{
  	
    list_.append(li_);
  	li_.append(span_);
    li_.append(done_);
    li_.append(div_);
    div_.append(span_state_);
    div_.append(btn_);
    
  	li_.className = situation_.value;
    
    span_.setAttribute('class', 'content')
  	span_.textContent = inputValue;

    done_.setAttribute('id', 'done');
    done_.style.display= 'none';
    done_.textContent = '已完成';

		span_state_.setAttribute('id', 'check_done');
    span_state_.setAttribute('onclick', 'check_done()');
    span_state_.textContent = '待辦';

  	btn_.textContent = 'Delete';
  	btn_.onclick = remove;
  	input.value = '';
  }
}

/* 刪除 */
function remove(){
	document.querySelector('li').remove();
}
/* 確認完成/未完成 */
function check_done(){
	let doneText = document.querySelector('#done');
	let doneBtn = event.target;
  if (doneText.style.display === "none") {
    doneText.style.display = "block";
    doneBtn.textContent = "完成"
  } else {
    doneText.style.display = "none";
    doneBtn.textContent = "未完成"
  }
}

/* 匯出至alert */
function output(){
	let level = document.querySelectorAll('li');
  let outputlist = document.querySelectorAll('span.content');
  let result = '';
  let num = 1;
  /* console.log(outputlist); */
    
for (let i = 0; i < outputlist.length; i++) {
  let text = outputlist[i];
  let li = level[i];
  
  if (li.className === "important") {
    result += "\n" + num.toString() + ".*" +...