---
# System prepended metadata

title: 1208_javascript_day03
tags: [5xruby, javascript]

---

# 1208_javascript_day03

[![hackmd-github-sync-badge](https://hackmd.io/uzghk-rQQUGivw8rFu7QQg/badge)](https://hackmd.io/uzghk-rQQUGivw8rFu7QQg)


---
#### 上課日期：1208
###### tags: `javascript`
###### tags: `5xruby`


---
# 相關連結:
- [課程影片](https://campus.5xruby.tw/courses/1136422/lectures/25361517)
- [課前練習題](https://github.com/lumir1031/Workshop_warm_up)

---
# 0. 綱要/目錄
- [ ] 工作坊 - To Do List
- [ ] 點擊任務，新增/刪除完成標記
- [ ] 點擊 x ，刪除任務
- [ ] 輸入新任務名稱， 按下+新增任務
- [ ] (加分題) 拖拉任務


---
# 工作坊 - To Do List 
- [題目原始碼(github)](https://github.com/lumir1031/Workshop_todolist)
### 專案準備及提交
1. fork 此 repo 到自己的 Github ，並 clone 到自己電腦
1. 將 master 保護起來，禁止推 master branch
    > 到自己的 repo > Settings > Branches > Branch protection rules > add rule 設定
1. 每個功能都開一個 branch 進行
    > 舉例： feature/Complete_task_add_checked
1. 完成後，發 PR 到自己的 repo 並且自己 merge 進 master
### 任務: 完成 To Do List 功能
1. 點擊任務標記是否完成
    > 點擊 li 新增/移除 checked class
1. 點擊 x 刪除任務
    > 點擊 span (後面那個 x) 可移除任務
1. 輸入新任務名稱， 按下+新增任務
    > 取得 input 輸入的文字
    按下 + 可以新增任務（li）
    新增的任務也有標記/移除功能
1. (加分題) 拖拉任務
    > 透過 HTML Drag and Drop API 完成，可參考 (04_bonus-drag)
    - 替li新增拖拉屬性，再加上拖拉的監聽事件

---

# 1. 點擊任務，新增/刪除完成標記

---
# 2. 點擊 x ，刪除任務

---
# 3. 輸入新任務名稱， 按下+新增任務


---
# 4. (加分題) 拖拉任務



---







---
# 附件
- [如何-創建待辦事項清單(w3schools)](https://www.w3schools.com/howto/howto_js_todolist.asp) 
- [用Vue做拖拉功能(github)](https://github.com/SortableJS/Vue.Draggable)
  1. 引入CDN
  2. 在被拖拉物件外面包上拖拉語法


