cosmo-tab
- 4 Devlogs
- 2 Total hours
“My own custom dashboard page for each new tab, with time/date, quick links, and maybe a space-themed background and todo list.”
Ship #1
I built CosmoTab, a custom new tab page with a big clock and greeting, Quick Access links with a “+” button, and a sticky‑note board, all saved in localStorage so they persist. The hardest parts were wiring the Quick Access modal so add/edit/delete stayed in sync with stored data, and making sticky notes behave like a mini app with done/edit/delete actions and a responsive grid layout. I’m proud that it feels like a real tool I’d actually use every day, with a clean left–right layout, personalized greeting, and animated pixel avatar instead of a plain static page. To test it, open the live demo, fill in your name and avatar, then add some quick links and notes—refresh the page and confirm everything (name, links, and notes) is still there and all the buttons still work.
1h 3m 4s logged
🚀 Final Devlog: CosmoTab (newtab-cosmo)🌟 ✨ Summary of Work Done:🌌 UI & Layout Design: Crafted a sleek, responsive space-themed layout with modern glassmorphism styling.✅ Core Features Integration: Built an interactive todo list for daily tasks and a quick-links grid for instant navigation.🛠️ Polishing & Cleanup: Cleaned the codebase, organized final repo files, added styling credits, and verified cross-browser performance.
33m 5s logged
#H1 Quick Links online! 🚀A new tab page is only as good as the speed it gives your workflow. Today, I added a pill-styled Quick Links bar to CosmoTab for instant access to my daily hubs: Stardance, GitHub, and Hackatime.Using Flexbox and dark slate capsule styling, the links sit front-and-center with a subtle hover-lift effect. Now, jumping into deep focus mode is just one clean click away!
16m 8s logged
#H1 **Building CosmoTab: Teaching my browser tab to talk to NASA ** ✨ What I Built & Why It’s CuteA Tab That Knows Me: I added a personal touch so it greets me by name (“Good morning, Karthik” or “Good night, Karthik” depending on the hour). It feels like having a tiny friend cheering me on when I’m coding late.Real Space Magic: Instead of a plain dark background, CosmoTab now hooks straight into NASA’s APOD (Astronomy Picture of the Day) API. Every time I open a tab, it quietly pulls a real, breathtaking photo from space and uses it as a softly blurred background, paired with NASA’s daily cosmic titles!Glassmorphism Vibes: I wrapped everything in a floating, frosted-glass card with clean gradients so it looks modern, calming, and easy on the eyes.It’s simple, it’s cozy, and it actually makes me excited to open a new tab and write some code. 🚀
18m 13s logged
“Added live Clock and Date for CosmoTab” Today I implemented a clock and date display for my CosmoTab new tab page. I added two divs with ids clock and date in index.html.In script.js, I wrote an updateClock() function that uses Date() to get the current time and formats it with toLocaleTimeString(). For the date, I use toLocaleDateString() with options to show the weekday, month, day, and year.I styled the clock and date in style.css so they stand out and use a readable font. Now when I open my new tab, I see the current time and date updating every second.Next, I plan to add a personalized greeting based on time of day and start designing the layout with a space-themed background.
