Skip to content

Instantly share code, notes, and snippets.

@chentsulin

chentsulin/week-1.md

Last active September 21, 2016 12:47
Show Gist options
  • Save chentsulin/5fa0531bdcd2a5083427 to your computer and use it in GitHub Desktop.
Save chentsulin/5fa0531bdcd2a5083427 to your computer and use it in GitHub Desktop.
Download ZIP
Week 1 - After class
Raw
week-1.md

Week 1

Homework Assignment

Todo List Application

繳交方式

  • Deadline: 3/10 中午 12:00
  • 把檔案寄至 [email protected]，標題寫 [作業一/ 電機X XXX] (如果你已經會用 github 也可以寄 repo 連結過來)

Setup

找一個你喜歡的文字編輯器

  • vim
  • notepad++
  • textmate
  • sublime
  • atom

等等..只要能寫 code 都 ok

找個資料夾，建立 HTML 檔就可以開始寫 code，.html 檔可以使用瀏覽器打開，即可看到結果

至於 include JavaScript 的方式可以參考 Javascript 入門 - 前端工程開發實務訓練 第 5 頁開始的說明

Requirement

  • 需要一個 <input> 可以輸入 todo 的文字內容
  • 可以按 enter 然後把已經輸入好 todo 內容加至下面清單的 DOM 中
  • 已加至清單的那些 todo，要在滑鼠移上去的時候加上文字顏色跟背景顏色變色效果 (可使用 css)
  • 滑鼠移開時文字變色跟背景顏色變色效果應該要消失
  • 點擊下去可以增加一個已完成的效果

例如說這樣：

Optional

如果還有時間可以嘗試看看：

  • 顯示未完成的數量
  • 刪除 todo
  • UI 可以盡量 improve

Hint

  • 思考這個動作要找哪個 target element
  • 哪些是 user 觸發的 event
  • 試著把上面的步驟拆成幾個部分，都能正常運作再把他們兜在一起
  • 可拿 todomvc 來當參考：http://todomvc.com/examples/vanillajs/

Next Week Pre-reading

JavaScript 重要特性

沒有 HTML, CSS 背景的人可看一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment