Making a "Guess the Color" game and can't figure out how to add the correct answer-CodePudding

I'm stumped on how to make the hex code displayed at the top one of the choices on the "board." This is what I've tried so far.

var colorCode = '#'   Math.random().toString(16).slice(2, 8);

hexCode.innerHTML = colorCode;



var divs = document.getElementsByTagName('div')
for (var i = 0; i < divs.length; i  ) {
   divs[i].style.backgroundColor =  '#'   Math.random().toString(16).slice(2, 8); 


}

.panel {
    height: 100px;
    width: 100px;
    border: 2px solid yellow;
    border-radius: 25%;
}

    <header>
        <h1>Guess the Color</h1>
    </header>
 <main>

   <span id="hexCode"></span>
    <div id="one" class="panel"></div>
    <div id="two" class="panel"></div>
    <div id="three" class="panel"></div>
    <div id="four" class="panel"></div>
</main>

https://jsfiddle.net/magoo/6vdfcmnL/6/

CodePudding user response：

Is not clear if you want to show the text above every panel or just make one of the panel below the title the correct one; By the way i edited the code to do both. Try to edit the code like this to check if result as intended.

HTML part:

    <header>
        <h1>Guess the Color</h1>
    </header>
 <main>
    <!-- question -->
    <p id="hexCodeToGuess"></p>
    <br>
    <!-- one -->
    <span id="oneHexCode" class="label"></span>
    <div id="one" class="panel"></div>
    <!-- two -->
    <span id="twoHexCode" class="label"></span>
    <div id="two" class="panel"></div>
    <!-- three -->
    <span id="threeHexCode" class="label"></span>
    <div id="three" class="panel"></div>
    <!-- four -->
    <span id="fourHexCode" class="label"></span>
    <div id="four" class="panel"></div>
</main>

Javscript part:

var colorCodeToGuess = '#'   Math.random().toString(16).slice(2, 8);

// set the first label with the question (the color code to guess)
hexCodeToGuess.innerHTML = colorCodeToGuess;

// list of panels
var panels = document.getElementsByClassName('panel');
// list of labels
var labels = document.getElementsByClassName('label');


// generate the position of the right answer panel (random to make it unpredictable)
var correctPanelIndex = getRandomInt(panels.length);
// cycle trough the divs
for (var i = 0; i < panels.length; i  ) {
    // set by default a random new color
    var currentColorCode = '#'   Math.random().toString(16).slice(2, 8);
  // the div is in the right answer position => override the current color with the colorCodeToGuess generate at the start (the problem of the previous code)
  if(i == correctPanelIndex){
    currentColorCode = colorCodeToGuess;
  }
  // set the color to the panel
    panels[i].style.backgroundColor =  currentColorCode;
  // set the text on a label above the panel
  labels[i].innerHTML =  currentColorCode;

}

// an useful function to get a random integer passing it the numer of values possible
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

You will notice that one of the panels have the same code of the question of the first code written below the title. I've also commented the code so you can remove the unwanted logic consciously.

CodePudding user response：

Your question is a little vague but if i got it right you want to display the background color of one of your divs in hex format. The following code will do that. I have added comments on the code to explain what im doing.

//get your panels (using selector is better that using div)
var divs = document.querySelectorAll(".panel");
for (var i = 0; i < divs.length; i  ) {
  divs[i].style.backgroundColor = '#'   Math.random().toString(16).slice(2, 8);

}

//get the current backgrounds of all panels and add them to an array in hex format
curruntColorsArr = [];
x = document.querySelectorAll(".panel");
for (i = 0; i < x.length; i  ) {
  //get background color
  backgroundColors = x[i].style.backgroundColor
  //convert to hex
  function rgbToHex(rgb) {
    return '#'   rgb.match(/[0-9|.] /g).map((x, i) => i === 3 ? parseInt(255 * parseFloat(x)).toString(16) : parseInt(x).toString(16)).join('')
  }
  //push to array
  curruntColorsArr.push(rgbToHex(backgroundColors));
}

//get random color from the array and set it to innerHTML 
function random_item(items) {
  return items[Math.floor(Math.random() * items.length)];
}

const hexCode = document.getElementById("hexCode")
hexCode.innerHTML = random_item(curruntColorsArr)

.panel {
  height: 100px;
  width: 100px;
  border: 2px solid yellow;
  border-radius: 25%;
}

<header>
  <h1>Guess the Color</h1>
</header>
<main>

  <span id="hexCode"></span>
  <div id="one" class="panel"></div>
  <div id="two" class="panel"></div>
  <div id="three" class="panel"></div>
  <div id="four" class="panel"></div>
</main>