Barcelona | OCT-25 | Tatiana Kuzmina | Sprint 3 | Reading list

Sprint-3/reading-list/script.js

@@ -1,4 +1,69 @@
-// for the tests, do not modify this array of books
+function readingList(books) {
+  // Находим главный контейнер на странице
+  const content = document.querySelector("#content");
+
+  // Создаем заголовок страницы (необязательно, но красиво)
+  const pageTitle = document.createElement("h1");
+  pageTitle.innerText = "My Reading List";
+  content.appendChild(pageTitle);
+
+  // 1. Создаем основной элемент списка <ul>
+  const bookList = document.createElement("ul");
+  bookList.style.listStyle = "none";
+  bookList.style.display = "flex";
+  bookList.style.flexWrap = "wrap";
+  bookList.style.gap = "20px";
+  bookList.style.padding = "0";
+
+  // 2. Проходим циклом по массиву книг
+  books.forEach((book) => {
+    // Создаем элемент списка <li> для каждой книги
+    const listItem = document.createElement("li");
+
+    // Создаем элемент для названия книги
+    const title = document.createElement("p");
+    title.innerText = book.title;
+    title.style.fontWeight = "bold";
+
+    // Создаем элемент для автора
+    const author = document.createElement("p");
+    author.innerText = `Author: ${book.author}`;
+
+    // Создаем элемент для обложки <img>
+    const image = document.createElement("img");
+    image.src = book.bookCoverImage;
+    image.alt = book.title;
+    image.style.width = "150px";
+    image.style.display = "block";
+    image.style.marginTop = "10px";
+
+    // 3. Добавляем данные в карточку книги (li)
+    listItem.appendChild(title);
+    listItem.appendChild(author);
+    listItem.appendChild(image);
+
+    // 4. Логика цвета фона (Acceptance Criteria)
+    if (book.alreadyRead) {
+      listItem.style.backgroundColor = "green";
+    } else {
+      listItem.style.backgroundColor = "red";
+    }
+
+    // Немного базового оформления самой карточки
+    listItem.style.padding = "20px";
+    listItem.style.borderRadius = "8px";
+    listItem.style.color = "white";
+    listItem.style.width = "200px";
+
+    // Добавляем готовую карточку в наш список <ul>
+    bookList.appendChild(listItem);
+  });
+
+  // 5. Добавляем весь готовый список <ul> в DOM (внутрь div id="content")
+  content.appendChild(bookList);
+}
+
+// Массив данных (не меняй его, это важно для тестов)
 const books = [
   {
     title: "The Design of Everyday Things",
@@ -21,3 +86,5 @@ const books = [
   },
 ];
 
+// Запуск функции
+readingList(books);