Rewrite Book List to be project brief instead of step by step

[SallyMcGrath]

The Book List exercise is a spoon feeding exercise. It would be more useful rewritten as a project brief, as it's good practice for the TV Show project. Example text follows:

Project Brief: Reading List

As a user, I want to see a list of books with their titles, authors, book cover images, and background colour based on whether I have read them or not.

User Stories:

As a user, I want to see a list of books displayed on the page.
As a user, I want each book to have a title, author, and book cover image displayed on the page.
As a user, I want the background color of each book to be set to green if I have read it or red if I have not.
As a user, I want the list of books to be rendered in a clean and organised format.

Acceptance Criteria:

The list of books is displayed on the page as a valid unordered list.
Each book is displayed with a title and author.
Each book is displayed with a book cover image inside a link to the book cover URL.
The background colour of each book is set to green if the "alreadyRead" property of the book object is true, and red if it is false.
The list item has a title attribute that is set to green if the "alreadyRead" property of the book object is true, and red if it is false.
The HTML code is inserted with Javascript on page load into a div element with the id "content".
The JavaScript function is named readingList
The list of books is displayed in a clean and organized format.
The Lighthouse score for Accessibility is 100.

[SallyMcGrath]

Test notes:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

eg

    return new Promise((resolve) => {
      document.addEventListener("DOMContentLoaded", () => {
        const contentDiv = document.getElementById("content");
        expect(contentDiv.children[0]).toBeInstanceOf(HTMLUListElement);
        resolve();
      });
    });
  });
});