AMD Module Examples

100%

AMD Module Examples

✓ Published0🌍 Public

Last edited Sep 11, 2015

Created on Sep 11, 2015

This example displays a grid of 24 colored boxes, each containing placeholder text. It shows how to generate random hexadecimal color values and apply them as background colors. The page uses plain JavaScript with the `insertAdjacentHTML` method to dynamically add the div elements to the DOM. A custom `randomColor` function builds light or dark hex codes by selecting characters from predefined key arrays, then concatenating them into a six-digit string. The result is a colorful, evenly spaced layout created entirely with client-side scripting.

AI-generated description

Similar vizzes

Loading thumbnail…

Javascript Random Color Array

This example displays a static set of fifty distinct hex color swatches arranged in a simple grid, drawn from a hardcoded JavaScript array of color values. The visualization uses plain JavaScript and the Canvas API to render each color as a filled rectangle, with no interactivity or animation. The code defines the color palette directly in the `colorArray` variable, which is then iterated over to produce the visual output.

Aackuser

74% match

Loading thumbnail…

AI-Generated Colors

Three flat, solid-color boxes display the hexadecimal values #00B8D4, #7ED957, and #FEBD00. The boxes are ordinary HTML `div` elements styled with fixed width and height via CSS. The example demonstrates how a minimal static layout can present color swatches without any JavaScript libraries or data processing, relying solely on inline `style` attributes for background colors.

CCurran Kelleher

70% match

Loading thumbnail…

random light or dark HEX color fn

This example demonstrates a utility function that generates random hexadecimal color strings, either light or dark depending on a boolean argument. It shows a simple technique for constraining color brightness by selecting characters only from specific hex ranges—`a` through `f` for light colors and `0` through `5` for dark ones. The function builds a six-character string by repeatedly picking a random index from the appropriate key array using JavaScript’s `Math.random` and `Math.floor`. No external libraries are used; the code relies solely on native JavaScript string concatenation and array indexing to produce the final color value.

Aamoradi

68% match

Loading thumbnail…

Gist ec761bad0f5e7bfb19f46d45ba0b3355

This example defines a small JavaScript utility that converts hexadecimal color codes into their red, green, and blue component values. The code presents the `hexToRgb` function, which first parses the hex string—overlooking an optional leading `#`—into an integer, then extracts the separate color channels using bit shifts and bitwise AND operations. The function returns an array of three numbers, each representing the intensity of a channel. This demonstrates a modular approach to color handling, using only core JavaScript without any external libraries or APIs.

MMAKIO135

67% match

Loading thumbnail…

AI-Generated Colors with D3

Three colored boxes display the hex colors #00B8D4, #7ED957, and #FEBD00 in a row. The example demonstrates a minimal D3.js workflow: using `d3.select` on the body, `selectAll('div')` with a data join, and `enter().append('div')` to create boxes styled via `.style('background-color', ...)`. The data array holds the color strings directly, and the styling is applied per datum, showing how D3 maps data to visual elements. The code is generated by ChatGPT and uses D3 v6.

CCurran Kelleher

67% 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

66% match

Loading thumbnail…

Fork of HTML Starter

This interactive color generator displays harmonious color palettes based on color theory principles, presenting six color swatches per scheme with HEX, RGB, and HSL values. Using vanilla JavaScript, the application implements HSL-to-RGB conversion through custom mathematical functions and generates monochromatic, analogous, complementary, triadic, and tetradic schemes. Users click buttons to generate random colors or palettes, and click individual cards to copy hex values to the clipboard. The interface uses CSS grid for responsive layout and CSS transitions for hover effects and animations.

KKareena

65% match

Loading thumbnail…

d3.scale.category20() randomizer

This example demonstrates a randomizer for D3’s categorical color palette, replacing the standard `d3.scale.category20()` colors with newly generated hexadecimal values. It first shows how the original palette’s colors appear in the page’s SVG elements, then swaps them by iterating over the old color strings. The code uses `d3.scale.category20().range()` to capture the initial palette, maps each color to a random `#`-prefixed hex code via `Math.random`, and updates inline styles and `fill` attributes with `d3.selectAll`. Pressing the up arrow re-runs the script, reassigning the palette each time. The data source is the existing DOM elements’ style and attribute values.

11wheel

65% match