DukeOS
- 11 Devlogs
- 19 Total hours
This is my very own OS that can be run on the web! I named this webOS after my cat, Duke.
Ship #1
FINAL devlog | 1. I created a fully functioning weather app using JavaScript. This took almost 3 hours because I’m new to JavaScript, so I followed a tutorial by BroCode, who is a coding tutorial creator. He doesn’t just make the program; he explains what each line of code does and how it connects to the HTML/CSS file. 2. The weather app and notes app icons are draggable. 3. The calculator app is not draggable for some reason that I cannot figure out. The weather app window is not draggable for the same reason. In my second version of my web-based OS, I plan to have all my windows draggable.
UPDATE - I replaced the music icon with a weather app icon because I plan on creating a music player as a separate JavaScript project - I updated the main window to include my GitHub profile and READ.ME - Everything is now draggable - I added a doc section to the bottom of my screen, and I plan to make them function similar to the apps in the main section of the OS
i added the calculator app to the webOS! This took almost 3 hours to do because of a lot of bug fixes ,and asking copilot for help, which ended up making things worse. I had to code the calculator myself in a seperate CSS file, so all the styling woulndn’t be in one large file. I can move the calculator window around, but I can’t close it due to some overlapping JS and CSS names.. i think. the next update willl have this fixed! I also learned that I can embed a script file into a specific div element.I used AI to program the onclick +1 on the z-index on the window. this essentially means when a person clicks a window, it is on the top layer.
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
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
