Devlog #3 — Calendar sidebar + full redesign
Added a calendar to browse past pictures, and gave the whole site a proper visual overhaul.
What’s new:
Sidebar calendar showing all days of the current month — click any day to load that day’s picture instead of today’sRefactored the fetch logic into a reusable loadAPOD(date) function so it works for both today and any clicked dayAdded a loading animation while new pictures fetch, and fixed a bug where the old image would briefly show before the new one finished loadingHighlighted the currently selected day on the calendarFull visual redesign — sci-fi/mission-control theme with a glowing grid background, monospace font, and cyan accent colors instead of the plain black-and-crimson lookMade the whole layout responsive so it works properly on mobile (calendar stacks below the image, grid adjusts to fewer columns)Moved JavaScript into its own script.js file for cleaner project structure
Bugs I ran into and fixed:
Infinite recursion from accidentally calling loadAPOD inside itselfImage not updating because the fetch was defined but never calledOld image flashing before the new one loaded — fixed using the image’s onload event
Devlog #2
Added CSS styling : Fonts , spacing , colors to NASA APOD viewer
NASA APOD Image Viewer
My first project for Stardance. It’s a simple web page that shows NASA’s Astronomy Picture of the Day — pulls the image and description live from NASA’s API, so it updates automatically every day.
I’m a total beginner, so I built this step by step: started with a hardcoded image just to get the layout, then learned how to fetch live data from an API and swap it in using JavaScript. Also learned to keep my API key private instead of exposing it in the public repo.