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 16x16 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, after giving a number the size

TOP Etch-a-sketch grid resizing

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, after giving a number the size of the sketchpad is reduced. I have noticed that the number of empty divs created is always 256. Link to codepen for clarification: https://codepen.io/eerolli/pen/abELQbp

Any help as to how I could get the size of the pad to stay the same regardless of the number of divs inside it is greatly 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
​x
 
<!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);

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);
​

Answer

You were super close … you just need to call the create grid function again after the input prompt, and pass the new size/number the user entered as the argument ;D

Edit: Ah yeah, I didn’t notice it got stuck in a loop. I’ve refactored a little and added a couple of comments, hopefully helps.

let clear = document.querySelector("button");
let container = document.querySelector(".container"); // move container out here so can use everywhere

clear.addEventListener('click', ()=>{ // we only want to add this listener once
    resetSize()
})


function resetSize(){
        
        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)`;
        createGrid(number); // call the createGrid function here and pass the number they entered as the argument. 
}
        
        
//function to create a 16x16 grid
function createGrid(size){

//    resetSize(); // get rid of this as this was causing it to show the prompt again each time


    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);

JavaScript
 
let clear = document.querySelector("button");
let container = document.querySelector(".container"); // move container out here so can use everywhere
​
clear.addEventListener('click', ()=>{ // we only want to add this listener once
    resetSize()
})
​
​
function resetSize(){
        
        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)`;
        createGrid(number); // call the createGrid function here and pass the number they entered as the argument. 
}
        
        
//function to create a 16x16 grid
function createGrid(size){
​
//    resetSize(); // get rid of this as this was causing it to show the prompt again each time
​
​
    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);

body {
    box-sizing: border-box;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    width: 700px;
    height: 700px;
    display: grid;
    margin: 2rem;
    border: 2px solid burlywood;
}


h1 {
    text-align: center;
}

button {
    width: 50px;
}

JavaScript
 
body {
    box-sizing: border-box;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}
​
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
​
.container {
    width: 700px;
    height: 700px;
    display: grid;
    margin: 2rem;
    border: 2px solid burlywood;
}
​
​
h1 {
    text-align: center;
}
​
button {
    width: 50px;
}

<div class="content">
    <h1>Etch-a-Sketch</h1>
    <div class="container">
    </div>
    <button>Erase</button>
</div>

JavaScript
 
<div class="content">
    <h1>Etch-a-Sketch</h1>
    <div class="container">
    </div>
    <button>Erase</button>
</div>

Advertisement

Answer