Objective
You will design and develop a web application that will allow users to request different Astronomy Pictures of the Day by date usingNASA APOD API. Users will also be able to save pictures as favourites.
App Overview
When a user first visits the site, they are presented with a form asking for a non-future date. With provided date, the app will make a request to the APOD API to retrieve that day's Astronomy Picture of the Day. The Picture of the Day will then be displayed on the page along with the title, date, and explanation. Clicking on the image should open the high-definition version of the image.
The user will able to save images as favourites. Favourites should be stored in local storage and displayed on the page whenever the user visits the site. Favourite images can also be deleted.
NASA APOD API
To complete this assignment, students will be using theNASA APOD API. Students are encouraged to register for anAPI Key.
The APOD API can be used to retrieve APOD data based on a specific date. Thedateparameter is added to the URL and is to indicate the date of the APOD image to retrieve. The format of the date should be as follows:YYYY-MM-DD.
The APOD API will return a JSON object, which will contain theurlto the image, thetitleof the image, thedateof the image, and theexplanationof the image. An example of an APOD JSON object can be found below.
{
"date"
:
"2022-03-27"
,
"explanation"
:
"Why would the surface of Titan light up with a blinding flash? The reason: a sunglint from liquid seas. Saturn's moon Titan has numerous smooth lakes of methane that, when the angle is right, reflect sunlight as if they were mirrors. Pictured here in false-color, the robotic Cassini spacecraft that orbited Saturn from 2004 to 2017 imaged the cloud-covered Titan in 2014 in different bands of cloud-piercing infrared light. This specular reflection was so bright it saturated one of Cassini's infrared cameras. Although the sunglint was annoying -- it was also useful. The reflecting regions confirm that northern Titan houses a wide and complex array of seas with a geometry that indicates periods of significant evaporation. During its numerous passes of our Solar System's most mysterious moon, Cassini has revealed Titan to be a world with active weather -- including times when it rains a liquefied version of natural gas."
,
"hdurl"
:
"https://apod.nasa.gov/apod/image/2203/TitanGlint_cassini_2002.jpg"
,
"media_type"
:
"image"
,
"service_version"
:
"v1"
,
"title"
:
"Titan Seas Reflect Sunlight"
,
"url"
:
"https://apod.nasa.gov/apod/image/2203/TitanGlint_cassini_960.jpg"
}
NOTE
Not all APOD are images. Some are videos. Themedia_typeproperty can be used to determine if the day's APOD is an image or a video.
Requirements
Accept the assignment onGitHub Classroom.
Clone the repository created by GitHub Classroom.
You must create anindex.htmlfile, astyle.cssfile, and ascript.jsfile.
You may not use inline events. All DOM events must be handled using Event Listeners.
You may not declare variables withvar. Use eitherconstorlet.
Do not use theXMLHttpRequestobject or the jQueryajax()method. Use the Fetch API for asynchronous operations.
The web application should be responsive.
The web application should not experience any page refreshes.
The web application should include a form that asks the user to input a date.
The web application should asynchronously retrieve and display the Astronomy Picture of the Day using NASA's APOD API and the date provided by the user.
The web application should display the APOD image, title, date, and explanation.
The web application should display a high-definition version of the APOD image when it is clicked.
The web application should allow the user to save Pictures as favourites, which will be stored to local storage.
The web application should display any saved favourites.
- The web application should allow the user to delete any saved Pictures as favourites, which will remove the image from the page and from local storage.
Hints
Due to the limit on requests for the APOD API, students are encouraged to store the APOD data in local storage or use a static file during development.
When displaying the APOD image either after an APOD search or in the favourites section, the standardurlproperty should be used. When displaying the high-definition version of the image, thehdurlproperty should be used.
Some APOD images are actually videos. Themedia_typeproperty in provided JSON can be used to tell if the APOD is an image or a video. Students will not be required to work with videos or implement them into the project.
An object can be an excellent way to store web application data. Storing an object to local storage does require usingJSON.stringifyandJSON.parse.