.news-section {
padding: 40px 20px;
}
.news-section h2 {
text-align: center;
margin-bottom: 30px;
}
.news-item {
background-color: #f1f1f1;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
.news-item h3 {
margin-top: 0;
}
.news-item p {
margin-bottom: 10px;
}
.news-item .date {
color: #888;
font-size: 14px;
}
const newsContainer = document.getElementById('news-container');
// Ключ API от NewAPI.org
const apiKey = '206a22cbbfd34110b7ccfa59ae57474e';
// Функция для создания элемента новости
function createNewsItem(news) {
const newsItem = document.createElement('div');
newsItem.classList.add('news-item');
const titleElement = document.createElement('h3');
titleElement.textContent = news.title;
const descriptionElement = document.createElement('p');
descriptionElement.textContent = news.description;
const dateElement = document.createElement('p');
dateElement.classList.add('date');
dateElement.textContent = news.publishedAt;
newsItem.appendChild(titleElement);
newsItem.appendChild(descriptionElement);
newsItem.appendChild(dateElement);
return newsItem;
}
// Функция для получения новостей с API
function getNews() {
fetch(`https://api.newapi.org/v1/news?apiKey=${apiKey}`)
.then(response => response.json())
.then(data => {
data.articles.forEach(article => {
const newsItem = createNewsItem({
title: article.title,
description: article.description,
publishedAt: article.publishedAt
});
newsContainer.appendChild(newsItem);
});
})
.catch(error => {
console.error('Ошибка при загрузке новостей:', error);
});
}
// Вызов функции для получения новостей
getNews();
