Etch a Sketch

About

Project to create something like Etch A Sketch toy.

🔗 Live preview: here 😊

How to play?

• Choose your favorite the color and background (Default for black & white), then hold the mouse inside the grid to paint
• Features
  • Clear: Clear the board
  • Reset: Reset all to default
  • Toggle random & rainbow button the pixels color will be random
  • Toggle darken & lighten slowly turns cell into black & white
  • Toggle eraser to clear the cell color
  • Specific Area used to fill specific area and Full Area used to fill full area
  • Slice grid size will change the resolution of the screen (# of pixels). Depend on what you want
  • You can customize pencil and background color by pressing pen color & blackground color
  • If you want to remove grid line, just click Remove Grid Lines button

What I learned

• Problem solving, break big problem into subproblem then connect all of subproblem
• More advanced DOM manipulation
• Use CSS3 grid and flex to create layout
• Greatly improved functionality in general (Optimized and reusable functions)

Feature ideas to implement

• Undo tool
• Save & Export image
• Mobile support

Tools/ Technologies

• HTML / CSS / JS
• NeoVim (Code Editor)
• Linux terminal
• Git & GitHub