Чтобы получить данные из примера API и отобразить их на карточке с помощью JavaScript и CSS, вы можете выполнить следующие действия:
Шаг 1. Создайте HTML-структуру для карточки и включите контейнер, в котором вы будете отображать данные.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample API Data</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <!-- Data will be rendered here --> </div> <script src="script.js"></script> </body> </html>
Шаг 2. Создайте CSS-файл (styles.css
) для оформления карточки.
.container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .card { border: 1px solid #ddd; border-radius: 5px; padding: 20px; width: 300px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); background-color: #fff; } .card h2 { font-size: 20px; margin: 0; } .card p { margin: 10px 0; }
Шаг 3. Создайте файл JavaScript (script.js
), чтобы получить данные из примера API и отобразить их на карточке.
// Function to fetch data from the API async function fetchData() { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const data = await response.json(); return data; } catch (error) { console.error('Error fetching data:', error); } } // Function to render data in cards async function renderData() { const container = document.querySelector('.container'); const data = await fetchData(); if (!data) { return; } data.forEach(item => { const card = document.createElement('div'); card.classList.add('card'); const title = document.createElement('h2'); title.textContent = item.title; const body = document.createElement('p'); body.textContent = item.body; card.appendChild(title); card.appendChild(body); container.appendChild(card); }); } // Call the renderData function to display data renderData();
В этом коде:
- Мы создаем функцию
fetchData
для получения данных из примера API (в данном случае мы используем API JSONPlaceholder). - Мы создаем функцию
renderData
для отображения полученных данных в картах. Сначала он извлекает данные, а затем динамически создает и добавляет элементы карты в контейнер div. - CSS
styles.css
используется для оформления карточки и контейнера.
Обязательно настройте конечную точку и стиль API в соответствии с вашими конкретными требованиями. Когда вы открываете HTML-файл в браузере, он должен получать данные из API и отображать их в стилизованных карточках.
Для живого примера, пожалуйста, проверьте:
https://codepen.io/gauravprof27/pen/ExGXWXW