Dice - Web Component

100%

Dice - Web Component

✓ Published0🌍 Public

Last edited Feb 28, 2023

Created on Feb 28, 2023

This example demonstrates a custom web component that renders a dice-rolling button and an accessible output area. The component, defined as `roll-dice`, uses the `HTMLElement` class and the `customElements.define` API to encapsulate its template, which includes a button with customizable text and a `div` with an `aria-live` attribute for screen-reader announcements. The component dynamically replaces its original content with this structure upon instantiation, supporting multiple instances on a page. No dice-rolling logic is implemented; only the component’s markup and lifecycle setup are shown.

AI-generated description

Similar vizzes

Loading thumbnail…

Dice - Web Component

This example demonstrates a custom web component called `roll-dice` that simulates rolling a six-sided die. The component displays a button and an accessible live region; clicking the button triggers a shuffle of the dice sides array, and the resulting value is announced in the `aria-live` region. It uses the custom elements API via `HTMLElement` and `customElements.define`, with a static private shuffle method that implements the Fisher–Yates algorithm. No external libraries are used; the behavior is self-contained in the component’s constructor and callbacks.

Aangusgrant

91% match

Loading thumbnail…

Dice - Shadow DOM

A custom element named `roll-dice` demonstrates the Shadow DOM, rendering a button and an `aria-live` message region within a closed shadow root. The component shuffles an array of dice values and displays the result on click, using the `attachShadow()` API and custom element lifecycle callbacks. External styling applies CSS custom properties and `::part(btn)` selectors to alter the button’s appearance, including a lurid variant. The example shows how Shadow DOM encapsulates structure while enabling targeted style customization through exposed parts.

Aangusgrant

83% match

Loading thumbnail…

Dice - Shadow DOM

A custom `<roll-dice>` element displays a button labeled "Roll a D6" and a live region for results. Clicking the button shuffles a fixed array of numbers 1 through 6 and reports the first value as the roll outcome. The example demonstrates the Shadow DOM API, using `attachShadow` with a closed mode, a `<slot>` for the button label, and private class fields for encapsulation. It also relies on the Custom Elements lifecycle callbacks `connectedCallback` and `disconnectedCallback` to manage event listeners.

Aangusgrant

77% match

Loading thumbnail…

Dice Library

This example presents a "Dice Library" as a plain HTML page with a title and minimal styling, but all interaction occurs in the browser console. The code defines seven dice-rolling functions—`d2`, `d4`, `d6`, `d8`, `d10`, `d12`, and `d20`—each returning a random integer within its respective range. Each function uses a Fisher–Yates shuffle algorithm to randomly reorder an array of sequential numbers and then extracts the first element, adding one to yield a 1-based result. The functions are exposed via a module pattern, allowing console users to call them directly, such as `roll.d20()`, to simulate dice rolls without any visual output.

Aangusgrant

77% match

Loading thumbnail…

Seven Seas

Seven Seas is a playful interactive demonstration of custom web components built with JavaScript classes and the Shadow DOM API. The visualization combines a RollDice element, which shuffles an array of die faces and announces the result via an aria-live region for accessibility, with a TreasureChest class that tracks accumulated bronze, silver, and gold loot through a chainable API and custom events. When a user clicks the roll button, the dice component updates the displayed result, and the treasure chest accumulates values through its add methods, emitting events that could be used to trigger visual updates. The example showcases how encapsulated web components and event-driven architecture can create a simple game-like interaction, with the dice roll outcome feeding into the treasure collection system. Styling is handled with CSS custom properties for flexibility.

Aangusgrant

74% match

Loading thumbnail…

Dice - ES Modules

This example demonstrates JavaScript ES Modules by simulating dice rolls in the browser console. It imports the `d6` and `d20` functions from a separate `roll.js` module, then logs the results of rolling a six-sided and twenty-sided die. The module defines dice size arrays and uses a Fisher-Yates shuffle algorithm to randomly select a value from each array. The page itself displays only a heading and brief instruction, with all output occurring in the developer console.

Aangusgrant

74% match

Loading thumbnail…

Dice - ES Modules

This example demonstrates how JavaScript ES Modules enable code reuse by separating dice-rolling logic into an external file. The page imports the `d6` and `d20` functions from `roll.js`, rolls one six-sided and one twenty-sided die, and logs the results to the browser console. The `roll.js` module defines dice arrays and uses a shuffle function to randomly select values, exporting seven dice types (`d2` through `d20`). The HTML file contains only minimal styling and a script tag with `type="module"`, highlighting the modular import/export pattern without any visual output.

Aangusgrant

74% match

Loading thumbnail…

Random Digit Dice

This example visualizes random digit generation as a dice-rolling game. A grid of 20 circles represents possible outcomes, and clicking the Play button randomly selects a digit (0-9), coloring the corresponding circles orange. The code uses D3.js v5 selection methods like `d3.select` and `attr` to update circle fills. A Reset button restores all circles to black. The visualization renders as an SVG with IDs for each circle, and the random number logic is implemented in plain JavaScript using `Math.random()`.

SSreenivasulu

63% match