My very own WebOS

I created the first working version of Om’s WebOS using separate pages. The intro page explains the porject and includes a Start WebOS button that links to the main desktop page. I also added a Back to Intro button so users can return without refreshing.

On the desktop, I created a green-to-blue gradient background, a bottom taskbar, and custom icons for the Welcome and Notes apps. I learned how to organize images inside an images folder and display them using tags. I also styled the icons with rounded corners, hover effects, and consistent sizing.

One issue I fixed was an incoorect image file extension. the HTML used .png, but the real file was a .jpg. After correcting the path, the Welcome icon loaded properly.

Next, I plan to make the Welcome and Notes icons open working application windows with close, minimize, and maximize buttons.

Finished the project

Added global application keyboard shortcuts, active-window controls, keyboard-focusable title bars, ARIA live announcements, dynamic taskbar accessibility states, visible focus indicators, editable-field shortcut protection, and Start-menu count synchronization.

Added persistent desktop-state storage to GreenSpace WebOS. Window positions, sizes, open states, minimized states, maximized states, active-window state, and stacking order now survive browser refreshes. Added a Reset Windows control to restore the default desktop layout.

Added a working Calculator applcation with standard arithmetic operations, decimals, negative numbers, percentages, keyboard controls, calculation history, persistent browser storage, reusable history results, and divide-by-zero error handling.

Added a Settings application with selectable Forest, Sunset, and Ocean wallpapers, light and dark window themes, a desktop-grid toggle, automatic browser storage, restored preferences after refresh, and appearance-reset functionality.

Converted the Nature application into an interactive environmental challenge tracker. Added six activities, completed states, green points, a live progress bar, automatic broswer storage, restored progress after refresh, and rest functionality.

Converted the Notes preview into a functional text editor. Added a title field, editable note content, automatic saving, manual saving, Ctrl + S support, clear confirmation, word and character counters, save-status feedback, and persistent browser storage.

Replaced the temporary Start notification with a complete searchable application launcher. The Start menu can open every WebOS application, filters apps as the user types, closes through outside clicks or the Escape key, and updates the Start button’s accessibility state.

Added complete window-control behavior to GreenSpace WebOS. Application windows can now be minimized, restored from the taskbar, maximized, and returned to their previous position and size. Taskbar buttons now change behavior based on window state, and double-clicking a title bar maximizes or restores the window.

Added reusable draggable-window behavior to GreenSpace WebOS. All application windows can now be moved using their title bars with mouse, touch, or pen input. Added pointer capture, active-window focus during movement, safe desktop boundaries, visual dragging feedback, and automatic position correction when the browser is resized.

Built a reusable multi-window system for GreenSpace WebOS. Added working Welcome, Notes, and Nature applications that can be opened from desktop icons, closed using window controls, and brought to the front when selected. Added dynamic taskbar buttons for each open application, active-window highlighting, and automatic window stacking using z-index. Also refined the Welcome window layout, improved scrolling behavior, and replaced temporary alerts with an in-desktop status message.

Goal
Create the visual foundation for the WebOS project.
Work completed

Created the initial project structure

Created a custom environmental desktop theme

Added three desktop application icons

Created the first application window

Added a taskbar and Start button

Added a running application indicator

Added internet and sound indicators

Added a live clock and date

Added responsive behavior for smaller screens

Added placeholder feedback for features planned in later hours

Technical decisions
The desktop uses CSS gradients rather than an external wallpaper image. This keeps the project lightweight and prevents the interface from depending on an external image host.
CSS custom properties store shared colors and dimensions. This will make future theme and layout changes easier.
The clock logic is isolated inside an updateClock function. It runs once when the page loads and then updates every second.
The window control buttons are visible but disabled. Their functionality will be introduced gradually rather than placing unfinished behavior into the first version.
Challenges
The main challenge was keeping the desktop usable on both large and small screens. A media query changes the desktop icon arrangement, application window position, and taskbar labels on smaller screens.
Next development hour
The next hour will introduce a reusable window system with multiple application windows and working open and close controls.