-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
147 lines (127 loc) · 4.64 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
const resultsNav = document.getElementById('resultsNav');
const favoritesNav = document.getElementById('favoritesNav');
const imagesContainer = document.querySelector('.images-container');
const saveConfirmed = document.querySelector('.save-confirmed');
const loader = document.querySelector('.loader');
// NASA API
const count = 10;
const apiKey = 'DEMO_KEY';
const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=${count}`;
let resultsArray = [];
let favorites = {};
const showContent = (page) => {
window.scrollTo({ top: 0, behavior: 'instant' });
if (page === 'results') {
resultsNav.classList.remove('hidden');
favoritesNav.classList.add('hidden');
} else {
resultsNav.classList.add('hidden');
favoritesNav.classList.remove('hidden');
}
loader.classList.add('hidden');
}
const createDOMNodes = (page) => {
const currentArray = page === 'results' ? resultsArray : Object.values(favorites);
currentArray.forEach((result) => {
// Card Container
const card = document.createElement('div');
card.classList.add('card');
// Link
const link = document.createElement('a');
link.href = result.hdurl;
link.title = 'View Full Image';
link.target = '_blank';
// Image
const image = document.createElement('img');
image.src = result.url;
image.alt = 'NASA Picture of the Day';
image.loading = 'lazy';
image.classList.add('card-img-top');
// Card Body
const cardBody = document.createElement('div');
cardBody.classList.add('card-body');
// Card Title
const cardTitle = document.createElement('h5');
cardTitle.classList.add('card-title');
cardTitle.textContent = result.title;
// Save Text
const saveText = document.createElement('p');
saveText.classList.add('clickable');
if (page === 'results') {
saveText.textContent = 'Add To Favorites';
saveText.setAttribute('onClick', `saveFavorite('${result.url}')`);
} else {
saveText.textContent = 'Remove Favorite';
saveText.setAttribute('onClick', `removeFavorite('${result.url}')`);
}
// Card Text
const cardText = document.createElement('p');
cardText.textContent = result.explanation;
// Footer Container
const footer = document.createElement('small');
footer.classList.add('text-muted');
// Date
const date = document.createElement('strong');
date.textContent = result.date;
// Copyright
const copyrightResult = result.copyright === undefined ? '' : result.copyright;
const copyright = document.createElement('span');
copyright.textContent = copyrightResult;
// Append
footer.append(date, copyright);
cardBody.append(cardTitle, saveText, cardText, footer);
link.appendChild(image);
card.append(link, cardBody);
imagesContainer.appendChild(card);
});
};
const updateDOM = (page) => {
// Get favorites from localStorage
if (localStorage.getItem('nasaFavorites')) {
favorites = JSON.parse(localStorage.getItem('nasaFavorites'));
}
imagesContainer.textContent = '';
createDOMNodes(page);
showContent(page);
}
// Get 10 Images from NASA API
async function getNasaPictures() {
// Show Loader
loader.classList.remove('hidden');
try {
const response = await fetch(apiUrl);
resultsArray = await response.json();
console.log(resultsArray);
updateDOM('results');
} catch (error) {
console.error('Error fetching data from NASA API:', error);
}
}
// Add result to Favorites
const saveFavorite = (itemUrl) => {
// Loop through results array to select favorite
resultsArray.forEach((item) => {
if (item.url.includes(itemUrl) && !favorites[itemUrl]) {
favorites[itemUrl] = item;
console.log(JSON.stringify(favorites));
// Show Save confirmation for 2 seconds
saveConfirmed.hidden = false;
setTimeout(() => {
saveConfirmed.hidden = true;
}, 2000);
// Set favorites in localStorage
localStorage.setItem('nasaFavorites', JSON.stringify(favorites));
}
});
}
// Remove item from favorites
const removeFavorite = (itemUrl) => {
if (favorites[itemUrl]) {
delete favorites[itemUrl];
// Set favorites in localStorage
localStorage.setItem('nasaFavorites', JSON.stringify(favorites));
updateDOM('favorites');
}
}
// On Load
getNasaPictures();