CodePen

HTML

            
              <html>
<head>
 <title> Odin #2 by Max Pleaner </title>
<link rel="stylesheet" type="text/css" href='stylesheet.css'>
</head>

<body>
<p> Welcome to my Odin Project #2 page. This is me showing off my basic JS and jQuery skills. If you move your mouse through the blocks you can see them change color. If you press the clear button below you can select a new number of blocks to fill the same space.</p>
<button> Clear the Blocks & Pick a new number</button>

<div id="square_holder">
<div>

</body>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="script.js"></script>
</html>

            
          
!

CSS

            
              body {
background-color: grey;
}

p {
color: aqua;
}

#square_holder {
width: 960px;
}

.block {
background-color: green;
width: 232 px;
height: 232 px;
}

            
          
!

JavaScript

            
              $document.ready(
 for(i=0; i<17; i++){
 $("#square_holder").append("<div class='block'></div>");
 };
button.onclick=function(){
 console.log("Prior grid setup cleared. Next you will be prompted for a new amount.")
 var newnumber = gets.chomp;
 console.log("You entered: #{newnumber}. Watch in awe as the grid fills ..... ")
};
);
 




            
          
!
999px
Loading ..................