LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

    

Lab: Pixel Art Maker

  1. Choose Grid Size

  2. Pick A Color

  3. Design Canvas

CSS
body {
    text-align: center;
    /*from uigradient.com*/
    background: #24C6DC;  /* fallback for old browsers */  /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(left, #514A9D, #24C6DC);
    background: -o-linear-gradient(left, #514A9D, #24C6DC);
    background: linear-gradient(to right, #514A9D, #24C6DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-family: 'Codystar', cursive;
    font-size: 60px;
    margin: 0.2em;
}

/*h2 {
    margin: 1em 0 0.25em;
}*/

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

table,
tr,
td {
    border: 1px solid black;
    background-color: #fff;
}

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

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 3em;
}

ol {
  padding: 0;
}
JS
var height = $('#input_height');
var width = $('#input_width');
var submit = $('input:button');
var grid = $('#pixel_canvas');
var drawing = false;


makeGrid();
submit.click(function(){
  makeGrid();
});

function makeGrid() {
  grid.html('');
 var N = height.val();
 var M = width.val();
  for (var i = 1; i <= N; i++) {
    grid.prepend('');
    for (var j = 1; j <= M; j++) {
      var row = $('tr:first-of-type');
      row.append('');
    }
  }
}

grid.on('click','td',(function(){
    $(this).css("background-color",$('#colorPicker').val())
}))

grid.on('mouseenter','td',(function(){
  if(drawing === true){
      $(this).css("background-color",$('#colorPicker').val())
    }
  }))

$('body').mousedown(function(){
  drawing = true;
})

$('body').mouseup(function(){
  drawing = false;
})

grid.on('dblclick','td',(function(){
    $(this).css("background-color", '#ffffff' )
}))
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv