Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Build a slideshow app

Ouverte
  • Quelque chose ne va pas ?
#7 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
Une demi-journée
Accessibilité débutants
45/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
À l'abandon
Stack technique
javascript
Domaine
frontend

Piste de recherche

Commencez par le travail de cours Sprint-3/slideshow lié dans l’issue et lisez sa spécification avant de créer le point d’entrée de l’application. Construisez le carrousel d’images afin de respecter les critères requis concernant la première image, la navigation, la boucle et au moins quatre images ; considérez les contrôles temporisés comme une fonctionnalité facultative. Vérifiez manuellement chaque critère d’acceptation dans le navigateur.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

🏝️ Priority Stretch 🐂 Size Medium 📅 Sprint 3 Module-Data-Groups Optional Submit:PR
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.
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 based on main for each project.

Langage dominant
JavaScript
Étoiles
1
Forks
327
Merge moyen
3 j 7 h
PR mergées (30 j)
3

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de CodeYourFuture/Module-Data-Groups

Toutes les issues de CodeYourFuture/Module-Data-Groups

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.