Etch-A-Sketch

This is the third project from The Odin Project Foundation's Course.
You can try it live here: https://razvanbugoi.github.io/etch-a-sketch/

Objective

Users should be able to select a number of grids, then select a color and start drawing.
Other features include:

• predefined grids with a click of a button
• the option to automatically generate random colors after every grid
• a button for grid reset
• color picker

Technologies used

• HTML
• CSS
• JavaScript

The process and outcome

During the building process of this project, amongst other things, I have learned how to dynamically add HTML elements and change CSS attributes through JavaScript. I have experimented with CSS Grid, CSS Flexbox.
The most challenging part was figuring out how to dynamically add grids to HTML that would fill the entire space of the main box container. Positioning the elements and the UI overall, also was not an easy process, but I managed to get to the end.
Last but not least, I have used CSS media query to make the application tablet and mobile friendly.