title: I'm Having issues getting an Etch- a Sketch project to great Divs. I am Not able to use JQuery. I
body: <p>First time posting here I apologies if I get any etiquette wrong. I Believe the issue is when I am creating the Divs. I need to only use basic javascript to get it to work. I had it working when I set the size of my grid to a single size but when I want it to adapt to the users input I cant get it to work. any advice is greatly appreciated</p>
  <p>Html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;./style.css&quot;&gt;
      
      &lt;title&gt;Etch A Sketch&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id=&quot;container&quot;&gt;
          &lt;div id=&quot;grid&quot;&gt;  &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class=&quot;reset&quot; id=&quot;reset&quot;&gt;reset&lt;/button&gt;
    
      &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>#grid {
      height: 320px;
      width: 320px;
      border: 3px solid yellow;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      flex-grow: 0;
      flex-shrink: 0;
      
      
      ;
      
    }
  
    .gridDivs{
        display: flex;
        height: 20px;
        width: 20px;
        flex-grow: 1;
        flex-shrink: 1;
        align-self: center;
        
    }
  
    #cell{
        border:1px green;
    }
  </code></pre>
  <p>JavaScript</p>
  <pre><code>//java script file
  let container = document.getElementById(&quot;grid&quot;);
  let size = 0
  let cell = document.createElement(&quot;div&quot;);
  cell.setAttribute('class', 'gridDivs');
  
  function createDiv(){
  cell.setAttribute('class', 'gridDivs');
  cell.setAttribute('id', 'size');
  cell.innerHTML = '';
  container.appendChild(cell);
  }
  //sets the size of each div box 
  
  function DivSize(){ 
   
  askSize = window.prompt(&quot;what size grid would you like 8, 16, 32, or 64?&quot;);
  size = parseInt(askSize)
  container.appendChild(cell);
  let devide = 320 / size;
  let px = devide.toString();
  let type = &quot;px&quot;
  cell.style.width = px+type ;
  cell.style.height = px+type ;
  console.log(px)
  return size;
  }
  
  
  
        
  
  
  // funtion should create pre determined number of divs in a grid
  function makeGrid(){
    DivSize()
     
      for(i= 0; i &lt; size; i++){
          createDiv();
          
              for(j= 0; j &lt; size-1; j++){
              createDiv();
               
              
          }
     
  }
  // hover effect change div color when mouse hovers over 
  function draw(){
  
      
  
  
      document.querySelectorAll('.gridDivs').forEach(item =&gt; {
          item.addEventListener('mouseover', event =&gt; {
              item.style.backgroundColor = 'black';
          })
        })
      
  }
  //reset button 
  const reset = document.querySelector('#reset')
  reset.addEventListener('click',()=&gt;{
      window.location.reload(true)
  })
  }
  
  createDiv()
  makeGrid()
  draw()```
  
  
  
  Expecting it to create Divs of different sizes depending on user input 
  </code></pre>