TodoMVC アプリを作るためのテンプレートです。
-
テンプレートに触れる前に機能要件を見てください。
-
このリポジトリをクローンしてください。
Todoがないときは#mainと#fotterは見えないようにします。
新しいTodoはTodoMVCアプリの上部にあるinput要素に入力します。
このinput要素はページが読み込まれたときに、フォーカスされた状態にします。
（できればautofocus属性をinput要素に使用する）
エンターキーを押すと新しいTodoがTodoリストに追加され、input要素は空になります。
新しいTodoがリストに追加される前に、.trim()メソッドを使ってinput要素への入力が空でないか念の為確認してください。
TodoMVCアプリ上部の入力欄左にあるチェックボックス（ボックスというよりチェックマーク）は、リスト上に存在するすべてのTodoアイテムをチェック済みにします。
すべてのtodoアイテムがチェック済みの場合はチェックボックス自身もチェックが付きます。
そしてチェックを外すと、すべてのTodoアイテムのチェックを解除します。
Todoアイテムは3つの操作が可能です。
- Todoアイテム左のチェックボックスマークをクリックしたとき、completedの値が更新され、
todoアイテムの<li>にcompletedクラスが付くことによって、完了としてマークされます。 - todoアイテムの
<label>要素をダブルクリックするとTodoアイテムの<li>にeditingクラスが付き、
Todoアイテムの編集モードが有効になります。 - todoアイテムにマウスをかざすと削除ボタンが表示されます。
編集モードが有効なとき、編集モードが有効なTodoアイテムに対する他の操作が非表示になり、
todoアイテムの内容がすでに入力された状態の入力欄にフォーカスします。
編集モードでは入力欄からフォーカスが外れるか、入力欄でエンターキーが押されたときに、
todoアイテムの<li>についたeditingクラスが外れて、編集内容が保存されます。
年のため.trim()メソッドを使って入力欄が空でないか確認しましょう。
もし入力欄が空欄のときは、todoを削除するようにします。
もし編集中にESCキーを押された場合は、編集状態を破棄します。
未完了のtodoアイテムの数を表示しましょう。
その数は<strong>タグで囲ってください。
クリックされたら、完了状態のtodoを削除するようにします。
完了状態todoが存在しないときは、完了状態のtodoを削除するボタンを非表示にしてください。
localStorageを使ってtodoリストを永続化するべきです。
フレームワークがデータを永続化する機能を提供している場合はそれを使ってください。提供していない場合はバニラのlocalStorageを使用してください。
localStorageが使えるのであれば、保存するtodoアイテムそれぞれに id 、 title 、 completed キーを付与してください。
また、編集状態のtodoアイテムは保存しないでください。
ルーティングはすべての実装に必要とされます。
もし、フレームワーク側がルーティング機能を提供している場合はそれをつかってください。
提供していない場合はFlatiron Directorを/assetsフォルダに入れて使用してください。
ルートが変更されたら、そのルートに対応するtodoアイテムのみ表示するようにリストをフィルタリングし、
todoリスト下部のAll, Active, Completedリンクもルートに対応するものにのみselectedクラスを付与します。
例）todoリスト下部のActiveが選択されていた場合は、チェック済みのtodoアイテムは非表示となります。
この状態はページをリロードした後も持続するようにします。
This work by TasteJS is licensed under a Creative Commons Attribution 4.0 International License.
