Etch-a-Sketch

Introduction:

This project is a browser version of something between a sketchpad and an Etch-a-Sketch. This allows the user to draw on a pixelated sketchpad using any color the user chooses.

Goals and Objectives

• Initially create a 16x16 grid to serve as a sketch pad
• The grid changes color if the mouse hovers over it
• Allow the user to change the size of the grid
• Add a feature where random colors will be drawn and everytime the mouse hovers it, the color becomes darker by 10%

How it works:

• Upon opening the site, the user gets an empty 16x16 white pad which will serve as a canvas for sketching.
• To use the pen, the user has to click the white pad to turn it on/off.
• The default color of the pen is yellow.
• The user can choose the size of the pixels by increasing/decreasing the value of the slider, or manually inputting the desired size. The minimun size is 16x16 and the maximum is 100x100. As the grid size increases, the individual pixel of the pad becomes smaller.
• The user can choose whichever color they want by changing the value on the color picker.
• A button for color black is available for easier access.
• The rainbow button allows the user to draw random colors. Everytime the pen hovers above a pixel that already has a color, the color of that pixel becomes darker by 10%. After 10 hovers, that pixel becomes black.
• An eraser button allows the user to undo drawing mistakes.
• The clear button erases the whole sketch pad.

Skills Emphasized in this Project:

• DOM Manipulation
• Click event listener
• Mouseover event listener
• Function scope
• Function callbacks
• Flexbox and Grid
• DOM Element creation and removal
• Importance of global variables
• Using different html input types
• Color format conversion

Thoughts after Completion:

I found this project interesting and cool because it really tested my creativity and problem solving skills. I had to redo several functions after realizing better methods to implement the desired effects. I also noticed myself getting more and more familiar with css, html, and javascript. Whenever I encounter a problem, it became easier for me to find where it went wrong and was able to solve it. Overall, this project was really fun.