BrickOS

Windows -
Starting here, I made the windows more block shaped to fit the LEGO themes instead of having rounded corners.

They now have a better looking design with the Images Window having a custom scrolling wheel and a clean darker line separating the header and actual content instead of a black line.

========================================

Images App
I added this new app with a a similar design to the Welcome Window but the content is completely different.

This app has 3 images and a custom scroll wheel to fit the LEGO theme.

========================================

Notes App
This new notes app has a clean sidebar as well with all the notes that a user can create.

A add new note button is created where when you click it, a popup will come and will ask for the name of the new note.

Everything on the notes content side is editable and is saved to local storage.

========================================

Calendar
There is a new Calendar that pops up in the bottom right corner when the date/time is clocked.

This calendar shows the month and year on the top and shows the days of the money with the days at the top as well as highlights todays date.

========================================

Desktop Icons
Finally the desktop icons have a clean image layout and design.

When you hover over the apps, they will outline a faint yellow to show you are hovering over them and will turn to the pointer cursor.

I added a new OS.css where now all the CSS styling is moved to to this file instead of being cramped in the HTML page. Along with this there was a problem where when I wanted to close out of a window, where I could close the window anywhere in between the top in between and and X of the window which interfered with the dragging of the window, since if I dragged on that side it would drag and as soon as I let go, it would close out of that window. I was trying to change th4e JavaScript to see if it was the problem, but I saw that in the CSS, there was an element to make the X flex: 1, so as soon as I took that out, it started working. Overall, I fixed a crucial error in the OS making it work properly and better and made the code more readable by adding a CSS page.

I made BrickOS start to feel more like an operating system by adding a new features such as window dragging. I made the welcome screen more like a window by changing the colors a little to make it look better by adding a title bar, a close button, a border, and a shadow as well. I also added draggable windows where the welcome window can be clicked and dragged around by the title bar using mouse functions to track where the mouse is going and also update the windows position. Clicking the X button hides the window and clicking the BrickOS on the bottom taskbar brings it back. I also added a new OSscript.js to make the JavaScript loof better instead of making it all be in the HTML. Overall, now it is starting to function more like a OS with windows that can move and can be gotten out of, with now the goal in mind being adding applications that can be clicked.

I continued to develop the welcome home screen for my BrickOS by making it look more like an interface of an operating system instead of just making it look like a webpage. I added a simple taskbar to the bottom of my screen with the OS name and a date and time that works. I also improved the layout by centering the welcome window which is a basic information screen about the OS. I also added a background image from the LEGO movie that fits my OS. I wrote my first JavaScript function for the project, helping me create a live clock using Date() and setInterval(). I overall improved the desktop to look more like a desktop instead of just a webpage and learned to have more dynamic elements such as the time.

I built the welcome screen for my operating system, BrickOS, which is inspired by my passion for LEGO’s. I created a basic HTML structure for the homepage and added heading, paragraphs, images, and a link to the official LEGO website. I also added a list of my favorite type of LEGO’s to build to make the ppage more personalized towards me. Then I learned to style the elements with inline CSS. I just started by trying to match the LEGO themes by adding a font and a background color along with a red “Welcome to BrickOS.”