JavaScript 
 Створити блок книг з переліком книг,які  відмальовуються книги, що були додані до нього користувачем і зберігалися у localStorage. Якщо таких книг не знайдено, необхідно показати відповідне повідомлення користувачу через notiflix 

Зверстати шаблон картки книги в javascript та додати через .map .join  insertAdjacentHTML
Картка з книгою включає
  зображення обгортки цієї книги
  назву книги
  категорія книги
  короткий опис змісту книги
  її автора 
  перелік посилань на торгівельні майданчики, де цю книгу можна придбати
  та кнопку видалення з Shopping list
Для створення блоку книг використаємо HTML, CSS та JavaScript. Нижче наведено весь код, розділений на блоці HTML, CSS та JavaScript.\n\nHTML код:\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Book List</title>\n    <!-- Підключення стилів -->\n    <link rel=\"stylesheet\" href=\"styles.css\">\n    <!-- Підключення Notiflix -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Notiflix-2.4.1/Notiflix-2.4.1.min.js\" integrity=\"sha512-9ac_0XUDPA4XFhJFVy0f2enltNJz9MfScdtC4Yf+tXSTo4EttPeb5rVu89k7DiV0seeCMI+nxN+j5AuBGOOhHw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n</head>\n<body>\n    <div class=\"container\">\n        <h1>Book List</h1>\n        <div id=\"book-list\"></div>\n    </div>\n\n    <!-- Підключення нашого скрипту -->\n    <script src=\"script.js\"></script>\n</body>\n</html>\n```\n\nCSS код(styles.css):\n```css\nbody {\n  font-family: Arial, sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: #f4f4f4;\n}\n\n.container {\n  max-width: 960px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\nh1 {\n  text-align: center;\n}\n\n.book-card {\n  background-color: #ffffff;\n  border-radius: 3px;\n  padding: 15px;\n  margin-bottom: 15px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.book-card img {\n  width: 100%;\n  max-width: 200px;\n  height: auto;\n  margin-bottom: 10px;\n}\n\n.book-card .title {\n  font-size: 18px;\n  font-weight: bold;\n  margin-bottom: 5px;\n}\n\n.book-card .category,\n.book-card .author {\n  font-size: 14px;\n  font-weight: bold;\n  color: #555555;\n  margin-bottom: 5px;\n}\n\n.book-card .description {\n  font-size: 14px;\n  color: #333333;\n  margin-bottom: 10px;\n}\n\n.book-card .buy-links {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.book-card .buy-link {\n  font-size: 12px;\n  color: #007BFF;\n  text-decoration: none;\n  margin-right: 5px;\n}\n\n.book-card .delete-btn {\n  background-color: #dc3545;\n  color: #fff;\n  padding: 5px 10px;\n  font-size: 12px;\n  border-radius: 3px;\n  text-transform: uppercase;\n  border: none;\n  cursor: pointer;\n}\n```\n\nJavaScript код(script.js):\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  // Отримання книг з localStorage\n  const books = JSON.parse(localStorage.getItem(\"books\") || \"[]\");\n\n  if (books.length === 0) {\n    Notiflix.Notify.Info(\"No books found in localStorage. Add some books!\");\n  } else {\n    const bookList = document.getElementById(\"book-list\");\n\n    const bookCards = books\n      .map((book) => {\n        return `\n      <div class=\"book-card\">\n        <img src=\"${book.image}\" alt=\"${book.title}\">\n        <h2 class=\"title\">${book.title}</h2>\n        <p class=\"category\">${book.category}</p>\n        <p class=\"description\">${book.description}</p>\n        <p class=\"author\">${book.author}</p>\n        <div class=\"buy-links\">\n          ${book.buyLinks\n            .map((link) => `<a class=\"buy-link\" href=\"${link.url}\" target=\"_blank\">${link.name}</a>`)\n            .join(\"\")}\n        </div>\n        <button class=\"delete-btn\" data-book-id=\"${book.id}\">Видалити з списку</button>\n      </div>\n      `;\n      })\n      .join(\"\");\n\n    bookList.insertAdjacentHTML(\"beforeend\", bookCards);\n\n    bookList.addEventListener(\"click\", function (event) {\n      if (event.target.classList.contains(\"delete-btn\")) {\n        const bookId = event.target.getAttribute(\"data-book-id\");\n        const index = books.findIndex((book) => book.id === bookId);\n        if (index >= 0) {\n          books.splice(index, 1);\n          localStorage.setItem(\"books\", JSON.stringify(books));\n          event.target.closest(\".book-card\").remove();\n          Notiflix.Notify.Success(\"Книгу успішно видалено зі списку!\");\n        }\n      }\n    });\n  }\n});\n```\n\nВи можете скопіювати код у відповідні файли та відкрити файл `index.html` у браузері. Додайте кілька книг у `localStorage`, щоб побачити, як вони відображаються.