-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
74 lines (66 loc) · 2 KB
/
index.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
window.addEventListener("load",()=>{
getNews("health"); //business, entertainment, general,health,science,sports,technology
})
async function getNews(query) {
let res=await fetch(`https://saurav.tech/NewsAPI/top-headlines/category/${query}/in.json`)
let data=await res.json();
console.log(data);
bindData(data.articles);
}
function bindData(articles) {
let template=document.querySelector('template');
let container=document.querySelector('.cards-container');
container.innerHTML="";
articles.forEach((article) => {
if(!article.urlToImage) return; //article with no image will not be added
let cardClone=template.content.cloneNode(true); //deep cloning
fillData(cardClone,article);
container.append(cardClone)
});
}
function fillData(cardClone,article) {
let img=cardClone.querySelector('#news-img')
let h4=cardClone.querySelector('h4');
let h5=cardClone.querySelector('h5');
let p=cardClone.querySelector('.content')
img.src=article.urlToImage;
h4.innerHTML=article.title;
p.innerHTML=article.description;
let date=new Date(article.publishedAt).toLocaleString("en-US",{timeZone:"Asia/Jakarta"})
h5.innerHTML=`${article.source.name}: ${date}`
let card=cardClone.querySelector('.cards');
card.addEventListener('click',()=>{
window.open(article.url,'_blank');
})
}
//button
let btn=document.querySelector('button');
let input=document.querySelector('input');
btn.addEventListener('click',()=>{
let text=input.value;
if(curr!=null) {
curr.classList.remove('active');
}
if(text) {
getNews(text);
}
else {
return;
}
})
//<a>
let a=document.getElementById('health');
a.classList.add('active')
let curr=a;
function anchorTags(text) {
getNews(text)
a=document.getElementById(text)
if(curr!=null) {
curr.classList.remove('active');
}
curr=a;
a.classList.add('active')
}
function reload() {
window.location.reload();
}