Вот упрощенная версия моего кода:
Код: Выделить всё
async function fetchNews(query) {
const res= await fetch(`${url}${query}&apikey=${API_KEY}`)
const data = await res.json();
bindData(data.articles)
}
function bindData(articles){
const cardContainers = document.getElementById("main-container");
const newsTemplate = document.getElementById("template-main");
cardContainers.innerHTML="";
articles.forEach(article => {
if(!article.urlToImage) return;
const cardClone=newsTemplate.content.cloneNode(true);
fillDataInCard(cardClone,article);
cardContainers.appendChild(cardClone)
});
}
function fillDataInCard(cardClone,article){
const newsImg=cardClone.querySelector("#news-img");
const newsSource=cardClone.querySelector("#news-source");
const newsDesc=cardClone.querySelector("#news-desc");
const newsTitle=cardClone.querySelector("#news-title");
newsImg.src=article.urlToImage;
newsDesc.innerHTML=article.description;
newsTitle.innerHTML=article.title;
const date = new Date(article.publishedAt).toLocaleString("en-IN", {
timeZone: "Asia/Kolkata"
});
newsSource.innerHTML = `${article.source.name} · ${date}`;
cardClone.firstElementChild.addEventListener("click",()=>{
window.open(article.url,"_blank")
})
}
function onclickNav(id){
fetchNews(id);
}Код: Выделить всё
[list]
[*]IPL
[*]Finance
[*]Politics
[/list]
Подробнее здесь: https://stackoverflow.com/questions/798 ... ar-options
Мобильная версия