JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bingo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="bingo-board"></div>
</body>
</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

#bingo-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 5px;
}

.bingo-cell {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 2px solid #000;
    font-size: 18px;
    cursor: pointer;
    user-select: none;
}

.bingo-cell.marked {
    background-color: lightgreen;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const board = document.getElementById('bingo-board');
    const numbers = [
    	"In die Fresse gefuchtelt",
    	"Ich seh dich",
      "Streichel mich!",
      "Wieso vaulte ich so langsam?!",
      "Kim flucht",
      "Jemand kommt auf Lottis Liste",
      "Hohle gezogen",
      "Boah! Es ist ... Killer!",
      "Generator knallt",
      "Nicholas Cage flirtet mit Talita",
      "Friss Holz!",
      "Ich spring selbst!",
      "Nora findet den Killer",
      "Du kleine Ratte!",
      "Er kommt!",
      "Geht raus! Lasst mich zurück!",
      "Oh Nicholas Cage! (Oder sein neuer Film)",
      "Ich werde verfolgt!",
      "Jemand fällt am Haken",
      "Ich rufe!",
      "Ich zieh auf!",
      "Jemand s...it",
      "Jemand lacht selbstgefällig",
      "Patrick lockt den Killer weg",
      "Es ist die Schulzmap"];

    // Shuffle the numbers array
    for (let i = numbers.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [numbers[i], numbers[j]] = [numbers[j], numbers[i]];
    }

    // Create the bingo cells
    numbers.forEach(number => {
        const cell = document.createElement('div');
        cell.classList.add('bingo-cell');
        cell.textContent = number;
        cell.addEventListener('click', () => {
            cell.classList.toggle('marked');
        });
        board.appendChild(cell);
    });
});