My very own WebOS

smallllll update

I implemented the Notes window and made it closable and draggable. I’m unfamiliar with JavaScript, which is the magic that makes everything on my website function, so I’ve been struggling to follow the WebOS jam. I’m going to look up some YouTube videos about JavaScript to see if that’ll help me out.

Any progress is good progress. This devlog documents the 12th hour I’ve worked on this project!! crazy to think about.

GREAT progress today!

I got the welcome window up and completely working, and both of my handles are draggable. This is a huge step up from the first iteration of my webOS, as I am happy with the current results! I also added background audio to the page, but I want it to play on loop without the audio controls. That is something I will have to figure out in the next devlog.

The welcome window is closable :D

I updated the top bar!!

My journey so far with my DukeOS with the Frutiger customization has been riveting! I made the top bar fit the current aesthetic and added a small icon at the beginning of the section to make the OS feel more like an OS. I’m still struggling with getting the handle to work :/.

Quick upd before I turn in for the night!!

I fixed the CSS error that was occurring at the top of the main window on my OS! Turns out I just had to utilize a div I completely forgot about (whoops). I just began working on the top menu of the webOS. I’ll edit the style to match the Frutiger aesthetic I’m going for.

COMPLETE STYLE REVAMP: Frutiger Aero! I thought long and hard about my recent struggle with my original OS and realized I wasn’t quite happy where I was. There were bugs I couldn’t quite fix, so I figured the best way to fix them all was by starting from scratch. By doing this, I can catch any coding errors I missed the first time around and learn from them! I hope to end my first webOS happy and satisfied.

As you can see, my tab isn’t complete, and that is due to some CSS styling I can’t quite figure out yet. I will post a devlog with it fixed and the main window complete!

The handle drag still doesn’t work for some reason. I looked over the code a few times, making sure the div id has the str “header” included, but it doesn’t work.

I decided to ignore the problem for now and continued to customize the handle to look like Laufey’s “A Matter of Time: Final Hour”. I added a labeled figcaption with that title. I really do want to get the handle draggable to really make the website feel like an OS, but I’m not familiar with JavaScript. If anyone could help me, I would greatly appreciate it!

I linked my GitHub repository below

https://github.com/example0d1n/DukeOS

Progress on my WebOS mission! I decided to sidequest from my main web project since I was getting pretty stumped on the form data collection. Going into this, I thought it would be simple, which it has been, except for the whole JavaScript portion.

I am extremely unfamiliar with the language, so copy&pasting from the Jam and hoping the code worked (with the necessary edits) was my best bet.

Whilst I am reading through the explanation from the Code Jam, I can’t figure out what went wrong in my “handle” element. My welcome window works fine as displayed in the video, but the handle, the isolated picture of Laufey, doesn’t. The image is either selected by my mouse or has a ghost drag effect to it.

I plan to fix it by the next develog.

Started working on the webOS project! I just inserted the window on the start screen :D