Improve the web component using the newest approach described in the latest Chris Ferdinandi videos
This commit is contained in:
parent
f17292bb08
commit
fadbe1ad4c
3 changed files with 76 additions and 29 deletions
|
|
@ -4,13 +4,15 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
<title>Dice Component - Interactivity</title>
|
<title>Dice Component - Interactivity</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Dice Component - Interactivity</h1>
|
<h1>Dice Component - Interactivity</h1>
|
||||||
|
|
||||||
<dice-button></dice-button>
|
|
||||||
<dice-button>Roll a D6</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>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,17 @@
|
||||||
class Dice {
|
const NOTIFICATION_TIMEOUT = 3000;
|
||||||
|
|
||||||
|
class Dice {
|
||||||
#array = []
|
#array = []
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instantiate a dice with a given number of sides
|
||||||
|
* @param {Number} numSides The number of sides
|
||||||
|
*/
|
||||||
constructor ( numSides = 6 ) {
|
constructor ( numSides = 6 ) {
|
||||||
for (let n = 0; n < numSides; n++) {
|
for (let n = 0; n < numSides; n++) {
|
||||||
this.#array.push(n+1);
|
this.#array.push(n+1);
|
||||||
}
|
}
|
||||||
|
this.numSides = numSides;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -15,7 +21,6 @@ class Dice {
|
||||||
* @return {Array} The shuffled array
|
* @return {Array} The shuffled array
|
||||||
*/
|
*/
|
||||||
static #shuffle (array) {
|
static #shuffle (array) {
|
||||||
|
|
||||||
let currentIndex = array.length;
|
let currentIndex = array.length;
|
||||||
let temporaryValue, randomIndex;
|
let temporaryValue, randomIndex;
|
||||||
|
|
||||||
|
|
@ -32,55 +37,88 @@ class Dice {
|
||||||
}
|
}
|
||||||
|
|
||||||
return array;
|
return array;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* Roll the dice
|
||||||
|
* @return {Number} The result of the rolling
|
||||||
|
*/
|
||||||
roll () {
|
roll () {
|
||||||
return Dice.#shuffle(this.#array)[0];
|
return Dice.#shuffle(this.#array)[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class DiceButton extends HTMLElement {
|
class DiceButton extends HTMLElement {
|
||||||
|
|
||||||
#dice = new Dice(6);
|
#dice;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instantiate the component
|
||||||
|
*/
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|
||||||
|
// Inherit parent class properties
|
||||||
super();
|
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();
|
let userHTML = this.innerHTML.trim();
|
||||||
|
|
||||||
this.innerHTML = `
|
this.innerHTML = `
|
||||||
<p>
|
<p>
|
||||||
<button>${userHTML ? userHTML : 'Roll a six sided dice'}</button>
|
<button>${userHTML ? userHTML : `Roll a ${this.#dice.numSides} sided dice`}</button>
|
||||||
</p>
|
</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
|
* Show a status message in the form
|
||||||
let btn = this.querySelector('button');
|
* @param {String} msg The message to display
|
||||||
if (!btn) return;
|
*/
|
||||||
|
showStatus (msg) {
|
||||||
|
// Create a notification
|
||||||
|
let notification = document.createElement('div');
|
||||||
|
notification.setAttribute('role', 'status');
|
||||||
|
|
||||||
|
// Inject it into the DOM
|
||||||
|
this.result.append(notification);
|
||||||
|
|
||||||
|
// Add text after it's in the UI
|
||||||
|
setTimeout(function () {
|
||||||
|
notification.textContent = msg;
|
||||||
|
}, 1);
|
||||||
|
|
||||||
|
// Remove it after 4 seconds
|
||||||
|
setTimeout(function () {
|
||||||
|
notification.remove();
|
||||||
|
}, NOTIFICATION_TIMEOUT);
|
||||||
|
|
||||||
btn.addEventListener('click', this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
disconnectedCallback () {
|
/**
|
||||||
|
* Handle events
|
||||||
// Remove the click event listener from the button
|
* @param {Event} event The event object
|
||||||
let btn = this.querySelector('button');
|
*/
|
||||||
if (!btn) return;
|
handleEvent (event) {
|
||||||
|
this[`on${event.type}`](event);
|
||||||
btn.removeEventListener('click', this);
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle the click event
|
||||||
|
* @param {Event} event The event object
|
||||||
|
*/
|
||||||
|
onclick (event) {
|
||||||
|
this.showStatus(`You rolled a ${this.#dice.roll()}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEvent (event) {
|
|
||||||
let messageEl = this.querySelector('div');
|
|
||||||
messageEl.innerHTML = `<p>You rolled a ${this.#dice.roll()}</p>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue