4.17 實作：待辦事項

結果示意

在 todolist 資料夾中，建立以下資料夾及檔案：

• index.html

• css/index.css

• js/index.js

建議執行順序：

介面1 → 介面2 → 資料1 → 資料2 → 介面3 → 資料3 → 介面4 → 資料4。

介面

第一步：基本介面及 text 欄位事件

提供 html 及 CSS：

index.html

將以下原始碼，放至 body 標籤內：

<article class="task_container">
  <h1 class="title1">待辦事項</h1>

  <div class="task_add_block">
    <input type="text" class="task_name" placeholder="輸入待辦事項…">
    <button type="button" class="task_add">新增</button>
  </div>

  <div class="task_list_parent">
    <ul class="task_list">
    </ul>
  </div>
</article>

index.css

完成以下項目：

• index.html 頁面需載入 index.js 及 index.css 檔。

• input.task_name 在 focus 事件觸發時，div.task_add_block 加上 -on class。

• input.task_name 在 blur 事件觸發時，div.task_add_block 移除 -on class。

完成後的原始碼如下：

document.addEventListener("DOMContentLoaded", function(){
  
  // ==== 待辦事項文字框的 focus 事件及 blur 事件觸發 ===== //
  var input_task_name = document.getElementsByClassName("task_name")[0];
  input_task_name.addEventListener("focus", function(){
    this.closest("div.task_add_block").classList.add("-on");
  });
  input_task_name.addEventListener("blur", function(){
    this.closest("div.task_add_block").classList.remove("-on");
  });  

});

第二步：新增待辦事項

將以下的 CSS，貼至 index.css 的最後方：

/* ===== 任務列表 ===== */
div.task_list_parent{
  margin-top: 30px;
}
div.task_list_parent ul.task_list{
  margin: 0;
  padding: 0;
  list-style: none;
}
div.task_list_parent ul.task_list > li{
  margin-bottom: 20px;
  border-bottom: 1px solid gray;
  padding-bottom: 20px;
  opacity: 1;
  transition: opacity 1s;
}
div.task_list_parent ul.task_list > li.fade_out{
  opacity: 0;
}
div.task_list_parent ul.task_list > li:first-child{
  border-top: 1px solid black;
  padding-top: 20px;
}
div.task_list_parent ul.task_list > li:first-child button.btn_up{
  background-color: lightgray !important;
  cursor: not-allowed !important;
  color: gray;
}
div.task_list_parent ul.task_list > li:last-child{
  margin-bottom: 0;
  border-bottom: 0;
}
div.task_list_parent ul.task_list > li:last-child button.btn_down{
  background-color: lightgray !important;
  cursor: not-allowed !important;
  color: gray;
}
div.task_list_parent ul.task_list > li > div.item_flex{
  display: flex;
  /* border: 1px solid black; */

}
div.task_list_parent ul.task_list > li > div.item_flex > div{
  /* border: 1px solid blue; */
}

div.task_list_parent ul.task_list > li > div.item_flex > div.middle_block{
  font-size: 1.8rem;
  flex-grow: 1;
  padding-left: 10px;
  padding-right: 10px;
}
div.task_list_parent ul.task_list > li > div.item_flex > div.middle_block p.para{
  margin: 0;
}
div.task_list_parent ul.task_list > li > div.item_flex > div.right_block{
  width: 100px;
  flex-shrink: 0;
}

div.task_list_parent ul.task_list > li > div.item_flex > div.right_block div.btn_flex{
  display: flex;
}
div.task_list_parent ul.task_list > li > div.item_flex > div.right_block div.btn_flex > button{
  flex-grow: 1;
  outline: none;
  height: 40px;
  font-size: 1.6rem;
  padding: 0;
  margin: 0;

  background: none;
  background-color: white;
  border: 0;
  cursor: pointer;
  border: 1px solid #eee;
}

新增待辦事項的結構，即以下的 li 標籤，需透過 JS 程式來新增至頁面上：

<li>
  <div class="item_flex">
    <div class="middle_block">
      <p class="para">這是假文字這是假文字這是假文字這是假文字這是假文字這是假文字</p>
    </div>
    <div class="right_block">
      <div class="btn_flex">
        <button type="button" class="btn_update">更新</button>
        <button type="button" class="btn_delete">移除</button>
      </div>
    </div>
  </div>
</li>

完成以下項目：

• 按下「新增」按鈕時，將以上的待辦事項結構，新增到 ul.task_list 裡面的最前面。

• 如果沒有輸入待辦事項，按「新增」的話，不能有任何反應。

• 新增成功的話，待辦事項欄位要清空。

• 輸入的待辦事項，如果文字的最左邊、最右邊有空格，需移除。(語法：JS 內建的 trim() 函式)。

• 按下「Enter」鍵，也要能新增待辦事項。

完成後的原始碼如下：

// ==== text 欄位新增待辦事項 ===== //
input_task_name.addEventListener("keyup", function(e){
  if(e.which == 13){
    let button_task_add = document.getElementsByClassName("task_add")[0];
    button_task_add.click();
  }
});

// 按下新增按鈕
var button_task_add = document.getElementsByClassName("task_add")[0];
button_task_add.addEventListener("click", function(){
  let task_text = (input_task_name.value).trim();

  if(task_text != ""){

    let list_html = `
      <li>
        <div class="item_flex">
          <div class="middle_block">
            <p class="para">` + task_text + `</p>
          </div>
          <div class="right_block">
            <div class="btn_flex">
              <button type="button" class="btn_update">更新</button>
              <button type="button" class="btn_delete">移除</button>
            </div>
          </div>
        </div>
      </li>
    `;

    let ul_task_list = document.getElementsByClassName("task_list")[0];
    ul_task_list.insertAdjacentHTML("afterbegin", list_html);
    input_task_name.value = "";

  }

});

第三步：移除與清空

更新 index.html：

將以下這行放到 h1 標籤之前：

<button type="button" class="btn_empty">清空</button>

更新 index.css：

/* ===== 清空按鈕 ===== */
button.btn_empty{
  float: right;
  background: none;
  background-color: white;
  padding: 0;
  margin: 0;
  border: 1px solid lightgray;
  border-radius: 3px;
  height: 30px;
  width: 50px;
  outline: none;
  font-size: 1.6rem;
  cursor: pointer;
}

完成以下項目：

• 按下「移除」按鈕，需詢問使用者是否要移除，若確定的話，該筆待辦事項的 li 標籤，加上 fade_out 這個 class，就會淡出 1 秒，然後請移除該筆待辦事項。

• 按下「清空」按鈕，需詢問使用者是否要清空，若確定的話，ul.task_list 裡的第一層子元素 li 標籤，加上 fade_out 這個 class，就會淡出 1 秒，然後請清除全部的待辦事項。

完成後的原始碼如下：

// ==== 移除待辦事項 ===== //
document.addEventListener("click", function(e){
  //console.log(e.target);
  
  if(e.target.classList.contains("btn_delete")){
    let r = confirm("確認移除？");
    if (r){

      e.target.closest("li").classList.add("fade_out");
      setTimeout(function(){
        e.target.closest("li").remove();
      }, 1000);
      
    }

  }
});

// ==== 清空待辦事項 ===== //
var button_btn_empty = document.getElementsByClassName("btn_empty")[0];
button_btn_empty.addEventListener("click", function(){
  let r = confirm("確認清空？")
  if (r){


    let ul_task_list = document.getElementsByClassName("task_list")[0];
    for(let i = 0; i < ul_task_list.children.length; i++){
      ul_task_list.children[i].classList.add("fade_out");
    }
    setTimeout(function(){
      ul_task_list.innerHTML = "";
    }, 1000);

  }
});

第四步：更新待辦事項

index.js 檔案更新，待辦事項更新以下結構，有以下這行：

<p class="para">${item.name}</p>;

在其下方，加上這行(留意有加上 -none 這個 class，即預設是消失狀態)，value 的部份留意變數名稱：

<input type="text" class="task_name_update -none" placeholder="更新待辦事項…" value="${item.name}">

上述所做的更動，在以下兩個地方有：

• 重新整理頁面時，要加。

• 新增待辦事項時，要加。

更新 index.css：

div.middle_block input.task_name_update{
  width: 100%;
  border: 1px solid lightgray;
  border-radius: 3px 0 0 3px;
  height: 40px;
  font-size: 2rem;
  padding: 5px 10px;
  outline: none;
}
div.middle_block input.task_name_update::placeholder{
  color: lightgray;
}

.-none{
  display: none;
}

完成以下項目：

• 按下「更新」按鈕，出現一般文字框，然後可以更新。

• 再按下「更新」按鈕，回到不可編輯的狀態，但待辦事項要是更新的。

• 如果所更新的待辦事項，沒有輸入文字，跳出提醒視窗(alert)，顯示「請輸入待辦事項」。

• 待辦事項的文字若最左邊、最右邊有空格的話，需移除。

完成後的原始碼如下：

// ==== 更新待辦事項 ===== //
document.addEventListener("click", function(e){
  if(e.target.classList.contains("btn_update")){

    let the_p = e.target.closest("li").querySelector("p.para");
    let the_task_name_update = e.target.closest("li").querySelector("input.task_name_update");

    if( e.target.getAttribute("data-edit") == undefined){ // 進入編輯狀態

      e.target.setAttribute("data-edit", "true");
      the_p.classList.toggle("-none");
      the_task_name_update.classList.toggle("-none");

    }else{
      let update_task_name = (the_task_name_update.value).trim();
      if(update_task_name == ""){
        alert("請輸入待辦事項");
      }else{
        the_p.innerHTML = update_task_name;
        the_p.classList.toggle("-none");
        the_task_name_update.value = update_task_name;
        the_task_name_update.classList.toggle("-none");

        e.target.removeAttribute("data-edit");

        
      }
    }

  }
});

資料

第一步：新增資料至 localStorage

資料儲存至 localStorage，key 的名稱指定 tasks，然後存進去的資料格式如下：

[{
  "item_id": 123,
  "name": "使用者輸入的文字1"
}, {
  "item_id": 456,
  "name": "使用者輸入的文字2"
}]

提供參考原始碼如下：

第一個部份，新增資料時，替每一筆待辦事項產生一個 ID，再將該ID放至 li 標籤上，屬性名稱設定 data-id：

let item_id = Date.now(); // timestamp 當做該項的 id

第二個部份，資料存至 localStorage：

// ******************* 儲存資料到 localStorage ******************* //
let task = {
  "item_id": item_id,
  "name": task_text
};
let tasks = JSON.parse(localStorage.getItem("tasks"));
//console.log(tasks);

if(tasks){ // 若存在
  tasks.unshift(task); // [{}, {}]
}else{ // 若不存在
  tasks = [task];
}
localStorage.setItem("tasks", JSON.stringify(tasks));

第二步：從 localStorage 取得資料

DOMContentLoaded 事件發生之後，執行某個函式(例：get_tasks())，這段函式用途是將 localStorage 裡的資料抓出來，然後進行資料的處理，拼裝完結構之後，再丟回到頁面上(ul 標籤裡)：

在 DOMContentLoaded 事件發生之後，執行 get_tasks() 函式：

document.addEventListener("DOMContentLoaded", function(){

  // ******************* 從 localStorage 取得資料 ******************* //
  get_tasks();
  
});

get_tasks() 函式完成的原始碼如下：

function get_tasks(){
  let tasks = JSON.parse(localStorage.getItem("tasks"));
  if(tasks){

    let list_html = "";
    tasks.forEach(function(item, i){ // [{}, {}]

      list_html += `
        <li data-id="${item.item_id}">
          <div class="item_flex">
            <div class="middle_block">
              <p class="para">${item.name}</p>
            </div>
            <div class="right_block">
              <div class="btn_flex">
                <button type="button" class="btn_update">更新</button>
                <button type="button" class="btn_delete">移除</button>
              </div>
            </div>
          </div>
        </li>
      `;

    });
    let ul_task_list = document.getElementsByClassName("task_list")[0];
    ul_task_list.innerHTML = list_html;

  }

}

第三步：移除 localStorage 裡的資料

點擊移除按鈕後，若使用者確認要移除，就將 localStorage 裡的該項資料移除。

完成後的原始碼如下：

// ******************* 從 localStorage 移除資料 ******************* //
let item_id = e.target.closest("li").getAttribute("data-id");
let tasks = JSON.parse(localStorage.getItem("tasks"));
tasks.forEach(function(task, i){
  if(item_id == task.item_id){
    tasks.splice(i, 1);
  }
});
localStorage.setItem("tasks", JSON.stringify(tasks));

點擊清空按鈕後，若使用者確認要清空，就將 localStorage 裡的資料清空。

完成後的原始碼如下：

// ******************* 從 localStorage 移除資料 ******************* //
localStorage.clear();

第四步：更新 localStorage 中，name 的資料

完成後的原始碼如下：

// ******************* 更新 localStorage 中，name 的資料 ******************* //
let item_id = e.target.closest("li").getAttribute("data-id");
let tasks = JSON.parse(localStorage.getItem("tasks"));
tasks.forEach(function(task, i){
  if(item_id == task.item_id){
    tasks[i].name = update_task_name;
  }
});
localStorage.setItem("tasks", JSON.stringify(tasks));