jQuery Dynamic Box 2

jQuery Dynamic Box 2

by codeSpy

HTML

<div id="topDiv">
    
</div>

<div id="leftDiv">
    
</div>

<div id="rightDiv">
    
</div>

<div id="bottomDiv">
    
</div>

CSS

#topDiv div{
    float : left;
    padding:5px;
    width:50px;
    height:50px;
}


#leftDiv div{
    float : left;
    padding:5px;
    width:50px;
    height:50px;
}

#rightDiv div{
    float : right;
    padding:5px;
    width:50px;
    height:50px;
}

#bottomDiv div{
    float : left;
    padding:5px;
    width:50px;
    height:50px;
}

#topDiv{
    padding-left : 33%;
}
#leftDiv{
    padding-top : 30%;
}
#bottomDiv{
    padding-top : 68%;
    padding-left : 33%;
}
#rightDiv{
    margin-top : -30%;
}

.changedFont{
    font-size : 20px;
}

JavaScript

$(document).ready(function(){
    var colorArray = new Array("red", "green", "blue");
    for(var i = 1; i <= colorArray.length ; i++){
        $("#topDiv").append("<div id=Box" + i + "></div>");
        $("#Box"+ i).css("background-color", colorArray[i-1]);
        $("#Box"+i).text("Box" + i);

        $("#leftDiv").append("<div id=Box" + i+1 + "></div>");
        $("#Box"+ i+1).css("background-color", colorArray[i-1]);
        $("#Box"+ i+1).text("Box" + i+1);
        
        $("#rightDiv").append("<div id=Box" + i+2 + "></div>");
        $("#Box"+ i+2).css("background-color", colorArray[i-1]);
        $("#Box"+ i+2).text("Box" + i+2);

        $("#bottomDiv").append("<div id=Box" + i+3 + "></div>");
        $("#Box"+ i+3).css("background-color", colorArray[i-1]);
        $("#Box"+i+3).text("Box" + i+3);       
    }
    
    
    
    $("#topDiv").children().click(function(){
        $("#topDiv").children().eq(1).css("background-color", $(this).css("background-color"));
        $("#topDiv").children().eq(1).addClass("changedFont");
    });
    
    $("#leftDiv").children().click(function(){
        $("#leftDiv").children().eq(1).css("background-color", $(this).css("background-color"));
        $("#leftDiv").children().eq(1).addClass("changedFont");
    });
    
    $("#rightDiv").children().click(function(){
        $("#rightDiv").children().eq(1).css("background-color", $(this).css("background-color"));
        $("#rightDiv").children().eq(1).addClass("changedFont");
    });
    
    $("#bottomDiv").children().click(function(){
        $("#bottomDiv").children().eq(1).css("background-color", $(this).css("background-color"));
        $("#bottomDiv").children().eq(1).addClass("changedFont");
    });
    
});