#05 — Etch A Sketch
August 11 2021
I successfully finished my project “Etch a sketch” for The Odin Project’s foundations. Making this project was actually a lot of fun.
For this project, I experimented by using more DOM than CSS to manage all the aesthetics.
Let me tell you about the important challenges I experienced while developing this project, but first, I’ll describe what the project does in plain English.
The website shows a red center element that is just decorative, and in the middle of it another grey container, which is really made up of several other squares. The grey container is 16 × 16 square bits by default, which indicates it contains 256 square elements.
When you move the mouse over one of these pieces, the color turns to black, as if you were sketching on this grey container.
The first issue I encountered while working on this project was a Javascript issue with making the grey container responsive to the slider on the bottom section, which sets the height and width of the drawing container.
When I first started, it would create the default 16 x 16 drawing container, and if I changed the slider to a value of 2, which actually means to create a 2 x 2 drawing container, it would create an 18 x 18 drawing container, and if I made an 18 x 18 container, it would actually create a 36 x 36 container.
It was not removing the existing square elements, but rather creating new elements and adding them to the container.
At this point, I had no idea why this was actually happening, so I shut down my laptop and opened a notebook, where I began drawing how I believed it should behave.
In the end, it didn’t look or work the same as the one on the notebook, but this closing-the-laptop-and-sketching-on-paper approach, along with a lot of trial and error, was what led me to the correct reasoning.
The second problem I ran into when making this project was a CSS problem.
You can see how the drawing container was covering the parent container, which had a black border with a small border radius, and for this problem I went to my peers on TOP discord group, and one of them taught me that it is possible to hide the overflow of an element (before he told me, I, for some reason, thought it was only something you use in the body), so I did.
I was surprised that it worked after searching for quite some time and not finding anything relevant.
The last challenge I had was getting it to function on phones, which required me to do some research on the X and Y coordinates. To be honest, I didn’t put much effort into understanding it because I was more concerned with it running on phones.
Finally, I am once again satisfied with the end product.
Have a look here:
https://sebastiancastro.github.io/rock-paper-scissors/
