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

Improve the web component using the newest approach described in the latest Chris Ferdinandi videos

Browse source
This commit is contained in:
Andrea Fazzi 2024-08-29 10:31:09 +02:00
parent f17292bb08
commit fadbe1ad4c
3 changed files with 76 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,13 +4,15 @@
<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">
<link rel="stylesheet" href="style.css">
<title>Dice Component - Interactivity</title>
</head>
<body>
<h1>Dice Component - Interactivity</h1>
<dice-button></dice-button>
<dice-button>Roll a D6</dice-button>
<dice-button dice-sides="8"></dice-button>
<dice-button dice-sides="20">D&D</dice-button>
<script src="script.js"></script>
</body>

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

@ -1,11 +1,17 @@
class Dice {
const NOTIFICATION_TIMEOUT = 3000;
class Dice {
#array = []
/**
* Instantiate a dice with a given number of sides
* @param {Number} numSides The number of sides
*/
constructor ( numSides = 6 ) {
for (let n = 0; n < numSides; n++) {
this.#array.push(n+1);
}
this.numSides = numSides;
}
/**
@ -15,7 +21,6 @@ class Dice {
* @return {Array} The shuffled array
*/
static #shuffle (array) {
let currentIndex = array.length;
let temporaryValue, randomIndex;
@ -32,53 +37,86 @@ class Dice {
}
return array;
}
/**
* Roll the dice
* @return {Number} The result of the rolling
*/
roll () {
return Dice.#shuffle(this.#array)[0];
}
}
class DiceButton extends HTMLElement {
#dice = new Dice(6);
#dice;
/**
* Instantiate the component
*/
constructor() {
// Inherit parent class properties
super();
// Define component properties and instantiate a dice
this.#dice = new Dice(this.getAttribute("dice-sides") || 6);
// Render the initial HTML content of the component
let userHTML = this.innerHTML.trim();
this.innerHTML = `
<p>
<button>${userHTML ? userHTML : 'Roll a six sided dice'}</button>
<button>${userHTML ? userHTML : `Roll a ${this.#dice.numSides} sided dice`}</button>
</p>
<div aria-live="polite"></div>
<div dice-result></div>
`;
// Get result element
this.result = this.querySelector('[dice-result]')
// LIsten for events
this.addEventListener('click', this);
}
connectedCallback () {
// Attach a click event listener to the button
let btn = this.querySelector('button');
if (!btn) return;
/**
* Show a status message in the form
* @param {String} msg The message to display
*/
showStatus (msg) {
// Create a notification
let notification = document.createElement('div');
notification.setAttribute('role', 'status');
btn.addEventListener('click', this);
}
// Inject it into the DOM
this.result.append(notification);
disconnectedCallback () {
// Add text after it's in the UI
setTimeout(function () {
notification.textContent = msg;
}, 1);
// Remove the click event listener from the button
let btn = this.querySelector('button');
if (!btn) return;
btn.removeEventListener('click', this);
// Remove it after 4 seconds
setTimeout(function () {
notification.remove();
}, NOTIFICATION_TIMEOUT);
}
/**
* Handle events
* @param {Event} event The event object
*/
handleEvent (event) {
let messageEl = this.querySelector('div');
messageEl.innerHTML = `<p>You rolled a ${this.#dice.roll()}</p>`;
this[`on${event.type}`](event);
}
/**
* Handle the click event
* @param {Event} event The event object
*/
onclick (event) {
this.showStatus(`You rolled a ${this.#dice.roll()}`);
}

7
structure-and-scale/dice-component-interactivity/style.css Normal file
View file

@ -0,0 +1,7 @@
dice-button [role="status"] {
background-color: #202b38;
border: 1px solid #e5e5e5;
border-radius: 0.25em;
padding: 0.6rem 1rem;
margin-top: 0.5rem;
}