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;
    padding:0px;
     margin:-1;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    
    margin: 0.2em;
    color: gray;
  text-shadow: 5px 3px black;
   background-image: url("https://ak6.picdn.net/shutterstock/videos/7511386/thumb/1.jpg");
  padding-bottom: 40px;
}

h2 {
    margin: 1em 0 0.25em;
    font-family: "Quicksand";
     padding :10px;
  text-transform: uppercase;
}

h2:first-of-type {
    margin-top: 0.5em;
    
}
#sizePicker{
  font-size: 21px;
  font-family:"Ranchers" ;
   padding: 10px;
}
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
let color;

//make the Grid of pixel art
function makeGrid() {
	const table = $('#pixel_canvas');
	table.find('tr').remove(); // will delete existing table if there is

	const size = {
	height: $('#input_height').val(),
	width: $('#input_width').val()
	}

	//Construct the table
	for (let i = 0; i < size.height; i++) {
		let row = '';
		let cell = '';
		for(let j = 0; j < size.width; j++){
			cell += '';
		}
		row += cell;
		row += '';
		table.append(row);
	}

}

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

//change cell color
$('#pixel_canvas').on('click', 'td', function(e){
	if($(e.target).css('background-color') !== color){
		//if color cell different from the selected color with color picker
		color = $('#colorPicker').val();
		$(e.target).css('background-color', color);
		color = $(e.target).css('background-color'); // get the color value in RGB notation
	}else{
		$(e.target).css('background-color', 'inherit');
	}
})
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv