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