Devlog 5 - Creating an Advanced App: Projects

Today, I developed my second desktop application for HackOS: the Projects app. One enhancement I integrated is the ability to click windows to bring them to the forefront.

The app aims to showcase the projects I’ve created and provide users with an alternative way to navigate my operating system.

What I Added

I began by designing a new desktop icon labeled “Projects,” featuring a book icon positioned next to the Journal app.

Next, I set up a new window for the application that includes:

• A draggable header
• A close button
• A content area for displaying project details

I created a JavaScript array named projectsData to store information about my projects, with each project containing:

• A title
• A description

The loadProjects() function I wrote iterates through the array and dynamically generates project cards within the app.

Current projects include:

• AppleWebOS
• Journal App
• A placeholder for future projects

Challenges I Encountered

This project proved significantly more challenging than developing the Journal app.

I spent considerable time troubleshooting why the Projects window wouldn’t open. The primary issue stemmed from an incorrect HTML structure; I had created the window’s header and content but neglected to establish the projectsWindow container that ties everything together. As a result, JavaScript couldn’t locate:

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

This oversight hindered the window-opening functionality. Additionally, I mistakenly placed the projects-content div within the header instead of below it.

I also mixed up several IDs, including:

• projects
• projectsWindow
• projectsIcon

This experience reinforced the importance of maintaining consistent naming conventions as projects expand.

What I Learned

I discovered that organization is becoming increasingly crucial. In a growing project like HackOS, minor errors in IDs or HTML structure can disrupt entire features, such as the draggable functionality.

I also learned how to dynamically generate content using JavaScript arrays rather than hardcoding everything into the HTML.

Current HackOS Features

HackOS now boasts several features:

• A top bar displaying 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 aim to continue enhancing HackOS by adding more applications and refining the visual design. Some ideas on my list include:

• Improved window animations
• Additional projects within the Projects app
• A settings application
• Enhanced styling
• More interactive desktop features

HackOS is progressively evolving into a functioning operating system rather than just a simple webpage.