Чтобы получить данные из примера 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