title: Request for help: setting up a grid using nested if loops (JavaScript)
body: <p>I was having some difficulties setting up a grid using nested if statements. It's a relatively simple task but I seem to be stuck! </p>
  
  <p>This is a school assignment. The instructions are below:</p>
  
  <p>"If the user enters 8 in the text input and clicks the button, you should draw eight rows and columns of little squares. To do this, you will need two for loops nested inside each other like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>for ( row=1; ... ) {
    for ( col=1; ... ) {
      ...
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the (inner-most) loop body, draw a little square on the paper with an x and y value calculated from the loop counters so the squares end up in a grid pattern.</p>
  
  <p>Your page will look something like this (depending on the number the user enters, obviously). Don't worry about the coloured boxes yet: that is the next part."</p>
  
  <p>The outcome should look something like this: </p>
  
  <p><a href="https://i.stack.imgur.com/GhkMm.png" rel="nofollow noreferrer">image</a></p>
  
  <p>You can ignore the fact that some of squares are colored. So far I'm come up with this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>generate = function() {
  n = 0
  x = 0
  y = 0
  n = $('#squares').val()
  for (row = 1; row &lt;= n; row += 1) {
   for (col = 1; col &lt;= n; col += 1) {
    r = paper.rect(x, y, 10,10)
    x = x + 20
   }
   y = y + 20
  }
  }
  
  setup = function() {
   paper = Raphael('container', 400, 400)
   $('#number').click(generate)
  }
  jQuery(document).ready(setup)</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you in advance!</p>