How to randomize placement order in a css grid?

Question

I am very new to coding and am trying to make a bingo board that shuffles when you click a button in HTML/CSS/Javascript. Currently, I have a CSS grid that places text div grid items in a 5x5 sequential order. Is there a way to shuffle the div element order?

Ex:

    <div class="grid-item"> 1 </div>
    <div class="grid-item"> 2 </div>
    <div class="grid-item"> 3 </div>
    <div class="grid-item"> 4 </div>
    <div class="grid-item"> 5 </div>

score 0 · Accepted Answer · answered Sep 25 '22 at 21:47

What about something like this?

<html>
<body>

<div id = "bingo">
</div>

<button onclick = "shuffleBoard()">Shuffle</button>

<script>
    makeBoard();

    function makeBoard() {
        var str = "";
        for (var i = 1; i <= 25; i++) {
            str += "<div class = 'grid-item'>" + i + "</div>";
        }
        document.getElementById("bingo").innerHTML = str;
    }

    function shuffleBoard() {
        var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25];
        var str = "";
        while (numbers.length > 0) {
            var i = Math.floor(Math.random() * numbers.length);
            str += "<div class = 'grid-item'>" + numbers[i] + "</div>";
            numbers.splice(i, 1);
        }
        document.getElementById("bingo").innerHTML = str;
    }
</script>

</body>
</html>

How to randomize placement order in a css grid?

1 Answers1