index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <title>Sketch Pad</title>
  <link href="css/style.css" type="text/css" rel="stylesheet">
</head>

<body>

  <div id = "container">

  </div>
  <div class= "center">
  <button id= "clearButton">CLEAR BOARD</button>
  </div>
<script>

//Create the grid
  const container = document.querySelector('#container');
  let squares = prompt('Choose the number of columns');
  createGrid(squares);

  function containerWidth(number){
    return container.style.width = `${number}px`;
  }
  function containerHeight(number){
    return container.style.height = `${number}px`;
  }
  function createDiv(){
    let div = document.createElement('div');
    div.classList.toggle('box')
      return container.appendChild(div);
  }
  function createGrid(cols){
    for(var i=1; i <= (cols **2); i++){
      createDiv();
    }
    containerWidth(20 * cols)
    containerHeight(20 * cols)
  }

//Mouse over changes the color of squares

  function random(maxNumber){
    return Math.floor(Math.random() * maxNumber);
  }


  container.addEventListener('mouseover', function(e){
    var boxes = e.target;
    if (boxes !== container){
    boxes.style.backgroundColor = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  }
  })

//Button should ideally clear the board
  var clearButton = document.querySelector('#clearButton');
  clearButton.addEventListener('click', function(e){
    var boxes = document.querySelectorAll('.box');
    boxes.forEach(function(box){
      box.style.backgroundColor = 'white';
    })

  })


</script>

</body>

</html>