I’m trying to complete The Odin Project’s Etch-a-Sketch challenge and am currently stuck with trying to resize the divs that make up the sketchpad. The app creates a 16×16 grid by default, and when pressing the erase button it asks for a number. It should then recreate the grid based on that number. However, the size of the pad goes all wonky. Link to codepen for clarification: https://codepen.io/eerolli/pen/abELQbp
Any help is much appreciated.
Edit: It should probably be noted, that the app works fine when I enter a number equal to or lower than 16.
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 class="content">
<h1>Etch-a-Sketch</h1>
<div class="container">
</div>
<button>Erase</button>
</div>
</body>
<script src="script.js"></script>
</html>
javascript:
let clear = document.querySelector("button");
//function to create a 16x16 grid
function createGrid(size){
function resetSize(){
clear.addEventListener('click', ()=>{
let number = prompt("What size would you like the grid to be? (1-100)");
container.style.gridTemplateRows = `repeat(${number}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${number}, 1fr)`;
})
}
resetSize();
let container = document.querySelector(".container");
container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
for (let i = 0; i < size*size; i++) {
let square = document.createElement("div");
square.style.backgroundColor = "black";
container.appendChild(square);
//change background color of a square on hover
square.addEventListener('mouseover', e=>{
square.style.backgroundColor = "white";
})
//function to reset the grid
function clearGrid(){
clear.addEventListener('click', e=>{
square.style.backgroundColor = "black"
})
}
clearGrid();
}
}
createGrid(16);