PrivateOS

Added a README.md and thats about it

I added a music player app!
-new music player app
-plays local music files that you give
-includes playback controls
-does not save your file!!!
this part was very challenging when it came to css more than the script the script wasnt easy but i had a good tutorial on youtube that made it so i could quickly make the script part. the css on the otherhand i couldnt just copy from the video and it made sure i had a rough time lol. I spent a sold 20 minutes thinking my seek bar was gone just to realize it was hidden behind another element. anyways im gonna write the read me and ship it soon!

So i accidentally made this a new project even though it was a restart so i had to do some relinking anwyays heres the 2 dev logs that got deleted as collateral damage of my poor setup

…………………………………………………………………………………………………………………………

Restarted Project
i was tired for my first attempt at an OS so i gave it a second go (and i wanted to get it rated instead of as a mission)
-I made afunctional top bar that updates time realtime
-added a battery widget in the top bar that tracks battery
-added a dock at the bottom(not been pushed to github yet)
-added a notes app(in progress & not been pushed to github)
unlike my last attempt this time i seperated all my files my script, css, and html! this not only made it easier to read, it also amde it easier to edit and made this iteration much faster to implement than the last where it took me almost 4 hours to get to the same point! while i was working on my dock on the bottom i noticed that using transform: translate(-50%, -50%) that the dock was always may pixels above the bottom even when “bottom: 0%” so i edited. i didnt realize that the culprit was was the transform and spent 20 minutes before i finally igured out hwo to fix it and changed it to translate(-50%, -10%).

…………………………………………………………………………………………………………………………

I added a draggable windows and the first app which is a notes app!
-fixed off center time
-added app dock that functions
-made a functioning notes app
-added draggable windows
-added closable windows
during this session i had one big problem i spent an hour fixing it. it was the save notes button which i added an onclick to but when i did so nothing happened. i thought the logic was wrong and proceeded to spend an hour trying to fix it but after words i noticed that i forgot to type function before the initializing the function and just wrote the function name. I was pretty frustrated at how simple the fix was and now i feel like i lost an hour of my life Lol.

…………………………………………………………………………………………………………………………

anyways the project can be tested on github pages!

I mainly spent my time revamping the UI and adding window dragging!
Changes:

• Swapped the Wallpaper
• Added Window Dragging and closing
• Swapped Color Pallette
• made UI less ‘floaty’
  i spent around ~30 minutes to get the windows to drag and ~15 minutes to close them using java script which was not too hard! unfortunately i still struggle with CSS since while i was making it i noticed that there was a scrollbar at the bottom and the page was wider than the screen. I started off trying to fix it by moving the weather checker(which i still have to make function) more inward but that didn’t give much results, so i tried to change the whole body and set a certain width but that made it worse. after around ~50 minutes i tried changing the top bar’s width from 100% down and that fixed it i used trial and error to find the perfect percent before i get a scroll bar as 99.275%.

I started the project!
-created the index
-added a wallpaper
-added a welcome screen
-added a top bar
-added static time
-added my current weather(i will try to create live weather next update)
-made windows translucent
The first part was going fine until i had to add the image for the music logo onto the welcome! i made the mistake of trying to use position absolute which took the image out of the div which made me lose ~45 minutes of time before i realized that the “position: absolute;” only works on the child so i then i went digging online to find that the best way to do it is to set “display: block; margin: 0 auto;” in style for the image!