I’m making a Kirby-star themed calculator! This is an upgrade from my first “mymelody” calculator from 3 months ago. I just added the buttons, and I’m currently working on making them work in JavaScript.
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
Really short update. I tried working on the form section of the page, but I still have some learning to do in relation to properly organizing “form” properties in CSS.
I updated the main page with new fonts! I fixed the banner’s margin so it displays as it should. I’m working on a second tab for the website, “Jellycat form submission”! I’m still determining how to store the submission from my website, and I’m willing to learn!
Bug fixes + added more to the frontpage!
I was able to fix the weird image bug I had in my previous declog. Turns out it was a confusion in the semantics, specifically the tag. I placed the 3 images inside it, which caused the strange crowding. I fixed this by adding tags between each image.
I added 3 more images of mimi to the frontpage, and added a cute border to each one, providing a nice pop of color contrasting the brown background. In the next devlog, I plan to begin developing inside the “Pictures” tab. (hint: lots of color :) )
Mimi is the cutest
I removed the margins from the top of the page! I centered the text as well as the main photo of Mimi the Peanut. I am currently trying to add 3 more photos below, but I have to pause as I am having trouble displaying them correctly. It probably has something to do with my wifi. Will be updating soon!
I just started the front of Mimi’s website! I’m learning CSS on codedex while making the website. (Not an advertisement) I added a header, banner, a picture of Mimi (no loading due to my poor wifi connection), and a small bio about Mimi. More coming soon!
