- これまで学習してきたDOM周りの知識を全て利用してTodoアプリを作成する
- GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール
課題内容は以下の課題レポジトリに記述しています。
GitHub : js_excercise_for_frontend_4
今回作成する課題の完成形のイメージは以下のとおりです。
今回の課題の完成形目次
課題解決するために参考になる資料
【JavaScript】HTMLの特定の要素(DOM)を取得する
https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-get-dom-from-html/
今回の課題では、「テキストボックス」「追加ボタン」「Todoタスクの一覧を表示する要素」を取得する部分があります。
DOM(要素)の取得は上記記事で解説しました。
【JavaScript】DOMのテキスト内容を取得・変更する
https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-manipulate-text-in-dom/
今回の課題では、入力したTodoタスクをTodoリストに表示する際にDOMのテキスト操作を行います。
上記記事でDOMのテキスト操作の方法を学習しました。
JavaScriptで新規作成したDOMを別のDOMに追加する
今回の課題では、Todoタスク1件1件を新規に作成するDOMにセットして、その新規作成したDOMを「Todoタスクの一覧を表示する要素」に追加するものがあります。
DOMを別のDOMに追加する方法は上記記事で解説しました。
JavaScriptで特定の要素を削除、子要素を全削除する
https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-remove-dom/
今回の課題では、Todoタスクの追加と一緒に削除ボタンの実装も行います。
削除ボタンをクリックした際に対応するTodoタスクを削除する機能を実装していただきます。
要素の削除は上記記事で解説しました。
【JavaScript】DOMをクリックしたときの処理を実装する
https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-add-click-event-with-dom/
今回の課題では、「追加ボタン」「削除ボタン」の2種類のボタンを実装します。
その際にそれぞれのボタンをクリックしたときの挙動を実装していただきます。
クリックイベントの実装方法は上記記事で学習しました。
【JavaScript】DOMを使って入力ボックスの値を操作する
今回の課題では、入力ボックスに入力された値を使ってTodoタスクを追加していきます。
入力ボック(input要素)の操作方法は上記記事で解説しました。
質問・答え合わせ受け付けてます
課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。
お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。
LINE登録で無料特典を受け取る
次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。
- Webエンジニアになりたいけど何から学習を始めれば良いかわからない
- 今まで独学で頑張ってきたけど、独学に限界を感じてきた
- プログラミングは出来るけど、大きめのコードが書けない
「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。