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: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}
JS
function makeGrid(width, height) {
	for (var x = 0; x < height; x++){
		$('#pixel_canvas').append(``);
		for (var y = 0; y < width; y++ ) {
				$(`#row_${x}`).append(``).css("cursor","pointer");
		};
	};
}

function eventListeners() {
  $('table').on('click', 'td', function (evt){
    let colourChosen = $('#colorPicker').val();
    $(evt.target).css("background-color",colourChosen);
  });

  $('input[type="submit"]').on('click', function(){
    init();
    let height, width;
    height = $('#input_height').val();
    width = $('#input_width').val();
    makeGrid(width, height);
    return false;
  });
}

function init(){
	$('#pixel_canvas').html('
').css("background-color", "white"); $('#colorPicker').val('#000000'); } $(document).ready(function() { eventListeners(); init(); })
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv