andikawilliam / sketch-pad

Javascript implementation of Sketch Pad website using event listeners

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sketch Pad

This project is an exercise to learn the basics of event listeners and DOM manipulation using Javascript. The html file is empty, with all content being generated using Javascript. You can try this out if you're starting out on javascript. Just follow the initial design.

check it out live! Sketch Pad

Initial Design

Create a webpage with 16x16 grid of squares.
Every time the cursor hovers over a square, change its color. Only user Javascript to style the page

Face Sketch

  • left click to turn on color hovering
  • right click to turn off color hovering

Added features

  1. Add button to reset color instead of refreshing the page
  2. Add button to change the size of the grid
  3. Change into a random color instead of only one color
  4. Added left click and right click listener to turn on/off hover color

To be added

  1. Option to pick one color for sketch pad
  2. Center sketch pad

About

Javascript implementation of Sketch Pad website using event listeners


Languages

Language:JavaScript 96.3%Language:HTML 3.7%