stardance has been extended another month! the new deadline is october 31 :)

You are browsing as a guest. Sign up (or log in) to start making projects!

opu314

@opu314

Joined June 25th, 2026

  • 6Devlogs
  • 2Projects
  • 1Ships
  • 4Votes
Ship

@opu314 on olivOS

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!

Try project → See source code →
Open comments for this post

@opu314 on olivOS

2h 52m 46s logged

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:)))

0
0
21
Open comments for this post

@opu314 on olivOS

1h 31m 36s logged

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!

0
0
22
Open comments for this post

@opu314 on olivOS

54m 1s logged

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:)

0
0
18
Open comments for this post

@opu314 on olivOS

35m 12s logged

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! :))

0
0
30
Open comments for this post

@opu314 on olivOS

1h 22m 8s logged

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:)

0
0
20

Followers

Loading…