7.9 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd0f | 25 + 5 クロックを作成する | 3 | 301373 | build-a-25--5-clock |
--description--
目標: https://codepen.io/freeCodeCamp/full/XpKrrW と同様の機能を持つ CodePen.io アプリを作成します。
以下のユーザーストーリーを達成して、すべてのテストに合格してください。 アプリにはあなた独自のスタイルを設定してください。
このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨している一連のテクノロジーを使用して生じた問題についてはすべて、報告を受け入れ、修正するよう努めます。 コーディングの成功を祈ります！
ユーザーストーリー 1: 文字列 ("Break Length" など) が含まれている id="break-label" を持つ要素を表示できます。
ユーザーストーリー 2: 文字列 ("Session Length" など) が含まれている id="session-label" を持つ要素を表示できます。
ユーザー ストーリー 3: 対応する ID (id="break-decrement" と id="session-decrement") を持つクリック可能な要素を 2 つ表示できます。
ユーザー ストーリー 4: 対応する ID (id="break-increment" と id="session-increment") を持つクリック可能な要素を 2 つ表示できます。
ユーザー ストーリー 5: 対応する id="break-length" を持ち、デフォルトで (読み込み時に) 値 5 を表示する要素を表示できます。
ユーザー ストーリー 6: 対応する id="session-length" を持ち、デフォルトで値 25 を表示する要素を表示できます。
ユーザー ストーリー 7: 対応する id="timer-label" を持ち、セッションの初期化を示す文字列 ("Session" など) が含まれている要素を表示できます。
ユーザー ストーリー 8: 対応する id="time-left" を持つ要素を表示できます。 注: 一時停止中または実行中は、このフィールドの値を mm:ss 形式で常に表示します (例: 25:00)。
ユーザーストーリー 9: 対応する id="start_stop" を持つクリック可能な要素を表示できます。
ユーザーストーリー 10: 対応する id="reset" を持つクリック可能な要素を表示できます。
ユーザーストーリー 11: ID が reset の要素をクリックすると、実行中のタイマーがすべて停止し、id="break-length" 内の値が 5 に戻り、id="session-length" の値が 25 に戻り、id="time-left" を持つ要素がデフォルトの状態にリセットされます。
ユーザーストーリー 12: ID が break-decrement の要素をクリックすると、id="break-length" 内の値が 1 減り、値が更新されるのを確認できます。
ユーザーストーリー 13: ID が break-increment の要素をクリックすると、id="break-length" 内の値が 1 増え、値が更新されるのを確認できます。
ユーザーストーリー 14: ID が session-decrement の要素をクリックすると、id="session-length" 内の値が 1 減り、値が更新されるのを確認できます。
ユーザーストーリー 15: ID が session-increment の要素をクリックすると、id="session-length" 内の値が 1 増え、値が更新されるのを確認できます。
ユーザーストーリー 16: セッションまたはブレイクの長さを 0 以下に設定できないようにします。
ユーザーストーリー 17: セッションまたはブレイクの長さを 60 を超えて設定できないようにします。
ユーザーストーリー 18: id="start_stop" を持つ要素を初めてクリックすると、現在 id="session-length" に表示されている値から、たとえその値が元の値である 25 から増加または減少していても、タイマーの実行が開始されます。
ユーザーストーリー 19: タイマーが実行中の場合、ID が time-left の要素には残り時間が mm:ss 形式で表示されます (値が 1 だけ減り、1000ms ごとに表示が更新されます)。
ユーザー ストーリー 20: タイマーの実行中に、id="start_stop" を持つ要素をクリックすると、カウントダウンが一時停止します。
ユーザー ストーリー 21: タイマーの一時停止中に、id="start_stop" を持つ要素をクリックすると、一時停止した時点からカウントダウンの実行が再開されます。
ユーザーストーリー 22: セッションカウントダウンがゼロに達し (注: タイマーが 00:00 に達する必要があります)、新しいカウントダウンが開始されると、ID が timer-label の要素に、ブレイクが開始されたことを示す文字列が表示されます。
ユーザーストーリー 23: セッションカウントダウンがゼロに達すると (注: タイマーが 00:00 に達する必要があります)、新しいブレイクカウントダウンが開始され、現在 id="break-length" の要素に表示されている値からカウントダウンします。
ユーザーストーリー 24: ブレイクカウントダウンがゼロに達し (注: タイマーが 00:00 に達する必要があります)、新しいカウントダウンが開始されると、ID が timer-label の要素に、セッションが開始されたことを示す文字列が表示されます。
ユーザーストーリー 25: ブレイクカウントダウンがゼロに達すると (注: タイマーが 00:00 に達する必要があります)、新しいセッションカウントダウンが開始され、現在 id="session-length" の要素に表示されている値からカウントダウンします。
ユーザーストーリー 26: カウントダウンがゼロに達すると (注: タイマーが 00:00 に達する必要があります)、時間切れになったことを示すサウンドが再生されます。 これには HTML5 の audio タグを使用し、対応する id="beep" を付けます。
ユーザー ストーリー 27: id="beep" を持つ audio 要素は 1 秒以上にする必要があります。
ユーザーストーリー 28: ID が reset の要素がクリックされたとき、ID が beep の audio 要素の再生を停止して、最初まで巻き戻す必要があります。
独自のペンを作成するために、こちらの CodePen テンプレートを使用し、Save をクリックして独自のプロジェクトを構築することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完了したら、すべてのテストに合格した作業中のプロジェクトの URL を送信してください。
--solutions--
// solution required