maryOS
By
@marygoat
- 8 Devlogs
- 9 Total hours
my own webos based off of me!
Ship #2
i made a web operating system, featuring six apps!
it was challenging following the guide and making it work, while also making it my own. making the apps open and close properly was one of my biggest struggles. but once i got that working, the rest was easy!
im proud of how this looks like, pretty simplistic and easy to use.
to test my project, just press try project down below or go to: https://awesomesauce4646.github.io/maryos/
hope you enjoy using maryOS!
DEVLOG 8!
SEARCH BAR
- i have added a searchbar, and I think i’m ready to ship!
- I searched it up on how to add a search bar, and I got some code thanks to: https://stackoverflow.com/a/42926071
- it was a bit funky at first, since when i tested the code, it’d search what I put in but then add “site:example . com”, and i didn’t want that, so I figured out how to remove that added value so it’d only search up what the user put in.
- i think the search bar was a nice added feature, especially since i think every webOS should have one!
DEVLOG 7!
CALCULATOR
-
i have made a calculator for my webos!
-
it was difficult learning the javascript in order for the text display to change properly, just like a calculator, but i was able to do it with the help of this guide: https://zellwk.com/blog/calculator-part-1/
-
i spent a lot of time figuring out how to stylize the calculator and also implementing the proper javascript in order to make it divide, multiply, and calculate. i had a small issue of just mispelling textContent, so it prevented the clear button from working.
Ship #1
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 :)
