菜菜菜的前端學習日誌 - Day26

To Do List

前２天介紹了一些基本的語法

今天就透過之前學到的那些語法來時做一個簡單的 To Do List 吧

前置作業

一開始我們先把我們的架構先弄起來

我們今天的To Do List功能主要有

1. 一個能夠輸入資料的地方
2. 一個按鈕能夠新增清單
3. 清單存放的位置
4. 改變清單完成狀態
5. 刪除清單的按鈕

基本結構

首先我們先從前三點開始

<div class="container">
  <h1>To Do List</h1>             //標題
  <input type="text" id="input">  //輸入處
  <button id="add">ADD</button>   //新增鈕
  <div class="toDoList"></div>    //清單
</div>

取值

好的基本結構寫好以後我們就可以來寫功能的部分了

先從輸入欄的地方開始

我們先設定點擊 ADD 按鈕時去執行取 input 裡面的值

$(document).ready(function(){
  $("#add").click(function(){
    var inputValue = $("#input").val();
    alert(inputValue);
  });
});

我們先測試一下有沒有取到值

新增清單

好的我們有取到input裡面的值了

接下來就是將 input 的值新增到清單裡

那我們的清單裡面要有哪些東西呢？

清單的內容是一定要的

再來要能夠切換清單的完成狀態，就用 checkbox 來做吧

最後就是要有能夠刪除清單的按鈕

我們就透過昨天講過的 append() 來達到新增清單的功能吧

$(document).ready(function(){
  $("#add").click(function(){
    var inputValue = $("#input").val();
    $("#toDoList").append(
      `<div class="toDos">
        <input type="checkbox">
        <p>${inputValue}</p>
        <button class="delete">Delete</button>
       </div>`
    );
  });
});

這樣子就能透過點擊新增按鈕來新增清單囉～(因為p預設是 display: block 不會跟其他的元素在同一列，所以我們把它的屬性改成 inline-block 吧)

好的～到這邊就算是完成一半囉！！

因為To Do List(待辦事項)的清單會有完成的時候

完成時我們就會將它劃掉

改變清單完成狀態

那接下來我們要讓清單可以改變完成的狀態

要讓清單改變狀態我們就要先去判斷checkbox 是否是 checked 的狀態

我們利用prop去判斷 checkbox 是否 checked

$(document).ready(function(){
  $("#add").click(function(){
    var inputValue = $("#input").val();
    $("#toDoList").append(
      `<div class="toDos">
        <input type="checkbox" class="status">
        <p>${inputValue}</p>
				<button class="delete">Delete</button>
			</div>`
    );
    
    $(".status").each(function(){
      $(this).click(function(){
        var status = $(this).prop("checked");
        console.log(status);
      });
    });
  });
});

好的～我們能夠判斷 checkbox 是否 checked 了以後

就能改變清單的樣式了，就讓它完成的時候文字有刪除線並且顏色變灰色吧

$(document).ready(function(){
  $("#add").click(function(){
    var inputValue = $("#input").val();
    $("#toDoList").append(
      `<div class="toDos">
        <input type="checkbox" class="status">
        <p>${inputValue}</p>
				<button class="delete">Delete</button>
			</div>`
    );
    
    $(".status").each(function(){
      $(this).click(function(){
        var status = $(this).prop("checked");
        if(status == true){
          $(this).parent().children("p").css({"text-decoration": "line-through","color": "#a0a0a0"});
        }else if(status == false){
           $(this).parent().children("p").css({"text-decoration": "none","color": "black"});
        };
      });
    });
  });
});

刪除清單

在能夠改變狀態之後，就來到對後一步了

那就是刪除清單

因為我們每個清單都是用一個 div 包起來，所以我就用 closest 來指定刪除鈕的父層 div

再用 remove 將它刪掉

$(document).ready(function(){
  $("#add").click(function(){
    var inputValue = $("#input").val();
    $("#toDoList").append(
      `<div class="toDos">
        <input type="checkbox" class="status">
        <p>${inputValue}</p>
				<button class="delete">Delete</button>
			</div>`
    );
    
    $(".status").each(function(){
      $(this).click(function(){
        var status = $(this).prop("checked");
        if(status == true){
          $(this).parent().children("p").css({"text-decoration": "line-through","color": "#a0a0a0"});
        }else if(status == false){
           $(this).parent().children("p").css({"text-decoration": "none","color": "black"});
        };
      });
    });

    $(".delete").each(function(){
      $(this).click(function(){
       $(this).closest('div').remove(); 
      })
    })
  });
});

這樣子就完成一個簡單的 To Do List囉～