This is a toy project form From Odin Project -> Foundations Path-> PROJECT: ETCH-A-SKETCH.

Here is Live Demo hosted on Github Pages.

1. Practice more html, CSS and JavaScript.
2. DOM manipulation using JavaScript:
   1. document.querySelector
   2. element.setAttribute
   3. element.classList.add
   4. element.addEventListener
   5. button click event handle
   6. ......

1. Open the Live Demo
2. Move mouse cursor on the canvas, the pixels your mouse have encountered will filled with black
3. To clear your work, click the "Clear" button, there will be a prompt ask you to set the canvas pixel density yourself

1. Add more options for pixels' fill-in color. Maybe even allow pop-up color picker.
   About color picker, I found this tutorial from Educative.io may be useful.
2. Instead of prompt, use input box or drag bar to set the pixel density(pixel per row and column).
3. Able to export the pixel art(.svg, .png or whatever, not familiar with these things yet).
4. Some interesting features like symmetrical drawing.