APOD Search

Objective

You will design and develop a web application that will allow users to request different Astronomy Pictures of the Day by date using NASA 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 images should be stored in local storage and display on the page whenever the user visits the site. Favourite images can also be deleted.

Resources

To complete this assignment, students will be using the NASA APOD API. Students are encouraged to register for an API Key.

The APOD API can be used to retrieve APOD data based on a specific date. The date parameter is added to 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 the url to the image, the title of the image, the date of the image, and the explanation of 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. The media_type property can be used to determine if the day's APOD is an image or a video.

API Call

Your API call URL will be similar to this: fetch("https://api.nasa.gov/planetary/apod?api_key=[YOUR_API_KEY]]&date=[DATE_FROM_INPUT_FIELD]")

Note:

• Replace the information in [] with your information
• To get your API Key you will need to sign-up at https://api.nasa.gov/
• The date value needs to be in the following format YYY-MM-DD

Requirements

Functional Requirements

1. User Input Form

• The application must present a form on the landing page for the user to input a non-future date.

2. APOD Retrieval and Display

• Upon form submission, the application must retrieve the Astronomy Picture of the Day (APOD) for the entered date using NASA's APOD API.
• The retrieved APOD must display the following details:
  • Image (or video, if applicable).
  • Title.
  • Date.
  • Explanation.
• Clicking on the displayed image should open its high-definition version on the same page, maintaining the functionality of a single-page application.

3. Favourites Management

• Users must be able to mark any displayed APOD as a favourite.
• The application must display a list of saved favourites on the page.
• Users must be able to delete a favourite image.

4. Responsive Design

• The application must be fully responsive and provide an optimal user experience across various screen sizes and devices.

Technical Requirements

1. File Structure

• The project must use a single HTML file (index.html), CSS file (style.css), and JavaScript file (script.js), all located at the root of the repository.

2. Styling and Frameworks

• The use of modern CSS frameworks (e.g., Bootstrap, Foundation) or a CSS reset (e.g., reset.css) is permitted but not mandatory.

3. Event Handling

• All DOM events must be handled using JavaScript Event Listeners.
• Inline events (e.g., onclick attributes) are not allowed.

4. JavaScript Standards

• Variables must be declared using const or let; var is not allowed.
• JavaScript libraries (e.g., Lodash, Moment.js) may be used if needed.
• The Fetch API must be used for all asynchronous operations. The use of XMLHttpRequest or jQuery's ajax() method is prohibited.

5. Local Storage

• Favourite images data must be stored in the browser's local storage.
• Data retrieval and manipulation of local storage must use JavaScript.

6. API Integration

• The application must integrate with NASA’s APOD API using the Fetch API.

7. Accessibility

• The application must include semantic HTML and ARIA attributes where appropriate to ensure accessibility.
• Images must include descriptive alt attributes.

Bonus Features (Optional)

• Allow users to filter favourites by date or keyword.
• Provide a search history feature to quickly access previously searched dates.
• Add a light/dark mode toggle for better user experience.
• Display loading indicators while fetching data from the API.

Hints

1. 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.
2. When displaying the APOD image either after a APOD search or in the favourites section, the standard url property should be used. When displaying the high definition version of the image, the hdurl property should be used.
3. Some APOD image are actually videos. The media_type property in provided JSON can be used to tell if the APOD is an image or a video. Student will not be required to work with videos nor implement them into their application.
4. An object can be an excellent way to store a web application settings. Storing an object to local storage does require using JSON.stringify and JSON.parse.