今天開始大量的實作啦~~~
JS 代辦事項 主要會以 JS 的 localStroage 搭配 ES6 來操作
若還不熟 localStroage 的朋友們
可以往前複習唷
首先我提供一個簡易的版型給各位參考(使用BT4)
如果要實作的
可以fork下來唷
CodePen:https://codepen.io/wemyferb/pen/oNLvXoB
若想要看我介紹 Bootstrap 的朋友
可以留言跟我說唷~~
那我們就趕快來講解代辦事項的第一部分吧
首先
我們看一下我們body有哪些class
才能才能使用 DOM 來操作
<body>
<div class="container mt-5">
<div class="row d-flex">
<div class="col-md-6 ">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="" class="img-fluid">
</div>
<div class="col-md-6" >
<div class="d-flex ">
<input type="text" class="text" placeholder="請填寫代辦事項" required>
<input type="button" class="btn btn-primary btn-sm send" value="加入代辦">
</div>
<ul class="list p-2">
</ul>
</div>
</div>
</div>
<script src="js/all.js"></script>
</body>
會發現
我們需要撈取
1.使用者輸入的資料(text)
2.加入代辦事項(send)
3.最後更新到畫面(list)
4.data
這裡為什麼我們需要先撈資料出來呢??
因為我們使用的時候
有可能 localStorage 裡面已經會有資料
所以會有這一行程式碼
let data = JSON.parse(localStorage.getItem('listData')) || [];
若有資料則取出再parse為陣列(localStorage裡面儲存的都是字串)
若沒有資料 則為空陣列 []
接著
我們來看需要那些監聽事件
//監聽與更新
send.addEventListener('click',addData,false); //新增待辦事項
list.addEventListener('click',deleteData,false); // 刪除待辦事項
updateList(data);// 網頁載入的第一次更新
上面基本都準備好啦~~
再來就可以開始撰寫函式了
我們首先
先寫新增待辦事項的函式
function addData(e){
e.preventDefault();
let txt = text.value;
let todo = {
content : txt
};
data.push(todo);
updateList(data);
localStorage.setItem('listData',JSON.stringify(data));
text.value=''
}
這裡我們先把 使用者輸入的資料 取出來
再塞入到一個物件
由於前面的 data 為一個陣列
不知道你們是否還記得 陣列包裹著物件 的寫法
EX:
let farms = [
{
farmer: '皮傑先生',
chick: 10
},
{
farmer: '小雞公主',
chick: 20
},
]
所以我們可以又把 todo物件 塞入給data陣列
就會像是
//陣列data
let data =[
// todo物件1
{
content : txt
},
// todo物件2
{
content : txt
},
]
當然塞完後
便要更新 畫面資料與將更新資料存入localStorage
更新畫面資料
updateList(data);
更新資料存入localStorage
localStorage.setItem('listData',JSON.stringify(data));
再把使用者欄位清空
那今天的 代辦事項練習 已經完成50%啦~~
明天我們將會讓資料呈現於畫面
並可以刪除所新增的代辦事項
最後
有任何問題都可以詢問我唷~~
iThome鐵人賽
看影片追技術