Devlog 4 - Creating My First App

Today I created my first application for my personal operating system: a Journal app.

I started by adding an app icon to the desktop so users could launch the Journal window. Instead of having every window open immediately when the website loads, I made the Journal app start closed and only appear when its icon is clicked.

I reused many of the systems I built previously, including draggable windows, open and close functionality, and reusable window styling.

Inside the Journal app, I created a sidebar and a content area. The sidebar displays different journal entries while the main section shows the contents of the selected entry.

To avoid hardcoding everything directly into HTML, I stored the journal entries inside a JavaScript array of objects. Each object contains a title, a date, and the HTML content for that entry.

I then built JavaScript functions to:

Dynamically generate the sidebar entries
Display the selected journal content
Open and close the Journal window
Keep the Journal hidden when the page first loads

During development, I encountered several bugs. At one point the Journal window appeared inside the top bar because my HTML structure was incorrect. I also accidentally created duplicate IDs and nested windows inside each other, which caused both windows to move simultaneously when dragging.

After fixing these issues, the operating system became much more organized and interactive.

Features currently implemented:

Welcome window
Desktop top bar with a live clock
Draggable windows
Open and close buttons
Desktop application icons
Journal application
Dynamic journal entries generated with JavaScript

This project is starting to feel more like a real operating system instead of a simple webpage. The codebase is also becoming more modular and easier to expand for future apps.