Coloring pixels in a grid
PixelPainter is a plugin that you will create. It has a color swatch of infinite colors and a grid of infinite size! When a user clicks on a color from the swatch they can paint the color on the pixel grid! There should also be two buttons, one for erasing a color and the other to clear the entire canvas.
When instatiated it appends a new PixelPainter object to a HTML div element with an id of pp-canvas.
note: you can use either the Module or Classical OOP Patterns for this.
The height
and width
attributes set the size of the canvas. Each cell of the canvas can be any width or height you choose but it should be a square.
The height and width of the color swatch will be determined by the colors available which you, the developer, will set.
Do not edit the index.html
file. You will generate all of your html markup using the DOM API.
- Code Review with an instructor or TA
- Make the app responsive to tablets and mobile devices using media queries
- Make it 'portfolio quality'
- Implment stamps or shapes
- Implement a fill option that fills a shape with a color.
- Write a function that saves the data pixel grid.
- Deploy the app using Github pages