I am making mini project where you have to guess color code based on the color you see in div which is generated random. One button is correct answer (the real color’s number) and the second button has random number, so you have to guess between two options.
My question is, how I can make the buttons change position, so the correct button is not always on one position.
**Codepen**: https://codepen.io/Sim9n/pen/vYrYyrp
function generateRandomIntegerInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let value5 = generateRandomIntegerInRange(100000, 999999);
document.getElementById("color").style.backgroundColor = `#${value5}`
let k = document.getElementById("dk")
k.textContent = `Correct answer: ${value5}`
document.querySelector("#guess").appendChild(k)
let o = document.createElement("button")
o.textContent = value5
document.querySelector("#firstGuess").appendChild(o)
/////////////
function generateRandomIntegerInRangee(minn, maxx) {
return Math.floor(Math.random() * (maxx - minn + 1)) + minn;
}
let value6 = generateRandomIntegerInRangee(100000, 999999);
// let z = document.getElementById("firstGuess")
// z.textContent = value6
// document.querySelector("#firstGuess").appendChild(z)
let p = document.createElement("button")
p.textContent = value6
document.querySelector("#firstGuess").appendChild(p)
/////////////#color{
background-color: #627246;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(50% , -50%);
} <div id="color"></div>
<div id="guess"></div>
<div id="dk"></div>
<div id="firstGuess"></div>Thank you <3
>Solution :
You could make the div wrapping the buttons (firstGuess) display flex.
Then simply add order 1 or 0 to the button
CSS
#firstGuess {
display: flex;
}
JS
let o = document.createElement("button")
o.textContent = value5
o.style.order = 0
You could make it randomly change each time by checking for value5
o.style.order = value5 > 500000 ? 1 : 0