DevLog #11

I’m thinking about using Svelte to rewrite my entire WebOS simulator. I believe it will make the code much more organized, simplify maintenance, and speed up development compared to the current project.

DevLog #10

Writing code… that’s about it.

I decided to rewrite the WebOS from scratch and completely change its style. There isn’t much to show yet, but I hope the result will be worth it.

DevLog #9

Today I finished the help section for My Own WebOS.

I added documentation pages for all system applications, simply explaining what each one does and how to use it.

DevLog #9

Apenas correções de bugs e pequenos ajustes.

Devlog #8

Added some new stuff to the WebOS.

This time I focused more on customization and making the system feel more alive. Now you can change the wallpaper and the taskbar color, which makes everything feel a bit more personal.

I also added a functional chatbot (super basic for now lol), but it already works and can handle some simple commands.

Current Apps

1. Welcome - A simple app with some basic info about the project.
2. Cat Viewer - Shows random cat pictures because every OS needs cats.
3. NASA Viewer - Displays space-related images and information.
4. MiniTube - A mini YouTube-like app inside the WebOS.
5. Pomodoro - A productivity app with a timer to help focus.

Start Menu

I also added the Start button, basically inspired by the Windows key/start menu idea.
When clicked, it opens a little menu with quick access to apps and system options:

• Help - Works like a mini documentation page for the WebOS.
  I made it with a sidebar-style layout, kinda like docs websites.

• Settings - Lets you change the wallpaper and taskbar color.

• Shutdown - Simulates shutting down the PC by turning the screen black and showing “Shutting down…”.

Taskbar Improvements

Now when an app is opened, its icon shows up in the taskbar.
Overall, that’s pretty much what I worked on in this update.

DevLog #7

I’ve started building the WebOS Settings area.
So far, I’ve implemented two main options:

• Change the wallpaper
• Change the taskbar color

Honestly, it’s not particularly pretty or practical yet, but it’s a start.

To make things easier, I added the ability to change the wallpaper using an image URL, which makes the process faster and simpler. Also, all changes are saved to localStorage, which was the most practical way I found to persist the data.

Window controls (inspired by macOS)

I also added window control buttons based on Apple Inc.’s system:

1. 🟥 Red → closes the window
2. 🟨 Yellow → minimizes the window
3. 🟩 Green → expands / toggles full screen

Taskbar

Now, when a window is opened, the app automatically appears on the taskbar.

I haven’t managed to get the icons looking exactly how I wanted yet, so for now, I’ve just displayed the app name with a stylized border to maintain visual organization.

DevLog #6

I removed the white border from the taskbar to make it more similar to the Windows XP layout. I also adjusted the clock to only show HH:mm to make it simpler and cleaner. I also added a chatbot, you can access it from the button in the right corner of the screen (the one with a speech bubble with a happy face 😄).

How does the chatbot work?

I made it very simple:

1. The user types a message.
2. The script checks whether a match exists in a JavaScript dictionary.

"hi": "Hello!",
"hello": "Hi, how are you?",
"hello": "Hey!"

If it finds a match, it returns the answer. If not, he responds with “I don’t understand.”

There is also the Start button, its function is the same as the Win key on the keyboard:

• List applications
• Search for things
• Settings options

It’s still just aesthetic, it has no real functionality, but I’m working on it. Firstly, I want to implement so that the user can change the wallpaper and customize the color of the taskbar.

DevLog #4

Live Demo: https://hallow303.github.io/MyownWebOS/

I fixed the code errors and managed to get MyWebOS working better.
I learned more about events, functions, and APIs, and practiced a lot of debugging.
Now the project is more stable and ready to receive new ideas.

Devlogs #3

Live Demo: https://hallow303.github.io/MyownWebOS/

I removed the music player app because it was giving me more trouble than I expected, lol. I decided to leave that for later and focus on other parts of the project.

But, in return, I added a new app called NASA Viewer. It uses the NASA API to show the astronomical image of the day, along with the title and a short description.

It was my first app using a real public API, so in addition to improving WebOS, I also learned more about fetch(), JSON, and how to work with external data.

I still want to significantly improve the visuals and make everything look more like Windows XP.

Devlog #2 — Music Player

Live Demo: https://hallow303.github.io/MyownWebOS/

Today I added a new application to my WebOS: a music player 🎵.

For now it’s still quite simple and only has two songs, but it already works. Since I’m still learning CSS and JavaScript, some parts look a bit strange and need improvement.

In the coming days I want to make the visual appearance nicer and continue adding features. My goal is to make WebOS look more and more like Windows XP, which is serving as inspiration for the project.

There’s still a lot to improve, but I’m learning a lot during development.

Development Diary #1 — My WebOS Demo

Live Demo: https://hallow303.github.io/MyownWebOS/

I finished the first version of my WebOS demo.

It now has two applications:

• Welcome: an application with a beginner’s guide and some system information
• Cat Viewer: an application that displays random images of cats

During development, I realized that JavaScript is more difficult than I imagined, especially in the part about manipulating page elements and making the interface components work together. I still need to study more to better organize the code and understand how to structure larger projects without getting lost.

Next goals:

• Create a calculator within WebOS
• Improve code organization
• Study more about DOM and events