50 lines
4.4 KiB
Markdown
50 lines
4.4 KiB
Markdown
---
|
||
id: bd7158d8c442eddfaeb5bd13
|
||
title: ランダムクォートマシンを作成する
|
||
challengeType: 3
|
||
forumTopicId: 301374
|
||
dashedName: build-a-random-quote-machine
|
||
---
|
||
|
||
# --description--
|
||
|
||
**目標:** <https://codepen.io/freeCodeCamp/full/qRZeGZ> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを作成します。
|
||
|
||
以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を達成して、すべてのテストに合格してください。 アプリにはあなた独自のスタイルを設定してください。
|
||
|
||
このプロジェクトを完了するために、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% にし、ページを最大化してテストしてください。
|
||
|
||
独自のペンを作成するために、<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>こちらの CodePen テンプレート</a>を使用し、`Save` をクリックして独自のプロジェクトを構築することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||
|
||
完了したら、すべてのテストに合格した作業中のプロジェクトの URL を送信してください。
|
||
|
||
**注:** Twitterでは、iframe にリンクを読み込むことはできません。 ツイートが読み込まれない場合は、`#tweet-quote` 要素で `target="_blank"` または `target="_top"` 属性を使用してみてください。 `target="_top"` は現在のタブを置き換えるので、作業が保存されていることを確認してください。
|
||
|
||
# --solutions--
|
||
|
||
```js
|
||
// solution required
|
||
```
|