You are browsing as a guest. Sign up (or log in) to start making projects!

Ship #1 Changes requested

I made NOVA OS, a web-based operating system built with HTML, CSS and JavaScript. It has a custom desktop, draggable windows, desktop icons, a dock, live clock/date, Notes, Calculator, Focus Timer, Projects, notifications, and dark/light mode. I also added a Notes system using localStorage so notes stay saved after refreshing the page.

The most challenging part was getting the window system to work properly. I had to make windows open and close, move around by dragging their headers, and come to the front when clicked. Making all the different apps work together without making the project unnecessarily complicated was also challenging.

I’m proud that I turned a basic idea into a working OS-like website with multiple apps and interactions. I also like that the final design is my own instead of just copying the guide. Adding the saved Notes feature was something I specifically wanted to make different from the basic version.

No password or account is needed. Open the Demo URL and try the desktop icons or the dock to launch the apps. Try dragging the windows around, opening multiple windows, using the Calculator and Focus Timer, switching between light and dark mode, and creating a note. Notes can be saved and will remain after refreshing the page. The × button closes windows, and pressing Escape closes open windows.

Try project → See source code →
Open comments for this post

15m 25s logged

Started working on my WebOS 1 project — NOVA OS. I wanted to make my own small web OS instead of just copying the guide, so I started building the desktop and then added the basic window system.Right now I have 1) draggable windows 2) desktop icons 3)a docklive time/date 4) notes 5) calculator 6) focus timer 7) projects section 8) dark/light mode The Notes app also saves notes using localStorage, which was one of the extra features I wanted to add. The hardest part was probably getting the windows and dragging to work properly without making the code unnecessarily complicated.

0
0
4

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…