This program is inspired by the famous 'Etch A Sketch' toy. It is a digital version of the 'Etch a Sketch' with some new and unique features. A user draws on the toy's screen by hovering their mouse over the toy's screen. By default, the user's 'pen' color is black, but other coloring modes can be used by clicking on the appropriate buttons. The Rainbow button results in the pen using random colors of the rainbow. The Grayscale mode allows for black shading, much like a pencil. A color picker allows user to color with a color of their own choice; colors can be determined via the color input or the adjacent text input via a hex color value. The toy's screen can be erased all in one go via the Clear button. The size of the pen's output can be adjusted via the range slider.
There was a lot of useful knowledge gained through creation of this project. It was good practice with creating grids via HTML and Javascipt. It taught me how grid items might be placed within a grid and how div tags could be used to create responsive grid cells. It provided experience with event listeners and callback functions. DOM Manipulation was essential which proved Javascript's importance in building interactive web pages. CSS concepts such as the box-model, flex-box, vertical and horizontal centering, stylesheet resets, and others were explored.