Utilizing NASA’s Astronomy Picture of the Day (APOD) API and displaying information on responsive webpage with fetch(). This demonstrates my ability to retrieve a JSON object and present it in an appropriate manner.

Context and Challenge

Project background and description

The objective was to manage NASA’s Astronomy Picture of the Day(APOD) API by calling and fetching a JSON object that contains and displays the title, date, explanation, and image.

The Problem

Instead of using XMLHttpRequest() method, the fetch() method was requested. JS, HTML, and CSS, were utilized to display JSON information in a convenient and interactive manner.

Goals and Objectives

The overall goal was to successfully call and retrieve the applicable JSON object that displays and changes information each day. Another goal was to develop a responsive webpage displaying the APOD in a straightforward approach.

Process and Insight

I researched and acquired the appropriate API key from NASA’s website. This key is unique to the user.

Screenshot of Repl code


Screenshot of NASA API Screenshot of NASA API Screenshot of NASA API

Using the fetch() method has allowed this webpage to continously fetch and retreive JSON information and displaying it in a succinct manner. If at any point there is an issue with the retrival, an error message will be presented.

Results and Conclusions

I appreciate NASA makes it simple to obtain an API key, however, you must know what to do with the key to call the JSON object properly. Once the proper code to fetch and retrieve the object, displaying the information accurately is another challenge. Once I solved how I wanted to display the object, a simple function was written to resolve this matter.