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

Nasa Image of The Day Viewer

  • 3 Devlogs
  • 2 Total hours

i am building a website for Today's NASA APOD image.

Ship #1 Pending review

Built a NASA Astronomy Picture of the Day viewer — shows today’s picture automatically, plus a calendar sidebar to browse any past day this month.

Hardest part was probably the async stuff — had a bug where the old image would flash before the new one loaded, took a while to figure out it needed the image’s onload event to fix properly.

Pretty happy with how the UI turned out, went with a sci-fi/mission-control theme with glowing accents instead of a plain page. It’s responsive too, works fine on mobile.

Try clicking through a few different days on the calendar to see it in action!

  • 3 devlogs
  • 2h
Try project → See source code →
Open comments for this post

56m 53s logged

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

0
0
5
Open comments for this post

25m 57s logged

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.

0
0
23

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…