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.

Devlog 4 - Creating My First App: Journal

Today, I launched my first application for my personal operating system: the Journal app.

I added an app icon to the desktop, allowing users to open the Journal window only when its icon is clicked, rather than having every window open automatically upon loading the website.

I incorporated several systems I had previously built, including draggable windows, open and close functionality, and reusable styling.

App Structure

Inside the Journal app, I created a sidebar and a content area. The sidebar lists various journal entries, while the main section displays the contents of the selected entry.

To keep the code organized and avoid hardcoding, I stored the journal entries in a JavaScript array of objects. Each object includes:

• A title
• A date
• The HTML content for that entry

I developed JavaScript functions to:

• Dynamically generate the sidebar entries
• Show the selected journal content
• Open and close the Journal window
• Keep the Journal hidden when the page initially loads

Challenges Faced

During development, I encountered several bugs. At one point, the Journal window appeared inside the top bar due to incorrect HTML structure. I also accidentally created duplicate IDs and nested windows, which led to both windows moving simultaneously when dragged.

After resolving these issues, the operating system became much more organized and interactive.

Current Features

The following features have been implemented:

• Welcome window
• Desktop top bar with a live clock
• Draggable windows
• Open and close buttons
• Desktop application icons
• Journal app
• Dynamically generated journal entries using JavaScript

This project is gradually transforming into a genuine operating system rather than just a simple webpage. The codebase is also becoming more modular, facilitating future expansions for additional applications.

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.

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)