my APOD site
- 2 Devlogs
- 3 Total hours
im gonna fetch all nasa's data mwahaha...
im gonna fetch all nasa's data mwahaha...
fixed some css bugs and some structural bugs
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.