OS that can be run in the web! Instead of a normal website, visitors get to know me by exploring: dragging windows, opening apps, and typing commands in a real terminal. Built with HTML, CSS, and JavaScript.
So I think the project is finished and I’m actually pretty happy with how it turned out.
The OS has a desktop with a gradient background, a topbar with a live clock and fake battery, and five apps: a welcome screen, an about me section with a sidebar, a projects grid, a contact window, and a terminal. The terminal was the most work by far. I had to add command history with the arrow keys, escape user input so nobody breaks it with echo, and set up a command system that’s easy to extend.
The custom feature I added is sticky notes. You can make one from the topbar button, the desktop icon, or by typing nota in the terminal. Each note is a draggable window with a text area, and they come in four colors so you can tell them apart. The way it works is each note gets created with document.createElement and then I just pass it to the same dragElement() function everything else uses — nothing had to be rewritten.
The biggest thing I learned from this whole jam is how mouse events actually work. Before this I’d never done drag and drop from scratch. The key detail is you have to put mousemove and mouseup on the document, not on the element — otherwise if you move the mouse too fast it slips off and the drag breaks. Took me a while to figure that out.
Anyway, it works, it looks decent, and it’s all vanilla JS with no libraries.
Got window dragging working. The key thing I learned: you have to attach mousemove and mouseup to the document, not to the window element itself otherwise if you move the mouse too fast it slips off the element and the drag breaks.
Added the About, Projects, Contact, and Terminal apps. The About app has a sidebar you can click through, and Projects renders cards from a JavaScript array which made it easy to add new ones. The terminal took the most time.
Also added z-index stacking so clicking a window always brings it to the front, and desktop icons that select on single click and open on double click.
First day on the webOS jam. The idea of building an OS inside a browser felt weird at first, but also really cool.
I got the desktop background working using a CSS gradient and added a live clock to the topbar using setInterval. The hardest part was figuring out position: absolute windows kept showing up in completely wrong places until I understood that everything is positioned relative to the body.
By the end of the session I had a working desktop with a welcome window sitting in the middle.
