NASA API

Overview

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.

I developed and wrote the code to include the API key, a call using the fetch() method, and a function that would display the information after it was retrieved. To ensure that any error that may occur is caught, a function was written to display an error message. After this proved successful, responsive design became priority. I wanted this webpage to be available for mobile users. The font size changes depending on the size of the screen along with the size of the image.

Solution

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.