loops.js

let body = document.getElementsByTagName("body");

// global variables to set color
let color = "";
let color_one = "red";
let color_two = "black";

// square size parameters.
let square_width = "100px";
let square_height = "100px";

// grid size parameters.
let rows = 6;
let cols = 6;

// main entry point for the program
main();



function main(){
    
    // loop down the rows.
    for(let i = 0; i < rows; i++){
        
        // container for the row.
        let UI_body = UI_box(String(i));
      
        // loop across the columns.
        for(let j = 0; j < cols; j++){
           
            if(j % 2 == 0 && i %2 == 0){
                color = color_one;
            }
            else {
                color = color_two;

                if(i % 2 != 0 && j % 2 != 0){
                    color = color_one;
                }
            }
            
            // generates a parameterized square and attaches it to the UI_box container.
            square(UI_body, square_width, square_height, color);
        }
    }

    

}