Question 54152 in Javascript Question posted in
A very good W3school tutorial can be found here.

pair of random colors in JS – Javascript

I have the following code
How I "paint" each 2 cards in the same color (I do a memory game)

document.addEventListener('DOMContentLoaded', () => {
    function generateRandomColor() {
        var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
        return randomColor;

    }
    var grid = document.querySelector(".grid");


    for (var i = 0; i < 50; i++) {
        grid.innerHTML += '<div  class="card" ></div>';
        var cards = document.querySelectorAll(".card");
        cards[i].style.backgroundColor = generateRandomColor();
        
    }    
})

have no idea how to do pairs

Tags:

2

Answers


  1. 0

    You could increase the step in your for loop. Also, to avoid redundant lookups of all cards created so far, for up to 50 times, and then ignore up to 49 not actually used, you should the newly created element directly, like this (untested code):

    for (var i = 0; i < 50; i+=2) {
    var randomColor = generateRandomColor();
    for (var j = 0; j < 2; j++) {
         var card = document.createElement('div');
         card.classList.add('card');
         card.style.backgroundColor = randomColor;
         grid.appendChild(card);
    }        
}
    Login or Signup to reply.
  2. 0

    Here is an example. I assumed that the colors should be distributed randomly, and not in a row every 2 cards. So the main thing here – we need to generate a pairs array to assign each color twice for random cards.

    document.addEventListener('DOMContentLoaded', () => {
  function generateRandomColors(colorsCount) {
    const colors = [];
    for (let i = 0; i < colorsCount; i++) {
      colors.push('#' + Math.floor(Math.random() * 16777215).toString(16));
    }
    return colors;
  }

  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  }

  const cardsCount = 50;
  const colorsCount = Math.floor(cardsCount / 2);
  const colors = generateRandomColors(colorsCount);
  const allIndices = Array.from(Array(cardsCount).keys());

  shuffleArray(allIndices);

  const pairs = [];
  for (let i = 0; i < colorsCount; i++) {
    const index1 = allIndices[i * 2];
    const index2 = allIndices[i * 2 + 1];
    pairs.push([index1, index2]);
  }

  const grid = document.querySelector(".grid");
  for (let i = 0; i < cardsCount; i++) {
    const card = document.createElement("div");
    card.className = "card";
    card.innerText = i
    grid.appendChild(card);
  }

  const cards = document.querySelectorAll(".card");
  for (let i = 0; i < colorsCount; i++) {
    const color = colors[i];
    const pair = pairs[i];
    const index1 = pair[0];
    const index2 = pair[1];
    cards[index1].style.backgroundColor = color;
    cards[index2].style.backgroundColor = color;
  }
});
    .grid {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 50px;
  height: 50px;
  text-align: center;
}
    <div class="grid">

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search