@Lvkv

Dev Log: Building a Multi-App Operating System & Shipping LunaOS 🚀

What I built:
We officially crossed the finish line! LunaOS v2.0 has evolved from a basic desktop simulation into a fully loaded, interactive web operating system featuring 7 custom built-in micro-apps:

🪟 Dev Notes: Architecture overview and log viewer with dynamic sidebar navigation.
💼 Projects Showcase: Dynamic project gallery with live text and tag search filtering.
🧮 LunaCalc: Glassmorphism calculator driven by a custom state evaluation engine.
👾 Snake Arcade: HTML5 Canvas arcade game with keypress event handling and safe game-loop management.
📝 QuickPad: Persistent scratchpad auto-syncing notes to browser localStorage with real-time word counting.
🎨 Pixel Studio: Interactive 16x16 pixel art canvas built with CSS Grid and dynamic color picking.
💻 LunaTerm CLI: Retro developer terminal parsing custom commands like help, about, projects, and date.

What I learned:
Event Loop & Interval Management: Learned the hard way that background loops (like game timers) must be cleanly initialized on user action and cleared on window destruction (clearInterval) to prevent memory leaks and unwanted execution.

Unified State Persistence: Leveraged localStorage event listeners to sync state seamlessly across browser reloads without relying on external databases or heavy libraries.

Modular Architectural Helper Functions: Streamlined window handling by creating a universal initializer (initializeWindow) to handle drag physics, desktop icon selection, and focus stacking ($z\text{-index}$) across all 7 applications cleanly.

Ship Time:LunaOS v2.0 is officially live! You can test out the interactive desktop environment here:👉 Live Demo: https://lvkv-dev.github.io/LunaOS/

Time to hit that ship button! 🚢🎉

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!

Building LunaOS🌙**What I built:**Started LunaOS, a web desktop with a dark night-sky theme! First, I built a dark-mode bio card with links to my GitHub and Spotify. Then I expanded it into a full desktop layout by centering the card as a window and adding a top status bar with a working live clock.What I learned: * HTML & CSS: Played around with glassmorphism using backdrop-filter: blur(), glowing borders, and rounded corners. * Flexbox & Positioning: Used display: flex to align the top bar and transform: translate(-50%, -50%) to keep the window centered. * JavaScript: Wrote a quick setInterval script with toLocaleTimeString() to update the clock every second:javascriptsetInterval(function () { document.querySelector("#timeElement").innerHTML = new Date().toLocaleTimeString();}, 1000);**Next up:**Making the window draggable and adding open/close buttons!