JSFiddle - React, Tailwind, and code Playground

by cncent454518

HTML

<div class="wrap">
<h2>ToDoList</h2>
<div id="panel">
<input class="mytext" id="input"type="text">
<button class="myitm " onclick="add()">+</button>
<select id="mysel" onchange='onc()'>
<option value="normal">一般</option>
<option value="import">重要</option>
<option value="emerg">緊急</option>
</select>
</div>
<ul id="list">
</ul>
<button id="exbtn"class="totext">匯出為文字</button>
</div>

CSS

*{
  box-sizing:border-box;
}
body{
 background-color:#B9887D;  
}
.wrap{
  width:400px;
  margin:30px auto;
  display:flex;
  flex-direction:column;
}
#panel{
  display:flex;
  justify-content:center;
}
h2{
  text-align:center;
}
.mytext{
  padding:1rem;
  width:100%;
  /* height:10vh; */
  background-color:#ffff;
  border:none;
  border-radius:5px 0 0 5px;
}
.myitm{
  width:10%;
  border:none;
  border-radius:0 5px 5px 0;
  background-color:#FC9F4D;
  color:#fff;
/*   padding:1rem; */
  
}
.myitm:hover{
  cursor:pointer;
}
#list{

  margin-left: 0;
  padding-left: 0;
}
#list > li {
  display:flex;
  justify-content:space-between;
  width:100%;
  background-color: rgba(255, 255, 255, 0.7);
  list-style-type: none;
  padding: 10px 8px;
  margin-bottom: 8px;
  border-radius: 5px;
}
#list button{
  border:none;
  color:#fff;
  background-color:red;
  border-radius:20px;
  cursor:pointer;
}

#list button:hover{
  background-color:#fff;
  color:black;
}
.totext{
  margin:auto;
  width:max-content;
  padding:5px;
  border-radius:5px;
}
#mysel{
  border:none;
  border-radius: 5px;
}
#mysel:nth-child(2){
  color:red;
}
.import{
  background-color:#F05E1C;
}
.emerg{
  background-color:#CB1B45;
}

JavaScript

function add(){
function remove(){
event.target.parentElement.remove();
}
 var input = document.getElementById('input');
 var list = document.getElementById('list');
 var li = document.createElement('li');
 var span = document.createElement('span'); 
 var btn=document.createElement('button');
 var ebtn=document.getElementById('exbtn');
 var mysel= document.getElementById('mysel');
 list.append(li);
 li.append(span);
 span.className = span.className + mysel.value;
 li.append(btn);
 btn.textContent = 'X';
 btn.onclick=remove;
 ebtn.onclick=expo;
span.textContent = input.value;
/*  console.log(span.textcontent);*/
 input.value=''; 
 function expo(){
 		var num = 1;
 		var text = "";
 		var listcon = list.children;
   
for(let x of listcon){
 var xclass=x.children[0].className;
 /* alert(num.toString() + ') ' + x.children[0].textContent ); */
if (xclass=='import'){
text = text + `${num}. *${x.children[0].textContent}* `;
}
else if (xclass=='emerg'){
text = text + `${num}. **${x.children[0].textContent}** `;
}
else{
text = text + `${num}. ${x.children[0].textContent} `;
}
  
  num = num + 1;
 }
 alert(`今日待辦：${text}`);
 }

}

function onc(){
let val = event.target.options[event.target.selectedIndex].value;
if (val=='import'){
input.className = 'mytext import';
 /* document.querySelector('.mytext').style.background='#F05E1C' */;
  document.querySelector('#mysel').style.background='#F05E1C';
}
else if(val=='emerg'){
input.className = 'mytext emerg';
document.querySelector('#mysel').style.background='#CB1B45';
}
else {
input.className = 'mytext';
document.querySelector('#mysel').style.background='#fff';

}
}