.png)
COSMIC LENS!
By
@vashi_21
- 6 Devlogs
- 4 Total hours
im gonna fetch all nasa's data mwahaha...
Ship #1
Pending review
I built Cosmic Lens, a custom space picture viewer using vanilla JavaScript and VITE that fetches data directly from NASA’s Astronomy Picture of the Day (APOD) API. The most challenging part was managing dynamic API fetching, handling edge cases like YouTube video embeds versus regular image renders, and resolving scope bugs with the date selector variable. I’m most proud of designing the space-themed UI with custom CSS stars and smooth interactive controls. To test it, open the live link and select any past date from the date picker to load that day’s official NASA space photo with explanation! If you can’t think of a date , use the random button and have fun !!!
.png)
39m 27s logged
Cosmic Lens is LIVE!
And… we’re done! 🚀
Today I gave Cosmic Lens its final touches, cleaned up the project, added the README, pushed everything to GitHub, and made sure the live deployment was working properly.
The best part? The site is actually LIVE now!
I also tested the date picker and Random NASA Image feature one last time, and everything is working as it should.
From debugging API issues to fighting with Git and deployment 😭, this project definitely had its moments — but seeing it running online makes it all worth it.
🔗 Live: https://wizard21-sudo.github.io/cosmic-lens/ I’m officially calling it SHIPPED! 🚀
Keep looking up. 🌠
.png)
1h 14m 41s logged
Redesigned the UI with twinkling CSS stars and neon space elements. Formatted theme colors and input controls to match the cosmic dark look. Fixed index.html font imports and CSS pathing for VITE compatibility. Added DEMO-KEY fallback for live NASA APOD fetches on GitHub Pages. This alone took almost 1 hours and the basic site isn’t even working properly, still got a long way to go . P.S can’t find the emojis so upside down smiley face at the end.
.png)
35m 3s logged
Today built a responsive dark-mode layout with smooth flexbox centering. Added custom zig-zag side borders using CSS pseudo-elements. Styled typography using Google Fonts ( Oswald and Black Ops One ). Used @media queries to hide side accents on mobile screens. Although having fun, the progress is so slow .
.png)
35m 23s logged
Today, I fetched live space data using custom API requests for my NASA APOD web. I also built smart media logic that automatically detects images YouTube embeds, or video players. To keep the app smooth and reliable, I added safe loading states and a catch-block for error handling. I debugged JavaScript syntax issues as well. Finally, I completed almost all the steps of the guide and I am satisfied by my progress. <3
.png)
23m 1s logged
Finished setting up environment variables for NASA API and secured sensitive keys using GitHub secrets. Also resolved a GitHub Actions build failure caused by placing my directory under the wrong folder. Also fixed a syntax error in vite.config.js . Learned so much by fixing my mistakes. Finally published the app to GitHub pages!!!
.png)
19m 54s logged
Started new project. Just finished linking my repository to VS JavaScript and CSS. <3
.png)