Сделал заданьку

2026-04-27 01:00:19 +00:00
commit 3e6fb77795
3 changed files with 133 additions and 0 deletions
--- a/README.md
+++ 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)
--- a/index.html
+++ b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>...</title>
+  <style>
+#Кто я такой чтобы врать, я сделал это ИИ-шкой, а вот JSON парсил ручками
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f9;
+  padding: 20px;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+/* Контейнер для карточек (Grid для красивой сетки) */
+#cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Стили самой карточки */
+.card {
+  background: #ffffff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  transition: transform 0.2s;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+}
+
+.card h2 {
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+  color: #2c3e50;
+  text-transform: capitalize; /* Делаем первую букву заглавной */
+}
+
+.card p {
+  color: #555;
+  line-height: 1.5;
+}
+  </style>
+</head>
+<body>
+
+  <div class="header">
+    <h1>...</h1>
+  </div>
+
+  <div id="cards"></div>
+
+  <script src="script.js"></script>
+</body>
+</html>
--- a/script.js
+++ 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 = `
+        <div class="card">
+          <h2>${post.title}</h2>
+          <p>${post.body}</p>
+        </div>
+      `;
+
+      // Добавляем эту строку в контейнер
+      container.innerHTML += cardHtml;
+    }
+  })
+  .catch(error => {
+    console.log('Произошла ошибка:', error);
+  });