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>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
background-color: grey;
}

p {
color: aqua;
}

#square_holder {
width: 960px;
}

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

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $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 ..... ")
};
);
 




            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................