leanwebclub/structure-and-scale/dice-component-interactivity
2024-08-29 10:31:09 +02:00
..
index.html Improve the web component using the newest approach described in the latest Chris Ferdinandi videos 2024-08-29 10:31:09 +02:00
README.md Add web components solutions 2024-08-23 14:41:23 +02:00
script.js Improve the web component using the newest approach described in the latest Chris Ferdinandi videos 2024-08-29 10:31:09 +02:00
style.css Improve the web component using the newest approach described in the latest Chris Ferdinandi videos 2024-08-29 10:31:09 +02:00

Dice Component - Interactivity

The provided JavaScript code defines two classes: Dice and DiceButton. These classes work together to create a web component that simulates rolling a dice.

  • The Dice class provides a simple API for simulating a die roll, using a static method to shuffle the array of die faces and an instance method to perform the roll.
  • The DiceButton class extends HTMLElement to create a custom web component that encapsulates a Dice instance. It defines the structure of the component and handles user interactions through the connectedCallback and handleEvent methods.
  • Upon clicking the button, the handleEvent method updates the component's display to show the result of the die roll.

References