My very own WebOS - Stardance

Ship #1 Changes requested

@Vansh_7 on My very own WebOS · about 18 hours ago

What I made: I built a custom web-based operating system with draggable windows, a live clock, a notes app, and a theme switcher (including a glowing matrix mode!).

What was challenging: Getting the drag-and-drop window logic working smoothly in vanilla JavaScript without breaking the layout, and making sure clicked windows automatically pop to the front (zIndex).

What I’m proud of: The theme switcher! Switching between dark mode, sunset, and matrix green and seeing all the glowing CSS styles change on the fly turned out super cool.

What people should know before testing: It’s designed for desktop screens! Try dragging windows around by their top bars, opening/closing them from the top panel, and testing out the different themes.

3 devlogs
3h
WebOS 1

Try project → See source code →

Open comments for this post

@Vansh_7 on My very own WebOS · 1 day ago

18m logged

Theme switcher feature & deployment ! Status: Wrapped up 🚀finally finished up the WebOS project! added the last extra feature and got it hosted online. what i did today : built the appearance settings window so you can toggle desktop themes on the fly added 3 theme options: Midnight, Sunset, and a glowing Matrix green cyber mode tested all the window buttons and dragging on different screen sizes pushed the code online so anyone can test it out without needing a password reflections: super fun project! learned a lot about handling DOM events and basic drag-and-drop logic in vanilla JavaScript.

Open comments for this post

@Vansh_7 on My very own WebOS · 1 day ago

1h 43m 53s logged

Day 2 - Making windows draggable + z-index fix Status: Adding Interactivity spent a couple hours getting the actual OS mechanics working today. drag-and-drop took a bit of tinkering to get right. what i did today : styled all the windows, title bars, and close buttons in CSS wrote the JS event listeners (mousedown, mousemove, mouseup) so you can click and drag windows around by their headers. fixed a bug where windows overlapped weirdly by adding a zIndex counter so whatever window you click pops to the fronthooked up a real-time JS clock in the top bar. next up: finishing up the theme switcher feature so you can change the background.

Open comments for this post

@Vansh_7 on My very own WebOS · 2 days ago

38m 22s logged

Title: Day 1 - HTML layout and window structureStatus: Building basic UIdecided to start working on the WebOS project for Hack Club today! wanted to get a basic desktop layout working before adding any fancy stuff. what i did today : made my standard index.html, styles.css, and app.js files built the top bar with a logo, clock placeholder, and quick-launch buttons set up the HTML for 3 default windows (About Me, Notes, and Theme settings)added a few desktop shortcut icons so it actually feels like a real desktop. next up: styling everything in CSS so it doesn’t just look like a plain white webpage lol