lundi 23 novembre 2020

Javascript Board Design

I want a JavaScript program to draw a 6x7 board where in the odd rows the first and last tiles are yellow and other tiles are white; and for the even rows, the colors are flipped

So something like this:

enter image description here

<body>
    <div id="div1"></div>
</body>
window.onload = function drawTheCеlls() {
  
    var board = document.getElementById('div1');

    for (var i=0; i<6; i++ ){
        var row = document.createElement('DIV')

        row.className = 'row'
    row.style.flexDirection = i % 2 === 0 ? '' : 'row-reverse'; 
    for (var j = 0; j < 7; ++j){
    var square = document.createElement('DIV')
    square.className = 'square'
    square.style.backgroundColor = j % 2 === 0 ? 'white' : 'black'
    row.appendChild(square)
    }
    board.appendChild(row)
    }

}


  
function drawOneCell(color) {
    
    

    var newButton = document.createElement("button");
    $(newButton).attr("class", color);
    $("#div1").append(newButton);

}

Appreciate the help

Aucun commentaire:

Enregistrer un commentaire