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">
      <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>
 

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

CSS

*{
  box-sizing: border-box;
  font-size: 12px;
  color: black;
}
body{
  background-color: DarkSalmon;
}
.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: 0px;
  border-radius: 5px;
}
#input:focus{
  border: 0.5px;
  outline: 2px solid lightgreen;
}

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

/* option .normal{
  color: red;
}

option .important{
  color: blue;
}

option .urgent{
  color: pink;
}
 */
.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;
}
button{
  border: none;
  color: black;
  background-color: pink;
  border-radius: 20px;
  cursor: pointer;
}
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;
}

.normal{
  color: black;
    background-color: white;
}

.important{
  color: white;
  background-color: orange;
}

.urgent{
  color: white;
  background-color: red;
}

JavaScript

/* 新增list */
function add(){
	let input_ = document.getElementById('input'); 
  let list_ = document.getElementById('list');
  
  let situation_ = document.getElementById('situation');
    
  let li_ = document.createElement('li');
  let span_ = document.createElement('span');
  let btn_ = document.createElement('button');


  let inputValue = input_.value;
  
  if(inputValue === ''){
  	alert("請輸入代辦事項");
		return
  }else{
  	list_.append(li_);
  	li_.className = li_.className + situation_.value;
  	/* console.log(li_.className) */
  	li_.append(span_);
  	li_.append(btn_);
  
  	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++; */
    /* let li_classname = li_.className; */
    if(text.className === "important"){
    result += "\n" + num.toString() + ".*" + text.children[0].textContent + "*,";
    num++;
    }else if(text.classname === "urgent"){
    result += "\n" + num.toString() + ".**" + text.children[0].textContent + "**,";
    num++;
    }else{
    result += "\n" + num.toString() + "." + text.children[0].textContent + ",";
    num++;
    }
    
  }
  if(outputlist.lenght === 0){
    alert("請輸入代辦事項");
  return;}
  alert("代辦事項 :" + result)
}