Is there a better way to generate a chess board?

February 27, 2023

I am planning on creating a chess game inside of JavaScript in order to test my current skill level, which is not very high. I am trying to dynamically render elements without React because it is difficult to create a React application without create-react-app, so instead I a using document.createElement().

Using document.createElement creates something like this:
the original chess board that I tried to make

class Grid {
    constructor (length, height) {
        this.length = length;
        this.height = height;
    }
    render() {
        let total = this.length * this.height;
        for (let i = 1; i <= total; i++) {
            const whiteSquare = document.createElement('div');
            whiteSquare.style.cssText = 'height:50px;width:50px;background-color:#ff9c9c;display:inline-block;padding:0;';
            whiteSquare.id = `ws${i}`;
            const blackSquare = document.createElement('div');
            blackSquare.style.cssText = 'height:50px;width:50px;background-color:#fa6666;display:inline-block;padding:0;';
            blackSquare.id = `bs${i}`;
            const br = document.createElement('br');
            console.log(`${i}`)
            i % 2 != 0 ? document.getElementById('board').appendChild(whiteSquare) : document.getElementById('board').appendChild(blackSquare);
            i % this.length == 0 ? document.getElementById('board').appendChild(br) : console.log('not it');
        }
    }
}

let board = new Grid(8, 8);
board.render()

I want a chess board that alternates colors, and I know that every 8 it generates it uses another one of the square it used before, so it alternates. However, I am not entirely sure how to implement this into my code.

>Solution :

You could check the rest with two and the rest of the value divided by 8 and take the ceiled value. Or in other words, respect the row.

BTW, please do not use conditional operator for not using the expression. In this case use simple if statement instead.

class Grid {
    constructor (length, height) {
        this.length = length;
        this.height = height;
    }
    render() {
        let total = this.length * this.height;
        for (let i = 1; i <= total; i++) {
            const whiteSquare = document.createElement('div');
            whiteSquare.style.cssText = 'height:50px;width:50px;background-color:#ff9c9c;display:inline-block;padding:0;';
            whiteSquare.id = `ws${i}`;
            const blackSquare = document.createElement('div');
            blackSquare.style.cssText = 'height:50px;width:50px;background-color:#fa6666;display:inline-block;padding:0;';
            blackSquare.id = `bs${i}`;
            const br = document.createElement('br');
            console.log(`${i}`)
            document
                .getElementById('board')
                .appendChild(i % 2 === Math.ceil(i / this.height) % 2
                    ? whiteSquare
                    : blackSquare
                );
            if (i % this.length == 0) document.getElementById('board').appendChild(br);
            else console.log('not it');
        }
    }
}

let board = new Grid(8, 8);
board.render()