Devlog 5 - Creating an Advanced App (Projects)

Today I built my second desktop application for HackOS: a Projects app.
The extra option i added for the missions is being able to click windows to pull them forward

The goal was to create an app that showcases projects I have built and gives users another way to explore my operating system.

• What I added

I started by creating a new desktop icon called Projects. I chose a book icon and placed it alongside the Journal app on the desktop.

After that, I created a new window for the application with:

• A draggable header
• A close button
• A content area for displaying projects

I also created a JavaScript array called projectsData that stores information about my projects.

Each project contains:

• A title
• A description

I then wrote a loadProjects() function that loops through the array and automatically creates project cards inside the app.

Current projects include:

• AppleWebOS
• Journal App
• A placeholder for future projects

• Challenges I encountered

This was significantly harder than creating the Journal app.

I spent a lot of time debugging why the Projects window would not open.

The biggest issue was that my HTML structure was incorrect. I had created the window header and content, but I forgot to create the actual projectsWindow container that wraps everything together.

Because of this, JavaScript could not find:

var projectsWindow = document.querySelector("#projectsWindow");

which caused the window opening functionality to fail.

I also accidentally placed the projects-content div inside the window header instead of underneath it.

Another issue was that I mixed up several IDs, including:

• projects
• projectsWindow
• projectsIcon

This taught me how important naming conventions are when a project starts growing.

• What I learned

I learned that organization is becoming much more important.

As HackOS gets larger, small mistakes in IDs or HTML structure can break entire features. Like the draggable feature.

I also learned how to dynamically generate content from JavaScript arrays instead of hardcoding everything into HTML.

-Current HackOS Features

HackOS now includes:

• A top bar with a live clock
• A Welcome window
• A Journal application
• A Projects application
• Draggable windows
• Open and close functionality
• Dynamic content loading

• Next potential Steps

I want to continue expanding HackOS by adding more applications and improving the visual design.

Some ideas include:

• Better window animations
• More projects inside the Projects app
• A settings application
• Improved styling
• More interactive desktop features

HackOS is slowly starting to feel like a real operating system instead of a simple webpage.