My Implementation of The Odin Project Etch-A-Sketch
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-02-27 04:27:59


## Requirements
The assignment states to create a webpage with a 16x16 grid of square divs. Instead of manually adding the **divs**, the requirements ask to add the divs using JavaScript so it is more dynamic and we can adjust the number of divs later. 

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.

## Planning
So the first thing that came to mind after setting my HTML, CSS, and JS files was figuring out how to add the divs with JavaScript.

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. 

## Layout
![Mockup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m9s7sgiunxdojgbebab.png)

## 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 `body` and `html` element height to take up the full page. I found [this article](https://www.freecodecamp.org/news/html-page-width-height/) that helped explain how to set the `html` and `body` elements. I set the `body` [min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://stackoverflow.com/questions/67675651/div-height-100-not-working-with-body-min-height-100vh
) 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 `height` and `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.

![body height](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65z173rzo7n1enkbunae.png)
 
## JavaScript
The JavaScript portion was fairly straightforward once I figured out the grid.
 
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-columns` and `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.

Finally, I made functions for the clear button and resets button. I added the event listener on the button instead of in the JavaScript file. The clear button function iterates through each grid box and reset the background color value to `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. 


## Conclusion
Once I completed the JavaScript, I went back and added some additional styling.

![Completed Etch-A-Sketch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7jhzv9d8qk95bgu3vd7.png)

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.

* [The Odin Project Etch-A-Sketch](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/etch-a-sketch-project)
* [GitHub](https://github.com/jennifertieuu/top-etch-a-sketch)
* [HTML Guider for Beginners](https://www.websiteplanet.com/blog/html-guide-beginners/)