Etch-a-sketch help

I’m stuck on two problems my first problem is getting my clear button to clear the shad

ed areas on the grid without resetting the page, and my next problem is getting all the squares to stay with the area of the container div that I have a border around. The program is working as intended, but I stuck on these two problems.

here is a link to my get hub.

Hi, and idea for the first problem is using foreach

function clearGrid(){
  document.querySelectorAll("gridobject").forEach((elem) => {
           elem.style.backgroundColor=none
  });
}

It takes all DOM elements with class=“gridobject” and aply the function given as argument to each one.

The next problem. Depend of what you want.

You can make the div fit to content in the css file:

width:  fit-content; 
heigth: fit-content;

or change the size from javascritp

container.style.width=`${desiredWidth}px`
container.style.heigth=`${desiredHeigth}px`

This way allow you to change the size of the container div every time you change the amount of grid elements in function of the input.

Another thing i see is when i push the button “add more squares”, some squares apear reduced in size. You can avoid this seting in the class gridobject

min-width: 10px;
min-height: 10px;

or the min values you want.

Hope this will help.

thanks for the help,but how would I go about changing the amount of add squares without changing the size of my container, so when the user enters 10 squares the squares in the grid would be bigger, or if the user enter 100 the squares would get smaller.

You can do it in the same way

elem.style.width=`${desiredWidth}px`
elem.style.heigth=`${desiredHeigth}px`

inside a forEach loop. In this way your grid elements dimensions can be dependant of the amount of grid element you want, with the container size fixed.

Another form is adding an extra class to your grids.

You can add css from javascript doing

 <div id="styleContainer"></div>
 <script>
     function addClassSize(width,heigth){ 
             const styleCont = document.querySelector("styleContainer");
             styeCont.innerHTML = `<style> .className{width:${width}px;  heigth${eigth}px;}<\style>`
     }
</script>

This function adds a class with sizes defined. When you call it another time overwrites the class with new sizes. Note the importance of put a div element that contains the style you are adding. And of course your grid elements should also be part of the class you are adding.

I dont know if adding class in this way is a good practice but is a posibility, but allows you to change the size of the grid element without looping them.