<div>
<div>Event Delegation</div>
<ol class="palette" id="palette"></ol>
</div>
body {
font-family: sans-serif;
}
.palette {
list-style-type: none;
display: flex;
flex-wrap: wrap;
width: 300px;
}
li {
width: 20px;
height: 20px;
cursor: pointer;
}
const palette = document.querySelector('#palette');
let paletteBuilder = colourBuilder();
for (const colour of paletteBuilder) {
const element = document.createElement('li');
element.style.backgroundColor = colour;
element.addEventListener('click', handleClick);
palette.appendChild(element);
}
function handleClick(el) {
console.log(`You clicked on this colour: ${el.target.style.backgroundColor}`);
}
function *colourBuilder() {
for (let i = 0; i < 150; i++) {
yield `#${getRandomHex()}${getRandomHex()}${getRandomHex()}`;
}
}
function getRandomHex() {
return Math.round(Math.random() * 256)
.toString(16)
.padStart(2, '0');
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.