This is the final project for the first phase of the Udacity Google Front-End Web Development Scholarship. The outcome set by the project criteria was to develop an interface that allowed the user to create a table grid canvas and to paint each individual cell within that table using colors they choose with the color input type.
As this was the final project of the first phase, I wanted to push myself and decided to implement additional features that I felt were missing from the initial required outcome.
- Click and Drag Painting
- Eraser Tool
- Multiple Brush Sizes
- Eyedropper Tool
- Toggle Grid
- Clear Canvas
- Choose Canvas Background Color
- The eraser now scales with the brush size (although I may add a seperate select element for the eraser).
- You can now use the eyedropper tool with both the CTRL key and Mac CMD key.
- Replaced all instances of the keyword var with let or const
- Painting can now be done with both left-click and right-click without bringing up the context menu
- Replaced the original painting mechanic with the more optimized method that @NickBellamy suggested.
- Removed repeated object for cell location in relation to user click location and replaced it with a function.
- Cursor will now indicate the area in which the user will paint.
@NickBellamy for his invaluable feedback and the resources he provided.