From 3e6fb77795fa17be6096a78c548259c93350494b Mon Sep 17 00:00:00 2001 From: Reisber Date: Mon, 27 Apr 2026 01:00:19 +0000 Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=B7?= =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D0=BD=D1=8C=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 30 +++++++++++++++++++++++ index.html | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 31 +++++++++++++++++++++++ 3 files changed, 133 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..1b704c7 --- /dev/null +++ b/README.md @@ -0,0 +1,30 @@ +# Посты + +Создайте страницу, которая загружает посты из [JSONPlaceholder](https://jsonplaceholder.typicode.com/) и выводит их на страницу в виде карточек. + +## API + +Основной эндпоинт: `https://cataas.com/api/cats`, либо любой другой который сможете найти + +Откройте эту ссылку в браузере и изучите структуру JSON-ответа. Изучите что содержится внутри JSON: + +## Задание + +В репозитории есть файл `index.html` с готовой разметкой. Ваша задача - написать `script.js`, и добавить стили к карточке, чтобы выглядело аккуратно. + +### Вывести все посты + +1. При загрузке страницы сделать `fetch` к `https://cataas.com/api/cats` +2. Ответ - это массив из 10 объектов (котов) +3. С помощью цикла `for` пройдитесь по массиву и для каждого кота создайте карточку на странице + +### Доп. задание + +1. Выведите только первые 5 котов, а не все 10 + +## Полезные ссылки + +- [JSONPlaceholder документация](https://jsonplaceholder.typicode.com/) +- [MDN: fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) +- [MDN: Работа с JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) +- [MDN: String.prototype.slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) diff --git a/index.html b/index.html new file mode 100644 index 0000000..e89706d --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ + + + + + + ... + + + + +
+

...

+
+ +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..81196ce --- /dev/null +++ b/script.js @@ -0,0 +1,31 @@ +// Ваш код здесь + +// Находим блок, куда будем вставлять карточки +const container = document.getElementById('cards'); + +// Делаем запрос к API +fetch('https://jsonplaceholder.typicode.com/posts') + .then(response => response.json()) // Превращаем ответ в понятный массив + .then(data => { + // Отрезаем первые 5 элементов + const limitedPosts = data.slice(0, 5); + + // Перебираем массив циклом + for (let i = 0; i < limitedPosts.length; i++) { + const post = limitedPosts[i]; + + // Создаем HTML-разметку в виде строки + const cardHtml = ` +
+

${post.title}

+

${post.body}

+
+ `; + + // Добавляем эту строку в контейнер + container.innerHTML += cardHtml; + } + }) + .catch(error => { + console.log('Произошла ошибка:', error); + });