@dineshkarthik

💫 Devlog #3 – Bringing My Space Dashboard to LifeToday I transformed my APOD website from a simple demo into a polished space experience. 🚀 I designed a two-column layout with the NASA image/video on the left and the title, date, and explanation on the right for a clean, readable interface. ✨ To create a futuristic feel, I added a dark blue-purple space gradient and a glowing glassmorphism card that makes the APOD appear to float in space. 🌌 I also made the explanation panel scrollable so long NASA descriptions stay easy to read. 📖 To match the “Give Your Website a Pulse” theme, I built an animated CSS pulse bar with a glowing green ECG effect that adds subtle life to the page. 💚 Next, I’ll improve the user experience with better loading and error states before deploying the project on GitHub Pages. 🌍

📡 Devlog #2 – First Contact with the NASA APOD API 🚀🌌

Today was the day my website finally reached out to space! 🌍➡️🛰️ I replaced the default Vite page with a clean layout featuring a media section on the left and the APOD title, date, and explanation on the right. ✨ Using fetch() and my VITE_NASA_API_KEY, I connected to NASA’s Astronomy Picture of the Day API and displayed either a stunning 🖼️ image or an 🎥 video based on the response. I also added a 📅 date picker and a “Fetch APOD” button so I can travel back in time and explore older space discoveries, while limiting the maximum date to today to prevent invalid requests. Seeing real NASA content appear inside my own website for the first time felt like making first contact with the universe. 🌠💙 Next up: transforming it into a polished, futuristic space dashboard. 🚀

🚀 H1 – Giving My Website a PulseToday I launched my “Give Your Website a Pulse” project using Vite and confirmed it runs at localhost:5173. ⚡This local server lets me connect APIs without CORS issues. 🌐I got a free NASA APOD API key and stored it safely in a .env file. 🔑I also added .env to .gitignore to keep the key off GitHub. 🔒Even for a free API, I wanted to follow professional security practices. 💡Next, I’ll build a clean UI to display NASA’s daily title, date, image/video, and explanation. 🚀🌌

🚀 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.

#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!

#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. 🚀

“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.