idk - Notes app content update + element exceeding window bug??

I updated the HTML so that I can add content through JavaScript so it does not need to be hard coded into the HTML file. I spent of bit of time debugging this as I couldn’t figure out why some of the content I added to the Notes app was disappearing when I clicked it. Turns out there were a few issues like calling the same function twice, but I also realised I added an event listener that ran the wrong function which was why some of the content was disappearing.

Also, I did the ‘additional challenges’ in the guide, mainly the 4th point about the bug where windows can exceed the screen width and height. I used a bit of Gemini here to figure out how to get max and min values from a set of numbers (Maths.min and Maths.max) and also used W3Schools to get the window height and width as well as the div element’s own height and width. Using this, I implemented my own logic (with an if statement) to contain the element within the viewport height and width. This took a tiny bit of trial and error coz I kept getting confused on when to use min and when to use max but I got there eventually

Update JS code file structure + Creating the Notes app functionality

I spent some time updating the structure of my js file by reordering some code and also creating functions for any repeated tasks such as initialising windows. I also worked on my Notes app and played around with some border and outline properties to see what combination of styles would make it easier for users to edit in the app. I ended up with going for a left border indicator type of thing (the colours in the screenshot below aren’t final since I haven’t worked on the overall style of my OS yet so I just went with grey and black)

Working with z-index

Continuing with the guide, I’ve added code that ensures that whenever a window clicks, it rises to the top using the z-index property. I did the same for the top bar.

Bugs
An issue I faced was when I tried to use the function addWindowTapHandling() for my notes screen but I forgot that I defined the notesScreen variable later on in js file so the notes app disappeared from my OS screen for a bit. I also got really stuck on why my top bar wasn’t rising above the windows so I put my js file into Gemini and I realised it was because I had two openWindow() functions and the second one was the old version that did not have the added lines of code.

Adding my second window

I have begun working on my second window which will be a notes app. I continued to follow the guide and created an icon for the app and also a new window for it. It’s mostly taken a while to sort out the js file since I got confused with why the window wasn’t popping up at first (I didn’t name the classes and ids for the divs correctly).
Here’s the update:

Setting up the background, top bar, window

So far, I have followed the guide and created the background page with a top bar and created my first welcome page window (the content is random right now - I’ll update this later). The window is also draggable at the handle. I’m still working on what kind of style I want to aim for in my OS…

Also, this is kinda my first devlog because I thought my devlogs were broken (turns out I just couldn’t figure out how to use this 💀)

Setting up commands