<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="loader hidden ">
<img src="https://img.icons8.com/carbon-copy/100/000000/hand-planting.png" alt="Rocket Loading">
</div>
<div class="container">
<div class="navigation-container">
<span class="background"></span>
<!-- Result Nav -->
<span class="navigation-items" id="resultsNav">
<h3 class="clickable" onclick="updateDOM('favorites')">Favorites</h3>
<h3> • </h3>
<h3 class="clickable" onclick="getNasaPictures()">Load More</h3>
</span>
<span class="navigation-items hidden" id="favoritesNav">
<h3 class="clickable" onclick="getNasaPictures()">Load More Nasa</h3>
</span>
</div>
<!-- Images container -->
<div class="images-container"></div>
</div>
<!-- Save Confirmation -->
<div class="save-confirmed" hidden>
<h1>ADDED!</h1>
</div>
html {
box-sizing: border-box;
}
body {
margin: 0;
background: whitesmoke;
overflow-x: hidden;
font-family: Verdana, sans-serif;
font-size: 1rem;
line-height: 1.8rem;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
margin-bottom: 25px;
}
/* Loader */
.loader {
background-color: white;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
/* Navigation */
.navigation-container {
position: fixed;
top: 0;
}
.navigation-items {
display: flex;
justify-content: center;
}
.background {
background: whitesmoke;
position: fixed;
right: 0;
width: 100%;
height: 60px;
z-index: -1;
}
/* Images Container */
.images-container {
max-width: 800px;
margin-top: 50px;
}
.card {
background: white;
margin: 10px 10px 20px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.card-img-top {
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}
.card-body {
padding: 20px;
}
.card-title {
margin: 10px auto;
font-size: 24px;
}
/* Save Confirmation */
.save-confirmed {
background: white;
padding: 8px 16px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
position: fixed;
bottom: 25px;
right: 50px;
}
/* Hidden */
.hidden {
display: none !important;
}
.clickable {
color: orange;
cursor: pointer;
user-select: none;
}
.clickable:hover {
color: dodgerblue;
}
/* Large Smartphone (Vertical) */
@media screen and (max-width: 800px) {
body {
line-height: 1.4rem;
font-size: 0.9rem;
}
.save-confirmed {
right: 25px
}
.card-title {
font-size: 20px;
}
.card-body {
text-align: justify;
}
}
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
const count = 10;
const apiKey = 'DEMO_KEY';
const API = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=${count}`;
let resultsArray = [];
let favorites = {};
function 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')
}
function 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';
// images
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 Favorites';
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)
})
}
function updateDOM(page) {
// Get Favorites from localstorage
if (localStorage.getItem('nasaFav')) {
favorites = JSON.parse(localStorage.getItem('nasaFav'))
}
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(API);
resultsArray = await response.json();
updateDOM('results');
} catch (error) {
console.log(error);
}
}
function saveFavorite(itemUrl) {
// Loop through result
resultsArray.forEach(item => {
if (item.url.includes(itemUrl) && !favorites[itemUrl]) {
favorites[itemUrl] = item;
// show save confimation
saveConfirmed.hidden = false;
setTimeout(() => {
saveConfirmed.hidden = true
}, 2000)
// set fav in local storage
localStorage.setItem('nasaFav', JSON.stringify(favorites))
}
})
}
function removeFavorite(itemUrl) {
if (favorites[itemUrl]) {
delete favorites[itemUrl];
// set fav in local storage
localStorage.setItem('nasaFav', JSON.stringify(favorites));
updateDOM('favorites')
}
}
// onLoad
getNasaPictures()
