index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> Etch & Sketch Project</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
  <div align="center"> 
	  <h1> Etch & Sketch Project </h1>
    <p> Go around with your mouse in the boxes and create a piece of art ! </p>
  </div>

  <div align="center"> <button class="button" type="button" onclick="reset()" >Reset</button></div>

<div align="center"> 
  <button class="button" type="button" id="myBtn" onclick="changeSquares()" >Change Squares</button></div>


<div id='grid' align="center"> </div>


  <script>
    var i,j,element,y;
    var word;
    var newi=16,newj=16;      
     
    function gridCreator(){
    j=1;
    do{
    for (i = 1; i <=newi; i++) { 
      document.getElementById('grid').innerHTML += "<div onmouseover='changeCol(this)' class='a'  >";}
   
    //document.getElementById('grid').innerHTML += "<br>";
    document.getElementById('grid').innerHTML += "<div class='line-break'>";

    j++;
    }while(j<=newj);}                     
    
    
    function changeCol(x){
       x.style.backgroundColor = 'rgb(22, 22, 22)';
                        }

                        
    function reset() {
      location.reload();}

    function changeSquares() {
      console.log("ok");
    var x = document.getElementById("myBtn");
    var askUser = prompt("Please enter the grid's -new- size : rows,columns! ( MAX SIZE:[64,64] ) e.g. 4,4 or 20,20... BEWARE: If you enter anything else nothing happens... ");
   
    if (askUser == null || askUser == "") {
      alert("No iput ...");
    } else {
       word = askUser.split(',');
       parseInt(word, 10)
       newi=word[0];
       newj=word[1];
       console.log(i);
       console.log(j);
       if (newi<=64 && newj<=64 && newi>0 && newj>0){
       replace_grid() ;
        gridCreator();
        y= 
        document.getElementById("a").style.padding = ""+y+"";

                                                    } 
        else {
        alert("Wrong iput. Beware max grid's size...");}
          }
                          }

                          
function replace_grid() {
  console.log("ok2");
  document.getElementById("grid").innerHTML = "";


  }


 gridCreator();

  </script>

</body>
</html>