Finished the windowing system and a bottom panel!

What’s new

• Loading screen
• Windows with maximise, minimise and close buttons
• Bottom panel with time and power off button

What I’ll be working on next

Next, I will be making the windows draggable, and creating icons for the apps.

I’ll also be improving the loading screen, which currently only consists of the following code.

<div id="boot">
    <div style="text-align: center;">
        <h1>Nicholas' Operating System</h1>
        <p id="loading">Loading...</p>            
    </div>
</div>

Problems I faced

When creating the window functions, which manages maximise, minimise and close buttons, it did not seem to work. I realised later that the function name was actually overwriting a built-in function as it was initially named close()! In the end I renamed it to closeW(), where W stands for window.

I also faced issues with the height of the <main>. Initially, the height of main was set to 100%, which failed to work. After some searches online, I tried replacing 100% with 100dvh, which worked perfectly!