paint2 elemnets at sa,e random color - Javascript

anonymous
March 28, 2023
186 views
0 votes
2 Answers

I have following code snippest
How would you paint the cards(I need to paint 2 cards at same random color)

for (var i = 0; i < 50; ++i)
{
    grid.innerHTML += '<div onclick="go(this)" class="card"></div> ';


}

const cards = document.querySelectorAll(".card");

const paintCards = () => {
    for (var i = 0; i < cards.length; i += 2)
    {
        console.log(cards.style.backgroundColor)
        cards.style.backgroundColor = generateRandomColor();
        
    }


};
paintCards();

I did it with array of 25 random colors but I need to do it without it

Tags: javascript

Answers

In for loop, step of 2 is being used hence you may use i & i+1 inside the body of the loop.

const grid = document.querySelector('#main');
for (var i = 0; i < 50; ++i) {
  grid.innerHTML += '<div onclick="go(this)" class="card"></div> ';
}

const cards = document.querySelectorAll(".card");
const paintCards = () => {
  for (var i = 0; i < cards.length; i += 2) {
    const color = generateRandomColor();
    cards[i].style.backgroundColor = color;
    cards[i + 1].style.backgroundColor = color;
  }
};
paintCards();

function generateRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

.card {
  width: 50px;
  height: 50px;
  float: left;
}

<div id="main"></div>

UPD: Added an array to keep the randomized colors in it. Once we empty it – let’s fill it again. I’ve used small pool size – e.g. 5 so we would get somehow randomized values. But this soultion is not the best – the distribution for elements that in border of beginning and end of the array would be different. But by this we would guarantee that cards would be colored in pairs. Also added initial painting for the main loop itself. Doing it as inline style. Hope that helps

Hey if I got your right – then you need to generate rnd color and keep it,
then paint two of cards into different color. Painting stuff depends on your req. Now I did paint of current and it’s neighbour,and then move to the next i+2. We could simply paint every odd or even, etc. Hope that helps

let grid = {innerHTML:''};
//we would fill this array dynamically
let randomColors = [];
const sizeOfRandomColors = 5;
let useRandomColors = false
// main idea here - keep 5 random colors, pick them randomly
// in case we filled colors - lets reuse them
// otherwise generate them

    function generateRandomColor() {
        let hexColorRep = "#";
        const hexChars= '0123456789ABCDEF';

        for (let index = 0; index < 6; index++) {
            const randomPosition = Math.floor ( Math.random() * hexChars.length ); 
            hexColorRep += hexChars[randomPosition];
        }
        
        return hexColorRep;
    }
    function getPairedColor() {
        let color = '';
        if (!useRandomColors) {
            color = generateRandomColor();
            randomColors.push(color);
            if (randomColors.length === sizeOfRandomColors) useRandomColors = true;
        } else if (useRandomColors) {
            const randomPosition = Math.floor ( Math.random() * randomColors.length );
            color = randomColors[randomPosition] || '#fff';
            randomColors = randomColors.slice(0,randomPosition).concat(randomColors.slice(randomPosition+1));
            if (randomColors.length === 0) useRandomColors = false;
        }
        
        return color;
    }

    for (var i = 0; i < 50; ++i) {
        const rndColor = getPairedColor();
        grid.innerHTML += `<div onclick="go(this)" class="card" style="backgroundColor:${rndColor}">${i}</div> `;
    }

console.log(grid.innerHTML)

Please signup or login to give your own answer.

Click here to cancel reply.

paint2 elemnets at sa,e random color – Javascript

Answers