LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


	
	Pixel Art
	
  
	
	



	

Pixel Art Maker

Choose size

Select height: Select width:

Choose color

CSS
body {
    text-align: center;
    background:   /*url("https://cdn.pixabay.com/photo/2016/06/13/05/47/background-1453697_1280.jpg");*/
}

h1 {
    font-size: 70px;
    margin: 0.2em;
    font-family: 'Berkshire Swash', cursive;
}

h2 {
    margin: 0.5em 0 0.25em;
}

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

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

tr {
    height: 20px;
}

td {
    width: 20px;
}

input {
    width: 6em;
}

input[type=color] {
    width: 6em;
  margin-bottom: 2em;
}
JS
$(document).ready(function() {

// Select color input
	function colorPick(){
		var inputColor = $('#colorPicker').val();
		return inputColor;
	}
	

// Select size input
	function sizePick(){
		var inputHeight = $('#input_height').val(),
		 	inputWidth = $('#input_width').val();
		return {'heigth':inputHeight , 'width' : inputWidth};
	}

// Clean old grid and create e new
	function makeGrid(h,w) {
			var pixelCanvas = $('#pixel_canvas');
			pixelCanvas.empty(); // clean old grid

			for (var i = 0; i < h; i++) {
				var row = $('');
				pixelCanvas.append(row);
				console.log('ok');
			}

			$('tr').each(function(index, el) {
				for (var i = 0; i < w; i++) {
					$(el).append('');
				}				
			});
	}		

//When size is submitted by the user, call makeGrid()
	$('#sizePicker').submit(function(event) {
			/* Act on the event */
			var sizePicked = sizePick();
			makeGrid(sizePicked.heigth, sizePicked.width);
			event.preventDefault();
		});

//When a cell is clicked will painted with color selected
	$('#pixel_canvas').on('click', 'td', function(event) {
		$(this).css('background', colorPick());
		
	});
});
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv