Создание чего-то подобного, показанного на изображении ниже, будет увлекательным занятием, верно?

Здесь мы будем использовать html, css и javascript, а я использую код Visual Studio.

Начните работать отсюда:

Создайте папку «JavaScript Fetch API» в коде Visual Studio. И создайте файлы index.html, style.css и script.js

Теперь введите html:5 в файле index.html. Привяжите к нему файл style.css;

‹ссылка rel="stylesheet" href="style.css"›

Дайте название «Example Fetch Store API»,

‹title›Пример Fetch Store API‹/title›

Настройка внутри тега body

Сначала дайте заголовок Fetch Fake Store API, затем мы должны начать добавлять в виде карточек. Для этого мы даем class:cards, также предоставляем заголовок, изображение, его описание, категорию и цену в теге div.

‹h1 class= “heading”›Fetch Fake Store API‹/h1›

‹div id= “cards”›

‹div class= “card”›

‹h1 class= «title»›title‹/h1›

‹img src= ""https://images.pexels.com/photos/458886/pexels-photo-458886.jpeg?auto=compress&cs=tinysrgb&w=600""alt=" изображение”›

‹p›Описание‹/p›

‹p class= "category"›Категория‹/p›

‹p class= «цена»›Цена‹/p›

‹/дел›

‹/дел›

Стилизация заголовка

Перейдите к файлу style.css и найдите класс, указанный для заголовка. Итак, «заголовок» — это то, что мы предоставили в качестве класса. Итак, в файле style.css мы начинаем с основных стилей:

*{

отступ:0;

поле:0;

box-sizing: border-box;

}

А затем добавьте правильный стиль для текста, который мы использовали в качестве заголовка, который называется «Fetch Fake Store Api». Стиль путем добавления;

.heading{

выравнивание текста: по центру;

размер шрифта: 3rem;

семейство шрифтов: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, без засечек;

нижнее поле: 1,5 бэр;

}

Добавьте вторую карточку в index.html, добавив это после первой части карточки:

‹div class= “card”›

‹h1 class= «title»›title‹/h1›

‹img src= “https://images.pexels.com/photos/2534523/pexels-photo-2534523.jpeg?auto=compress&cs=tinysrgb&w=600' alt= " изображение”›

‹p›Описание‹/p›

‹p class= "category"›Категория‹/p›

‹p class= «цена»›Цена‹/p›

‹/дел›

‹/дел›

Добавьте больше стилей, чтобы карты можно было видеть рядом! Для этого добавьте их в файл style.css.

#карты{

дисплей: гибкий;

выравнивание содержимого: отступ вокруг;

гибкая обертка: обертка;

}

.card{

ширина: 23 %;

box-shadow: 0 0 4px 3px розовый;

выравнивание текста: по центру;

отступ: 1,5 em;

нижнее поле: 2em;

Чтобы между картинками было пространство, добавьте стиль:

выравнивание содержимого: отступ вокруг;

Стиль заголовка в CSS

Если мы проверили код, то увидели, что класс, заданный для «заголовка», — это класс: «заголовок». Итак, перейдите к файлу style.css и начните его стилизацию.

.title{

размер шрифта: 1,3 rem;

}

Также, пожалуйста, добавьте класс для тега img как «изображение». И чтобы мы могли добавить стили и для изображения. А теперь добавьте стиль к категории и цене.

/*Добавить изображение как класс для тега img */

.изображение{

ширина: 80 %;

}

.категория,.цена{

начертание шрифта:полужирный

преобразование текста: использовать заглавные буквы;

поле:1em;

размер шрифта: 1.2rem;

}

Время добавить контент из API с помощью javascript

Поскольку вы уже добавили изображения… теперь пришло время удалить их и добавить контент с помощью javascript. Посмотрим как?

Итак, сначала свяжите файл script.js с файлом index.html с помощью

‹script src= "script.js"›‹/script›

Просто сохраните одну карточку и удалите все остальные карточки в файле index.html!

Перейдите к файлу script.js.

Вы должны знать, что для выполнения запроса используется метод fetch(). Это

вернется как обещание. Обещание может быть либо выполнено, либо отвергнуто.

Итак, введите код:

принести(' - - - - ')

Что мы должны добавить внутри, так это ссылку! Итак, где мы находим ссылку для извлечения? Для этого зайдите в fake api store. После этого перейдите в документы и скопируйте ссылку, как вы видите, как на изображении ниже:

Скопируйте ссылку и вставьте в файл!

Таким образом, вы получите как:

fetch(‘https://fakestoreapi.com/products’)

Он вернет обещание. Когда обещание выполнено, мы должны использовать «тогда». А внутри «тогда» мы предоставим аргумент «данные». Какие бы данные ни находились в ссылке, они будут храниться в аргументе.

Теперь пришло время получать данные по-настоящему!!!

Итак, поскольку вы сейчас находитесь в script.js, вы уже добавили это:

fetch(‘https://fakestoreapi.com/products’).then((data)=›{

console.log(данные);

})

Запустите это на открытом живом сервере. Вы можете увидеть данные после доступа к консоли!

Как видно по ссылке fake store api, данные представлены в формате json. Итак, теперь нам нужно преобразовать его в формат javascript.

Для этого,

fetch(‘https://fakestoreapi.com/products’).then((data)=›{

вернуть data.json();

}).then((completedata)=›{

console.log(полные данные);

});

Здесь мы использовали return data.json(); для преобразования данных. И когда обещание выполнено, мы передаем аргумент «полные данные», чтобы передать преобразованные данные.

Запустив это, если вы проверите в консоли, вы увидите массив объектов и данных, проиндексированных от 0 до 19.

Также мы можем получить доступ к определенным данным из него, используя его индекс!

Добавить внутри как:

console.log(completedata[2].title);

И вы получаете его в консоли в качестве вывода.

Для отображения вывода в браузере:

После чего мы получили желаемый результат путем доступа через индексацию. Теперь добавьте дальше как:

Добавьте id= «root» в файл index.html:

‹идентификатор div= «корень»›‹/div›

В файле script.js

document.getElementById('root').innerHTML=compeletedata[2].title;

Теперь обновите веб-страницу, чтобы найти вывод в браузере.

Отображение всех данных из API

Прежде чем начать, вы должны помнить, что обещания могут быть выполнены или отвергнуты. Итак, как только он выдает ошибку, он должен сообщить об этом, верно?

Для этого мы должны добавить в конце as:

.catch ((ошибка)=›{

console.log(ошибка);

})

Теперь прокомментируйте строки, которые мы использовали для доступа к данным раньше!

Итак, сейчас ситуация такова, что у нас есть преобразованные данные в javascript.

Пришло время вернуться к файлу index.html и скопировать туда первую карточку, которую мы создали. А также удалите созданный идентификатор «root». Сделайте код видимым в виде комментария.

Теперь вернитесь к файлу script.js и добавьте после строки как

let data1= ``;

compeletedata.map((values)=›{

данные1= ` `;

(проверьте, что мы использовали здесь не одинарные/двойные кавычки)

});

Итак, что мы сделали здесь, так это создали переменную с именем data1 и присвоили ей пустое значение. Затем для доступа ко всем данным мы использовали массив полных данных и метод карты.

В методе карты мы предоставили значение, которое принимает 3 аргумента:

  1. текущая стоимость
  2. индекс
  3. Массив над которым мы работаем

Теперь все данные будут сохранены в «значениях».

Вы могли заметить, что мы не используем кавычки, вместо этого мы используем временные литералы (`). Теперь вставьте скопированный ранее код в файл data1.

Так это будет выглядеть так:

Теперь нам нужно внести изменения в код, вставленный для получения вывода в виде данных, собранных из API.

Итак, начните замену:

  1. Измените заголовок на ${values.title}
  2. Измените ссылку на изображение как ${values.image}
  3. Измените описание как ${values.description}
  4. Измените категорию как ${values.category}
  5. Измените цену как ${values.price}

Код будет выглядеть как это изображение, показанное ниже в файле script.js:

Прямо сейчас обновление веб-страницы ничего нам не покажет. Итак, чтобы получить вывод, нам нужно получить доступ к идентификатору.

Так что добавь

document.getElementById('cards').innerHTML=data1;

На выходе будет показана только одна карта из API; которая на самом деле является последней картой.

Итак, чтобы получить все карты, просто измените data1 на data1+. Обратитесь к изображению ниже:

И здесь мы идем! Ура! Пришло время добавить это в свой профиль на github!

::"Ссылка"::

Подписывайтесь на меня!

Если вам понравилось, не забудьте похлопать :)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

::Связаться с моими социальными сетями::

ЛинкедИн

Идентификатор почты: [email protected]