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. See the Pen Pixel Maker Lab by Yifang Di ( @diyifang ) on CodePen . Anther way to erase the color is using right click but with jQuery. the