Esercizio guidato scacchiera (Non finito)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scacchiera</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

File style.css

#tbl{
    border: 2px solid black;
    border-spacing: 0px;
    width: 640px;
    height: 640px;
    margin: auto;
    align-items: center;
}
.pari{background-color: white;}
.disp{background-color: black;}

File script.ts

window.onload = (): void => {
    // Creazione tabella
    const table: HTMLTableElement = document.createElement('table');
    table.id = 'tbl';

    for (let i = 0; i < 8; i++) { // 8 righe
        const tr: HTMLTableRowElement = document.createElement('tr');

        for (let j = 0; j < 8; j++) { // 8 colonne
            const td: HTMLTableCellElement = document.createElement('td');
            td.className = (i + j) % 2 === 0 ? 'pari' : 'disp';
            td.style.backgroundColor = (i + j) % 2 === 0 ? 'white' : 'black';

            // Eventi mouseover e mouseout
            td.addEventListener('mouseover', () => {
                td.style.backgroundColor = 'lime';
            });

            td.addEventListener('mouseout', () => {
                td.style.backgroundColor = td.classList.contains('pari') ? 'white' : 'black';
            });

            tr.appendChild(td);
        }

        table.appendChild(tr);
    }

    document.body.appendChild(table);
};