90 lines
2.8 KiB
JavaScript
90 lines
2.8 KiB
JavaScript
"use strict";
|
||
|
||
// returns date string in YYYY-MM-DD format
|
||
const getDateString = date =>
|
||
`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
|
||
|
||
const displayPicture = data => {
|
||
let html = "";
|
||
if(data.error) { // error – display message
|
||
html += `<span class="error">${data.error.message}</span>`;
|
||
}
|
||
else if (data.code) { // problem – display message
|
||
html += `<span class="error">${data.msg}</span>`;
|
||
}
|
||
else { // success – display image/video data
|
||
html += `<h3>${data.title}</h3>`;
|
||
const width = 700;
|
||
switch (data.media_type) {
|
||
case "image":
|
||
html += `<img src="${data.url}" width="${width}"
|
||
alt="NASA photo">`;
|
||
break;
|
||
case "video":
|
||
html += `<iframe src="${data.url}"
|
||
frameborder="0"
|
||
allowfullscreen></iframe>`;
|
||
break;
|
||
default:
|
||
html += `<img src="images/notavailable.png"
|
||
width="${width}" alt="NASA photo">`;
|
||
}
|
||
|
||
// date and copyright
|
||
html += `<div>${data.date}`;
|
||
if (data.copyright) {
|
||
html += `<span class="right">© ${data.copyright}</span>`;
|
||
}
|
||
html += "</div>";
|
||
|
||
// explanation
|
||
html += `<p>${data.explanation}</p>`;
|
||
}
|
||
|
||
// display HTML
|
||
$("#display").html(html);
|
||
};
|
||
|
||
const displayError = error => {
|
||
let html = `<span class="error">${error.message}</span>`;
|
||
$("#display").html(html);
|
||
};
|
||
|
||
$(document).ready( () => {
|
||
|
||
// on load, get today's date in YYYY-MM-DD format
|
||
const today = new Date();
|
||
let dateStr = getDateString(today);
|
||
|
||
// set today's date in textbox
|
||
const dateTextbox = $("#date");
|
||
dateTextbox.val(dateStr);
|
||
dateTextbox.focus();
|
||
|
||
$("#view_button").click( () => {
|
||
|
||
// get date from textbox
|
||
dateStr = $("#date").val();
|
||
const dateObj = new Date(dateStr);
|
||
|
||
if (dateObj == "Invalid Date") {
|
||
const msg = "Please enter valid date in YYYY-MM-DD format.";
|
||
$("#display").html(`<span class="error">${msg}</span>`);
|
||
}
|
||
else {
|
||
// make sure date string is in proper format
|
||
dateStr = getDateString(dateObj);
|
||
|
||
// build URL for API request
|
||
const domain = `https://api.nasa.gov/planetary/apod`;
|
||
const request = `?api_key=DEMO_KEY&date=${dateStr}`;
|
||
const url = domain + request;
|
||
|
||
fetch(url)
|
||
.then( response => response.json() )
|
||
.then( json => displayPicture(json) )
|
||
.catch( e => displayError(e) );
|
||
}
|
||
$("#date").focus();
|
||
});
|
||
}); |