"Nasa-APOD-API || Ravi Singh"
Bootstrap 4.1.1 Snippet by ravi7284007

Post to Facebook Tweet this

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
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
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';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard

Questions / Comments: