4.4 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd13 | ランダムクォートマシンを作成する | 3 | 301374 | build-a-random-quote-machine |
--description--
目標: https://codepen.io/freeCodeCamp/full/qRZeGZ と同様の機能を持つ CodePen.io アプリを作成します。
以下のユーザーストーリーを達成して、すべてのテストに合格してください。 アプリにはあなた独自のスタイルを設定してください。
このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 コーディングの成功を祈ります！
ユーザーストーリー 1: 対応する id="quote-box" を持つラッパー要素を表示できます。
ユーザーストーリー 2: #quote-box の中に、対応する id="text" を持つ要素を表示できます。
ユーザーストーリー 3: #quote-box の中に、対応する id="author" を持つ要素を表示できます。
ユーザーストーリー 4: #quote-box の中に、対応する id="new-quote" を持つ要素を表示できます。
ユーザーストーリー 5: #quote-box の中に、対応する id="tweet-quote" を持つクリック可能な a 要素を表示できます。
ユーザーストーリー 6: クォートマシンの初回読み込み時に、id="text" を持つ要素に、ランダムクォートが表示されます。
ユーザーストーリー 7: クォートマシンの初回読み込み時に、id="author" を持つ要素に、ランダムクォートの作成者が表示されます。
ユーザーストーリー 8: クォートマシンの #new-quote ボタンをクリックすると、新しいクォートが取得されて #text 要素に表示されます。
ユーザーストーリー 9: クォートマシンの #new-quote ボタンをクリックすると、新しいクォートの作成者が取得されて #author 要素に表示されます。
ユーザーストーリー 10: #tweet-quote の a 要素をクリックして現在のクォートをツイートできます。 この a 要素の href 属性には、現在のクォートをツイートするための "twitter.com/intent/tweet" パスが含まれています。
ユーザーストーリー 11: #quote-box ラッパー要素は水平方向に中央寄せされます。 ブラウザのズームレベルを 100% にし、ページを最大化してテストしてください。
独自のペンを作成するために、こちらの CodePen テンプレートを使用し、Save をクリックして独自のプロジェクトを構築することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完了したら、すべてのテストに合格した作業中のプロジェクトの URL を送信してください。
注: Twitterでは、iframe にリンクを読み込むことはできません。 ツイートが読み込まれない場合は、#tweet-quote 要素で target="_blank" または target="_top" 属性を使用してみてください。 target="_top" は現在のタブを置き換えるので、作業が保存されていることを確認してください。
--solutions--
// solution required