Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Etch-A-Sketch</title>
        <meta charset="utf-8">
    <style>
        body {
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-template-rows: repeat(16, 1fr);
        border-color: white;
        padding: 10px;
        border-radius: 10px;
    }
        div {
            width: 16px;
            height: 16px;
            padding: 3px;
            background: black;
            border-width:4px;
            border-color:black;
        }
    </style>
    </head>
<body>

    <input type="button" onclick="genDivs()" value="generate squares">

    <script>
    function genDivs(){
      const dimensions = prompt("How many rows and columns?");
      var e = document.body; // whatever you want to append the rows to:
      for(var i = 0; i < dimensions; i++){
        var row = document.createElement("div");
        row.className = "row";
        for(var x = 1; x < dimensions; x++){
            var cell = document.createElement("div");
            cell.className = "gridsquare";
            row.appendChild(cell);
        }
        e.appendChild(row);
      }
      document.getElementById("code").innerText = e.innerHTML;

    }
    </script>
</body>
</html>