-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
74 lines (58 loc) · 2.28 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// my api key : aafa3d16907a484185af4c1af5eb246c
const api_key = "aafa3d16907a484185af4c1af5eb246c";
const url = "https://newsapi.org/v2/everything?q=";
window.addEventListener('load', ()=>{
fetchNews("India");
})
function reload(){
window.location.reload();
}
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 cardsContainer = document.getElementById('cards-container');
const newsCardTemplate = document.getElementById('template-news-card');
cardsContainer.innerHTML = '';
articles.forEach(articles => {
if(!articles.urlToImage) return;
const cardClone = newsCardTemplate.content.cloneNode(true);
fillDataInCard(cardClone, articles);
cardsContainer.appendChild(cardClone);
})
}
function fillDataInCard(cardClone, article) {
const newsImg = cardClone.querySelector("#news-img");
const newsTitle = cardClone.querySelector("#news-title");
const newsSource = cardClone.querySelector("#news-source");
const newsDesc = cardClone.querySelector("#news-desc");
newsImg.src = article.urlToImage;
newsTitle.innerHTML = article.title;
newsDesc.innerHTML = article.description;
const date = new Date(article.publishedAt).toLocaleString("en-US", {
timeZone: "Asia/Jakarta",
});
newsSource.innerHTML = `${article.source.name} · ${date}`;
cardClone.firstElementChild.addEventListener("click", () => {
window.open(article.url, "_blank");
});
}
let curSelectedNav = null;
function onNavItemClick(id) {
fetchNews(id);
const navItem = document.getElementById(id);
curSelectedNav?.classList.remove("active"); //remove when its not selected
curSelectedNav = navItem; //select mentioned field news and change its color
curSelectedNav.classList.add("active"); //add style when selected
}
const searchButton = document.getElementById("search-button");
const searchText = document.getElementById("search-text");
searchButton.addEventListener("click", () => {
const query = searchText.value;
if (!query) return;
fetchNews(query);
curSelectedNav?.classList.remove("active"); //no active classes selected
curSelectedNav = null;
});