books-catalog

Задача 3. Каталог книг

В рамках домашнего задания к лекции «Асинхронные HTTP-запросы»

Описание

На странице уже реализована вёрстка каталога книг. Для примера показана одна тестовая книга:

Вам необходимо получить реальные данные книг в формате JSON по адресу https://neto-api.herokuapp.com/book/ и отобразить их на странице в том формате, как показано в примере.

Требования

• На страницу должны быть выведены все книги, которые будут в полученном JSON-файле.
• В режиме каталога должны быть видны обложки книг.
• При клике на книгу показывается слой с подробной информацией о книге. Эта функция уже реализована. Можете проверить это на книге, которая отображается на странице.
• HTML-код книги должен быть сформирован, как показано в примере, и помещен в нужное место в разметке.

Интерфейс

1. Получите данные о книгах из API, находящегося по адресу.
2. Каждая книга является пунктом списка (li).
3. У каждой книги есть обложка, реализованная при помощи тега img, вложенного в пункт списка. В атрибуте src разместите ссылку на обложку. Ссылкой является значение поля cover.small.
4. Все книги поместите внутрь списка <ul id="content">.

У каждого пункта списка li должен быть набор data-атрибутов, значениями которых являются значения полей из полученного ответа:

• Для data-title — title;
• Для data-author — author.name;
• Для data-info — info;
• Для data-price — price;

Все данные, находящиеся внутри data-атрибутов, будут отображаться в модальном окне, которое открывается по клику на книгу.

Пример правильно созданного элемента списка:

<li
 data-title="Земляне!"
 data-author="Люрр"
 data-info="Коротко и ясно. Кому не ясно — Люрр объяснит. Коротко"
 data-price="490">
 <img
   src="https://neto-api.herokuapp.com/hj/2.3/books/cover/earthlings.png">
</li>

Реализация

В песочнице CODEPEN

В онлайн-песочнице на CODEPEN.

Локально с использованием git

В репозитории на GitHub.

Инструкция по выполнению домашнего задания

В онлайн-песочнице

Потребуется только ваш браузер.

1. Открыть код в песочнице.
2. Нажать кнопку «Fork».
3. Выполнить задание.
4. Нажать кнопку «Save».
5. Скопировать адрес страницы, открытой в браузере.
6. Прислать скопированную ссылку через личный кабинет на сайте netology.ru.

Локально

Потребуются: браузер, редактор кода, система контроля версий git, установленная локально, и аккаунт на GitHub или BitBucket.

1. Клонировать репозиторий с домашними заданиями git clone https://github.com/netology-code/hj-homeworks.git.
2. Перейти в папку задания cd hj-homeworks/xhr/books-catalog.
3. Выполнить задание.
4. Создать репозиторий на GitHub или BitBucket.
5. Добавить репозиторий в проект git remote add homeworks %repo-url%, где %repo-url% — адрес созданного репозитория.
6. Опубликовать код в репозиторий homeworks с помощью команды git push -u homeworks master.
7. Прислать ссылку на репозиторий через личный кабинет на сайте netology.ru.