Exercice 4 : boxes

by CloughyLow

HTML

<div class="box modelBox" >
    <div class="innerBox">
        <label>
            How many divs do you want ?<br />
            <input type="range" id="inputNbr" value="30" max="50" min="10" step="1"><br />
            <input type="submit" value="ok"/>
        </label>
    </div>
</div>

<div class="box contentBox"> 
    
</div>

CSS

.box {
    width: 421px;
    height: 100px;
    background: #d2dd2d;
    border: none;
    text-align: center;
    color: #000;
    margin: 0 30px 30px 0;
    float: left;
}
.modelBox .innerBox {
    padding: 20px;
}
.modelBox input[type='text'] {
    width: 50%;
    text-align: center;
}
.contentBox {
    background: #ddd;
    position: relative;
}
.contentBox .lego {
    float: left;
    font-size: 8px;
}
.contentBox .lego:nth-child(even)  {
    background: #b2b2b2;
}

JavaScript

function createDivs(number) {

    var min_wanted_divs_width = 6;
    var min_wanted_divs_height = 20;
    var nbr_of_divs_per_line = 10;
    var box_width = $('.modelBox').outerWidth();
    var box_height = $('.modelBox').outerHeight();
    var rest_box_width = box_width;
    var rest_box_height = box_height;
    var rest_divs_to_create = number;
    var boxes = [];
    var colonnes = 0;
    var i = colonnes;
    
    $('.contentBox .lego').remove();
    
    while ( rest_divs_to_create > 0) {
        i++;
        boxes[i] = [[]];
        var randomHeight = Math.floor(Math.random() * (rest_box_height/4) );
        randomHeight = randomHeight < min_wanted_divs_height && randomHeight < rest_box_height - min_wanted_divs_height ? min_wanted_divs_height : randomHeight;
        
        if (rest_divs_to_create <= nbr_of_divs_per_line) {
            nbr_of_divs_per_line = rest_divs_to_create ;
            randomHeight = rest_box_height;
        }

        for (var ii = 0 ; ii < nbr_of_divs_per_line ; ii++) {
 
            if (ii+1 != nbr_of_divs_per_line) {
                var randomWidth = Math.floor(Math.random() * (rest_box_width / (nbr_of_divs_per_line /2)));
                boxes[i][ii] = [randomWidth < min_wanted_divs_width && randomWidth < rest_box_width - min_wanted_divs_width ? min_wanted_divs_width : randomWidth];
            } else {
               boxes[i][ii] = [rest_box_width];
            }
            boxes[i][ii][1] = randomHeight;
            $('.contentBox')
            .append('<div class="lego" style="width:'+ boxes[i][ii][0] +'px; height:'+ boxes[i][ii][1] +'px;">'+ ( number-rest_divs_to_create+1 ) + '</div>')
            rest_divs_to_create-- ;
            rest_box_width = rest_box_width - boxes[i][ii][0];
        }
        
        rest_box_width = box_width;
        rest_box_height = rest_box_height - randomHeight;
        console.log('rest divs to create : ' + rest_divs_to_create);
        console.log('randomHeight : ' + randomHeight);
       ...