andrea/leanwebclub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add web components solutions

Browse source
This commit is contained in:
Andrea Fazzi 2024-08-23 14:41:23 +02:00
parent c5309b3947
commit f17292bb08
7 changed files with 172 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
structure-and-scale/dice-component-interactivity/README.md Normal file
View file

@ -0,0 +1,19 @@
# 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
* https://leanwebclub.com/learn/structure-and-scale/project-review-dice-component-interactivity/

17
structure-and-scale/dice-component-interactivity/index.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<title>Dice Component - Interactivity</title>
</head>
<body>
<h1>Dice Component - Interactivity</h1>
<dice-button></dice-button>
<dice-button>Roll a D6</dice-button>
<script src="script.js"></script>
</body>
</html>

90
structure-and-scale/dice-component-interactivity/script.js Normal file
View file

@ -0,0 +1,90 @@
class Dice {
#array = []
constructor ( numSides = 6 ) {
for (let n = 0; n < numSides; n++) {
this.#array.push(n+1);
}
}
/**
* Randomly shuffle an array
* https://stackoverflow.com/a/2450976/1293256
* @param {Array} array The array to shuffle
* @return {Array} The shuffled array
*/
static #shuffle (array) {
let currentIndex = array.length;
let temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
roll () {
return Dice.#shuffle(this.#array)[0];
}
}
class DiceButton extends HTMLElement {
#dice = new Dice(6);
constructor() {
super();
let userHTML = this.innerHTML.trim();
this.innerHTML = `
<p>
<button>${userHTML ? userHTML : 'Roll a six sided dice'}</button>
</p>
<div aria-live="polite"></div>
`;
}
connectedCallback () {
// Attach a click event listener to the button
let btn = this.querySelector('button');
if (!btn) return;
btn.addEventListener('click', this);
}
disconnectedCallback () {
// Remove the click event listener from the button
let btn = this.querySelector('button');
if (!btn) return;
btn.removeEventListener('click', this);
}
handleEvent (event) {
let messageEl = this.querySelector('div');
messageEl.innerHTML = `<p>You rolled a ${this.#dice.roll()}</p>`;
}
}
// Define the new web component
if ('customElements' in window) {
customElements.define('dice-button', DiceButton);
}

8
structure-and-scale/dice-component/README.md Normal file
View file

@ -0,0 +1,8 @@
# Dice Library
This is a library that developers can use to roll dice in a variety of
shapes and sizes.
# References
* https://leanwebclub.com/learn/structure-and-scale/project-dice-library/

17
structure-and-scale/dice-component/index.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<title>Dice Component</title>
</head>
<body>
<h1>Dice Component</h1>
<roll-dice></roll-dice>
<roll-dice>Roll a D6</roll-dice>
<script src="script.js"></script>
</body>
</html>

19
structure-and-scale/dice-component/script.js Normal file
View file

@ -0,0 +1,19 @@
class RollDice extends HTMLElement {
constructor() {
super();
let userHTML = this.innerHTML.trim();
this.innerHTML = `
<p>
<button>${userHTML ? userHTML : 'Roll Dice'}</button>
</p>
<div aria-live="polite"></div>
`;
}
}
// Define the new web component
if ('customElements' in window) {
customElements.define('roll-dice', RollDice);
}

2
structure-and-scale/main.go
View file

@ -16,6 +16,8 @@ func main() {
mux.Handle("GET /treasure-chest-js-class/", http.StripPrefix("/treasure-chest-js-class", http.FileServer(http.Dir("treasure-chest-js-class"))))
mux.Handle("GET /treasure-chest-private/", http.StripPrefix("/treasure-chest-private", http.FileServer(http.Dir("treasure-chest-private"))))
mux.Handle("GET /treasure-chest-custom-events/", http.StripPrefix("/treasure-chest-custom-events", http.FileServer(http.Dir("treasure-chest-custom-events"))))
mux.Handle("GET /dice-component/", http.StripPrefix("/dice-component", http.FileServer(http.Dir("dice-component"))))
mux.Handle("GET /dice-component-interactivity/", http.StripPrefix("/dice-component-interactivity", http.FileServer(http.Dir("dice-component-interactivity"))))
log.Println("Start the web server...")
err := http.ListenAndServe(":8080", mux)