Skip to content
Commits on Source (3)
Show whitespace changes
Inline Side-by-side
exonasa-promise/assets/css/style.css 0 → 100644
View file @ 636ba923
@font-face {
font-family: "regular";
src: url("../fonts/letter.regular.otf");
}
body {
background-color: antiquewhite;
}
main>div:first-of-type {
text-align: center;
margin: 1rem;
}
main>div:first-of-type>* {
background-color: lightgrey;
}
main>div:last-of-type {
display: flex;
justify-content: space-around;
}
section {
width: 45%;
}
section:first-of-type {
background-color: aliceblue;
text-align: center;
}
section:last-of-type {
background-color: bisque;
}
h2 {
font-family: regular;
text-align: center;
}
h3 {
font-size: 0.8rem;
font-style: italic;
}
#outImage>img {
object-fit: contain;
width: 100%;
height: 100%;
}
exonasa-promise/assets/scripts/index.js 0 → 100644
View file @ 636ba923
const BASE_URL = "https://api.nasa.gov/planetary/";
const ENDPOINT = BASE_URL + "apod";
const API_KEY = "xWLKZjY1HYy6lRpbsSaQJ7W6DrULd15xOuldiwSJ";
function getDataFromJson(url) {
fetch(url)
.then(response => response.json())
.then(createContent)
}
function createContent(obj) {
let replaced;
const out = document.querySelector("#outImage");
if (obj.media_type !== "image") { // C'est une vidéo
replaced = `<iframe src="${obj.url}?loop=1&modestbranding=1" frameborder=0 allowfullscreen> </iframe>`;
} else { // c'est une image
replaced = `<img src="${obj.url}" alt="${obj.title}">`;
}
out.innerHTML = replaced;
out.nextElementSibling.textContent = obj.title;
document.getElementById("explanation").textContent = obj.explanation;
document.querySelector("section > h3 > span").textContent = obj.date;
}
document.querySelector("#dateChooser")
.addEventListener("change", evt => getDataFromJson(ENDPOINT + "?api_key=" + API_KEY + "&date=" + evt.target.value));
exonasa-promise/index.html 0 → 100644
View file @ 636ba923
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo NASA v1</title>
<link rel="stylesheet" href="./assets/css/style.css">
<script src="./assets/scripts/index.js" defer></script>
</head>
<body>
<main>
<div>
<label for="dateChooser">Choisissez une date</label>
<input type="date" name="date" id="dateChooser">
</div>
<div>
<section>
<h2>L'image du jour de la NASA</h2>
<h3>Date : <span></span></h3>
<figure>
<div id="outImage"></div>
<figcaption></figcaption>
</figure>
</section>
<section>
<h2>L'explication de ce qu'on voit</h2>
<div id="explanation"></div>
</section>
</div>
</main>
</body>
</html>