|
36377
|
my APOD site by @ShaheerNova | Stardance
|
ShaheerNova
|
0
|
4.0
|
0
|
[]
|
[{"post_id": 30321, "ts": "202 [{"post_id": 30321, "ts": "2026-07-17T19:39:43Z", "hours": 0.755, "text": "Interactive Background & UI Improvements Today I continued improving FocusHub’s user experience and visual design. ✨ Added Added a new Today’s Goal section. Added a Complete Goal button with success message. Added an Interactive Mouse Glow background that follows the cursor. Improved the overall dashboard layout. Enhanced glassmorphism styling. Improved spacing and visual consistency. Fixed several layout issues. Continued polishing the Pomodoro Pro interface. 🛠 Fixed Fixed Goal section alignment. Fixed misplaced button layout. Cleaned up the HTML structure. Improved CSS organization. FocusHub now feels much more modern and interactive. More premium UI effects and productivity features are planned for the next development session."}, {"post_id": 30283, "ts": "2026-07-17T18:42:28Z", "hours": 1.7728, "text": "UI Polish & Dashboard Improvements Today I focused on improving the overall quality, appearance, and functionality of FocusHub. Instead of adding random features, I spent time refining the existing dashboard to make it cleaner, more modern, and more user-friendly. ✅ What I completed Redesigned the dashboard with a modern glass morphism style. Improved the hero section and overall layout spacing. Enhanced the weather card with: Weather icon Feels Like temperature Humidity Wind speed Added a fully functional monthly calendar with previous/next month navigation and today’s date highlighting. Improved the Favorite Websites manager. Improved the Quick Notes section with automatic local storage saving. Refined the Pomodoro timer UI. Improved the responsive layout for desktop and mobile devices. Added animated background glow effects. Improved cards, shadows, borders, and hover animations. Added Lucide icons across the dashboard. Connected the OpenWeather API to display live weather information. Fixed multiple layout, spacing, and styling issues throughout the dashboard. 🚧 Next Steps The next milestone is Phase 1 – Pomodoro Pro, which will include: Focus Mode Short Break Long Break Session Counter Circular Progress Ring Sound Notifications Auto-switch between focus and breaks Daily productivity statistics FocusHub is gradually becoming a complete productivity dashboard rather than just a simple timer application."}, {"post_id": 30155, "ts": "2026-07-17T14:38:54Z", "hours": 0.3403, "text": "Polished the FocusHub Interface with Professional Icons and Visual Improvements Today I focused on improving the overall visual quality of FocusHub and making the dashboard feel more polished and consistent. I redesigned the top navigation area and improved the search bar styling to create a cleaner and more modern interface. I also refined the spacing, typography, card layout, hover states, shadows, and color balance across the dashboard. One of the biggest improvements in this session was replacing the old emoji-based labels with professional Lucide icons. Each main dashboard section now has a consistent icon for Weather, Calendar, Quick Notes, Pomodoro, Favorite Websites, and Daily Tasks. The dashboard currently includes a live clock, dynamic greeting, current date, Google search, light and dark mode, live weather data, an interactive calendar, persistent quick notes, a Pomodoro timer, favorite website shortcuts, and a daily task manager. The main goal of this session was not to add another large feature, but to improve the user experience and make the project look more complete, intentional, and professional. Next, I will continue refining the interface with smoother animations, improved responsive behavior, additional weather information, final testing, and deployment preparation."}, {"post_id": 30130, "ts": "2026-07-17T13:31:09Z", "hours": 0.3406, "text": "Added Interactive Calendar & Live Weather Integration This session focused on making FocusHub feel like a real productivity dashboard instead of just a static webpage. I built an interactive monthly calendar with previous and next month navigation. The calendar automatically highlights the current day and updates correctly when switching between months. I also integrated live weather data using the OpenWeather API. The dashboard now displays the current temperature, city name, and weather condition in real time, making the homepage more useful for everyday use. In addition, I configured environment variables to securely manage the API key and prepared the project structure for future API integrations. With the clock, Google search, theme switcher, quick notes, Pomodoro timer, favorite websites, daily tasks, calendar, and live weather now working together, FocusHub has become a solid foundation for a customizable productivity dashboard. Next, I will continue improving the interface with smoother animations, a more polished design, additional widgets, and overall user experience improvements before preparing the final deployment."}, {"post_id": 30119, "ts": "2026-07-17T13:07:39Z", "hours": 0.4383, "text": "Built the Core Productivity Features of FocusHub Today I made major progress on FocusHub and transformed the project from a basic dashboard layout into a functional productivity workspace. I completed the live clock and dynamic greeting system, which automatically updates the time, date, and message based on the current time of day. I also made the Google search bar functional so users can search directly from the dashboard. The dark and light theme switcher is now working and the selected theme is saved using localStorage, so the user’s preference remains active after refreshing the page. I also completed the Quick Notes feature. Notes are saved automatically in the browser, which means users do not lose their content when they reload the dashboard. The Pomodoro timer is now functional with Start, Pause, and Reset controls. This gives users a simple focus tool directly inside the dashboard. Another major feature completed in this session was the Favorite Websites section. Users can add their own website names and URLs, open them in a new tab, remove them, and keep them saved using localStorage. I also built the Daily Tasks system. Users can add tasks, mark them as complete, delete them, and keep the task list saved after refreshing the page. At this stage, FocusHub has a strong functional foundation. The next steps will focus on completing the interactive calendar, connecting the weather API, improving the visual design, adding icons and animations, and preparing the project for deployment."}, {"post_id": 30074, "ts": "2026-07-17T11:21:56Z", "hours": 0.3517, "text": "Today I officially started building FocusHub, a modern productivity dashboard designed to provide a clean, fast, and organized workspace for everyday use. The project was initialized using Vite with Vanilla JavaScript to create a lightweight and high-performance foundation. After setting up the development environment, I connected Hackatime to track development progress and cleaned the default Vite template to prepare the project for custom development. I then began building the first version of the interface by creating the main dashboard layout. The initial structure includes a navigation header with the FocusHub branding, a search bar, and a theme toggle button. I also added a personalized welcome section featuring a live digital clock and the current date to make the dashboard feel dynamic from the very beginning. To prepare for future functionality, I designed the core dashboard layout with dedicated sections for Weather, Calendar, Quick Notes, Pomodoro Timer, Favorite Websites, and Daily Tasks. These sections will gradually become fully interactive as development continues. The primary goal of this session was to establish a clean architecture, responsive layout, and scalable foundation before implementing advanced features such as weather integration, persistent notes using localStorage, productivity tools, theme switching, and other interactive components. This marks the beginning of the project, and the next development session will focus on transforming the static interface into a fully interactive productivity dashboard."}]...
|
Title: my APOD site by @ShaheerNova | Stardance
D Title: my APOD site by @ShaheerNova | Stardance
Devlogs:
Today I officially started building FocusHub, a modern productivity dashboard designed to provide a clean, fast, and organized workspace for everyday use. The project was initialized using Vite with Vanilla JavaScript to create a lightweight and high-performance foundation. After setting up the development environment, I connected Hackatime to track development progress and cleaned the default Vite template to prepare the project for custom development. I then began building the first version of the interface by creating the main dashboard layout. The initial structure includes a navigation header with the FocusHub branding, a search bar, and a theme toggle button. I also added a personalized welcome section featuring a live digital clock and the current date to make the dashboard feel dynamic from the very beginning. To prepare for future functionality, I designed the core dashboard layout with dedicated sections for Weather, Calendar, Quick Notes, Pomodoro Timer, Favorite Websites, and Daily Tasks. These sections will gradually become fully interactive as development continues. The primary goal of this session was to establish a clean architecture, responsive layout, and scalable foundation before implementing advanced features such as weather integration, persistent notes using localStorage, productivity tools, theme switching, and other interactive components. This marks the beginning of the project, and the next development session will focus on transforming the static interface into a fully interactive productivity dashboard.
Built the Core Productivity Features of FocusHub Today I made major progress on FocusHub and transformed the project from a basic dashboard layout into a functional productivity workspace. I completed the live clock and dynamic greeting system, which automatically updates the time, date, and message based on the current time of day. I also made the Google search bar functional so users can search directly from the dashboard. The dark and light theme switcher is now working and the selected theme is saved using localStorage, so the user’s preference remains active after refreshing the page. I also completed the Quick Notes feature. Notes are saved automatically in the browser, which means users do not lose their content when they reload the dashboard. The Pomodoro timer is now functional with Start, Pause, and Reset controls. This gives users a simple focus tool directly inside the dashboard. Another major feature completed in this session was the Favorite Websites section. Users can add their own website names and URLs, open them in a new tab, remove them, and keep them saved using localStorage. I also built the Daily Tasks system. Users can add tasks, mark them as complete, delete them, and keep the task list saved after refreshing the page. At this stage, FocusHub has a strong functional foundation. The next steps will focus on completing the interactive calendar, connecting the weather API, improving the visual design, adding icons and animations, and preparing the project for deployment.
Added Interactive Calendar & Live Weather Integration This session focused on making FocusHub feel like a real productivity dashboard instead of just a static webpage. I built an interactive monthly calendar with previous and next month navigation. The calendar automatically highlights the current day and updates correctly when switching between months. I also integrated live weather data using the OpenWeather API. The dashboard now displays the current temperature, city name, and weather condition in real time, making the homepage more useful for everyday use. In addition, I configured environment variables to securely manage the API key and prepared the project structure for future API integrations. With the clock, Google search, theme switcher, quick notes, Pomodoro timer, favorite websites, daily tasks, calendar, and live weather now working together, FocusHub has become a solid foundation for a customizable productivity dashboard. Next, I will continue improving the interface with smoother animations, a more polished design, additional widgets, and overall user experience improvements before preparing the final deployment.
Polished the FocusHub Interface with Professional Icons and Visual Improvements Today I focused on improving the overall visual quality of FocusHub and making the dashboard feel more polished and consistent. I redesigned the top navigation area and improved the search bar styling to create a cleaner and more modern interface. I also refined the spacing, typography, card layout, hover states, shadows, and color balance across the dashboard. One of the biggest improvements in this session was replacing the old emoji-based labels with professional Lucide icons. Each main dashboard section now has a consistent icon for Weather, Calendar, Quick Notes, Pomodoro, Favorite Websites, and Daily Tasks. The dashboard currently includes a live clock, dynamic greeting, current date, Google search, light and dark mode, live weather data, an interactive calendar, persistent quick notes, a Pomodoro timer, favorite website shortcuts, and a daily task manager. The main goal of this session was not to add another large feature, but to improve the user experience and make the project look more complete, intentional, and professional. Next, I will continue refining the interface with smoother animations, improved responsive behavior, additional weather information, final testing, and deployment preparation.
UI Polish & Dashboard Improvements Today I focused on improving the overall quality, appearance, and functionality of FocusHub. Instead of adding random features, I spent time refining the existing dashboard to make it cleaner, more modern, and more user-friendly. ✅ What I completed Redesigned the dashboard with a modern glass morphism style. Improved the hero section and overall layout spacing. Enhanced the weather card with: Weather icon Feels Like temperature Humidity Wind speed Added a fully functional monthly calendar with previous/next month navigation and today’s date highlighting. Improved the Favorite Websites manager. Improved the Quick Notes section with automatic local storage saving. Refined the Pomodoro timer UI. Improved the responsive layout for desktop and mobile devices. Added animated background glow effects. Improved cards, shadows, borders, and hover animations. Added Lucide icons across the dashboard. Connected the OpenWeather API to display live weather information. Fixed multiple layout, spacing, and styling issues throughout the dashboard. 🚧 Next Steps The next milestone is Phase 1 – Pomodoro Pro, which will include: Focus Mode Short Break Long Break Session Counter Circular Progress Ring Sound Notifications Auto-switch between focus and breaks Daily productivity statistics FocusHub is gradually becoming a complete productivity dashboard rather than just a simple timer application.
Interactive Background & UI Improvements Today I continued improving FocusHub’s user experience and visual design. ✨ Added Added a new Today’s Goal section. Added a Complete Goal button with success message. Added an Interactive Mouse Glow background that follows the cursor. Improved the overall dashboard layout. Enhanced glassmorphism styling. Improved spacing and visual consistency. Fixed several layout issues. Continued polishing the Pomodoro Pro interface. 🛠 Fixed Fixed Goal section alignment. Fixed misplaced button layout. Cleaned up the HTML structure. Improved CSS organization. FocusHub now feels much more modern and interactive. More premium UI effects and productivity features are planned for the next development session....
|
1793389985.0988078
|
1793994785.0988078
|
|
36960
|
my APOD site by @Seb69420 | Stardance
|
Seb69420
|
0
|
1.42
|
0
|
[]
|
[{"post_id": 30957, "ts": "202 [{"post_id": 30957, "ts": "2026-07-18T23:32:40Z", "hours": 1.4231, "text": "learning javascript and making a website, this took absolutely forever to set up."}]...
|
Title: my APOD site by @Seb69420 | Stardance
Devl Title: my APOD site by @Seb69420 | Stardance
Devlogs:
learning javascript and making a website, this took absolutely forever to set up....
|
1793512550.8484032
|
1794117350.8484032
|
|
71563
|
my APOD site by @Sasmitha_Kaushan | Stardance
|
Sasmitha_Kaushan
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Sasmitha_Kaushan | Stardan Title: my APOD site by @Sasmitha_Kaushan | Stardance...
|
1793083629.5062673
|
1793688429.5062673
|
|
63506
|
my APOD site by @SanthoshS | Stardance
|
SanthoshS
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @SanthoshS | Stardance
|
1793051506.8886135
|
1793656306.8886135
|
|
40987
|
my APOD site by @Sanana | Stardance
|
Sanana
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Sanana | Stardance
|
1793533981.6032164
|
1794138781.6032164
|
|
58578
|
my APOD site by @Saksham13 | Stardance
|
Saksham13
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Saksham13 | Stardance
|
1793501286.2412424
|
1794106086.2412424
|
|
58762
|
my APOD site by @Rewa | Stardance
|
Rewa
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Rewa | Stardance
|
1793512305.257467
|
1794117105.257467
|
|
35963
|
my APOD site by @Replay_260 | Stardance
|
Replay_260
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Replay_260 | Stardance
|
1793530389.5989861
|
1794135189.5989861
|
|
43004
|
my APOD site by @Rayna_gupta | Stardance
|
Rayna_gupta
|
1
|
2.0
|
0
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-08-09T11:14:17Z", "hours": 2.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "i made a website in which NASA’s present day and past days pictures with explanation can be accessed using API keys, and learn facts about the SPACE and SOLAR SYSTEM, get to know a little bout the solar system and some of our moons.", "repo": "https://github.com/messdinge/NASA.Pictureoftheday", "demo": "https://messdinge.github.io/NASA.Pictureoftheday/"}]...
|
[{"post_id": 43909, "ts": "202 [{"post_id": 43909, "ts": "2026-08-09T11:06:20Z", "hours": 1.8292, "text": "I’ve been working on my APOD site, which will provide you with basic space information, and provide you with NASA’s present and past day picture, here are the results:"}]...
|
Title: my APOD site by @Rayna_gupta | Stardance
D Title: my APOD site by @Rayna_gupta | Stardance
Devlogs:
I’ve been working on my APOD site, which will provide you with basic space information, and provide you with NASA’s present and past day picture, here are the results:
Ships:
i made a website in which NASA’s present day and past days pictures with explanation can be accessed using API keys, and learn facts about the SPACE and SOLAR SYSTEM, get to know a little bout the solar system and some of our moons....
|
1793325118.728793
|
1793411518.728793
|
|
31747
|
my APOD site by @RTicked | Stardance
|
RTicked
|
1
|
3.0
|
0
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-08-27T00:03:51Z", "hours": 3.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "This is my first API project and it works really cool.", "repo": "https://github.com/rticked/websitepulse", "demo": "https://rticked.github.io/websitepulse/"}]...
|
[{"post_id": 50121, "ts": "202 [{"post_id": 50121, "ts": "2026-08-19T06:24:48Z", "hours": 2.7039, "text": "It finally works! It took years to make this thing work."}]...
|
Title: my APOD site by @RTicked | Stardance
Devlo Title: my APOD site by @RTicked | Stardance
Devlogs:
It finally works! It took years to make this thing work.
Ships:
This is my first API project and it works really cool....
|
1793310833.7267668
|
1793397233.7267668
|
|
29713
|
my APOD site by @ROBIN_ | Stardance
|
ROBIN_
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @ROBIN_ | Stardance
|
1793408071.2008455
|
1794012871.2008455
|
|
51280
|
my APOD site by @Quan | Stardance
|
Quan
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Quan | Stardance
|
1793382982.7214553
|
1793987782.7214553
|
|
56422
|
my APOD site by @Purice7171 | Stardance
|
Purice7171
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Purice7171 | Stardance
|
1793382704.2469108
|
1793987504.2469108
|
|
39618
|
my APOD site by @Preyas_21 | Stardance
|
Preyas_21
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Preyas_21 | Stardance
|
1792896749.1140409
|
1793760749.1140409
|
|
30342
|
my APOD site by @Phonemi | Stardance
|
Phonemi
|
1
|
3.0
|
0
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-07-21T20:32:05Z", "hours": 3.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "My minimalistic Apod[+_+] I made a fuly functinal Apod whitch is very minimalistic and made in my style it is black and white and if you hover over the picture you can see the description of it you can like thinks download it and get yourselph a random date(another kind of date you are a nerd dont put up your hopes) hope you like it", "repo": "https://github.com/Phonokles/Apod", "demo": "https://apod-ajst.vercel.app/"}]...
|
[{"post_id": 31815, "ts": "202 [{"post_id": 31815, "ts": "2026-07-20T14:35:10Z", "hours": 1.1803, "text": "added buttons on footer[+_+] so in this update i made buttons: random:(opens a random date) like:(likes a date and saves it) showlikes:(showes all the likes yu have) download:(you can download the png the description or both) if you are wondering why i only needed 38 min most of the time while i coded it i had no wifi so it didnt get all the time hope you like it[-_-]"}, {"post_id": 31378, "ts": "2026-07-19T18:20:47Z", "hours": 1.2714, "text": "Description and calander added[+_+] now you can chose your date and there is a description (all HTML/JS/CSS) hope you like it [-_-]"}, {"post_id": 31139, "ts": "2026-07-19T09:44:57Z", "hours": 0.6867, "text": "I built the basic framework [+_+] First, I created the folder structure and set everything up with npm and Vite. Then I built a basic framework that fetches and renders the NASA image using HTML, CSS, and JS. For colors, I mainly used near-black (#0f0f0f) with white glows and 1-2px borders. I also got my API key working it stays local in a .env file and is kept off GitHub via .gitignore. hope you like it [-_-]"}]...
|
Title: my APOD site by @Phonemi | Stardance
Devlo Title: my APOD site by @Phonemi | Stardance
Devlogs:
I built the basic framework [+_+] First, I created the folder structure and set everything up with npm and Vite. Then I built a basic framework that fetches and renders the NASA image using HTML, CSS, and JS. For colors, I mainly used near-black (#0f0f0f) with white glows and 1-2px borders. I also got my API key working it stays local in a .env file and is kept off GitHub via .gitignore. hope you like it [-_-]
Description and calander added[+_+] now you can chose your date and there is a description (all HTML/JS/CSS) hope you like it [-_-]
added buttons on footer[+_+] so in this update i made buttons: random:(opens a random date) like:(likes a date and saves it) showlikes:(showes all the likes yu have) download:(you can download the png the description or both) if you are wondering why i only needed 38 min most of the time while i coded it i had no wifi so it didnt get all the time hope you like it[-_-]
Ships:
My minimalistic Apod[+_+] I made a fuly functinal Apod whitch is very minimalistic and made in my style it is black and white and if you hover over the picture you can see the description of it you can like thinks download it and get yourselph a random date(another kind of date you are a nerd dont put up your hopes) hope you like it...
|
1792878768.1569042
|
1793742768.1569042
|
|
40167
|
my APOD site by @Phillip | Stardance
|
Phillip
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Phillip | Stardance
|
1793476204.9369543
|
1794081004.9369543
|
|
33703
|
my APOD site by @Pery | Stardance
|
Pery
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Pery | Stardance
|
1792950771.4046822
|
1793814771.4046822
|
|
33496
|
my APOD site by @Perfect_Sibanda | Stardance
|
Perfect_Sibanda
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Perfect_Sibanda | Stardanc Title: my APOD site by @Perfect_Sibanda | Stardance...
|
1793433124.6605146
|
1794037924.6605146
|
|
33694
|
my APOD site by @Percy_Black | Stardance
|
Percy_Black
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Percy_Black | Stardance
|
1793335681.6338012
|
1793940481.6338012
|
|
69442
|
my APOD site by @Paradise_fruits | Stardance
|
Paradise_fruits
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Paradise_fruits | Stardanc Title: my APOD site by @Paradise_fruits | Stardance...
|
1792839011.5378575
|
1793443811.5378575
|
|
68579
|
my APOD site by @P4N | Stardance
|
P4N
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @P4N | Stardance
|
1793123419.6622841
|
1793728219.6622841
|
|
34004
|
my APOD site by @Ommprakash | Stardance
|
Ommprakash
|
1
|
3.0
|
0
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-08-10T15:01:26Z", "hours": 3.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "I made my very own APOD site, using the manual “Give a pulse to youre website”. The most challenging part was to setup the vite, and npm server. And as it is my first deployed website, sometimes it gets stuck.", "repo": "https://github.com/ommprakash3102-dev/Nasa_APOD-project-website.", "demo": "https://nasa-apod-project-website.vercel.app/"}]...
|
[{"post_id": 31542, "ts": "202 [{"post_id": 31542, "ts": "2026-07-20T01:10:19Z", "hours": 2.4719, "text": "Queued the final project’s files in GitHub, and My Code timeshows arround 3hrs beacuse I didn’t know about Hackatime until one star recommended me."}, {"post_id": 30663, "ts": "2026-07-18T12:47:53Z", "hours": 0.5258, "text": "APOD site, This is my first time using real API. Previosly I only used dummy API’s just to practice"}]...
|
Title: my APOD site by @Ommprakash | Stardance
De Title: my APOD site by @Ommprakash | Stardance
Devlogs:
APOD site, This is my first time using real API. Previosly I only used dummy API’s just to practice
Queued the final project’s files in GitHub, and My Code timeshows arround 3hrs beacuse I didn’t know about Hackatime until one star recommended me.
Ships:
I made my very own APOD site, using the manual “Give a pulse to youre website”. The most challenging part was to setup the vite, and npm server. And as it is my first deployed website, sometimes it gets stuck....
|
1793508951.6294963
|
1793595351.6294963
|
|
29273
|
my APOD site by @Nikhilsahu | Stardance
|
Nikhilsahu
|
1
|
2.0
|
0
|
[{"ship_num": 1, "hours": 2.0, [{"ship_num": 1, "hours": 2.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "A NASA Astronomy Picture of the Day viewer. Plain HTML/CSS/JS. Features a date picker to browse history, random button, image lightbox, favorites saved locally, and an animated starfield background. Managing the UI states such as skeleton, error, content and image loading without using any kind of frameworks. Done that with only one function called showState() in order not to make the logic messy. The favorites pane (with slides in, localStorage) and the lightbox functionality. The lightbox makes the web app look more like an application rather than a tutorial assignment. You will have to run the project using a local server (VS Code Live Server, for example), since browsers block all the API requests in file:// protocol. Also you need to add the free NASA API key into script.js.", "repo": "https://github.com/Nikhil20222/nasa-apod", "demo": "https://nasa-apod-nine.vercel.app/", "ts": "2026-07-01T21:04:02Z"}]...
|
[{"post_id": 19936, "ts": "202 [{"post_id": 19936, "ts": "2026-07-01T11:43:35Z", "hours": 0.0, "text": "Starting the NASA APOD project Just set up the basic foundation — three files (HTML, CSS, JS) that fetch today’s Astronomy Picture of the Day from NASA’s public API and display the title, image, and explanation. No frameworks, no build tools. Plain HTML/CSS/JS with a local server to make the API call work. The dark theme is just a simple #0a0a1a background for now. Nothing styled beyond basic readability. Next: I want to add some real interactivity – thinking about a date picker to browse past entries, and maybe a loading state so it doesn’t just say “Loading…” in plain text while fetching. Tech used so far: HTML, CSS, Vanilla JS, Fetch API, NASA APOD API"}, {"post_id": 19950, "ts": "2026-07-01T12:21:01Z", "hours": 0.0, "text": "Loading skeletons and error handling Instead of just “Loading…”, I implemented a shimmer skeleton effect for the page — gray blocks with the same layout as title, image, and text. This is done using CSS tricks like background-size: 200% and an animation via @keyframes sliding the gradient back and forth. Added an error state as well. Previously, if there was an issue with the API, nothing visually happened. But now, there is an error message with “Try Again” button appearing if something went wrong. The main concept of this is that there is one function responsible for showing/hiding skeleton, error, and content. This has been tested by switching off WiFi — error state occurs, and upon pressing “Retry”, a new fetch request is made. Next: Planning to add a date picker so users can browse past APOD entries, and a high-res image link since NASA provides both regular and HD URLs."}, {"post_id": 20285, "ts": "2026-07-01T20:46:40Z", "hours": 0.0, "text": "Time travel and HD images Date Picker was added for easy browsing through any APOD from June 16, 1995 (the very first one). The date picker is bounded with min and max attributes to prevent selection of future dates or dates before APOD even existed. There is also “Today” button to reset the date. The most difficult task was dealing with date formatting. The API requires dates in YYYY-MM-DD format, while getMonth() function returns zero indexed value and getDate() does not add padding. Therefore, the formatDate() function was created to deal with both situations — this mistake is pretty typical for beginners. There is also a “View Full Resolution” button which allows to see an image in high resolution. NASA provides URLs for both regular and high-resolution photos/videos. This button only applies for images, not for videos (some APODs are YouTube videos). Finally, toLocaleDateString was used to show the date in readable format like “Monday, January 6, 2025”. Next up: Random APOD button and smooth fade transitions when content changes."}]...
|
Title: my APOD site by @Nikhilsahu | Stardance
De Title: my APOD site by @Nikhilsahu | Stardance
Devlogs:
Time travel and HD images Date Picker was added for easy browsing through any APOD from June 16, 1995 (the very first one). The date picker is bounded with min and max attributes to prevent selection of future dates or dates before APOD even existed. There is also “Today” button to reset the date. The most difficult task was dealing with date formatting. The API requires dates in YYYY-MM-DD format, while getMonth() function returns zero indexed value and getDate() does not add padding. Therefore, the formatDate() function was created to deal with both situations — this mistake is pretty typical for beginners. There is also a “View Full Resolution” button which allows to see an image in high resolution. NASA provides URLs for both regular and high-resolution photos/videos. This button only applies for images, not for videos (some APODs are YouTube videos). Finally, toLocaleDateString was used to show the date in readable format like “Monday, January 6, 2025”. Next up: Random APOD button and smooth fade transitions when content changes.
Loading skeletons and error handling Instead of just “Loading…”, I implemented a shimmer skeleton effect for the page — gray blocks with the same layout as title, image, and text. This is done using CSS tricks like background-size: 200% and an animation via @keyframes sliding the gradient back and forth. Added an error state as well. Previously, if there was an issue with the API, nothing visually happened. But now, there is an error message with “Try Again” button appearing if something went wrong. The main concept of this is that there is one function responsible for showing/hiding skeleton, error, and content. This has been tested by switching off WiFi — error state occurs, and upon pressing “Retry”, a new fetch request is made. Next: Planning to add a date picker so users can browse past APOD entries, and a high-res image link since NASA provides both regular and HD URLs.
Starting the NASA APOD project Just set up the basic foundation — three files (HTML, CSS, JS) that fetch today’s Astronomy Picture of the Day from NASA’s public API and display the title, image, and explanation. No frameworks, no build tools. Plain HTML/CSS/JS with a local server to make the API call work. The dark theme is just a simple #0a0a1a background for now. Nothing styled beyond basic readability. Next: I want to add some real interactivity – thinking about a date picker to browse past entries, and maybe a loading state so it doesn’t just say “Loading…” in plain text while fetching. Tech used so far: HTML, CSS, Vanilla JS, Fetch API, NASA APOD API
Ships:
A NASA Astronomy Picture of the Day viewer. Plain HTML/CSS/JS. Features a date picker to browse history, random button, image lightbox, favorites saved locally, and an animated starfield background. Managing the UI states such as skeleton, error, content and image loading without using any kind of frameworks. Done that with only one function called showState() in order not to make the logic messy. The favorites pane (with slides in, localStorage) and the lightbox functionality. The lightbox makes the web app look more like an application rather than a tutorial assignment. You will have to run the project using a local server (VS Code Live Server, for example), since browsers block all the API requests in file:// protocol. Also you need to add the free NASA API key into script.js....
|
1792878835.543593
|
1793742835.543593
|
|
69390
|
my APOD site by @Nebulous | Stardance
|
Nebulous
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Nebulous | Stardance
|
1792810365.164172
|
1793674365.164172
|
|
54664
|
my APOD site by @NaveenGopal | Stardance
|
NaveenGopal
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @NaveenGopal | Stardance
|
1792799489.6485567
|
1793404289.6485567
|
|
40251
|
my APOD site by @Muxiddinova_Dilafruz | Stardance
|
Muxiddinova_Dilafruz
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Muxiddinova_Dilafruz | Sta Title: my APOD site by @Muxiddinova_Dilafruz | Stardance...
|
1793523074.6970444
|
1794127874.6970444
|
|
48436
|
my APOD site by @Musab | Stardance
|
Musab
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Musab | Stardance
|
1793228143.232155
|
1793832943.232155
|
|
46974
|
my APOD site by @Mubina_Rakhmatova | Stardance
|
Mubina_Rakhmatova
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Mubina_Rakhmatova | Starda Title: my APOD site by @Mubina_Rakhmatova | Stardance...
|
1793163016.8735316
|
1793767816.8735316
|
|
46335
|
my APOD site by @MrRessa | Stardance
|
MrRessa
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @MrRessa | Stardance
|
1793379222.4901447
|
1793984022.4901447
|
|
35509
|
my APOD site by @MohdSadiqUmar | Stardance
|
MohdSadiqUmar
|
1
|
2.0
|
0
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-07-21T08:55:24Z", "hours": 2.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "This is the simplest version of the Astronomy Picture of the Day Web Page. It comes with a simple yet cute design. That’s all there is to know.", "repo": "https://github.com/Zyrox-exe/APOD-nasa", "demo": "https://zyrox-exe.github.io/APOD-nasa/"}]...
|
[{"post_id": 32239, "ts": "202 [{"post_id": 32239, "ts": "2026-07-21T08:53:16Z", "hours": 1.1356, "text": "Improved styles by a lot and added date. I will just probably ship it like that"}, {"post_id": 31811, "ts": "2026-07-20T14:31:56Z", "hours": 1.32, "text": "Today I finished the basic page and will add some small features or updates tomorrow to make it better than some other basic ones. Nothing was too scary and it was very quick and easy to implement. I added my own styles as I think it looks better than the original(I love this cute theme). Looking forward to tomorrow."}]...
|
Title: my APOD site by @MohdSadiqUmar | Stardance
Title: my APOD site by @MohdSadiqUmar | Stardance
Devlogs:
Today I finished the basic page and will add some small features or updates tomorrow to make it better than some other basic ones. Nothing was too scary and it was very quick and easy to implement. I added my own styles as I think it looks better than the original(I love this cute theme). Looking forward to tomorrow.
Improved styles by a lot and added date. I will just probably ship it like that
Ships:
This is the simplest version of the Astronomy Picture of the Day Web Page. It comes with a simple yet cute design. That’s all there is to know....
|
1793433109.548287
|
1793519509.548287
|
|
28292
|
my APOD site by @Mayzam | Stardance
|
Mayzam
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Mayzam | Stardance
|
1793231727.658501
|
1793836527.658501
|
|
30954
|
my APOD site by @Mauve | Stardance
|
Mauve
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Mauve | Stardance
|
1793526937.3853555
|
1794131737.3853555
|
|
30955
|
my APOD site by @Mauve | Stardance
|
Mauve
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Mauve | Stardance
|
1793144912.8851533
|
1793749712.8851533
|
|
36631
|
my APOD site by @Mateus-M15 | Stardance
|
Mateus-M15
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Mateus-M15 | Stardance
|
1792943426.747465
|
1793807426.747465
|
|
39386
|
my APOD site by @Mariya | Stardance
|
Mariya
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Mariya | Stardance
|
1793134305.1024506
|
1793739105.1024506
|
|
36736
|
my APOD site by @MarishaRahman | Stardance
|
MarishaRahman
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @MarishaRahman | Stardance
|
1793256608.742889
|
1793861408.742889
|
|
54146
|
my APOD site by @MananSingla | Stardance
|
MananSingla
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @MananSingla | Stardance
|
1793523140.1022751
|
1794127940.1022751
|
|
69145
|
my APOD site by @Maitreyan | Stardance
|
Maitreyan
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Maitreyan | Stardance
|
1793130632.222186
|
1793735432.222186
|
|
44574
|
my APOD site by @Mahan | Stardance
|
Mahan
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Mahan | Stardance
|
1793282059.5891163
|
1793886859.5891163
|
|
37977
|
my APOD site by @MAyaanBaig2013 | Stardance
|
MAyaanBaig2013
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @MAyaanBaig2013 | Stardance
|
1792940034.0594828
|
1793804034.0594828
|
|
36410
|
my APOD site by @Lim | Stardance
|
Lim
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Lim | Stardance
|
1793371708.7689784
|
1793976508.7689784
|
|
34206
|
my APOD site by @Liam303 | Stardance
|
Liam303
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Liam303 | Stardance
|
1792914778.2604098
|
1793778778.2604098
|
|
37393
|
my APOD site by @LM | Stardance
|
LM
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @LM | Stardance
|
1793242161.852969
|
1793846961.852969
|
|
37394
|
my APOD site by @LM | Stardance
|
LM
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @LM | Stardance
|
1793386263.6764963
|
1793991063.6764963
|
|
66197
|
my APOD site by @KashikaSonone | Stardance
|
KashikaSonone
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @KashikaSonone | Stardance
|
1793094835.7091265
|
1793699635.7091265
|
|
28546
|
my APOD site by @Kaorii | Stardance
|
Kaorii
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Kaorii | Stardance
|
1792914767.4372683
|
1793778767.4372683
|
|
30428
|
my APOD site by @Justin-F | Stardance
|
Justin-F
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Justin-F | Stardance
|
1793235104.9749858
|
1793839904.9749858
|
|
39405
|
my APOD site by @Joudyy | Stardance
|
Joudyy
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Joudyy | Stardance
|
1793296405.1594656
|
1793901205.1594656
|
|
35316
|
my APOD site by @Jordantianlu | Stardance
|
Jordantianlu
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Jordantianlu | Stardance
|
1793155653.3797626
|
1793760453.3797626
|
|
29986
|
my APOD site by @Johan_swe | Stardance
|
Johan_swe
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Johan_swe | Stardance
|
1793530109.8676057
|
1794134909.8676057
|