JSFiddle - React, Tailwind, and code Playground

by B__rain

HTML

<div class="dolist">
  <img class="bgc" src="https://dg.imgix.net/do-you-think-you-re-happy-jgdbfiey-en/landscape/do-you-think-you-re-happy-jgdbfiey-9bb0198eeccd0a3c3c13aed064e2e2b3.jpg?ts=1520525855&ixlib=rails-4.3.1&auto=format%2Ccompress&fit=min&w=700&h=394&dpr=2&ch=Width%2CDPR" alt="">
  <select name="level" id="Grading" onchange="Grading()" class="Grading">
    <option value="generally">普通</option>
    <option value="important">重要</option>
    <option value="urgent">緊急</option>
  </select>
  <input class="input" id="keyword" type="text" Placeholder ="輸入代辦事項...">
  <button class="btn" id="add" onclick="add()">新增</button>
  <button class="btn" id="remit">匯出</button>

  <ul class="order" id="New_items">
    <li >
      <span>倒垃圾</span>
      <button class="del" id= "del" onclick="removeitems()">X</button>
    </li>
    <li>
      <span>繳電話費</span>
      <button class="del" onclick="removeitems()" >X</button>
    </li>
    <li>
      <span>採買本週食材</span>
      <button class="del"  onclick="removeitems()">X</button>
    </li>
  </ul>
</div>

SASS

*,html
  /* border: 1px solid */
  margin: 0px
  padding: 0px
  position: relative
.dolist
  padding-top: 5px
  width: 500px
  margin: 0px
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,50%)
  border-radius: 10px
  background-image: linear-gradient(to bottom, #F3C10A, #FFFF)
  .bgc
    width: 100%
    border-radius: 10px
  #keyword
    width: 200px
    padding: 5px
    margin-left: 0px
    border-radius: 5px
  .Grading
    margin-left: 50px
  .order
    list-style-type: decimal 
    line-height: 24px
    letter-spacing: 2px
    padding: 20px auto
    margin: 20px 2em
    border: 1px solid
  .btn
    padding: 4px
    cursor: pointer
    border-radius: 5px
    background-color: #A7D5F2
    color: #000
    &:hover
      background-color: #1F5373
      color: #fff
      transition-duration: 0.5s

  .del
    padding: 5px
    margin: 2px
    cursor: pointer
    color: red
    &:hover
      background-color: #1F5373
      color: #fff
      transition-duration: 0.5s
//顏色CSS
.generally
  background-color: #fff
.important
  background-color: #FFA600
.urgent
  background-color: #FF1212
//文字顏色
.generally-text
  color: #000
.important-text
  color: #FFA600
.urgent-text
  color: #FF1212

JavaScript

function add(){
 var keyword = document.getElementById('keyword').value; //input的值
 var New_items = document.getElementById('New_items');
 
 ///動態產生細項
 var li =  document.createElement('li');
 var span = document.createElement('span');
 var del =  document.createElement('button');

//將input值帶入span
 span.textContent = keyword;
 
//將動態產生的元素組裝一起
 New_items.append(li)
 li.append(span,del)
 del.textContent = 'X';
 //setAttribute額外添加CSS修飾
 del.setAttribute('class', 'del');
 
 del.onclick = removeitems
 
 var Grading = document.getElementById('Grading')
 //添加事項顏色
 if(Grading.value === "important"){
    li.className = li.className + "important" 
   }else if(Grading.value === "urgent"){
    li.className = li.className + "urgent" 
   }else if(Grading.value === "generally"){
    li.className = li.className + "generally" 
   }

}


function removeitems() {
 event.target.parentElement.remove();
}

var remit_list = document.getElementById('remit');
remit_list.onclick = exportList;

//匯出
function exportList(){
 var ul_arrary = document.getElementById('New_items').children;
 var text = "";
 var num = 1;
 for(var arrary of ul_arrary ){
   if(arrary.className === "important"){
   text = text + num.toString() + '.' + '*' + arrary.children[0].textContent  + '*' +  ``;
   num = num+1;
   }
   else if(arrary.className === "urgent"){
   text = text + num.toString() + '.' + '**' + arrary.children[0].textContent + '**' + ``;
   num = num+1;
   }
   else
   {text = text + num.toString() + '.' + arrary.children[0].textContent +``;
   num = num+1;
   }
 }
 alert('今日待辦：' + text);

}

//讓選項變色提醒
function Grading(){
 var Grading = event.target.options[event.target.selectedIndex].value;
 console.log(Grading)
 var keyword = document.getElementById('keyword');
 if(Grading == 'generally'){
 	keyword.className = "generally-text"
 }
 	else if (Grading == 'important'){
 	keyword.className = 'important-text'
 }
 	else if(Grading == 'urgent'){
 	keyword.className = 'urgent-text'
  }
}