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

Build a reading list display

Ouverte
  • Quelque chose ne va pas ?
#18 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é
2/5
Temps estimé
1-3 heures
Accessibilité débutants
52/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
javascript
Domaine
frontend

Piste de recherche

Ouvrez le répertoire Sprint-3/reading-list depuis le lien du travail de cours et inspectez ses fichiers de départ, notamment le tableau books et l’élément dont l’id est content. Construisez la liste conformément aux critères d’acceptation, puis comparez le résultat avec l’exemple de design fourni et vérifiez que l’itération sur books ne provoque aucune erreur.

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/reading-list

Learning Objectives
  • Develop a web app according to a specification
  • Navigate more complex data structures in JavaScript
Why are we doing this?

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

In this exercise you will build a reading list which satisfies the criteria below. Check out the file contents in the directory to familiarise yourself with the starting code.

Acceptance criteria

Here are some checklist-style acceptance criteria for the reading list problem:

  • A element is created to contain the list of books

For each book object in the books array:

  • A element is created
  • The book title is displayed in a element
  • The book author is displayed in a element
  • An element is added with the source set to the book's cover image URL
  • The containing the book list is added to the DOM inside the element with id content
  • Books that have already been read have a green background
  • Books that have not yet been read have a red background
  • The completed list matches the provided design example
  • No errors occur when iterating through the books array
  • The page is visually appealing

The goal is to break down the problem into specific, testable elements that can easily be checked off to verify the acceptance criteria are met.

Maximum time in hours

3

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.