Pixel Maker Lab with JavaScript

During learning Javascript course, this little project seems fun and can be extended to more fancy functions.

Here is the pure JavaScript way.
HTML

html

The whole page divided into two parts:left is the control menu named #select,and the right is the canvas display content named #canvas.

CSS

css1

css2

 The two parts are positioned by percentages.

css3

Every table grid is a 30px square with border.

JS:

js1

js2

getInputs function:
fetch the width and height from inputs when the button is clicked,then prepare to make a grid with makeGrid() function.

makeGrid function:
bulid the grids according to the width and height fetched usuing loop. When clicked the table td grid,add the backgroundColor you choose.
When click the erase button,you can clear all the canvas content.

call the getInputs() first.




Anther way to erase the color is using right click but with jQuery.

the codepen below made by Fo


The most part I like is the right click erasing.

js right click

If the mosuse is right clicked,the background color resets.And contextmenu is avoiding the default rightclick menu with false.
event.which is for key or mouse events.for mousedown or mouseup. 1:left button,2:middle,3:right button.