'I'm Having issues getting an Etch- a Sketch project to great Divs. I am Not able to use JQuery. I

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

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    
    <title>Etch A Sketch</title>
</head>
<body>

    <div id="container">
        <div id="grid">  </div>
    </div>
    <button class="reset" id="reset">reset</button>
  
    <script src="script.js"></script>
</body>
</html>

CSS

#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;
  }

JavaScript

//java script file
let container = document.getElementById("grid");
let size = 0
let cell = document.createElement("div");
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("what size grid would you like 8, 16, 32, or 64?");
size = parseInt(askSize)
container.appendChild(cell);
let devide = 320 / size;
let px = devide.toString();
let type = "px"
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 < size; i++){
        createDiv();
        
            for(j= 0; j < size-1; j++){
            createDiv();
             
            
        }
   
}
// hover effect change div color when mouse hovers over 
function draw(){

    


    document.querySelectorAll('.gridDivs').forEach(item => {
        item.addEventListener('mouseover', event => {
            item.style.backgroundColor = 'black';
        })
      })
    
}
//reset button 
const reset = document.querySelector('#reset')
reset.addEventListener('click',()=>{
    window.location.reload(true)
})
}

createDiv()
makeGrid()
draw()```



Expecting it to create Divs of different sizes depending on user input

javascript dynamic

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'I'm Having issues getting an Etch- a Sketch project to great Divs. I am Not able to use JQuery. I

Sources

Related Questions