Random point inside a div | JavaScript Mastery - Programming & Coding Community | Page 1

Here is my HTML:

    <button onclick="gpaNextFunction()" id="gpa-next-button">HERE</button>
    <div id="gpa-game-area"></div>
    <p id="gpa-result">1.45</p> ```

And the CSS:

#gpa-game-area {
position: absolute;
width: 50vw;
height: 25vw;
background-color: rgba(0, 0, 0, 0); /* Fully transparent */
border: 2px solid #000;
overflow: hidden;
z-index: 6;
left: 50%;
top: 150vw;
transform: translate(-50%, -50%);
}

#gpa-start-button {
font-family: 'Space Mono', monospace;
color: white;
font-size: 3vw;
z-index: 7;
position: absolute;
white-space: nowrap;
left: 50%;
top: 150vw;
transform: translate(-50%, -50%);
}```

#gpa-next-button {
    font-family: 'Space Mono', monospace;
    color: white;
    font-size: 3vw;
    z-index: 8;
    position: absolute;
    white-space: nowrap;
    left: 50%;
    top: 150vw;
    transform: translate(-50%, -50%);
    display: none; /* Initially hidden */
}

#gpa-result {
    font-family: 'Space Mono', monospace;
    color: white;
    font-size: 5vw;
    z-index: 9;
    position: absolute;
    white-space: nowrap;
    left: 50%;
    top: 150vw;
    transform: translate(-50%, -50%);
    display: none; /* Initially hidden */
}```

And last but not least the JS:

const result = document.getElementById("gpa-result");
const startBtn = document.getElementById("gpa-start-button");
const nextBtn = document.getElementById("gpa-next-button");

const gameArea = document.getElementById("gpa-game-area");

let iteration = 1;

function gpaStartFunction() {
console.log('Started!');
startBtn.style.visibility = "hidden"; // Hide it
nextBtn.style.display = "block"; // Make it visible
gpaNextFunction();
}

function gpaNextFunction() {
if (iteration >= 10) {
nextBtn.style.visibility = "hidden"; // Hide it
result.style.display = "block"; // Make it visible
}

const randomX = randomInRange(0, gameArea.clientWidth);
const randomY = randomInRange(0, gameArea.clientWidth);

nextBtn.animate({
    left: `${randomX}px`,
    top: `${randomY}px`
}, {duration: 250, fill: "forwards"});

console.log(nextBtn.style.transform);

iteration++;

}

function randomInRange(min, max) {
return(Math.floor((Math.random() * (max - min) + 1) + min));
}```

#Random point inside a div