maryOS
By
@marygoat
- 6 Devlogs
- 8 Total hours
my own webos based off of me!
Ship #1
Pending review
I made a web-based desktop!
maryOS is a desktop that is completely client-sided.
Features
Desktop Environment
Drag and close windows
Top bar with a clock and date
Note app that saves with local storage
Game link window
Welcome window
It was challenging deploying the javascript code that allowed the windows to drag around and close and all of that fun stuff, since I only ever learned the basics of javascript and this felt like a lot of new content. I’m proud that I got it to finally work after a lot of time debugging, and searching for help when I needed it. I really like how it looks, even if it’s simple, and I will probably spend more time on this!
To test my project, you can click on the icons on the bottom of the screen to open windows!
game window!
added a lil game window to my webos, and also made it so when you click on the icons the border changes colors so that its selected.
it doesn’t work for the games icon, so ima debug that, but hi and notes work! i also have to finish up programming the notes app lol
i learned a lot more about java script functions during this, which was fun :)
window opens!
this took way longer than i want to admit lol, i asked claude to help me debug because i had structured my code a bit weirdly. after a LOT of trial and error, the little app button on the bottom opens up the welcome app! i have learned about data-targets through the debugging progress, which is kinda like a different type of id? im still not 100% how it works, but im getting there!
draggable window!
made it so you can drag the window
also tried stylizing it a bit more, which took longer than expected lol since my css wasn’t behaving, sometimes the handle overflowed or didn’t take enough space, but i figured it out :)
im pretty content on how this is looking so far, excited to see where this goes!
stylizing web os!
gave it a background and also made a window!
it was hard to decide on what theme it should be, but i decided to make it a bluish purplish vibe since those are my top two fav colors, and i think they look nice together.
i was confused about flex, but the froggy flex game listed on the guide helped me a lot! im getting the hang of it now :)
