JavaScript / Tailwind.css - issue creating bingo card layout with grid-rows-5

I’m trying to create a Bingo game using vanilla JavaScript, with tailwind.css for the styling. I’m able to create a Bingo card, but the layout of numbers is incorrect. Let me explain:

This is for 75-ball Bingo. The first column, B, contains numbers from 1-15. The second column, I, contains numbers 16-30. The third column, N, contains numbers 31-45. The fourth column, G, contains numbers 46-60. The fifth column, O, contains numbers 61-75.

I am using CSS Grid via Tailwind to try and create the Bingo card. I am able to successfully create each square for each number as an element and insert it into the HTML. I am able to get unique random numbers for the card and insert them into the squares. I have the numbers as sub-arrays of an array, one array for each letter’s group of numbers.

The problem comes in when I try to lay out the card as a 5×5 grid.

I tried using the Tailwind class grid-rows-5. What I wanted to happen was for the first sub-array to populate rows 1 through 5 in one column, then the second array to populate rows 1 through 5 in another column, and so on. What happened instead was that the numbers/squares all printed in one column from the top down.

If I use grid-cols-5 instead of grid-rows-5, then I do get a 5×5 grid. The problem with that though is that the numbers 1 to 15 print all in the first row instead of the first column, and so on with each other group of numbers.

Here is the code:

HTML

<body>
    <button onclick="bingoCard()">Click to create card</button>
    <script src="./script.js"></script>
</body>

JavaScript

const bingoCard = () => {
    const card = document.createElement("div");
    card.setAttribute("id", "card");
    card.classList.add('inline-grid', 'grid-rows-5', 'gap-2', 'bg-zinc-900', 'border-2', 'border-zinc-900');
    document.body.appendChild(card);

    let cardNumbers = [];
    cardNumbers = createCardArrays();
    for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
            const cardCell = document.createElement("div");
            let cardCellNumber = cardNumbers[i][j];
            cardCell.textContent = cardCellNumber;
            cardCell.classList.add('w-28', 'h-28', 'text-5xl', 'flex', 'justify-center', 'items-center', 'bg-pink-100');
            card.appendChild(cardCell);
        }
    }
}
function createCardArrays() {
    const cardNumbers = new Array(5);
    let max, min;
    for (let i = 0; i < 5; i++) {
        cardNumbers[i] = [];
        max = 15 * (i + 1);
        min = max - 14;
        cardNumbers[i] = generateRandomNumbers(5, min, max);
    }
    return cardNumbers;
}

function generateRandomNumbers(count, min, max) {
    let uniqueNumbers = new Set();
    while (uniqueNumbers.size < count) {
        uniqueNumbers.add(Math.floor(Math.random() * (max - min + 1)) + min);
    }
    const uniqueNumbersArray = [...uniqueNumbers];
    return uniqueNumbersArray;
}

Any help is appreciated.

You need to sign in to view this answers

Related Post