LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  


    Pixel Art Maker!
    
    

  
    

Lab: Pixel Art Maker

Choose Grid Size

Grid Height: Grid Width:

Pick A Color

Design Canvas

CSS
body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 0px;
}

td {
    width: 20px;
    height: 20px;
}

input[type=number] {
    width: 6em;
}
JS
// Select color input
// Select size input

// When size is submitted by the user, call makeGrid()


var table=$('#pixel_canvas');

function makeGrid() {

var rows=$('#input_height').val();
var cols=$('#input_width').val();
// Your code goes here!


table.children().remove();

for(var i=0; i");
  for(var j=0; j");
  }
}

}

table.on('click', 'td', function(){
  $(this).attr('bgcolor',$('#colorPicker').val());
});

table.on('mousedown', 'td', function(e){ //to removecolor from colored pixel with right click
  if(e.which == 3){
    $(this).attr('bgcolor', '#FFFFFF');
  }
});

table.on('contextmenu', 'td', function(e){ //to disable the right click menu
  if(e.which == 3){
    return false;
  }
});

$("#subButton").on('click', function(event){
  event.preventDefault();//to prevent the default action of the submit button
  makeGrid();
});
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv