This project is an educational web application that utilizes front-end javascript to fetch and display NASA's Astronomy Picture/Video Of The Day along with an educational description. It is great for astronomy lovers and those who wish to find an interest in Outer Space.
Link to project: https://a-moment-in-space.netlify.app
Tech used: HTML, CSS, JavaScript
I started with a simple HTML layout in mind. I created a date and button container to hold a date input as a control panel to select a specific date. I also added a button that would allow the date selected to be requested via fetch API. I also coded a main content container which would hold and display the images and video data fetched from the NASA servers along with explanation text of the media inside of their own respected containers. I then created a javascript folder where I kept all my javascript code. This folder contains an event listener I coded to a button in my HTML to run the fetch API function when clicked. I also coded a function set to fetch the date data along with the corresponding Astronomy Picture/Video Of The Day from NASA servers and display the data in its designated containers.
I noticed the images and videos were not displaying past a certain date (06/16/95) so I added a disclaimer in the HTML to inform the user(s). I also wanted to make the web app available for mobile/tablet devices so I added media queries in CSS as well.
Being an engineer means continuously learning. Every time you build something, you always have those eureka light bulb moments. "A Moment In Space" was my first web app where I utilized a web API and I was proud of myself for completing this project. It is a work of art to me. I always had an passion for astronomy as a child, and to create an application like this is special. I also greatly enjoy the fact I can use this app to educate others! I look forward to further optimizing and growing this application to be an even greater learning tool in the future.