@shubworks

In the hydration tracker widget the previous error was showing a line of code inside the hydration tracker widget so I thought it was a html code error so I tried writing it properly and now instead of the tracker getting an error my dock system went to the tracker to ask him how he is (╥ ᴗ ╥) , guess what the problem was i actually didnt close the ‘<‘div id=“widgets”> using </div’>’ (about the
apostrophe on div that you are thinking is also a problem , its not becuase in devlog it wont allow me to write the function properly thats why i wrote it in
apostrophe )
Because HTML is hierarchical, the browser interprets that as:
#widgets
├── todo widget
├── notes widget
├── hydration widget
└── #dock ← OOPS, dock is now inside widgets
Another problem is that the hydration widget is still not working the buttons are not working and it was because function saveHydrationState(State){ lsSet(‘nebula_hydration’,JSON.stringify(state));}The savehydrationstate has S as capital instead of small and because of that it wasnt working and and about the feature you can even drink more than 8 cups and another feature is that the widget resets for every day

lmao , tried adding another widget which was hydration tracker widget and tried implementing it and i got a crazy error haha my hydration tracker is showing code instead of tracker and also all the widgets size changed bymistake

added a Todo task widget , main problem came in when writing code inside the DOMContentLoaded listener it was not taking code because of errors like not proper closing of the code and also while writing code in CSS like messing up with the alignment(format) and other and one time the todo task didnt even take any input ,it was because of a syntax error but it was solved

1. I changed the original boot screen into a proper login screen because I wanted Nebula OS to feel more like an actual desktop environment when someone first opens it. The new screen has the date, a sign-in button, a quote, and a small build label before entering the desktop.

2. I changed the topbar from a solid background to a translucent glass-style design. This makes it blend more naturally with the wallpaper instead of looking like a separate bar placed on top of the desktop.

3. I also changed the dock to match the translucent style of the topbar. The desktop previously used a plain color as its background, so I added a default wallpaper image instead. This gives new users something more visually interesting when they first open Nebula OS, while still letting them replace the wallpaper with their own image.

fixed few errors like the animation of the wormhole was working the first time but if user tries to use it again it was not working as expected so fixed it and also fixed few typo errors

There were so many errors like the animation was getting stuck , the reboot feature not working inside the terminal it just stays stuck , booting animation was getting stuck because of some mismatch between the codes in the files , the layout of the custom timer in pomodoro app was not right i corrected it and then there was problem in the paint app it was not allowing any other color to be used then there was problem with the confirm window buttons for singularity effect it was not working/clickable. somehow i managed to solve them and make them work and finally my project is done after so many typo fixes , debugs and code lines missing.

things i fixed

1. Boot screen was not showing boot status like those  ‘Establishing reality anchors…’,    ‘Calibrating wormhole trajectory…’,    ‘Loading Explorer profile…’,    ‘Reality Integrity: 100%’,
   Because i forgot to write boot status css code though i managed to write it and now its working

2. Windows functions buttons are not working like close , maximize ,  minimize buttons it was because i wrote a code of line as “.window-activer{z-index:600; box-shadow:8px 8px 0 var(–black);}”Instead of “.window.active{z-index:600; box-shadow:8px 8px 0 var(–black);}”Still the button maximize one is still not working and there are more errors like Paint app not showing any page to draw , focus timer not having any windows function buttons and the game app is working abnormal like if i click on the maximize button the screen of the game keeps getting smaller and smaller Now about the fixing of the window button i couldnt solve the problem because i was trying to solve it but it was again and again getting wrong so i asked chatgpt for help and it pointed out the problem and i got the solution and then i understand it  and it also suggested me something like my code allows a app to get into maximum size also hiding the dock of the desktop so it told me to solve that also so the desktop will look better. I somehow fixed it using chatgpt help the problem and its solution was creating more problems so somehow i was able to solve it now i also noticed that the app labels are not proper and again it was because i didnt write those css codes for it. And you can also see that the the paint app icon is coming half and paint app is not showing the visible drawing white page and though i fixed the icon problem with help of chatgpt but about the drawing page not showing up guess what was the error !! , it was just a spelling mistake i wrote defualt instead of default in html code and because of that it was not taking the height of the page and i was here messing with the css and Js codes thinking i missed lines or something 

and i mostly rewrote the whole css code trying to get everything done in minimal amount of code and somehow i made it possible and also took help from ai for solving various problems

Did few fixes the wormhole feature was completely reloading the browser making all thr progress go away so i asked ai for help and it suggested me to use a fake reboot system for wormhole and it will also keep the progress of the webos saved so now the wormhole uses fake reboot system to perform its task or like what its meant to do , another fix i also did was that the after removing the background i set the background as black so i changed it into something beige color type which kinda looks good compared to black background , users can also changed the background/wallpaper and put their desired ones and also removed dead codes and things from the code

Fixed the CSS issue from earlier. Splitting the main CSS file into smaller chunks and linking those to the HTML was causing errors, likely from a code mistake somewhere in the process. Instead of chasing that down, I merged everything back into one CSS file, which connected cleanly and got the webOS working again. Also changed a few colors — like the boot screen and a couple other elements — into violet.

1. Added a Pomodoro Timer that uses a default 25-minute focus timer with breaks, and also added a custom timer option for focus and break sessions.

2. Removed the previous desktop background, which had rings, ripples, animations, and other effects, and replaced it with a simple wallpaper. Also added a wallpaper-replace feature so users can set their own wallpaper on the OS.

3. Removed the two widgets — Nebula Broadcast and Reality Monitor. They were good at first but didn’t give that “proper feeling” of actually using them, and got boring over time, so I replaced both with a simple Quick Notes widget.

4. Tried reworking the CSS files to reduce the number of lines and make things more minimal. My idea was to split all the sections of the webOS from one big CSS file into smaller files, but along the way I missed some code or had syntax errors. After fixing those, I got the CSS split into small chunks, but connecting them properly to the HTML became a problem — in the end, when I ran the webOS, no UI or CSS was applying at all, which left the whole thing broken.

The Stardance reviewers shared feedback on the project and highlighted a few areas that could be improved. So i think i am going to try to rework on my project and fix those areas they highlighted and maybe try to improve my project also

This was probably the biggest update I’ve made to the project so far.I ended up rebuilding almost the entire operating system. The older version worked, but after using it for a while it felt more like a collection of space-themed apps than a real desktop. The glassmorphism style looked nice, but it didn’t have much personality or consistency.So I decided to redesign everything from scratch around a neo-brutalist style and renamed the project Nebula.The biggest goal wasn’t just changing colors or making a prettier UI. I wanted the whole OS to feel like it belonged to one universe.I also built an Explorer system that rewards curiosity while using Nebula. Hidden discoveries, explorer ranks, and little easter eggs are now spread throughout the OS. Instead of throwing achievements at the user, the desktop quietly encourages exploration, which makes finding them much more satisfying.The desktop itself changed a lot too. I replaced the empty static background with subtle ambient effects and layered elements that make the workspace feel more alive without distracting from the apps. Small interactions like notifications, broadcasts, and system telemetry now react to what you’re actually doing instead of showing random placeholder information.A huge amount of time also went into polishing everything behind the scenes. I fixed duplicated event listeners, notification spam, calculator edge cases, wormhole state issues, persistence bugs, and cleaned up dead code that had built up while experimenting with different ideas.One feature I was excited about was the wormhole sequence. It started as a fun visual effect, but I kept expanding it until it became part of Nebula’s identity and tied into the system’s discoveries and world building.Looking back at the first version of MyOS compared to Nebula now, it almost feels like two completely different projects. The old one was mainly focused on the space aesthetic, while this version is focused on creating a complete operating system with its own personality, interactions, and world.At this point I’m mostly polishing the experience instead of adding new features. Nebula finally feels like a complete product rather than just another web desktop.

Also i added few new apps like Paint , Snake Game , Notes. and redesigned the old apps like the Terminal , Music player , Calculator.

I also added a Wormhole feature that pulls the entire desktop into a black hole before restarting the system. It started as a fun visual effect but ended up becoming one of Nebula’s signature interactions.

Started with an ambitious orbital ring calculator idea where numbers spin around a glowing sun in the center. Looked cool in theory, but in practice it was a mess — the spinning made me dizzy, numbers were scattered everywhere instead of in order, and clicking buttons felt like a game of whack-a-mole. Tried fixing it a few times but it just wasn’t working.

So I scrapped the whole ring concept and went back to a normal calculator layout, but kept the space vibe with glowing planet buttons and a holographic display. Way more usable. The equals and clear buttons weren’t responding at first because the code wasn’t picking them up properly. Once that was sorted, everything clicked into place. Now it actually works like a real calculator — shows the full equation, smooth animations, and doesn’t spin around like a broken merry-go-round.

finally solved all the errors and replaced the generic falling starfield with a premium interactive solar system centerpiece. The canvas now renders a living solar system with 8 planets in their approximate real colors — Mercury through Neptune — each with subtle float animations and glow effects. Hovering any planet reveals its name. The starfield was redesigned to work around the solar system rather than compete with it. Took help from AI in imagining and designing the visual layout, planet styling, and interaction patterns. The solar system now serves as the desktop’s identity piece instead of random background noise.

messed up , i was thinking of adding cursor animations and a background but i did something in code that messed the situation 😭

I got to know about Hack Club through a friend, and when I found out you can build projects and actually get cool rewards for it, I thought why not give it a shot! So here’s my first project on Stardance.
I picked the WebOS mission - basically building my own little web-based operating system from scratch. The idea is to make something that looks and feels like a real desktop OS but runs in the browser, with my own twist on the design.
I started by building the desktop itself with a custom dark blue-purple theme, a top bar, and a live clock powered by JavaScript. Later I expanded it into a multi-window system where apps can be opened, closed, and moved around the screen just like a real operating system.
So far, MyOS includes draggable windows, desktop icons, a functional dock, an About app, a Terminal app, and a Clock app that displays a large live clock and date. I also implemented window focus management so active windows move to the front, making the desktop feel much more realistic.
One of the biggest additions was a custom right-click context menu. Users can right-click anywhere on the desktop to quickly open apps or refresh the desktop, similar to traditional operating systems. I also updated the top bar to display both the current date and time in real time.
A surprising amount of development time went into debugging small JavaScript mistakes. Things like misspelled variable names, incorrect event listeners, and reserved keywords caused features to silently fail, forcing me to carefully trace through the code and learn how browser debugging works. Those issues ended up teaching me as much as the actual feature development.