My Implementation of The Odin Project Etch-A-Sketch

#webdev #beginners #codenewbie #devjournal

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

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 that helped explain how to set the html and 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 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.

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.

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.