Я всегда восхищался и восхищался всем, что связано с искусством. С самого детства моими любимыми местами были библиотека (отсюда и мое прозвище библиофил) или музей. Как говорится: «Картинка стоит тысячи слов». Поэтому всякий раз, когда библиотека не могла удовлетворить мое стремление к красоте, знаниям и истории, следующая остановка: музей!
Вот почему я выбрал музей как источник вдохновения и тему этого проекта. Кроме того, мне не составило большого труда выбрать, какой API использовать. В списке общедоступных API GitHub было всего несколько музейных API, поэтому я выбрал общедоступный API Художественного института Чикаго.
Теперь по коду
Первое, что я обязательно добавил в свой JS-код, — это прослушиватель событий DOMContentLoaded. Синхронный Javascript приостанавливает синтаксический анализ DOM, и, поскольку обычный человек не хотел бы ждать три с лишним секунды для загрузки веб-страницы, DOMContentLoaded делает код асинхронным, оптимизируя загрузку таблиц стилей.
После загрузки DOM вызывается функция fetchArtworks. Он отображает на веб-странице название каждой работы, все работы из API, а также блок информации о каждой работе. Он начинается с запроса на выборку с URL-адреса http://localhost:3000/data (/data, потому что это конкретный родительский ключ, который используется в файле JSON). Данные из API преобразуются в JSON, а затем передаются другой функции displayArtworks. И, наконец, есть .catch, который отображает сообщение об ошибке в виде красного баннера на веб-странице при возникновении ошибки и удаляется после устранения ошибки и обновления страницы.
Баннер ошибки отформатирован как в HTML…
…со шрифтом Outfit и другими шрифтами, уже импортированными в начале кода CSS…
В функции displayArtworks для innerHTML задано пустое пространство, что автоматически очищает страницу при ее обновлении. Затем данные, переданные в artworks из функции fetchArtworks, проверяются, чтобы убедиться, что были отправлены фактические данные, чтобы данные были отображены на странице. Если данные найдены, каждый раз, когда они найдены, данные в произведениях искусства передаются функции makeArtworkTile.
Функция makeArtworkTile включает код CSS, который упрощает форматирование веб-страницы и делает код более выразительным для тех, кто ее просматривает. Сначала создается элемент div, в котором каждый новый элемент содержит копию значения id в файле JSON. Элемент h2 создается для заголовка каждого произведения искусства, элемент p создается для блока информации, который добавляет контекст к каждому произведению, элемент img предназначен для каждой фотографии, которая будет размещена над соответствующим информационным блоком, а элемент span создан для кнопки «Мне нравится», которая отслеживает, какие произведения искусства понравились больше всего.
Прослушиватель событий прикреплен к likeButton, поэтому при нажатии кнопки символ ♥ (сердце) увеличивается в размере и становится ярко-красным вместо традиционной темно-бордовой темы проекта. Наконец, все переменные добавляются к элементу div и аналогичным образом добавляются к веб-странице.
В функции returnNone создается элемент div с именем класса «art-warning». Эта функция вызывается, когда в функцию displayArtworks не передаются данные.
Для функции поиска вызывается функция searchArt. Он начинается с метода preventDefault(), поэтому действие по умолчанию не выполняется до тех пор, пока событие не будет явно обработано. Переменной query присваивается значение e.target[0].value (т. е. значения, полученные с клавиатуры пользователя). Если с клавиатуры не берется никаких значений, функция displayArtworks все равно вызывается, но на странице ничего не отображается. В области else есть три переменные: artName (фильтрует файл JSON на предмет заголовков иллюстраций, которые соответствуют вводу с клавиатуры пользователя), artDate (фильтрует файл JSON на наличие даты обложки, которые соответствуют входным данным) и исполнитель (фильтрует файл JSON для художников, которые соответствуют входным данным). Затем оператор распространения используется для передачи копий трех вышеупомянутых переменных в функцию displayArtworks.
Для получения дополнительной информации и просмотра всего кода перейдите по ссылке: https://github.com/1Bibliophile/phase-1-project.
