script.js

const container = document.querySelector('.container');

for (let i = 0; i < 49; i++) {
    const colorBox = document.createElement('div');
    colorBox.classList.add('color-box');

    const colorCode = document.createElement('span');
    colorCode.classList.add('color-code');
    colorBox.appendChild(colorCode);

    const copyBtn = document.createElement('button');
    copyBtn.innerText = "Copy";
    colorBox.appendChild(copyBtn);

    container.appendChild(colorBox);
}

function randomColor() {
    const chars = "0123456789ABCDEF";
    const colCodeLen = 6;
    let colorCode = "";

    for (let i = 0; i < colCodeLen; i++) {
        const randomNum = Math.floor(Math.random() * 16);
        colorCode += chars.substring(randomNum, randomNum + 1);
    }
    return colorCode;
}

const colContElems = document.querySelectorAll('.color-box');
genColor();

function genColor() {
    for (let i = 0; i < colContElems.length; i++) {
        const colorBox = colContElems[i];
        const newColCode = randomColor();
        const colorCode = colorBox.querySelector('.color-code');

        colorBox.style.backgroundColor = "#" + newColCode;
        colorCode.innerText = "#" + newColCode;
    }
}

colContElems.forEach((colorBox) => {
    const copyBtn = colorBox.querySelector('button');
    const colorCode = colorBox.querySelector('.color-code');

    copyBtn.addEventListener('click', () => {
        copyToClipboard(colorCode.innerText);
    })
})

function copyToClipboard(text) {
    navigator.clipboard.writeText(text)
        .then(() => {
            alert("Color code copied to clipboard : " + text);
        })
        .catch((err) => {
            console.error("Failed to copy the color code :(", err);
        });
}