title: create random rectangles with random colors without overlapping using javascript
body: <p>How can i create something like this in HTML using javascript?
  <a href="https://i.stack.imgur.com/M7KL5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M7KL5.png" alt="enter image description here"></a></p>
  
  <p>Actually I know how to create rectangles in HTML but want to do something like this. HTML canvas can be of any size but whenever page is loaded multiple squares are generated with random sizes and colors without overlapping. When I'm trying to do this rectangles are generated in a list form. I'm a web developer(ruby on rails oriented) but new to such javascript stuff. Any help will be appreciated.</p>
  
  <p>html:   </p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="randBlock" &gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>(function makeDiv(){
      var divsize = ((Math.random()*100) + 50).toFixed();
      var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
      $newdiv = $('#randBlock').css({
          'width':divsize+'px',
          'height':divsize+'px',
          'background-color': color
      });
  
      var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
      var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
  
      $newdiv.css({
          'position':'absolute',
          'left':posx+'px',
          'top':posy+'px',
          'display':'none'
      }).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
         $(this).remove();
         makeDiv(); 
      }); 
  })();
  </code></pre>