Internet_programming/Lab3/js/cards.js
2023-12-10 23:31:11 +03:00

45 lines
2.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import {
getAllLines, getLine, updateLine,
} from "./cards_api";
// Функция для создания карточки на основе данных
function createNewsCard(newsData) {
const maxTextLength = 150;
const truncatedText = newsData.text.length > maxTextLength ? newsData.text.substring(0, maxTextLength) + '...' : newsData.text;
const cardHtml = `
<div class="col-md-4">
<div class="card news-card">
<img src="${newsData.image}" class="card-img-top" alt="Изображение новости">
<div class="card-body">
<h5 class="card-title">${newsData.title}</h5>
<p class="card-text">${truncatedText}</p>
</div>
</div>
</div>
`;
return cardHtml;
}
// Функция для загрузки и отображения карточек
async function loadAndDisplayNewsCards() {
try {
// Получаем данные с сервера с помощью функции из card.js
const lines = await getAllLines();
const newsCardsContainer = document.getElementById('news-cards-container');
// Перебираем полученные данные и создаем карточки для каждой новости
lines.forEach(line => {
const newsCard = createNewsCard({
title: line.title,
text: line.text,
image: line.image
});
newsCardsContainer.innerHTML += newsCard;
});
} catch (error) {
console.error('Ошибка загрузки данных:', error);
}
}
// Вызываем функцию для загрузки и отображения карточек при загрузке страницы
window.onload = loadAndDisplayNewsCards;