Making an interactive flag by constructing div's in columns and rows, and a clickable div too.

Making an interactive flag by constructing div's in columns and rows, and a clickable div too.

html section

<!DOCTYPE html>


<html>

    
    <head>

        <link rel="stylesheet" type="main/css" href="main.css" />

    </head>

    <body>
      
    <div class="grid">
  <div class="col">
  </div>
  <div class="col2">
  </div>
   <div class="col3">
  </div>
<div class="col4">
  </div>
  <div class="col5">
  </div>
   <div class="col6">
  </div>
    <div class="col7">
  </div>
  <div class="col8">
  </div>
   <div class="col9">
  </div>
</div> 
        
<script src=" https://code.jquery.com/jquery-2.1.3.min.js" type="application/javascript"></script>
    <script src="app.js" type="application/javascript"> </script>
</body>


</html>



css section


html{height:100%;}
body{
    height:100%;
    margin:0px;
    background-color: black;
}


.grid{
height: 100%
}


.col{
  width: 33.33%;
  float: left;
  height: 33.33%
}

.col2{
  width: 33.33%;
  float: left;
  height: 33.33%
}

.col3{
  width: 33.33%;
  float: left;
  height: 33.33%
}

.col4{
  width: 33.33%;
  float: left;
  height: 33.33%
}

.col5{
  width: 33.33%;
  float: left;
  height: 33.33%
}

.col6{
  width: 33.33%;
  float: left;
  height: 33.33%
}

.col7{
  width: 33.33%;
  float: left;
  height: 33.33%
}

.col8{
  width: 33.33%;
  float: left;
  height: 33.33%
}

.col9{
  width: 33.33%;
  float: left;
  height: 33.33%
}


.grid:after {
  display: table;
  clear: both;
}

img{
    height:100%;
    width:100%;
}



jquery section

$(function(){ //jQ do some work! - when ever the DOM is ready so the stuff in here!
    
    
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    console.log(r,g,b);
    
    $('.col').css('background-color','rgb('+r+','+g+','+b+')');
    $('.col2').css('background-color','rgb('+r+','+g+','+b+')');
    $('.col3').css('background-color','rgb('+r+','+g+','+b+')');
    $('.col4').css('background-color','rgb('+r+','+g+','+b+')');
    $('.col5').css('background-color','rgb('+r+','+g+','+b+')');
    $('.col6').css('background-color','rgb('+r+','+g+','+b+')');
    $('.col7').css('background-color','rgb('+r+','+g+','+b+')');
    $('.col8').css('background-color','rgb('+r+','+g+','+b+')');
    $('.col9').css('background-color','rgb('+r+','+g+','+b+')');
    
    //$( '.col' ).wrapAll( "<div class='grid' />");
    

      console.log(generateRGB());
  
    
  $('.col').click(function() {
        $('.col').css('background-color','rgb('+generateRGB()+')');
        console.log("clicked");
      });
    
  $('.col2').click(function() {
        $('.col2').css('background-color','rgb('+generateRGB()+')');
        console.log("clicked");
      });
    
  $('.col3').click(function() {
        $('.col3').css('background-color','rgb('+generateRGB()+')');
        console.log("clicked");
      });
    
  $('.col4').click(function() {
        $('.col4').css('background-color','rgb('+generateRGB()+')');
        console.log("clicked");
      });
    
  $('.col5').click(function() {
        $('.col5').css('background-color','rgb('+generateRGB()+')');
        console.log("clicked");
      });
    
  $('.col6').click(function() {
        $('.col6').css('background-color','rgb('+generateRGB()+')');
        console.log("clicked");
      });
    
  $('.col7').click(function() {
        $('.col7').css('background-color','rgb('+generateRGB()+')');
        console.log("clicked");
      });

  $('.col8').click(function() {
        $('.col8').css('background-color','rgb('+generateRGB()+')');
        console.log("clicked");
      });

  $('.col9').click(function() {
        $('.col9').css('background-color','rgb('+generateRGB()+')');
        console.log("clicked");
      });
      
      
      

      
    
       
});