Devlog 3 – Enhancing Interactivity in HackOS

Today, I significantly improved HackOS by adding interactivity to the welcome window, making it feel more like a real operating system.

Organization and Structure

I began by organizing my project files. I moved my JavaScript code to a separate script.js file and my styles to style.css. This separation made the code cleaner and easier to navigate.

Making the Welcome Window Draggable

Next, I implemented drag functionality for the welcome window. Using JavaScript, I tracked the mouse position to update the window’s location as users drag it across the screen. I added a header area that serves as a handle, allowing the window to be moved only when dragging from the top section.

Adding a Close Button

I also introduced a close button in the top-right corner of the window. When clicked, this button hides the window by altering its display property. To reopen the window, I used the OS name in the top bar as a toggle. Clicking it makes the window visible again.

Live Clock Integration

Continuing from the previous project, I kept the live clock, which updates every second using JavaScript and remains visible in the top bar.

Reusable CSS Classes

To facilitate future expansions, I created reusable CSS classes for windows, headers, and buttons. This approach enables me to add more windows later without having to rewrite styles.

Key Learnings

Through this project, I gained insights into:

• Separating HTML, CSS, and JavaScript into distinct files
• Organizing elements using IDs and classes
• Implementing draggable HTML elements
• Creating reusable CSS classes
• Utilizing functions in JavaScript
• Adding click event listeners
• Dynamically opening and closing windows
• Positioning elements within a window header

My favorite aspect was enabling the draggable functionality, which made the interface resemble a real desktop environment. I also enjoyed adding the close button, enhancing the window’s behavior to mirror traditional applications.

Goals for Next Session

• Create a fictional open button resembling a taskbar, instead of using the title of the page.
• Follow the development guide to streamline progress.