JS-5-2- Local Storage

by jiaxin520

HTML

<body>
<div id="app">
<p class="title">代辦事項</p> </div>

<div class="a1">
<p class="start">
<input type='text' id=textinput placeholder="輸入內容">
<button class="Q1">+</button>
</p>
<select class='selectstyle' onchange ="changecolor()">
 <option value="" disabled hidden selected>等級</option>
  <option value="normal">一般</option>
  <option value="important">重要</option>
  <option value="emergency">緊急</option>
</select>
<button class="storage" onclick="save()">儲存</button>
<button class="output">匯出</button>
  <ul  class="a2"><!--
  <li class="normal">
    <span>倒垃圾</span>
    <span class="textfinish">（已完成）</span>
    <span class="textready">[標示為已完成]</span>
     <button class="a3">刪除</button>
  </li>
  <li class="important">
    <span>繳電話費</span>
     <span class="textfinish1">（已完成）</span>
    <span class="textready1">[標示為已完成]</span>
<button class="a3">刪除</button>
 </li>
  <li class="emergency">
    <span>採買本週食材</span>
     <span class="textfinish2">（已完成）</span>
    <span class="textready2">[標示為已完成]</span>
<button class="a3">刪除</button>
</li> -->
</ul>
</div>
</body>

CSS

* {
  box-sizing: border-box;

}
body{
     margin:10%;
}
div{
  display:flex;
  flex-direction:column;
 width:500px;
  padding:5px 0;
  border-radius:5px;
  background-color:rgba(90, 34, 139,0.6);
}
.a1{
  height:auto;
  background-color:rgba(241, 231, 254,0.9);
}

input{
  width:300px;
   border-radius:5px;
       font-weight:bold;
        font-size:30px;
       
}
button{
  width:50px;
 cursor:pointer;
     border:black 2px solid;
      border-radius:10px;
      margin-left:20px;
       font-weight:bold;
 background-color:rgba(135, 206, 250,0.3);
 font-size:20px;

}
button:hover{
  background-color:rgba(	204, 255, 0,0.3);
}
button:active{
    transform: scale(0.7);
}
p{
  display:flex;
  justify-content:center;
   font-weight:bold;
}
li{
  width:400px;
   margin-left:20px;
   margin-bottom:20px;
 
  padding-bottom:20px;
  padding-top:10px;
  list-style:none;
   border-radius:10px;
   background-color:rgba(135, 206, 250,0.3);
     font-size:25px;
   }
span{
  font-weight:bold;
  margin-left:10px;
  text-wrap:wrap;
}
.title{
  font-size:36px;
letter-spacing:40px;
 color:rgb(0, 191, 255);
}
.a3{
  display:flex;
  width:auto;
  margin-left:85%;
  margin-top:-5%;
}

.output{
 width:100px;
 margin-left:350px;
 margin-right:50px;
 margin-top:-33px;
}
.storage{
  width:100px;
  margin-left:12%;
  margin-top:5%;
} 
.selectstyle{
   background-color:rgba(135, 206, 250,0.3);
 font-size:24px;
 width:80px;
       font-weight:bold;
         border-radius:10px;
         border:2px solid black;
         
         margin-left:65px;
}
.normal{
  color:red;
}

.important{
  color:green;
}
.emergency{
  color:yellow;
}
.textnormal{
  color:blue;
}
.textimportant{
 color:orange;
}
.textemergency{
  color:red;
}
.textfinish{
  font-size:20px;
  display:none;
}
.textready{
  font-size:20px;
 display:flex;
 justify-content:end;
 margin-right:20%;
 ...

JavaScript

let button = document.querySelector('.Q1');
console.log(button)
button.onclick = add;
// 新增 文字
function add(){ 
let input = document.querySelector('#textinput');
let k1 = document.querySelector('.a2');
let k2 = document.createElement('li');
let k3 = document.createElement('span');
let k4 = document.createElement('button');
// 2-6 新增2個文字
let k5 = document.createElement('span');
let k6 = document.createElement('span');


let selectlevel = document.querySelector('.selectstyle');
let selectlevelindex = selectlevel.selectedIndex;
let selectvalue = selectlevel.options[selectlevelindex].value;
if (input.value != '' && selectvalue != '' ){ 
k1.append(k2);
k2.append(k3);
// 2-6 新增2個文字
k2.append(k5);
k2.append(k6);

k2.append(k4);
k4.className = 'a3';
k4.textContent = '刪除';
k3.textContent = input.value;
k3.className = selectvalue;
//新增 固定文字 及 class 在文字上
k5.textContent ='（已完成）';
k6.textContent ='[標示為已完成]';
k5.className = selectvalue;
k6.className = selectvalue;
k5.classList.add('textfinish');
k6.classList.add('textready');
// 新增開關
k6.onclick = done;
function done(){
if( k5.style.display === 'none'){
  k5.style.display = 'inline';
 k6.textContent = '[標示為未完成]';
 }else{
 k5.style.display = 'none';
  k6.textContent = '[標示為已完成]';
 }
}
input.value = '';
k4.onclick = remove;
selectlevel.value = '';
input.className = '';
}else{
alert('請填寫內容及等級')
} 
}


// 刪除 原本
let deletbtn = document.querySelectorAll('.a3');
for (delet of deletbtn ) {
delet.onclick = remove;
} 
// 刪除鎖定的父元素
function remove(){
event.target.closest('li').remove();
}
let output = document.querySelector('.output');
output.onclick = outputtext;
 function outputtext(){
 let notetext = document.querySelectorAll('li');
  let num = 1 ;
 let text = '' ;
 for (let i of notetext){
 let getclassname = i.querySelector('span').className;
if( i.className == 'normal' || getclassname == 'normal' ){
text = text + num.toString() + '.'...