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.