Can you develop a square div along with a list of color swatches, and program interactive functionality in JavaScript to blend colors upon selection?

Question

Anonymous · Accepted Answer

Color Blender

body {

font-family: sans-serif;

padding: 20px;

}

#colorBox {

width: 200px;

height: 200px;

background-color: white;

border: 2px solid #ccc;

margin-bottom: 20px;

}

.swatch {

display: inline-block;

width: 40px;

height: 40px;

margin: 5px;

cursor: pointer;

border: 2px solid transparent;

}

.swatch.selected {

border-color: black;

}

const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'cyan'];

const swatchesContainer = document.getElementById('swatches');

const colorBox = document.getElementById('colorBox');

let selectedColors = [];

// Create swatches

colors.forEach(color => {

const swatch = document.createElement('div');

swatch.className = 'swatch';

swatch.style.backgroundColor = color;

swatch.dataset.color = color;

swatch.addEventListener('click', () => toggleColor(swatch));

swatchesContainer.appendChild(swatch);

});

function toggleColor(swatch) {

const color = swatch.dataset.color;

if (selectedColors.includes(color)) {

selectedColors = selectedColors.filter(c => c !== color);

swatch.classList.remove('selected');

} else {

selectedColors.push(color);

swatch.classList.add('selected');

}

updateBlendedColor();

}

function updateBlendedColor() {

if (selectedColors.length === 0) {

colorBox.style.backgroundColor = 'white';

return;

}

const rgbValues = selectedColors.map(color => getRGB(color));

const blended = rgbValues.reduce((acc, rgb) => {

acc.r += rgb.r;

acc.g += rgb.g;

acc.b += rgb.b;

return acc;

}, { r: 0, g: 0, b: 0 });

const count = selectedColors.length;

const avgColor = `rgb(${Math.round(blended.r / count)}, ${Math.round(blended.g / count)}, ${Math.round(blended.b / count)})`;

colorBox.style.backgroundColor = avgColor;

}

function getRGB(color) {

const temp = document.createElement('div');

temp.style.color = color;

document.body.appendChild(temp);

const rgb = window.getComputedStyle(temp).color;

document.body.removeChild(temp);

const match = rgb.match(/\d+/g);

return {

r: parseInt(match[0]),

g: parseInt(match[1]),

b: parseInt(match[2])

};

}

Can you develop a square div along with a list of color swatches, and program interactive functionality in JavaScript to blend colors upon selection?

Practice this question with AI

Go Premium

Practice More Questions

Community Answers

Unlock Community Insights