Box Sorting Site
The layout of the web page is divided into two sections. The first section, on the left, is a combination of a button bar containing a “Generate” button and a box container. When the “Generate” button is clicked, a new box is created in the box container. Each box has a white background and a 4:3 aspect ratio.
The second section, on the right, contains an embedded IRC client using an iframe. The source of the iframe points to a Kiwi IRC client on a specified server. The IRC client runs a
#general channel from the server at
The layout of the page is designed in such a way that it’s flexible, and each section’s width can be adjusted using a resize handle.
onMouseDownfunction listens to the mousedown event. Once this event fires, it sets up listeners for mousemove and mouseup events.
onMouseMovefunction adjusts the maximum width of both the box container and the iframe container as you move the mouse while pressing the left button.
onMouseUpfunction removes the mousemove and mouseup listeners once the left mouse button is released, effectively stopping the resizing operation.
This provides a smooth, intuitive interface for adjusting the layout to the user’s preference, enabling more space for either generating boxes or using the IRC client.
The overall style of the page is modern and simplistic, with a dark background. This design choice highlights the white boxes and helps the colorful IRC client stand out.
Animations are also used for generating new boxes. The boxes “fade in” upon creation, giving a smooth user experience. Furthermore, the ‘Generate’ button changes its background color on hover, which provides feedback to the user.
An external resource used in this application is the Font Awesome library. This is used for the icon inside the ‘Generate’ button. The CSS file for Font Awesome is included in the head of the document, allowing access to a variety of icons.