82 lines
7.9 KiB
Markdown
82 lines
7.9 KiB
Markdown
---
|
||
id: bd7158d8c442eddfaeb5bd0f
|
||
title: 25 + 5 クロックを作成する
|
||
challengeType: 3
|
||
forumTopicId: 301373
|
||
dashedName: build-a-25--5-clock
|
||
---
|
||
|
||
# --description--
|
||
|
||
**目標:** <https://codepen.io/freeCodeCamp/full/XpKrrW> と同様の機能を持つ [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:** 文字列 ("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 要素の再生を停止して、最初まで巻き戻す必要があります。
|
||
|
||
独自のペンを作成するために、<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 を送信してください。
|
||
|
||
# --solutions--
|
||
|
||
```js
|
||
// solution required
|
||
```
|