Sketchpad

LIVE DEMO

What is it?

It's a simple sketchpad. You can pick between two drawing modes: Click mode (it will color each square upon click) or Hover mode (you simply have to hover over a square to color it).

With this project I was able to get a deeper understanding of event listeners and DOM manipulation.

Features:

• Possibility to dynamically change the grid size (from 4x4 to 100x100)
• Rainbow Mode: will generate a random color every time you move the mouse or click on a square
• Generate a random color upon right-click

Built with:

HTML/CSS (and Sass) JavaScript

TODO:

• Responsive layout
• Shade Mode: gradually increase the opacity of each square from light to dark
• Possibility to save the drawing as JPEG file