title: Creating a 16x16 grid using JavaScript
body: <p>I'm trying to create a 16x16 grid in JavaScript. The method I'm trying to use is to create an empty <code>div</code> in HTML, and then append other divs to it, and outline their borders. I can't seem to make this work, and I've put my code below.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Etch-a-Sketch&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>// Sets important constants and variables
  
  const container = document.getElementById("container");
  let rows = document.getElementsByClassName("gridRow");
  let cells = document.getElementsByClassName("cell");
  
  // Creates a default grid sized 16x16
  function defaultGrid() {
      makeRows(16);
      makeColumns(16);
  }
  
  // Takes (rows, columns) input and makes a grid
  function makeRows(rowNum) {
  
      // Creates rows
      for (r = 0; r &lt; rowNum; r++) {
          let row = document.createElement("div");
          container.appendChild(row).className = "gridRow";
      };
  };
  
  // Creates columns
  function makeColumns(cellNum) {
      for (i = 0; i &lt; rows.length; i++) {
          for (j = 0; j &lt; cellNum; j++) {
              let newCell = document.createElement("div");
              rows[j].appendChild(newCell).className = "cell";
          };
  
      };
  };
  
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.gridRow {
      border: 1px solid black;
  }
  
  .cell {
      border: 1px solid black;
  }
  </code></pre>