JS漫遊記-29-曾經的魔王To do list

2024 iThome 鐵人賽

DAY 29

自我挑戰組

JS漫遊記系列第 29 篇

16th鐵人賽 js javascript 學習筆記 js漫遊記

joycechou_914

2024-09-10 23:32:39

159 瀏覽

分享至

沒想到已經是倒數第二天了~
這次想要來寫一下TO DO LIST的部分
至於最後一天，會想要來寫一下檢討跟之後發文的方向~
因為要準備去澎湖玩了~所以也剛好在澎湖思考一下接下來的方向唷~

to-do-list
讓我們來解說一下html(頁面顯示)跟js(功能處理)

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./to.css">
</head>
<body>
  //增加一個輸入框，未輸入前顯示請輸入待辦事項
  <input type="text" class="txt" placeholder="請輸入待辦事項">
  
  //一個按鈕，用來儲存待辦清單
  <input type="button" class="save" value="儲存待辦">
  <ul class="list"></ul>

  <script src="to.js"></script>
</body>
</html>


// 定義變數
const txt = document.querySelector('.txt');
const save = document.querySelector('.save');
const list = document.querySelector('.list');

// 先設計一個物件，跑foreach把東西帶出來
let data =[
  {
    "content":"待辦事項一"
  },
  {
    "content":"今天記得刷牙"
  }
];
//渲染
function renderData(){
  
  // 跑foreach把物件跑出來
  let str ='';
  data.forEach(function(item,index){
    str +=`<li>${item.content} 
    <input class="delete" type="button" data-num ="${index}" value="刪除待辦">
    </li>`
  })
  console.log(str);//<li>待辦事項一 <input class="delete" type="button" value="刪除待辦"></li><li>今天記得刷牙 <input class="delete" type="button" value="刪除待辦"></li>

  // 接著把東西丟到ul的list 中，先抓取這個list
  // 把我組好的字串丟進去
  const list = document.querySelector(".list");
  list.innerHTML = str;
}

//新增待辦
save.addEventListener('click',function(e){
  if (txt.value=="") {
    // 沒有輸入東西跑這裡
    alert("請輸入內容");
    return;
  }
    // 有輸入東西跑這裡
    // alert(txt.value);
    // console.log(txt);
    let obj = {};//組個物件把值放進去
    obj.content = txt.value
    data.push(obj);
    renderData();//渲染畫面出來
})

// 刪除待辦功能
list.addEventListener('click',function(e){
  if(e.target.getAttribute("class")!=="delete"){
    alert("你目前不是點擊到按鈕");
    return;
  }
  // alert('你目前有確實點擊到刪除按鈕')
  // 取出data-num看是哪個項目接著去做刪除的動作
  let num = e.target.getAttribute("data-num");
  console.log(num);//看按下刪除的是哪筆資料
  data.splice(num,1);//刪除一筆資料
  renderData();//刪除
})

CODEPEN
https://codepen.io/JoyceChou914/pen/WNqPQEV

我是超級新手，若有任何建議或是錯誤的部分，歡迎底下留言唷thanks
我們下篇文章見掰掰~