You are browsing as a guest. Sign up (or log in) to start making projects!

Ship #1

I created a NASA Astronomy Picture of the Day website that connects to NASA’s API and automatically displays the latest astronomy image or video, along with its title, date, and explanation. The aim was to create a simple but visually interesting way to explore space content while improving my web development skills.

The most challenging part was getting the API connection working properly and making sure the website could handle different types of content, such as images and videos. I also had issues during deployment where the page showed errors because of incorrect file paths, but I was able to debug and fix them.

I am most proud of creating a website that works with live data and updates automatically instead of using fixed content. I also like how the final design combines functionality with a space themed style and works across different screen sizes.

Try project → See source code →
Open comments for this post

3h 3m 24s logged

For this project, I created a NASA Astronomy Picture of the Day website that displays space images and information using NASA’s APOD API. The purpose of the project was to create an interesting website while improving my skills in HTML, CSS, JavaScript, and working with external data.The website automatically updates by getting the latest astronomy image from NASA, showing the title, date, image/video, and explanation behind it. This means the content changes every day without needing to manually update the website.Development ProcessAt the start of the project, I researched how NASA’s APOD API worked and what information it provided. I planned the website around displaying the most important parts of the data, such as the image, title, and description.I first built the basic structure of the website using HTML. I created a simple layout where JavaScript could later add the NASA content. I also added custom fonts to give the website a more futuristic space theme.The main part of the project was connecting the website to NASA’s API using JavaScript. I created a system that sends a request to NASA, receives the information, and displays it on the page. I added a loading message so the user knows something is happening while the information is being collected.One challenge I faced was that NASA does not always provide the same type of content. Sometimes it returns an image, while other times it provides a video. I solved this by making the website check what type of media was provided and display it correctly.Design and StylingFor the design, I wanted the website to feel like it belonged in a space environment. I used a dark background with bright colours and futuristic fonts to create this effect.I added decorative side designs using CSS and made the layout responsive so it works on different screen sizes. On smaller devices, some decorative elements are hidden so that the main content remains easy to read.Problems and ImprovementsDuring development, I encountered problems when deploying the website. The page was loading as blank because some files were being linked incorrectly. After checking the errors and fixing the file paths, the website started working properly.I also improved the error handling so that if something goes wrong with the API request, the user sees a message instead of a blank page.ConclusionOverall, this project helped me understand how websites can interact with external services and update content automatically. I improved my confidence with JavaScript, API requests, and responsive design. The final website combines a useful feature with a creative design, creating an interactive way to explore NASA’s daily astronomy content.

0
0
2

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…