skip to Main Content

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

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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)
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search