A responsive web app with a retro sci-fi themed UI which allows the user to browse a vast library of astronomy photos and videos, along with detailed descriptions of each image to provide context for the wonder. New content available every day. Powered by NASA.
Tech used: HTML, CSS, JavaScript
- The layout intelligently shrinks, grows, or rearranges itself depending on the size and orientation of the user's viewport.
- UI is styled after early-era computers inspired largely by the 1979 film Alien
- Select month, day, and year to view that date's NASA Astronomy Photo (or Video!) of the day.
- Leap years are accounted for! Go to a leap year, such as 2000, and note you can choose February 29th. Change the year, and the date shifts down to the 28th.
- Get into an astronomical mood as you enjoy ambient spacey music and sci-fi clicking sound effects and animations with each button press!
- Be very wary of using absolute-sizing units in a flexible layout.
- During this project I mastered a CSS technique for implementing flexible iframe-embedded media.
- On my first run-through, I wrote the CSS desktop-first, then went to use media queries to adjust it for mobile. This was a mistake. After spending some time failing to properly untangle my desktop layout to adapt it for mobiles, I scrapped ALL of the CSS and started fresh, coding it mobile first. Expanding the layout with mobile as the base was much less messy than the other way around!
Take a look at these other awesome projects from my portfolio:
Magic Task Timer https://github.com/ramblingadam/magic-task-timer
Animal Crossing: New Horizons Database: https://github.com/ramblingadam/acnh
X-Wing VS TIE Fighter: https://github.com/ramblingadam/tic-tac-starwars
