【エクササイズ】Fetch APIを使ってクイズアプリを作る

課題内容は以下の課題レポジトリに記述しています。

今回作成する課題の完成形のイメージは以下のとおりです。

課題解決するために参考になる資料

【JavaScript】fetchを使って外部データを取得する

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-use-the-fetch-api-in-js/

今回の課題では「fetchメソッドを使って外部サーバーからクイズデータを取得する」ということをしていただきます。

fetchメソッドの使い方は上記記事で解説しているのでそちらを参考にしていただたらと思います。

JavaScriptで新規作成したDOMを別のDOMに追加する

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-create-an-dom-and-append-child/

今回の課題では、fetchメソッドでクイズデータを取得した後、次の内容を実装していただきます。

上記4つの内①の機能を実現するには「createElement」と「appendChild」、そして、次の項目で紹介する「innerHTML、innerText、textContent」を利用します。

「createElement」と「appendChild」の使い方に関しては上記記事で解説しているのでそちらを参考にしていただけたらと思います。

【JavaScript】DOMのテキスト内容を取得・変更する

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-manipulate-text-in-dom/

1つ前の項目でも説明しましたが、クイズの問題文と解答リストを表示するときにDOMのテキスト操作を行います。

DOMに対してテキストをセットする方法については上記記事で3通りの方法を紹介しました。

上記①~③の3通りの方法を忘れた方は上記記事を参考にしていただけたらと思います。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい

【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ！プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか？

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

• Webエンジニアになりたいけど何から学習を始めれば良いかわからない
• 今まで独学で頑張ってきたけど、独学に限界を感じてきた
• プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る