Abohisham

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

Soo, when i got payout, the payout was wrong, it had the correct hrs and multiplier, but apparently it gave me only 3 cookies, idk why :-(. I therefore had to add some features to my project. I finally implemented the timer. Now it works, i got some guiding by watching a yt video, but i managed to make it more personal. This timer i made is a pomodoro timer, which runs for 25min, and then There is a popup that says DONE!. Mb i will in the future work on adding a sound effect, because it will ofc be better that way.

I also changed some things in the animation and colors, cuz they looked strange, but now it all is good.

I added more info to README.

I tried to integrate some data that is saved from before into the hardware projects folder, but it was tricky so i just left it be without data, since it was a bit tricky and uneccesary.

I added loading gifs to the pages that did not have content, and that is to prevent the “404 error”.

I had some issues here i tried to fix, mainly the coding projects tab, because the content was always empty, so i had to add some content to make it more alive in a way.

I think i will ship now, stay tuned guys i will make future updates to this projects, and hopefully at that time i will try to get a server and make a database.

I finally made the styling for the coding projects, and i reused the code for the hardware projects. I was thinking to add a upload feature to upload pictures for the hardware storage, but i thought i will leave it out till next shipment and add even more and better features.

I did some changes in bg and other small changes

I worked really hard for this to do the javascript since im a beginner at this, it took much more time than expected, hopefully it was worth it. Now the storing code is somewhat functional, where it is possible to write code and it will get saved locally.
I will do some more work later on css and maybe some additional functionality to the JS

I have done a lot of experimenting with background colors and changed the theme for a more dark mode.
I tried for the fun of it to make the buttons have the so called “liquid glass” look but it didnt look so good because of the background should be more colorful in order to have the optimum look. So i disregarded that idea

Working on making the adding code functional so it gets saved locally when you add it, honestly id prefer if i had a server to save them, but my only option to make this work is to make them be saved locally.

Lets goo
I got the websites page to work with ease, i didnt expect to finish it very fast. I did not want to make a dedicated javascript code for adding a website. Therefore i took the javascript code that i made for the to-dolist and changed the names of the id’s. Now the websites have their own place where they are stored locally :D

FINALLY!!
Just finished the to-do list. The javascript was pain in the ass, it was soo confusing that i had to watch a yt tutorial on how to make the delete and store it locally in the computer, so it is not removed after a refresh.

Though i also struggled a bit with the css, because the listing did not want to center, i tried everything, and at the end found out that i should use the #id from the js that i made in the other tab.

Yea, i think this is better, i changed the background by making a pattern using the css for the background, i also fixed the buttons or tabs which are in the middle of the scree, they could not allign well when they were independent. but i made a box for them and now they fit better in the screen content.

During this session i worked on adding a better background, the one from before looked too bad, it was kind of challenging becuse i tried doing it in the body, but everything seemed to glitch, i think because i did not define the background to be totally behind, therefore i found from tutorial that it is possible to use body::before, which helped. I also added blur for better layout.

I have tried to improve the scaling when making the screen smaller, it worked to some extent, but i still have to do working

I did some improvement by changing the background color, and did some little tweaks in the ui.

Any suggestions how the background should be, i feel that it is too dark??

This was a tiring session, I worked really much on how to get the tabs to be next to the todolist, and continue downwards, but i really struggled this time. I did though some achievement, i added the to-dolist and also did improve the ui a bit.

I will not give up, i will try again to see if i can manage to make the buttons become next to the to-do list.

There is now a search box in my webpage, it was difficult to position it correctly, however i managed to do it. I also added some groups to the home-page. I have done some improvement in the code by removing uneccessary lines.

Improved the layout of the page, made the navigationbar more responsive and deleted some of the uneccesary code that i had.

I also tried to make a time-logging feature, but it needs a lot of calculation and javascript, which is too advanced rn

I also did work on the projects for coding tab, where i improved the “project overview”, which is the list on the left. I feel that i really have improved my knowledge in UI, f.x i have worked in css on margin, gaps the corners, the shdowing, etc. So i have a better understanding about it now.

I worked this time on getting animation on the main index.html page and on hovering effect, there is a shadow showing up.

For the “projects for coding” button, i added a side-navigation bar, which gives an overview over the projects and it took some trial and retries to get the text-boxes to work with the plus button.

I got the basics for the open and collapse to work for the coding projects tab. It now opens when the plus icon is clicked and collapses when it is clicked again.

The form is only a type of shape or idea on how to add the content, their will be some more work on it. I did some research, and if i want to store data, there should be a server to do it, and i dont have one, so sadly i cannot make it store the data i want.
This is the layout so far:

This session really drained me. It was a struggle to connect the VS-code to github, because I haven’t done it before, however, i managed to get it to work and connect through a long time of searching and pasting code in terminal.

I have also worked on fixing the code and making it more managable by making a dedicated css file for the navigation-bar. I tried to make a html file for the whole navigation-bar so i do not have to copy and paste the same code in different tabs, but i learned that i need some kind of server to run the html file. Therefore i decided to keep the code in each document.

I still got more to work on for my navigation-bar

Today I added content to the tabs and improved their responsiveness on click. I also spent quite a bit of time fixing the navigation bar, which was stressful, because it took soo much time, where the issue was because of a wrong class name. It took longer than expected but i finally got it working :-)

Further, I have been working on the aestetics, by adding some images to the buttons and making the images the same size. It really improved the look of the home-page, though i still have got more work to do here to make the buttons perfectly alligned in different screensize, and maybe add some more visuals to the homepage.

This took good amount of time, and i feel like i know how to make a good user interface now, i will of course upgrade the ui so it becomes better

I have began working with the basic in this project. I have made the “logo”, and added buttons with good looking ui, where there is hovering effect so the button becomes darker when hovering. They still do not have content though(which they will have later).

It has been a bit of time since i last coded html, therefore i have experimented a bit with css code. I have to work on the top-bar or what they now call it, because i have issue with the position of the top-bar, where it does not fill the corners of screen.

My code so far:

</body>