HyunmoAhn / todo-app

todo-app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TodoMVC

image DEMO

Basic Feature

  • Create list
  • Update list
  • Delete list
  • Toggle list status when click
  • Save list when page is refreshed
  • Filter by hash url
  • Clear button about cleaning completed list

Detail Basic Feature

  1. 할 일을 입력하고 Enter를 입력하면 리스트에 추가된다.
    • 아무런 입력값이 없을 경우 할 일이 추가되지 않는다.
  2. 추가된 할 일의 왼쪽 둥근 체크를 누를 경우 상태가 완료됨으로 변경된다.
  3. 리스트 아이템의 오른쪽 X 버튼을 통해 아이템을 리스트에서 삭제할 수 있다.
  4. 할 일을 더블 클릭할 경우 할 일을 변경할 수 있다.
    • 더블클릭 후 입력가능한 상태로 변경되며 바깥 영역 클릭 혹은 엔터 입력시 현재 입력된 값으로 최신화된다.
    • 입력가능한 상태에서 아무런 입력값이 없는 경우 해당 할 일은 삭제된다.
    • 입력가능한 상태에서 ESC 키를 누를 경우 할 일이 변경되지 않고 이전 값이 유지된다.
  5. 왼쪽 하단에 몇 개의 할 일이 남았는지 표시한다.
  6. 할 일 입력칸 왼쪽 화살표를 클릭하면 모든 할 일이 완료됨으로 변경된다.
    • 완료된 할 일과 완료되지 않은 할 일이 동시에 존재할 때 클릭하면 모든 할 일이 완료됨으로 변경된다.
  7. All, Active, Completed를 통해 리스트를 필터링해서 보여준다.
    • All(모든 할 일), Active(완료되지 않은 할 일), Completed(완료된 할 일)
    • 필터를 누를 경우 URL은 각각 All(/#/), Active(/#/active), Completed(/#/completed)으로 변경된다.
  8. Clear completed를 누를 경우 완료된 모든 할 일을 삭제한다.
  9. 새로고침시 추가되어 있는 모든 할 일이 유지된다.
    • URL에 따라 초기 필터링이 결정된다.

Optional Feature

  • Redo / Undo

About

todo-app


Languages

Language:JavaScript 66.2%Language:Vue 25.5%Language:HTML 8.3%