JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://kit.fontawesome.com/41e2a8dba7.js" crossorigin="anonymous"></script>
   <title>ToDolist</title>
</head>
<body>
   <div class="look">
      <h1>ToDolist</h1>
      <div class="formRange"> 
         <!--功能表-->
         <div class="functionBar">
            <div id="add" title="新增" onclick="add()" ><i class="fa-solid fa-circle-plus"></i></div>
            <div id="output" title="匯出" onclick="output()" ><i class="fa-solid fa-list"></i></div>
            <div id="save" title="儲存" onclick="save()" ><i class="fa-solid fa-floppy-disk"></i></div>
         </div>
         <!--清單-->
         <div class="todo-container">
            <div class="todo">
               <!--空白-->
               <div class="top"></div>
               <!--輸入-->
               <div>
                  <div class="inner">
                     <div><i class="fa-regular fa-square-full" onclick="finished()"></i></div>
                     <input type="text">
                     <select  class="level" >
                        <option value="normal">一般</option>
                        <option value="important">重要</option>
                        <option value="urgent">警急</option>
                     </select>
                  </div>
                  <center><i title="刪除" onclick="deleteli()" class="fa-solid fa-trash"></i></center>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

SCSS

$themeColor:#39CCCC;
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   border: none;
}
html{
   width: 100%; 
   height: 100%;
   body{
      width: 100%; 
      height: 100%;
      background-color: #39CCCC;
      .look{
         width: 90%;
         max-width: 580px;
         margin: 3rem auto;
         padding: 20px;
         border-radius: 3px;
         background-color: white;
         h1{
            text-align: center;
            color: #248484;
         }
         .formRange{
            display: flex;
            flex-direction:row-reverse;
            justify-content: center;
            align-items: flex-start;
            
            .functionBar{
               padding: 0.3rem;
               margin: 0.2rem;
               border: #39CCCC 1px solid;
               border-radius: 3px;
               transition: all 0.3s ease;

               i{
                  scale: 1.3;
                  margin: 0.4rem;
                  color:#248484;
                  cursor: pointer;
                  &:hover{
                     color:#405252;
                  }
               }
            }
            
            .todo-container {
               display: flex;
               flex-direction:column;
               justify-content: center;
               width: 90%;
               .todo{
                  padding: 0.5rem;
                  margin: 0.2rem;
                  // border: #39CCCC 1px solid;
                  background-color: rgb(228, 252, 251);
                  border-radius: 3px;
                  width: 98%;
                  i{
                     scale: 1.3;
                     margin: 0.4rem;
                     color:#248484;
                     cursor: pointer;
                     &:hover{
                        color:#405252;
                     }
                  }
                  .inner{
                     margin: 0.3rem 0.5rem;
                     display:flex;
                     align-items: center;
   ...

JavaScript

//localStorage setList()
//updateWishList()
//setList()
//add()
//change()
//output()
//deleteli()
//finished()
//save()



 // 儲存的變數，在第一次提取會取不到資料（null），因此如果無資料就建立空陣列
let List = JSON.parse(localStorage.getItem('saveList')) || [];
let color = JSON.parse(localStorage.getItem('savecolor')) || [];
let Finish = JSON.parse(localStorage.getItem('saveFinish')) || [];
function setList() {
   if(List.length > 0){ // 检查List数组是否为空
      for (let i = 1; i < List.length; i++) { 
         add();
      }
      let input = document.querySelectorAll('input');
      let select = document.querySelectorAll('select');
      let check = document.querySelectorAll('.inner');
      for(let i = 0; i < input.length; i++){
         input[i].value = List[i];//還原input的內容
         select[i].value = color[i];//還原select的內容
         check[i].children[0].children[0].className = Finish[i];//還原勾勾
         if(color[i] == "normal"){//還原input的顏色
            input[i].className = "normalText"
         }else if(color[i] == "important"){
            input[i].className = "importantText"
         }else{
            input[i].className = "urgentText";
         }
         
      }
   }
}
setList();

function save(){
   /*
   | 宣告變數，綁定輸入欄，
   | 得到 input 和 select 內容，push 到陣列
   | 執行 localStroage
   */
   List = [];
   color = [];
   Finish = [];
   let input = document.querySelectorAll('input');
   let select =document.querySelectorAll('select');
   let check = document.querySelectorAll('.inner');
   for(let x of input){
      List.push(x.value);
   }
   for(let y of select){
      color.push(y.value);
   }
   for(let z of check){
      Finish.push(z.children[0].children[0].className);
   }
   updateWishList();

   alert("儲存成功！");
}

function updateWishList() {
   //將陣列轉成字串，存入 localstorage
   localStorage.setItem('saveList', JSON.stringify(List));
   localStorage.setItem('savecolor', JSON.stringify(color));
   localStorage.setItem('saveFinish', JSON.stringify(Finish));
}

function add() {
   // 取得 formRange 區塊
  ...