Build a reading list display

### 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](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.

從課程作業連結開啟 Sprint-3/reading-list 目錄，並檢查其中的起始檔案，包括 books 陣列和 id 為 content 的元素。根據驗收標準建立清單，然後將結果與提供的設計範例進行比較，並檢查遍歷 books 不會造成錯誤。

由索引模型根據 Issue 內容生成。