jQuery>jQueryで超クールなタスク管理アプリを作る

jQueryで超クールなタスク管理アプリを作る

2018年6月16日

このチュートリアルのクオリティが高いので共有します!

微妙にカスタマイズしつつ作りました

デモ

 

 

これくらいのアプリがサクサクと作れたら気持ちいいですね。

 

 

機能としては

  • 新規タスクの追加
  • タスクの編集
  • タスクの削除
  • タスクの完了

これら全てjQueryで行なっていきます。

 

 

以下、勉強メモです

 

 

 

 

toggleClassはクラス名を付けたり、外したりできる。
doneクラスが付いているときは、タスクが完了状態になる。

 

また、ここでparentとしているのは

li要素に対して完了状態にするため

 

 

 

todoTextとはinput要素ではないので、textで値を取得している。

 

また、parentで値をとっているのは、親のliからfindしてtodoTextクラスを見つける必要があるため。

 

 

イベントをキャンセルする。

エンターキーを押すと、ボタンのクリックイベントが発生し、ページが再度読み込まれてしまうので、そのイベントをキャンセルする

再度読み込まれると、タスクなどが全て消えてしまう。