Devlog #4

What I learned

• Learned how to use arrow functions and how to add classes to an HTML element via element.classList.add("...");
• Learned width: fit-content so that I don’t have to guess the width of my div.

Changes & Bug Fixes

Aesthetic tweak: Changed cursor grab to only show when hovering over handle instead of showing over the whole window).

• Reduced repetition and improved scalability by turning open/close window into a generalized function that works for all windows, so I can call the function for future apps.

• A lot of bugs and back-and-forth and commenting out code to add open-close function for the apps. I found out that I needed 2 parameters for the functions closeWindowOnClick and openWindowOnClick. First parameter is used for checking if the open button (app icon) or close button was selected/tapped, and second parameter is used for targeting the specific window that should be opened/closed. The parameters made me very confused because I would sometimes misinterpret the element as the button when the element parameter being passed was linked to the window.

• Added an icon and CSS styling for my first app: poseidon.md

• Added attributions to my README, for the bg image and the icons.

Programming Decisions

• Called addWindowTapHandler() on line 19 instead of calling addWindowTapHandler() for each window directly to reduce redundancy.

• Chose mousedown instead of click for event listener so that the window auto-focus when it is tapped immediately (if click is used then the window will only focus after mouse is up).

What’s Next?

• More README tweaks coming soon!
• More apps and content about Poseidon within each app.

Devlog #3

Some New Features!

Add open and close window functions. You can open by clicking “PoseiOS” in the topbar, and close by clicking the “x” button.

Add left & right padding on top bar.

Bug Fixes

Fix text being highlighted when dragging windows by using user-select: none; cursor: grab;

I encountered a bug where u can drag window by selecting any part of it. I fixed this by changing the id to include “-handle” so that the javascript could recognize it (before the javascript was looking for “handle” instead of “-handle” which created the bug).

Devlog #2

• Implement some JavaScript for draggable windows and a real-time clock on the top bar.
• I added a glass design for the windows and top-bar
  using backdrop-blur and
  background-color: rgba(255, 255, 255, 0.1);
• I learned how to center a div using position absolute and transform. At first, I ran into a problem where the top left corner of the welcome window was centered, but the window wasn’t centered correctly. I found out that this was because I didn’t use transform: translate(-50%, -50%);

Devlog #1:

I started off with some boilerplate code, creating and linking the HTML, CSS, and JS files.

I added some content on the webpage.

I added a background wallpaper for the WebOS.

I styled the site using CSS, but I haven’t added any Javascript yet.

I imported the Inter Font from Google fonts.

A new tag that I learned was using background-position in order to crop/position the background image so that it fit my preferences.