My Implementation of The Odin Project Etch-A-Sketch
This article was originally posted on dev.to.
A hover effect will need to be added to mimic the behavior for an Etch-A-Sketch where the squares that the mouse hovers over will change appearance. The Odin Project also provides some tips for completing this assignment.
Lastly, a button will need to be added to the top of the screen to clear the screen and prompt the user for the number of squares for the new grid. For example, entering 64 will generate a 64x64 grid. The requirement states to limit the input to 100 since the greater number of squares generated will affect the web page performance.
The few times I've had to do DOM manipulation, I've added the elements using the appendChild method. Using the appendChild method, I would create a loop that would append divs to a parent element to create the grid based on the input number. I want to see if there's another way to do it, but I'll start with this idea first.
HTML and CSS Styling
For my layout, I decided to use Flexbox to arrange the elements and then use a CSS grid for my Etch-A-Sketch body. My main elements were composed of a header which contains the clear button and then a grid container.
To center my elements, I needed to have the
html element height to take up the full page. I found this article that helped explain how to set the
body elements. I set the
body min-height to
100vh which means it will be at least
100vh and it can also grow beyond that.
After centering my elements with flex, I had trouble setting the grid container size. The grid container should have a defined size and then generates a new grid when the user enters a number in the container. The grid container is static and the grid dimensions are dynamic. So the user may put whatever number below 100 and the grid should still take up the same amount of space in the grid container.
I put the grid container height and width both at 50% and it wasn't behaving like intended. The width was set to 50%, but the height wasn't changing at all.
After some searching, this StackOverflow post helped clear up why setting the percentage for
height wasn't working for the grid container. The
min-height: 100vh does not set the
height for the body. So, as a percentage, there's no parent height for the grid container to calculate off of. To fix this issue, I also set the
height of the body to
100vh and then the grid container
width percentage worked. Although, I'm a bit unsure of why width didn't need to be explicitly set. It seems to already take the full width of the screen or viewport.
For the grid, I made a function that would take a number as an input and create the grid based on the input number. This function created the div elements to be appended to the grid container and set a class for each. It also set the grid container
grid-template-rows values based on the input number.
Next, I added created functions and event listeners to update the grid when a mouse hovers over the grid box. The event would cause the grid box color to change to black.
null. The reset button function prompts the user to enter a number. If the number is valid and below 100, it will remove the old grid boxes and add new ones based on the new number using the createGrid function. Otherwise, it will re-prompt the user to enter a number if it's over 100 or do nothing.
Overall, the project was a bit challenging for me in regard to CSS. I'm still trying to learn and understand how CSS properties affect each other, but it was a fun challenge. Now to the next assignment.