I built snOS, a dark glassmorphic browser personal web OS-draggable floating windows, desktop app icons, a live clock, window depth layer-ing, and a handful of functionally in-built apps:
About snOS: A window with system info.
Notes App Pro-a very simple notepad that saves your notes to local storage, so they don’t vanish when you refresh.
Weather Forecast App: Create a live weather widget using the Open-Meteo API that allows you to search any city in the world and see live temperature, humidity, wind speeds, with dynamic condition icons.
Web Browser: An inbuilt mini browser frame so you can search and browse using live web pages directly inside the desktop view. I’m a total beginner coder, so creating this without any starting point was a huge learning challenge for me. Making the window drag function feel fluid without messing up the layout was difficult.
Integrating to the live weather API, processing the search box inputs, and debugging weird code errors took countless iterations.
With all the times I was stuck I spent hours watching coding video tutorials, reading docs, and getting AI helpers like ChatGPT and Gemini to explain everything to me and fix my code until I finally understood how it all works. Honestly I’m just glad I didn’t give up! As a zero experience beginner seeing a blank screen turn into a functioning desktop with apps and movable window boxes was a really rewarding experience. It took patience but learning how JS, API fetching, and CSS combine to make something tangible was totally worth it.
You don’t need a username or password!
Open any of the desktop icons (About, Notes, Weather, or Web Browser) and use an app.
Click and drag the top header of any window to move it anywhere on your screen.
Click in any open window to put it on top.
Other quick options: if you want to do a quick check on the current conditions for your city, try searching for your hometown in the Weather App (just hit Enter or click Search) and receive live forecast updates.
Put a note in the Notes App-it auto-saves locally, so your note won’t disappear when you refresh!
- 1 devlog
- 1h
- WebOS 1
