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

JS
// Select color input
// Select size input

// When size is submitted by the user, call makeGrid()
$("#sizePicker").submit('click', function(event) {
	event.preventDefault();
	makeGrid();
})

function makeGrid() {
	var canvas = $("#pixel_canvas");
	let rows = ($('#input_height').val() > 100) ? 100 : $('#input_height').val(); // hauteur limitée à 100
	let cols = ($('#input_width').val() > 100) ? 100 : $('#input_width').val(); // largeur limitée à 100

	canvas.children().remove();

	for (let i = 0; i < rows; i++) {
		canvas.append('');
	}

	for (let j = 0; j < cols; j++) {
		$('tr').append('');
	}
}

$('#pixel_canvas').click('td', function(click) {
	let color = $('#colorPicker').val();
	$(click.target).css('background-color', color);
})
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv