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.

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.

Devlog 3 – Making My Window Interactive

Today I made HackOS feel much more like a real operating system by adding interactivity to my welcome window.

The first improvement was organizing my project files. I moved my JavaScript code into a separate script.js file and my styles into a style.css file. This made my code cleaner and easier to read.

Next, I made the welcome window draggable. By using JavaScript, I was able to track the mouse position and update the window’s location as the user drags it across the screen. I also added a header area that acts as a handle, so the window can only be moved when dragging from the top section.

After that, I added a close button to the top-right corner of the window. When the button is clicked, the window disappears by changing its display property. To reopen the window, I used the OS name in the top bar as an open button. Clicking it makes the window visible again.

I also continued using the live clock from the previous project. The clock updates every second using JavaScript and remains visible in the top bar.

To make the project easier to expand in the future, I created reusable CSS classes for windows, headers, and buttons. This means I can create additional windows later without rewriting the same styles.

Through this project, I learned about:

• Separating HTML, CSS, and JavaScript into different files
• Using IDs and classes to organize elements
• Making HTML elements draggable
• Creating reusable CSS classes
• Using functions in JavaScript
• Adding click event listeners
• Opening and closing windows dynamically
• Positioning elements inside a window header

My favorite part was making the window draggable because it made the website feel much more like a real desktop environment. I also enjoyed adding the close button since it gave the window behavior similar to applications on a computer.

Goals for the next time :

-Make the open button a fictional button that looks like the taskbar on windows, instead of it being the title of the page.
-Follow the guide :D

Devlog 1 – Building My Welcome Screen

Today I created the welcome screen for my Personal OS using HTML and CSS.

I started by creating a basic HTML page with a heading and a paragraph. After that, I added an image that represents me and included a link to one of my favorite websites. This helped make the page feel more personal.

Next, I experimented with different styles. I changed the background color, adjusted the text colors, and selected a font that matched the look I wanted. I also resized my image and rounded its corners using the border-radius property.

One challenge I encountered was making the image look the correct size without becoming stretched. I solved this by setting both the width and height and using styling to keep the image looking natural.

Through this project, I learned about:

• HTML elements such as h1, p, img, and a
• Adding images and links to a webpage
• Using inline CSS styles
• Changing colors, fonts, spacing, and image appearance
• Using margin and padding to improve layout

My favorite part was customizing the page and making it feel like my own . In the future, I want to add windows, a desktop background, and interactive features using JavaScript.

Devlog 2 – Creating My Desktop and Top Bar

Today I expanded my Personal OS by creating a desktop layout and adding a top bar with a live clock.

I started by placing all of my welcome screen content inside a div, which acts as a window. I added a border, rounded corners, padding, and a background color so the window stood out from the desktop background.

Next, I added a desktop wallpaper by setting a background image on the body of the page. I used background-size: cover so the image would fill the screen properly.

After creating the desktop, I built a top bar. I used a flexbox layout to place the OS name on one side and the time on the other. I also added a semi-transparent background to give it a more modern operating system appearance.

Finally, I learned some basic JavaScript. I created a function that gets the current date and time using new Date().toLocaleString(). Then I displayed the time inside the top bar and used setInterval() to update it every second so the clock stays accurate.

Through this project, I learned about:

• Using div elements as windows
• Positioning elements with position: absolute
• Centering content with transform: translate()
• Creating a desktop wallpaper with CSS
• Using Flexbox for layout
• Creating a top bar
• Writing basic JavaScript functions
• Updating webpage content with querySelector() and innerHTML
• Using setInterval() to run code repeatedly

My favorite part was adding the live clock because it made the website feel more like a real operating system. Next, I would like to add more windows, applications, and interactive features to make the OS more useful.

(I put both my devlogs in here because I forgot to post my first devlog)