Dev Log : Building My First Web App on LunaOS 🚀

What I built:
Part 4 is complete! I added a clickable desktop icon that opens a custom Dev Notes app. The app features a dynamic sidebar where clicking different topics loads my real tech stack, project architecture, and OS roadmap notes on the fly. I also added dynamic z-index layering so windows automatically pop to the top when clicked, plus selection highlights for desktop icons.

What I learned:

• Icon selection states: Used classList.add("selected") to give icons a soft glowing outline when tapped.
• Smart window layering: Tracked a biggestIndex variable that increments on mousedown so active windows always stack naturally on top of each other.
• Rendering array data: Stored my project notes in a JavaScript array of objects and populated the sidebar dynamically using a for loop and createElement():

javascript for (var i = 0; i < devLogData.length; i++) { var item = devLogData[i]; var div = document.createElement("div"); div.innerHTML = "<p>" + item.title + "</p>"; sidebar.appendChild(div); }

Next up:
LunaOS officially feels like an actual operating system now. Time to finish tweaking the styling and ship it to Stardance!