The Odin project etch-a-sketch. i've spent way too much time on this one. on clicking 'shake etch a...

This post has been de-listed

It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.

The Odin project etch-a-sketch. i've spent way too much time on this one. on clicking 'shake etch a sketch' the grid doesn't create a complete one. i need to find a way to clear previous grid first but have no clue how. someone kindly assist

Post Body

<!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"> <title>Document</title> <style> .flex-container{ display: flex; justify-content: center; align-items: center;

        width: 700px;
    }
    .content{
 display: grid;
align-items: center;
justify-content: center;
margin:auto;
border: black solid 8px;
height: 700px;
width: 800px;

    }
    .board-class{
        display: grid;
        width: 550px;
        height: 550px;
        background-color: red;
        justify-content: center;
        align-items: center;
        border: black solid 10px;
    }

 .board {
    display: grid;
    justify-content: center;
    row-gap: 5px;
    column-gap: 5px;


    border: black solid 10px;
    width: 500px;
   height: 500px;

    }

</style>

</head> <body> <div class="flex-container"> <div class="=content"> <button id ="reset">Shake Etch A Sketch</button> <div class ="board-class"> <div class ="board"></div> </div> <div class ="buttons"> <button onclick="changeColor('black')">Black</button> <button onclick="changeColor('gray')">Gray</button> <button onclick="changeColor('random')">Random</button> <button onclick="changeColor('white')">Eraser</button> <button onclick="reset()">Reset</button>

        </div>

    </div>

</div>


<script>


    let shakeButton=document.querySelector('#reset');
    let numOfSquares=16;
    let color='black';

    function makeGrid(grids){
     let board = document.querySelector('.board');
    //let box= document.querySelectorAll('div');
    //box.forEach((div)=>div.remove());
    board.style.gridTemplateColumns=`repeat(${grids}, 1fr)`;
   board.style.gridTemplateRows=`repeat(${grids}, 1fr)`;

    let size=grids*grids;
    for (let i=0;i<size;i  ){
        let box=document.createElement('div');
        box.classList.add('box');
        box.style.backgroundColor='#fffff2';
        board.appendChild(box);
        box.addEventListener('mouseover',chooseColor);


    }

    }
 makeGrid(numOfSquares);

shakeButton.addEventListener('click',()=>{

let userSquares=prompt("enter number of squares per side less than 100");
if (userSquares>=2 && userSquares<=100){
    makeGrid(userSquares);
}else{
     do{
        userSquares =Number(prompt("invalid size! enter a less than 100"));
        }
        while(userSquares>100){
            makeGrid(userSquares);
        }
        }

}); function chooseColor(){ if (color==='random'){ this.style.backgroundColor="hsl(" Math.random() * 360 ",100%,50%)";

 }else{
    this.style.backgroundColor= color;

 }

}

function changeColor(choice){ color=choice; }

function reset(){

 window.location.reload();

}

</script>

</body> </html>

Author

User Disabled

Account Strength

Disabled 1 year ago

Account Age

3 years

Verified Email

Yes

Verified Flair

Total Karma

1,819

Link Karma

451

Comment Karma

1,268

Profile updated: 8 hours ago

Posts updated: 1 year ago

ISkyYou

Subreddit

r/learnjavascript

Post Details

We try to extract some basic information from the post title. This is not always successful or accurate, please use your best judgement and compare these values to the post title and body for confirmation.

Posted: 2 years ago
Reddit URL: View post on reddit.com
External URL: reddit.com/r/learnjavasc...