olivOS
By
@opu314
- 6 Devlogs
- 8 Total hours
A bunny-themed web operating system which illustrates Olivia’s passions and interests, while providing an outlook to her life!
Ship #1
What I Made 🐰:
- olivOS, a bunny-themed webOS that reflects my passions, interests, and life
Features 😲:
- Topbar with live clock 🕐
- Bottom bar with desktop icons to select on first click, and open on the second
- Draggable (click and hold on the Handle text), closable (click on Close), and overlapping windows (click 🖲 a window to bring it forward!)
- Easter Egg 🐣: text that changes colour when you hover over it! Try to find it 😄
Multiple Apps 🖥:
- Welcome: intro to olivOS
- About me: introduction about me!
- Blog 📝: entries about my experiences, with a sidebar for selection
- Fun Facts: random fun fact generator:)
Find out more information by reading my project’s README, on github: https://github.com/OliviaSYS/olivOS!!
Try My Project 👉: https://oliviasys.github.io/olivOS/!!
Challenges 🎢(this project was not as simple as I thought, but it was quite fun to build!):
- I’m not an expert at CSS and JS, so I sometimes made mistakes in my code, forcing me to do some debugging at the end of each programming session.
- I didn’t know that you had to have a “border-style” attribute in order for the borders to appear, so I spent a lot of time trying to fix this, until I decided to use the simpler “border” attribute and figured it out!
- variable names for js array confused with variable names for css id.
- some classes that I had at the beginning, when some js functions didn’t exist, were not removed afterwards
- after following the tutorial, I had to spend a lot of time cleaning up my code because I was not sure which parts to delete during the process:(. however, I read over my code slowly and realized that I didn’t need specific functions for each window, only the general one:)))
- finally, the guide had a lot of css styles embedded in html tags, so I found it a bit hard for me to follow it because I wanted different css.
What I’m Proud of ✨:
- learning how to make a webOS after 8 hours of working hard and coding! 🎉
- discovering how to load content programmatically
- making my own personal themes using CSS, as well as my personal fun fact generator app! :)))
Credits:
- Hack Club JamHacks Tutorial!!
Btw thank you StarDance and Hack Club for this amazing opportunity!
Finished README.md!
Read the image below or go directly to my project github: https://github.com/OliviaSYS/olivOS
Major Updates:
- Added a blog (following the “Create Your First App” part of the JamHacks WebOS guide) ~ added some css transitions for the left sidebar for personalization! Hoping to add a posting feature in the future:)
- Created a div for the bottom bar, to store all the desktop app icons!
Minor Updates:
- Again, changed/added a LOT of css! Ex.
- my “generate a fun fact” button, borders (initially, i had all the border-weight, border-style, border-color attributes separate, but i combined them into one border attribute to make my code cleaner!)
- topbar colours/margins/padding
- webOS wallpaper
- and lots of font-size/color for text!
Debugging:
- too many to list!
- involved the wrong css
- in script.js: confusion between my array blogContent and my variable blogContent for query selecting “#blogContent” (now changed to blogcontent to prevent this error). This caused the “handle” of my blog window to break:(((
Anyways, olivOS should be completed or WebOS 1! Gonna ship soon:)))
Finally, I decided to add some (kind of random) css in order to make sure my code worked. For example, I added padding, position, colors, and align indicators to various elements. An issue I struggled with was:
—–flex-direction: column,
which was supposed to be the case for my windows, but I discovered that I had a duplicate:
—–.window {
—––flex-direction: row;
—–}
which was my bug!
I realized that there was a significant number of bugs in my code - i put the
—–“selected” class
manually when i wasn’t supposed to, i forgot a dot/period before
—–”/images…”
and i also had
—–dragElement(element.id)
instead of
—–dragElement(screen).
Now, my handle actually works, and it flashes turquoise when it is selected!
I added a fun facts window as my first personalized/advanced app! This used the normal style of a fun fact generator - a button and text.
When I customize all my css, I’m hoping to add a border for the fun fact container in order for the size to be constant.
Btw, I previously had all my fun facts in an html list, but then in order for it to be a random generator, I moved the strings to a javascript array and had to make sure my code wasn’t (displayfunfact is an id):
—–displayfunfact.textContent,
but:
—–displayfunfact.innerHTML.
That way my and tags would work!
In the end, this worked out well:)
After following the guide, I realized that I had many bugs inside my code-it was really disorganized! I took some time to fix it by putting all of the app icons inside a “#desktopapps” div, as well as the windows inside “#windows”. In addition, I fixed some of my js, which originally had specific open and close operations for my “welcome window”. However, I now generalized those functions for all types of windows instead. <:~:> now it works a lot better! :))
Completed Pt.I, II, and III of the guide!
However, I didn’t really focus on the aesthetics (css) aspect of my WebOS; instead writing mostly HTML and some JS for closing and opening windows, and also the clock, which you can see in the top right corner.
I’m finally starting this project:)
