Web-OS

Finally. I added a calculator app or made it functional. I think the time would be a lot more if i program the calculator myself, but i chose to use the which is actually very helpful in making the work simpler.
I added a background picker which is great to choose the best background that is suitable in each mood.
I also did a lot of fixes in my code. I honestly think that im ready to submit, it took me quite some work to reach this level im at rn.

I added a lockscreen to the web os, it looks a lot better now, I had some issues with making the time show up in the center, because i used the same id as the one in the navigation bar, therefore i had to do some tweaks in the js for the time, and made a new id for the lockscreenTime. Now when the screen is clicked, the webos opens, with nice scaling animation, i used inspiration from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay. I think i have now a good foundation for a good looking web os, i think i have to do some changes in the apps, i dont have anything in the calculator app, and the settings app looks deserted.

Oh, i also worked on the Browsi app, i think it is finished now, i made the wikipedia page open automatically when clicked by using the . I really like how this is turning to be rn.

Did some fixes in the code, and made the sidebar buttons in the settings app functional. Also i tried running the github page in safari, since i usually use edge, and i found out that my website isnt supported there, it can mainly be seen in the dragging the windows and closing them

I was pretty efficient in this session, phew it was hard to do this. I found a bug in my code, tht made the whole window drag when moving it, the reason was because i gave the windows a wrong id, e.g Appwindowheader4, i should have named it Appwindow4header, i fixed this, and i also did some ui changes, especially with the sidebar, where i united their shape, so it will look the same accross all the apps in the os.
Also, i learned something new, i disabled the scrolling in the page which was pretty annoying by using the overflow:hidden;, i have never knew that this existed, and learned it today.

For the home App, i fixed the ui and made tabs inside of it. Using the w3schools guide, i wanted to do something different from the original guide, i changed most of the code from w3school and made it work for my code. Here is the link for the tabs if you want to follow it from w3schools.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

I have worked with the browsi “app” and i after some struggle finished the css code for the searchbar and the submit button. i also added some buttons that i want to be like the bookmarks which are in chrome, so they show the apps that i mostly use. i have addes three basic apps just for demo, mb i will choose better ones.
I then worked with showing up the name of the app in the bottombar, when hovering over the desktopapp. I couldnt remember how to do it, so i got reminded by using the w3schools, here is the link for the thing.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_display_element_hover

So i just added a new app to my list, which i called Browsi, cuz i couldnt think of any good name. i do not want to make a search function myself and make a database and that stuff, so i decided to make use of google’s search and implement it into my website. Now when i search in the website, and click submit, a new tab opens with the search tht i want. I like this. there are some bugs tho, cuz i cannot search without clicking submit first and then it will request me to write smth and then i can search for stuff.
I got help with stackoverflow, and successfully added googlesearch to my website. here is the link if you want to look into it. https://stackoverflow.com/questions/13822927/how-can-i-add-a-google-search-box-to-my-website
Finally i have to work on the ui cuz it is not as it should be, so i have to do some fixes in my css. Also i just thought of adding a list of like “bookmarks” that will act as my favorite websites when i want to access them, i click on them there.

This session was interesting, i added some more ui changes or tweaks to my main homepage. i added e.g window shadows so it becomes possible to see the window when two windows overlap.
Then i added two dropdown buttons to the topbar, like the macos version, where i added one with About and another button with Help, idk wht to include but i added like 2 information in the content of the dropdown button. I followed the w3schools guide which was very helpful in optimising the design for the dropdown content, so i did not have to use Js anyways :-) Here is the link to the guide if you want to use it.
https://www.w3schools.com/Css/tryit.asp?filename=trycss_dropdown_button

I finally added a new background, which looks a lot better, i found tht the background changing when switching between darkmode and lightmode looked pretty bad, so i made a constant bg on both modes. the source for this image is https://4kwallpapers.com/nature/sunset-colorful-10299.html, i chose the 4k version, which looks very good here, especially when i used a lot of time on working with transperency and blur.

Did the settings dark mode/light mode button alignment, it was kind of tricky mainly because of the div placement, where i began it from the appwindow itself. i should have added the div to the sidbar only, and this fixed the issue.

I also changed the alingment of the appwindows so that they do not all start from teh same positon, top:50% and left:50%, but now when opening the apps, the windows start from different starting positions.

Sooo i learned soo much during this period, i had to follow a guide from w3schools to figure out how to change the darkmode to light mode, since i saw it in multiple different projects. You can see the link that i was inspired from here
W3schools: https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp
for darkmode

I wanted to change from the toggling light mode on from being a button to being a switch, therefore i got inspired by another w3school guide, which has an animated switch. I implemented it
w3schools: https://www.w3schools.com/howto/howto_css_switch.asp
for toggle switch

When i did this, i faced issues that the mode could not change, i tried rechecking multiple times to see what i did wrong, and then i figured out by using AI to help diagnose the issue that it is because of my previous classes that give the elements fixed coloring. Therefore i had to use !important to overide that. That makes so much sense now.

I added many things in this instance. I initially began with the other window, i tried with a calculator, window. I had some issues with making it draggable, and closable, but i managed to get it fixed by making a new variable for the calculator by adding a “2” next to the name.

I then used my knowledge that i learned from the guide, when it was for the topbar. I applied this for the bottom-bar, so now when moving a window dowards the bottom-bar, the bottom-bar stays on top.

I finally learned how to add the battery reading from any computer, it is honestly a lot simpler when doing this with only numbers, but usually, the battery percentage is denoted by the nr in %, but also the color. Therefore i made the if –> then. in js, so if batt % is greater than 50%, then green, and the same for the yellow coloring and the red.

I will work on positioning the battery icon next to the time, so it looks more realistic, than leaving it in the middle.

Worked on animation, i also interchanged the app click from being text to being an image. I made the content more meaningful.

I made the bottombar, and tried to make it like the macos style, which it seems to work, tho i have to do some changes, since i want the other apps to be pushed to the side when hovering over any app.

I will try to add some other apps, just to see how it will look like when animating, and then i will try to add content to the other apps, if i can get to do it.

So i now finally figured out how to make the sidebar content tappable, so now i have content and they are stored in the js code. I also made the window box be editable, so you can write whatever you want in there, but sadly it is not really possible to get it saved.
I also figured out how to change the content of the box, i will make the content more meaningful, but i just wrote some random stuff to test it out,

I had some issues in the code, and i had to remove some dublicates, since i followed a guide and it didnt really specify that i had to remove the old code, so i was stuck with it. Now the js is more cleaned up, and it is now easy to add new content to the notes by adding an additional code to the js.

This looks soo fire, i did not expect this to look that good, i finally fixed the appwindowheader, it looks very nice, tho dont look at the content, im still trying to make it better looking. I had to look a lot on how i can change the positions of the appwindowheader content, which were everywhere, but now they are fixed to the top, and if i want to move the window, i just move it from the appwindowheader.

I will now work on the content of the window, which will look different than this, hopefully.

Yooo i finally got the content page or window to show up, had to do a lot of java script. I also had to make sure that the content page was the draggable page, and not the desktop app itself. I also had to figure out how to make the app open the content page when it gets clicked. Further i had to do some changes in the code to make it general for any app i make, instead of repeating the same js script again and again…

So, my first devlog for this project. I began this project by writing the text in the body and adding a topbar, which is kinda similar to the macos system. I learned how to show up the real time on the page, i really thought that it was difficult, but found out that it is a lot simpler.

I then worked on using css to make the transperency and blur for a more modern OS. I had an issue with the topbar not being stretched totally, but found out that i forgot to add the margin:0 and padding:0. It has been quite a bit since my last project.

I added a wallpaper, and the source for this wallpaper is https://wallpaperaccess.com/dark-nature. I will possibly change it in the future.

Finally i am working on making movable content or windows, it is going well, but i am trying to go in depth to learn as much as possible.

Edit: just to add, i had issues with the git push/pull, therefore i had to use the terminal to get it fixed. Here is the code that i executed:
git add .
git commit -m “first commit”
git push origin main