Untitled

100%

✓ Published0🌍 Public

Last edited Sep 17, 2021

Created on Sep 17, 2021

This example displays a grid of 50 rounded black squares arranged in a flexible, wrapping layout on a white background. It demonstrates basic DOM manipulation and styling using vanilla JavaScript and CSS. The code creates each square with `document.createElement('div')` and appends it to the body within a loop, while CSS flexbox handles the responsive positioning and border-radius for the rounded corners. The page serves as a simple exercise in programmatic element generation and layout.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Test HTML

A grid of 50 black rounded squares displays a minimalist visual pattern across the viewport. Each square is a plain HTML `div` element, styled with CSS properties including `background-color`, `width`, `height`, and `border-radius`. A JavaScript `for` loop programmatically creates and appends each square to the document body using `document.createElement` and `document.body.append`. The layout uses flexbox with `flex-wrap` to arrange the squares in rows. The page contains no external libraries, relying solely on native DOM manipulation and inline CSS.

MManuela Paganini

86% match

Loading thumbnail…

Hello HTML

This example generates a neat grid of fifty black squares on a plain white page. Using a simple `for` loop, it creates and appends `div` elements directly to the document body, styling them with CSS flexbox and border-radius for a rounded look. No external libraries are involved, relying solely on native JavaScript DOM manipulation and CSS to produce the static, evenly spaced visual pattern. The result is a minimal, purely HTML-based composition demonstrating basic procedural generation.

AAlex Naveen

83% match

Loading thumbnail…

Fork of

This example displays a grid of small, green rounded squares that fill the browser window. The page uses plain JavaScript to create and append 50 div elements to the document body via a `for` loop, relying on the DOM API `document.createElement` and `document.body.append`. Each square has a fixed 84-pixel size and margin, positioned automatically with CSS flexbox wrapping. The visual result is a simple, uniform pattern of tiles without any interactive behavior or data-driven logic.

Kkhannoorb

82% match

Loading thumbnail…

Fork of Fork of

This example displays a grid of fifty small, green rounded squares that are added directly to the page body. The code uses plain HTML and CSS for styling, while a simple JavaScript `for` loop with `document.createElement` and `document.body.append` generates the squares. Each square is a fixed-size `div` element, and the layout wraps them using CSS `flex-wrap`. No external libraries or data sources are used; the visualization is purely a procedural arrangement of styled elements.

Kkhannoorb

82% match

Loading thumbnail…

Fork of HTML Starter

This example displays a grid of 100 circular blue elements that turn red on hover, demonstrating how CSS styling and JavaScript interact to create interactive visuals. The code uses vanilla JavaScript with the Document Object Model (DOM) API, specifically `document.createElement` and `document.body.append`, to generate the circles dynamically. Styling relies on CSS flexbox for layout, `border-radius` for round shapes, and the `:hover` pseudo-class to change background color. The visualization shows a simple, responsive pattern where each circle responds independently to user interaction, illustrating basic DOM manipulation and event-driven styling without external libraries.

YYiorgos Bagakis

75% match

Loading thumbnail…

HTML Starter

This example renders two static gray squares on a blank HTML page, demonstrating the minimal setup required for a web-based visualization. The code uses plain HTML and CSS, with no external libraries or data sources. It includes two identical 50-pixel squares, styled with the `background-color` property, and centers the body text at a large font size. The example serves as a bare bones starting point for building more complex visualizations in a browser, highlighting the foundational structure of an HTML document and its embedded style rules.

Rrichad97

74% match

Loading thumbnail…

Invisible dots

Fifty identical black rounded squares fill a browser window, each rendered as a plain `<div>` with no visible content, creating a uniform grid of "invisible dots" against the white page. The example uses a simple `for` loop in vanilla JavaScript to append each element to the document body, with CSS flexbox controlling the wrap layout. The code intentionally corrupts the loop syntax with malformed `i < 50` conditions, revealing an authoring error that prevents execution. No external libraries or data sources are used; the visualization relies solely on raw DOM manipulation and static styling.

Ggragors123@gmail.com

74% match

Loading thumbnail…

Untitled

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition. It demonstrates how CSS classes and inline attributes style the shapes, including fill colors, strokes, stroke widths, and transforms for scaling and translation. The code uses React to render the SVG markup within an HTML page, with a linked stylesheet defining styles for groups and individual elements. No interactive behavior or data binding is present; the visualization serves purely as a styling and layout demonstration.

Xxychen0612.cs09@nycu.edu.tw

74% match