5 分鐘寫一個待辦清單網頁小程式

前置準備

1. 一台可以上網的電腦
2. 電腦安裝好瀏覽器（Chrome、Firefox、Safari、Edge 等等）
3. 用瀏覽器打開 JS Bin（https://jsbin.com）

JS Bin 工作區介紹

產生靜態畫面

文字輸入框

<input id="input">

新增事項按鈕

<button id="button">新增</button>

待辦清單

<ul id="ul">
<li>運動 30 分鐘</li>
<li>閱讀 10 頁</li>
</ul>

⚠️ Check Point

點擊按鈕新增事項

偵測按鈕點擊

button.onclick = function() {
window.alert("點擊按鈕")
}

點擊按鈕抓取輸入框文字

button.onclick = function() {
window.alert(input.value)
}

點擊按鈕新增事項

button.onclick = function() {
ul.innerHTML += "<li>" + input.value + "</li>"
}

點擊清單完成事項

ul.onclick = function(e) {
e.target.style.textDecoration = "line-through"
}

一個簡單的待辦清單網頁小程式就大功告成啦！

• New: 新建網頁
• Delete: 刪除網頁
• Save snapshot: 儲存網頁（儲存完就可以透過網址將寫好的網頁分享給其他人）
• Download: 下載網頁（將網頁下載至電腦中，留作備份或是進一步編輯）