CodeYourFuture / CodeYourFuture/Module-Data-Groups

Build a slideshow app

オープン
#7 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
🏝️ Priority Stretch 🐂 Size Medium 📅 Sprint 3 Module-Data-Groups Optional Submit:PR
主要言語
JavaScript
スター
1
フォーク
326
平均マージ
3時間 25分
マージ済み PR(30日)
2

説明

### Link to the coursework

https://github.com/CodeYourFuture/Module-Data-Groups/tree/main/Sprint-3/slideshow

### Learning Objectives

- [ ] Develop a web app according to a specification
- [ ] Combine concepts covered in previous exercises

### Why are we doing this?

These challenges are designed to develop your problem-solving skills.

In this exercise you will build an app which shows one image at a time from a collection. It must meet the criteria below:

#### Acceptance criteria

- [ ] Given a web page with a carousel of images
When the page loads
Then the first image in the carousel should be displayed

- [ ] Given forward and back buttons
When the forward button is clicked
Then the next image in the carousel should be displayed
And
When the back button is clicked
Then the previous image in the carousel should be displayed

- [ ] Given at least 4 images in the carousel
When the user reaches the end of the carousel in either direction
Then the carousel should loop back to the first/last image

#### Advanced stretch functionality

- [ ] Given auto-forward and auto-back buttons
When the auto-forward button is clicked
Then the images should automatically advance every 5 seconds

- [ ] When the auto-back button is clicked
Then the images should automatically go back every 5 seconds

- [ ] Given the carousel is auto-advancing (in either direction)
When the stop button is clicked
Then the auto-advance/go back should stop

- [ ] Given the carousel is auto-advancing (in either direction)
When the forward button is clicked
Then the auto-advance should stop
And the next image should show
(next = stop + forward)

- [ ] Given the carousel is auto-advancing (in either direction)
When the back button is clicked
Then the auto-advance should stop
And the previous image should show
(back = stop + back)

### Maximum time in hours

4

### How to get help

General advice on asking for help can be found on the [curriculum pages](https://curriculum.codeyourfuture.io/guides/getting-help/asking-questions/).
You can always share your blockers in your class channel and get help from your colleagues.

### How to submit

1. Fork the coursework repo to your Github account.
2. Make a branch for this project.
3. Make regular small commits in this branch with clear messages.
4. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.

There are several projects in this repo. [Make a new branch](https://simpledev.io/lesson/create-branch-gh-desktop-1) based on `main` for each project.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Issue にリンクされている Sprint-3/slideshow の課題から始め、アプリのエントリーポイントを作成する前にその仕様を読んでください。最初の画像、ナビゲーション、ループ、少なくとも4枚の画像に関する必須の基準を満たすように画像カルーセルを構築してください。時間指定のコントロールは追加機能として扱ってください。各受け入れ基準をブラウザで手動確認してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript
領域
frontend
issue の種類
機能追加
難易度
3/5
見積もり時間
半日
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。