-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
87 lines (71 loc) · 2.65 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
75
76
77
78
79
80
81
82
83
84
85
86
87
const API_KEY = "e21c0ec2091d4c048da73ea699cb36c5";
const url = "https://newsapi.org/v2/everything?q=";
window.addEventListener('load', () => fetchNews('India'));
function reload() {
window.location.reload();
}
async function fetchNews(query) {
const apiUrl = `${url}${query}&apiKey=${API_KEY}`;
try {
const res = await fetch(apiUrl);
const data = await res.json();
bindData(data.articles);
} catch (error) {
console.error('Error fetching news:', error);
}
}
function bindData(articles) {
const cardsContainer = document.getElementById('cards-container');
const newsCardTemplate = document.getElementById('template-news-card');
cardsContainer.innerHTML = '';
articles.forEach((article) => {
if (!article.urlToImage) return;
const cardClone = newsCardTemplate.content.cloneNode(true);
fillDataInCard(cardClone, article);
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');
curSelectedNav = navItem;
curSelectedNav.classList.add('active');
}
const searchText = document.getElementById("search-text");
const searchButton = document.getElementById("search-button");
searchText.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
event.preventDefault();
const query = searchText.value.trim();
if (query !== "") {
fetchNews(query);
curSelectedNav?.classList.remove('active');
curSelectedNav = null;
}
}
});
searchButton.addEventListener('click', () => {
const query = searchText.value.trim();
if (!query) return;
fetchNews(query);
curSelectedNav?.classList.remove('active');
curSelectedNav = null;
});