🚧 This site is a work in progress. Things will continue to be added and changed. 🚧
Portfolio Projects
HTML/CSS/JS
Welcome to Space

Welcome to Space

Screenshot of Welcome to Space site.

This web application uses the NASA Astronomy Picture of the Day API to let users view media posted on specific dates. With a simple and intuitive design, users can select a date, and the application displays the corresponding media along with the description and copyright information. Developed from scratch using HTML, CSS, and JavaScript, the application offers an engaging way to explore NASA's astronomical wonders.

I. Getting started

Prerequisites

Other than an internet browser and IDE, there are no other requirements to run this application.

Installation

How to install and run the application.

  1. Clone the repository from GitHub.
git clone https://github.com/LadyBluenotes/NASA
  1. Start the application
open index.html

II. About

Built with

NASA, short for the National Aeronautics and Space Administration, is a government agency dedicated to advancing space exploration, aeronautics, and conducting scientific research. One of their endeavors is the Astronomy Picture of the Day (APOD) API, which lets users access NASA's daily selection of captivating images and informative descriptions.

This web application leverages the APOD API to explore NASA's curated collection of celestial visuals. With this application, users can browse through the archive featuring media from past dates, each accompanied by their respective titles, descriptions, and copyright details.

The media showcased on the APOD ranges from photographs of distant galaxies and nebulae to videos, including noteworthy moments like the Perseverance rover's Mars landing. This web application serves as a user-friendly gateway to access and appreciate these images and videos.

By using the APOD API, this web application provides a streamlined interface that allows users to to view the wonders of NASA's astronomical discoveries and gain insights into the vast cosmos.

III. Motivation

When I began this project, I wanted to create an simple web application using the fundamentals of web development and an entertaining API. Discovering NASA's APOD API sparked my inspiration, and I envisioned a site that would beautifully display this captivating content.

My plan was to rely solely on HTML, CSS, and JavaScript, without the use of frameworks or additional tools. I aimed to enhance the site's interactivity by leveraging JavaScript. By combining these elements, my objective wass to deliver an appealing website that showcased NASA's APOD imagery while adhering to the principles of simplicity and usability in web development.

IV. Key takeaways

Discoveries and reflections

This project continued to offer me the opportunity to build on the web development skills I had gained to date. While building this site, I felt some of the valuable insights I gained were:

  1. Basics over tools: Building the site without relying on external tools and frameworks provided valuable insights into the fundamental concepts of web development. It allowed for a deeper understanding of how CSS works, particularly when dealing with multiple classes and IDs. Additionally, ensuring semantic correctness by choosing the appropriate HTML elements for different aspects of the API presented a learning opportunity.
  2. Edge cases: This project exposed me to the importance of considering edge cases in web development. Initially expecting only images from the API, encountering different media types added complexity to the project. It challenged me to adapt and develop strategies to handle and display these varying media types effectively.

Technical growth

Web Development Basics

This project served as an opportunity to strengthen my web development skills by emphasizing the importance of the fundamentals, while exploring new parts of it. I honed my abilities in structuring content, applying CSS styling, and adding interactivity using vanilla JavaScript. Additionally, encountering edge cases, such as handling different media types, challenged me to think creatively and problem-solve effectively. All these skills are important when working with web applications and I felt that this site further encouraged the knowledge expansion.

V. Acknowledgements

This project and design was mostly inspired by the NASA website (opens in a new tab) and the APOD API.

VI. Additional Information

Known Issues

Can be found here (opens in a new tab).

Feature Improvements

  • None at this time.