Browser version of Etch-A-Sketch as part of The Odin Project's curriculum.
This is an interactive adaption of the old Etch-A-Sketch device for the browser. It supports three different color options, two different erase options and one option to change the size of the matrix.
This project gave me a deeper understanding of DOM manipulation and the interplay between HTML, CSS and Javascript. I now have a better idea of changing CSS style rules interactively.
UPDATE 23.10.19 After having refactored the whole codebase I've had a couple of very important additional learning outcomes. Most importantly it allowed me to understand why assigning everything it's own function that only takes care of one specific thing is so important. In order to achieve this I had to rewrite almost the whole code and dive much deeper into DOM manipulation. I had to learn:
- how to pass around function and variable values from function to function
- to properly manipulate DOM elements
- what a HTML collection is and how to store and access DOM elements in an array
While at times extremely annoying, it was a very valuable lesson that has taught me a ton about better project planning and cleaner code.
Just start drawing here!