Etch-a-Sketch Reset issues

Hi all I am currently trying to finish up the etch-a-sketch project but there is one issue that I am having. When I click the reset button the grid populates the correct number of squares however it makes an extra row at the top with what seems like a bunch of smaller grids. I’m not sure if where I made a mistake.

Here is my code:

const container = document.querySelector(’.container’);
const resetBtn = document.querySelector(‘button’);

const createGrid = function() {
let startGrid = 16;
let startCount = startGrid * startGrid
container.setAttribute(‘style’, display: inline-grid; grid-template-columns: repeat(${startGrid}, auto); width:900px; height: 900px; grid-template-rows: repeat(${startGrid}, auto))
for(let i = 0; i < startCount; i++){
let square = document.createElement(‘div’);
square.setAttribute(‘style’, ‘background: white; border: 1px solid black;’);
square.addEventListener(‘mouseover’, () => {
square.setAttribute(‘style’, ‘background: black;’)
});

    container.appendChild(square);  
}

}

createGrid()

//reset button
resetBtn.addEventListener('click', () => {
    let gridSize = prompt('How many squares would you like on each side?');
    let squareCount = gridSize * gridSize;
    
    for(let i = 0; i < squareCount; i++){
        square = document.createElement('div');
        square.setAttribute('style', 'background: white; width: 60px; height: 60px; border: 1px solid black;');
        square.addEventListener('mouseover', () => {
            square.setAttribute('style', 'background: black;')
        });
        container.appendChild(square);
    }
    container.setAttribute('style', `display: inline-grid; grid-template-columns: repeat(${gridSize}, 1fr); grid-template-rows: repeat(${gridSize}, 1fr);`);
})

I appreciate the help!

For a question like this, it is usually best to post your code in a repl.it or codepen and post the link. That way people can look at all of your code and even interact with it to help trouble-shoot. It can be nearly impossible to figure out what is causing your issue without the whole picture.

For example, I want to play around with how you are sizing your inside squares. It looks like you are using the 1fr unit on the container to size the inside squares and at the same time setting the width of the squares to 60px. This can cause issues, but I can’t see what is actually happening without seeing your code “live”.

In addition, I want to trouble-shoot if you are “removing” the previous squares when you re-set because this could be part of your issue.

So feel free to trouble-shoot these ideas on your code, but if you need further help, please post a link to your entire code base.

In addition, I want to encourage you use a css file to style your squares. Using in-line styles in javascript is great when something in javascript changes the styles, like grid-template-columns: repeat(${gridSize}, 1fr). However, things that do not need javascript information, like for the squares 'background: white; width: 60px; height: 60px; border: 1px solid black;'); and the container: display: inline-grid belong in a css file.

Thank you for your reply I never posted a question to a forum before so my apologies for making it difficult to answer my question. I will trouble shoot these issues especially the removing of the squares. I also used inline- javascript because I wasn’t sure if we were allowed to use css at all. I know the directions asked to populate the squares on the screen using only javascript. I will test some of these things out thank you so much for your feedback!