1

So im trying to make a color guessing game So i created a function that generates a color and returns it, which works fine But since i have 3 buttons with #hex code on them 1 button has to be a correct answer and correct #hex has to be displayed in a color box

So im trying to put 3 #hex codes in each button and choose randomly which #hex code is the correct one and display it in HTML

i know the code is very bad but i still got a long way to go...

function randomColor(){
    let randomColor = Math.floor(Math.random()*16777215).toString(16);
    return randomColor
}

function arrayOfColors(){
    let randColorArr = []
}
function generateColors(){    
    colorBox.style.backgroundColor = `#${correctColor}`
    btn.forEach(button => button.innerHTML = `#${randomColor()}`)
}
generateColors()
Improve this question
2
  • I noticed a bug in your code: randomColor will generate invalid colors (with a length other than 6 or 3) with a ~6% chance. You are missing .padStart(6, '0') in your color generation. Also, it will never be able to generate ffffff because you used 16777215 as exclusive upper bound instead of 16777216 (which would have been easier to understand in my opinion as 0x1000000 or 1 << 24 or 2 ** 24 by the way) Commented Oct 19, 2022 at 17:46
  • @CherryDT yeah that's minor that can be fixed later and thats the least of my worries, have to code this thing first which is turning to be a major headache and is part of my homework so to say Commented Oct 19, 2022 at 17:59

2 Answers 2

Reset to default
2

randomColor - I made a correction to your function that will always return a valid color number,

arrayOfColors - I answered your question about the function and it now returns an array with three colors for your three buttons,

randomIntFromInterval - designed to generate numbers in a certain range that you determine,

generateColors -

  1. I drew an array of three colors,
  2. I drew a lottery for the position in the array that would be the correct color,
  3. I gave the div the correct color, and the buttons all three colors including a click event that will check if the user won,
  4. Immediately after clicking, a new game starts.

const colorBox = document.querySelector('div');
const btns = document.querySelectorAll('button');

function randomColor(){
let randomColor = `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, '0')}`;
    return randomColor
}

function arrayOfColors(){
    const arrayOfColors = [...Array(3).keys()].map(() => randomColor());
    return arrayOfColors;
}

function randomIntFromInterval(min, max) { // min and max included    
return Math.floor(Math.random() * (max - min + 1) + min) 
};

function generateColors(){  
    const  arr = arrayOfColors();
    const correctIndexColor = randomIntFromInterval(0, 2);
    colorBox.style.backgroundColor = `${arr[correctIndexColor]}`;
    btns.forEach((button, index) => {
        button.innerHTML = `${arr[index]}`;
        button.onclick = () => {
           if(index === correctIndexColor)
              alert('win');
           else
              alert('faild');
           generateColors();
        }
    });
}

generateColors()
div {
   height: 100px;
   width: 100px;
} 
<button></button>
<button></button>
<button></button>
<div></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

What do function arrayOfColors() and function randomIntFromInterval do?
@CrveniFlash I just edited my answer with an explanation for everything, can you read and tell me if something is still not clear to you?
many things but its alright this program was way above my pay-grade right now as i realized by reading your solution, thought it was much simpler then this, that you very much for the help!!
Instead of the awkward calculation and slicing which a) creates an uneven random distribution and is unable to produce colors like 00ff00 and b) sometimes creates invalid colors such as f04a1. or efe5.3, I recommend simply using Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, '0') - it is easy to read and understand, very straight-forward in its intentions and covers all colors from 000000 to ffffff (and with equal probability for each)
It's still not right (now it has the same issues but worse because the probability for encountering a dot is higher), it would need Math.floor to prevent decimals and padStart to add leading zeroes - see the code in my comment. What it does is: It creates a random number 0 to 0.9999999..., multiplies that to get instead a random number 0 to 0xffffff.fffffffffff... (= 16777215.9999...), then cuts off decimals to get a random integer number 0 to 0xffffff, then converts to hex string, then pads with enough zeroes at the start to always fill 6 characters.
|
1

I don't see the need to declare a arrayOfColors function, when you can just generate a random number between 1 and 3 and assign correctColor to the relative button:

const btn = document.querySelectorAll('button')
const colorBox = document.getElementById('cbox')

function randomColor(){
    let randomColor = Math.floor(Math.random()*16777215).toString(16);
    return randomColor
}

function generateColors(correctColor){    
    colorBox.style.backgroundColor = `#${correctColor}`
    
    btn.forEach(button => button.innerHTML = `#${randomColor()}`)
    
    // GET RANDOM NUMBER BETWEEN 1 AND 3
    const rndBtnIndex = Math.floor(Math.random() * (3 - 1 + 1) + 1)
    
    // ASSIGN THE CORRECT COLOR TO RANDOM BUTTON
    document.querySelector('#btn' + rndBtnIndex).innerHTML = `#${correctColor}`
}

generateColors('ff0000')
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>

<div id="cbox">
  <p>colorBox</p>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.