Devlog 4 - Creating My First App: Journal

Today, I launched my first application for my personal operating system: the Journal app.

I added an app icon to the desktop, allowing users to open the Journal window only when its icon is clicked, rather than having every window open automatically upon loading the website.

I incorporated several systems I had previously built, including draggable windows, open and close functionality, and reusable styling.

App Structure

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

To keep the code organized and avoid hardcoding, I stored the journal entries in a JavaScript array of objects. Each object includes:

• A title
• A date
• The HTML content for that entry

I developed JavaScript functions to:

• Dynamically generate the sidebar entries
• Show the selected journal content
• Open and close the Journal window
• Keep the Journal hidden when the page initially loads

Challenges Faced

During development, I encountered several bugs. At one point, the Journal window appeared inside the top bar due to incorrect HTML structure. I also accidentally created duplicate IDs and nested windows, which led to both windows moving simultaneously when dragged.

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

Current Features

The following features have been implemented:

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

This project is gradually transforming into a genuine operating system rather than just a simple webpage. The codebase is also becoming more modular, facilitating future expansions for additional applications.