大家好，来到 IT 铁人赛最後一天了，终於要进入尾声了！
今天我们要整合这三十天来所学到的知识量，来完成一个待办事项小工具，这工具要做到以下几个功能！

1. 可以记下代办事情。
2. 能够删除代办事情。
3. 网页关掉再打开，代办清单还在。

我也在思考这个程序码有点长我该怎麽手把手地跟大家说每行程序码都在做什麽呢？
所以我这边先放上 待办事项小工具完成品接着我会一个一个区块大致上的解释此区块主要在做什麽，那就开始吧！

第一步 建立HTML结构

记得也要把 class 的名称取好，在建立 DOM 元素会用到

<div class="card">
        <div class="title">
            <h1>待办事项</h1>
        </div>

        <input type="text" class="note">
        <input type="button" class="add" value="记下来">
        <hr>
        <div class="list"></div>
</div> 

第二步 透过 CSS 装饰画面

这边是 CSS 可以自己看要呈现什麽样子就怎麽装饰，我这边是用阳春版的外观。

body{
  min-height:100vh;
  display: flex;
  justify-content:center;
  align-items:center;
}

.card{
    margin: 0 auto;
    background-color: #ffffff;
    width: 250px;
    border: 2px solid #222;
    border-radius: 10px;
    text-align: center;
}

.title{
    background-color: rgb(15, 177, 251);
    color: #ffffff;
    height: 80px;
    overflow: hidden;
}

第三步 指定 DOM 元素

重点来罗！开始撰写 JS 我们先把会点击到的按钮、要显示的列表、还有资料都先用变数建立起来，这边有一个 || []符号，意思是左边如果没有资料就代入 [] 空阵列。

var add = document.querySelector('.add');
var list = document.querySelector('.list');
var data = JSON.parse(localStorage.getItem('listData'))|| [];
// || []的意思是左边如果没有资料就代入 [] 空阵列

第四步 监听与更新

在 DOM 元素上绑定监听事件，并放上更新列表的函式，这样当待办事项有删除或新增才可以即时更新列表。

//监听事件与更新
add.addEventListener('click', newAdd);
list.addEventListener('click',toggleDone);
updateList(data)

第五步 撰写新增事项函式

这边就是把我们输入的事项，添加到代办事项的程序码，每一行的用途也附上注解罗！
在第 9 行 localStorage.setItem 就是把资料转成 stringigy 型态存在浏览器资料库内，达成即便关掉网页下次再打开，待办事项还是存在！

 function newAdd(e){
     e.preventDefault();  //取消预设属性
     var txt = document.querySelector('.note').value;  //去抓输入框的数值
     var todo ={       
         content: txt
     };
     data.push(todo);   // 在 data 内放进上面的资料
     updateList(data);  //更新 list 列表
     localStorage.setItem('listData',JSON.stringify(data));  // 在浏览器资料库设定一个叫做 listData 的储存格 里面放data 资料

第六步 撰写删除事项函式

此步骤运用了再上一篇提到的 splice 的方式，在点击元素後就删除那个元素，并且加入 if 判断式只有点击 Ａ标签才会有反应，一样要写第 6 行的 localStorage.setItem 把删除後的阵列资料再次写进资料库内，保证浏览器内的资料库是处在最新的状态，也就是每次的更新或删除都必须在更新 localStorage 内的阵列资料。

function toggleDone(e){
    e.preventDefault();  //取消预设属性
    if( e.target.tagName !== 'A'){return};   //去判断如果抓到的值不等於Ａ这个标签就返回不做任何动作
    var index = e.target.dataset.index;    //建立一个变数，去抓取这个点击按钮的 dataset 
    data.splice(index,1);   //在资料中把这个事件删除
    localStorage.setItem('listData',JSON.stringify(data));  //删除後必须在进到浏览器去设定新的资料，找到 listData 这个记忆体栏位 放进新的资料。
    updateList(data);  //我们在更新整个画面的列表。
}

第七步 撰写更新画面函式

最後因为画面不断的被新增与删除，所以要写一个更新画面的函式，好让画面随时处在更新後的状态：

// 更新画面
function updateList(items){ // items 是自己取名的参数
     str = '' ; 
     var len = items.length;  //去抓全部列表的资料
     for(var i=0;i<len;i++){  //使用回圈把所有抓到得值加上标签塞进去列表内
        str += '<li><a href="#" data-index='+i+'>删除</a><span>'+ items[i].content+'</span></li>';
     }
     list.innerHTML = str;
}

到这边我们就完成了一个简易的待办事项小工具罗，30天的 JS 系列文也到这边完结篇罗！

文末心得

第一次参加IT铁人赛，每天都在想要怎麽解释我对 JS 每个语法的理解才比较让大家好懂，并要安排怎麽讲才可以讲到最後能带大家完成代办清单这个小工具的章节，整个系列文可能有很多地方文笔不通顺或讲解的不够好的地方，就还请各位前辈多多给予建言罗！

但无论如何我也总算完成了 温故知新 javaScript 系列文了，除了希望可以把所学到的东西分享出去之外，最重要的事也帮自已温故知新 JS，铁人赛只是一个阶段的结束在程序这条路还有很长的路要走期许自己在未来学到更多知识，能在用更好的文笔与文章脉络跟大家分享，谢谢所有观看过文章的您！

AWEI