JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<a href="#" id="send">Click Me</div>

JavaScript

$.fn.puissance4 = function(x,y) {
    $(document).ready(() => {

        var color_count = 0;
        // $(document).on('click', function(){
        //  $('body').show('.grid')
        // })
        // Genere le container     
        $('body').append('<div class="grid"></div>');
        $('.grid').css('width', (100*x)+10+'px' );

        $('.grid').hide();
        $('#send').click(function(){
            $('.grid').slideDown(); 
        })              
        //Genere la grille    
        for (var i = 1; i <= x; i++) {
            // Added "row" so we can see the rows
            $('.grid').append('<div class="rowe'+i+'">row</div>');
            for (var j = 1; j <= y; j++) {
                $('.rowe'+i).append('<div class="cell" id="cell'+i+'-'+j+'" ></div>');    
            }
        }    
        //PLacement Jetons &&  Previsualisation    
        $(document).on('click', '.cell', function () {
            if (color_count % 2 === 0) {
                var player1 = "red";
                color_count += 1;
            } else {
            // $(this).css("background-color" +player2);
            var player1 = 'yellow';
            color_count += 1;
            }
            $(this).css("background-color", player1);    
        })
    })
}
$('body').puissance4(7,6);