You are browsing as a guest. Sign up (or log in) to start making projects!

space-dashboard

  • 8 Devlogs
  • 16 Total hours

im gonna fetch all nasa's data mwahaha...

Ship #1 Changes requested

I made a customizable Space Dashboard using HTML, CSS, JavaScript and Vite. It uses NASA’s APOD API to show a new space background and also has a live customizable clock, Google search, quick shortcuts, random quotes, a draggable to-do list, custom space wallpapers and solid backgrounds. One of the most challenging parts was debugging the JavaScript, especially when a missing bracket broke both the clock and hamburger menu, and I also had some problems getting the Day/Night color toggle and wallpapers working correctly. I’m most proud of the custom Space Menu and how users can personalize the dashboard. When testing it, try changing the background, clock font and color, turning Day/Night mode on and off, and using the To-Do list and search.

Try project → See source code →
Open comments for this post

3h 59m 48s logged

Since the last devlog, I worked mainly on improving the customization and overall UI of the Space Dashboard.
I added a Background section to the side menu. Users can now switch back to the NASA Daily image, choose from five selected space wallpapers, or use solid-color backgrounds. The wallpapers also have small previews so users can see them before selecting one.
I also improved the clock customization. Users can now change the clock font using arrow buttons and choose between Digital Ops, Audiowide, Michroma, Bruno Ace, and Oxanium. I added a similar selector for clock colors, with options like White, Cyan, Blue, Purple, Solar, and Black.
I added a Day/Night toggle for the clock too. When it is turned on, the clock automatically changes its color depending on the time of day. When it is turned off, the user can select their own clock color.
I also improved the side menu so the clock font and color selectors open directly underneath their buttons instead of opening separate panels. This makes the menu simpler and keeps the main dashboard clean.
Another addition was the loading screen. When the website starts, it shows “Loading Space…” while the NASA Daily background is being fetched and loaded. Once the image is ready, the loading screen disappears. It also disappears if the NASA request fails so the website doesn’t get stuck.
There were several bugs while building these features. The biggest one was a misplaced } in the clock code, which caused the clock to stay at 00:00: 00 and stopped the hamburger menu from working. I also had issues with the Day/Night toggle not visually turning off, wallpaper paths, and manual clock colors being overwritten by the automatic colors. I debugged these issues and got everything working properly.
Overall, this update focused on making the Space Dashboard more customizable, cleaner, and easier to use.

0
0
6
Open comments for this post

3h 40m 57s logged

From last 2 days I was focusing on making the Space Dashboard more interactive and customizable.
Space Menu
I created a hamburger menu that opens a glass-style sidebar. This will act as the main control center for the dashboard, with options for the Quote of the Day, To-Do List, backgrounds, clock styles, and clock colors.
I connected the Quote of the Day option to the sidebar. Users can now toggle the quote ON or OFF, depending on whether they want a cleaner dashboard or some inspiration on screen.
I added a 4-task To-Do panel with a dark matte-glass design, background blur, rounded corners, and subtle transparency. I also made the panel draggable, so users can move it anywhere on their dashboard while still being able to type normally inside the task fields. and with that they can be on and off by clicking on to-do list button on sidebar

0
0
22
Open comments for this post

43m 53s logged

Today I worked on the search section of my Space Dashboard.
I added a Google search bar so users can quickly search the web directly from the dashboard. I also added four shortcut buttons for YouTube, Gmail, Stardance, and Hackatime.
I gave the search bar and shortcuts a glassmorphism/futuristic space design with transparent backgrounds, blur effects, and hover animations.

0
0
19
Open comments for this post

1h 5m 23s logged

add 5 different quotes each time randomly one from them will appear as it is appearing of top right if you think any changes feel free to give your changes

0
0
21
Open comments for this post

2h 2m 7s logged

Set today’s NASA Astronomy Picture of the Day as the full-page background, with a dark overlay to keep everything readable regardless of what image NASA posts. Added a large glowing digital clock overlay showing the live time, styled with a soft black to match the space theme

2
0
42
Open comments for this post

1h 48m 37s logged

🚀 Space Dashboard — Saving Notes with localStorageToday I worked on making the sticky notes in my Space Dashboard persistent.Before this, I could create NASA photo notes and drag them around, but whenever I refreshed the page, all the notes disappeared.💾 What I addedI implemented localStorage so the dashboard can remember the notes even after refreshing the page.For each note, I now save:📸 The NASA photo URL📍 The note’s position📝 The note’s shape/classI created a saveNotes() function that collects the information from every sticky note and stores it in the browser’s localStorage.I also added a restore system that runs when the page loads. It reads the saved notes, recreates them, restores their positions, and makes them draggable again.🖱️ Dragging + SavingI kept the existing drag system and connected it to the save function. Whenever I move a note, its new position is saved.This means I can:Add a NASA photo noteDrag it anywhereRefresh the pageGet the note back in the same position 🎯🧠 What I learnedThis part taught me more about:localStorageJSON.stringify()JSON.parse()datasetSaving JavaScript objectsRestoring DOM elements after a page reloadConnecting multiple features together✅ ResultThe Space Dashboard now remembers my NASA sticky notes instead of losing them every time the page refreshes.This makes the dashboard feel much more like a real usable application rather than just a temporary webpage.
lwk this time no ss TT

0
0
7
Open comments for this post

54m 32s logged

Fixed a real-world problem: NASA’s official Mars Rover Photos API was returning 404 errors on every request — confirmed it wasn’t my code by testing the exact documented URL directly, even with their public demo key. Pivoted to reusing the same NASA APOD endpoint I’d already gotten working, but requesting a random historical date instead of today — gives varied real space photos on each sticky note while staying reliable. Learned how to generate a random date between two points using Date.getTime() and Math.random().

0
0
24
Open comments for this post

1h 16m 8s logged

Wrote the core JavaScript for my Space Search project: a live fetch to NASA’s Astronomy Picture of the Day API. Learned how fetch() and .then() chains work — sending a request, converting the raw response with .json(), then using the data to build the page. Handled the case where NASA sometimes posts a video instead of an image (using an if statement and a media variable so I only set innerHTML once, instead of overwriting it multiple times). Added error handling with .catch() so the page shows a clear message instead of going blank if something fails. Toughest part was understanding why setting innerHTML multiple times wipes out previous content — had to actually see it break before it clicked.
Screenshot: the page showing today’s NASA title, image, and description.
Ik that it isn’t looking cool but trust the process buddies TT

0
0
15

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…