-
Notifications
You must be signed in to change notification settings - Fork 2
/
app.js
executable file
·88 lines (74 loc) · 2.89 KB
/
app.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
88
const apiKey = "your-api-key";
const defaultSource = 'buzzfeed';
const sourceSelector = document.querySelector('#sourceSelector');
const inputSearch = document.querySelector('input[type="search"]');
const newsArticles = document.querySelector('main');
const statusBar = document.querySelector('.status');
const imgNotFound = "https://stockpictures.io/wp-content/uploads/2020/01/image-not-found-big.png";
// if ('serviceWorker' in navigator) {
// window.addEventListener('load', () =>
// navigator.serviceWorker.register('sw.js')
// .then(registration => console.log('Service Worker registered'))
// .catch(err => 'SW registration failed'));
// }
window.addEventListener('load', e => {
sourceSelector.addEventListener('change', evt => updateNews(evt.target.value));
updateNewsSources().then(() => {
sourceSelector.value = defaultSource;
updateNews();
});
inputSearch.addEventListener('search', e => {
queryNews(e.target.value)
})
newtworkStatus()
window.addEventListener('online', newtworkStatus);
window.addEventListener('offline', newtworkStatus);
});
async function updateNewsSources() {
const response = await fetch(`https://newsapi.org/v2/sources?apiKey=${apiKey}`);
const json = await response.json();
sourceSelector.innerHTML =
json.sources
.map(source => `<option value="${source.id}">${source.name}</option>`)
.join('\n');
}
async function updateNews(source = defaultSource) {
newsArticles.innerHTML = '';
const response = await fetch(`https://newsapi.org/v2/top-headlines?sources=${source}&sortBy=top&apiKey=${apiKey}`);
const json = await response.json();
newsArticles.innerHTML = json.articles.map(createArticle).join('\n');
}
async function queryNews(query) {
newsArticles.innerHTML = '';
const response = await fetch(`https://newsapi.org/v2/everything?q=${query}&apiKey=${apiKey}`);
const json = await response.json();
newsArticles.innerHTML = json.articles.map(createArticle).join('\n');
document.getElementById('results').innerHTML = `Se encontraron <strong>${Object.keys(json.articles).length}</strong> resultados de <strong>"${query}"</strong>. `;
inputSearch.value = ""
}
function createArticle(article) {
return `
<div class="article" title="${article.title}">
<a href="${article.url}">
<div class="article-img">
<img src="${article.urlToImage ? article.urlToImage : imgNotFound}" />
</div>
<div class="article-body">
<h2 class="article-title">${article.title}</h2>
<p>${article.description ? article.description : "Lorem Ipsum"}</p>
</div>
</a>
</div>
`;
}
function newtworkStatus() {
if (navigator.onLine) {
statusBar.innerHTML = ""
statusBar.style.display = "none"
console.log('online');
} else {
statusBar.style.display = "block"
statusBar.innerHTML = "Estas Offline"
console.log('offline')
}
}