LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    Pixel Art Maker!

    
	
    
    



    

Lab:
Pixel Art Maker

1. Choose Grid Size

Grid Height:
Grid Width:

2. Pick a Color and Design your Canvas_

3. Instructions

  • Paint single cell: Mouse left click
  • Draw: Move mouse with
    left button down
  • Remove Color: Mouse right click
CSS
/* base CSS */

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */

}

html, body {
  padding: 0;
  margin: 0;

}

body {
    color: #212121;
    font: 90%/1.55 'Open Sans Condensed', sans-serif;
    background: #fff url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"%3E%3Cg fill="%239C92AC" fill-opacity="0.1"%3E%3Cpath fill-rule="evenodd" d="M0 0h4v4H0V0zm4 4h4v4H4V4z"/%3E%3C/g%3E%3C/svg%3E') repeat left top;
    padding: 10px;

}

/* Basic elements */

h1 {
    font-family: 'Lobster', cursive, sans-serif;
    text-align: center;
    transform: rotate(-7deg);
    margin: 0;
    padding: 0;

}

h1 span {
  font-size: 35px;

}

.red {
  color: #EA4335;

}

.green {
  color: #34a852;

}

.blue {
  color: #448aff;

}

h2 {
    font-size: 15px;
    margin-top: 15px;
    padding: 15px 0 10px;
    border-top: 2px solid #ebebeb;

}

h2:first-of-type {
    margin-top: 30px;

}


.blink  {
    font-size: 15px;
    animation: 1s step-end 0s normal none infinite running cursor-blink;

}

@keyframes cursor-blink {
  0%, 100% {
      opacity: 0;
  }
  50% {
    opacity: 1;
  }

}

table,
tr,
td {
    border: 1px solid #ebebeb;

}

table {
    border-collapse: collapse;

}

tr {
    height: 15px;

}

td {
    width: 15px;
    height: 15px;

}

input[type=number] {
    width: 64px;

}

input {
  margin-bottom: 15px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid #9B9B9F;
  background-color: #fff;
  vertical-align: top;

}

#colorPicker {
    padding: 0 10px;
    height: 28px;

}

.btn {
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid #448aff;
  vertical-align: top;

}

.btn:hover {
  border: 2px solid #3367BF;

}

#btn_submit {
  color: #fff;
  background-color: #448aff;

}

#btn_reload,
#btn_clear {
  color: #448aff;
  background-color: #fff;

}

#btn_submit:hover,
#btn_reload:hover,
#btn_clear:hover  {
  color: #fff;
  background-color: #3367BF;

}

/* Layout */

header {
  padding: 15px;
  width: 270px;
  background-color: #fff;
  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.26);

}

.container {
  display: none;
  position: absolute;
  left: 300px;
  top: 10px;
  padding: 15px;
  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.26);
  background-color: #fff;

}

form,
#colorDiv {
  padding-left: 30px;

}
JS
/**
* @description To assign a choosen background color by left clicking the cells
* @description To remove a choosen background color by right clicking the cells
* @description To draw a choosen background color with left mouse button down
*/

$('#pixel_canvas').on('mousedown','td', function(evt) {

// add or remoce the color setting of a single cell

	if( evt.which === 1 ) {
 		const pickColor = document.getElementById('colorPicker').value;
 	 	$(this).css('background-color',pickColor);
	} else if (evt.which === 3) {
 	 	$(this).css('background-color','');
	};

// draw with mouse button hold down - this will not work on a touch display

	$('td').on('mouseover mouseleave', function() {
		const pickColor = document.getElementById('colorPicker').value;
		$(this).css('background-color',pickColor);
	});
})

.on('mouseup', 'td', function() {
	$('td').off('mouseover mouseleave');

});

/**
*@description Create the grid by entereing the input values for width and height.
*@description Limit grid size in dependance of 3 screen size ranges.
*/

function makeGrid() {
	const width = $('#input_width').val();
	const height = $('#input_height').val();
	const table = $('#pixel_canvas');
	table.children().remove();

// small screen size

if ( $(window).width() > 414 && $(window).width() <= 736) {
	if ((width>30) || (height>30)) {
		alert('MAX WIDTH AND HEIGHT IS LIMITED TO 30 TO FIT CANVAS ON SCREEN');
		window.location.removedByCodePen();
	} else {
		let i = 1;
			while (i <= height) {
			table.append( '' );
				for (let i = 1; i <= width; i++) {
			  	table.children().last().append('');
			    };
			i++;
		};
	};

// medium screen size

} else if ( $(window).width() > 737 && $(window).width() <= 1024){
	if ((width>70) || (height>70)) {
		alert('MAX WIDTH AND HEIGHT IS LIMITED TO 70 TO PREVENT BROWSER CRASH');
		window.location.removedByCodePen();
	} else {
		let i = 1;
			while (i <= height) {
			table.append( '' );
				for (let i = 1; i <= width; i++) {
			  	table.children().last().append('');
			    };
			i++;
		};
	};

// large screen size

} else if ( $(window).width() > 1025 ){
	if ((width>100) || (height>100)) {
		alert('MAX WIDTH AND HEIGHT IS LIMITED TO 100 TO PREVENT BROWSER CRASH');
		window.location.removedByCodePen();
	} else {
		let i = 1;
			while (i <= height) {
			table.append( '' );
 				for (let i = 1; i <= width; i++) {
					table.children().last().append('');
					};
				i++;
		};
	};

// screen size too small

	} else {
		alert('YOUR SCREEN SIZE IS TOO SMALL FOR THIS APP')
	};

};

/**
*@description Disable the context menu inorder to make smooth 'right-click' possible.
*/

function disableMenu() {
	document.oncontextmenu = function() {
		return false;
	}
}

/**
*@description Refresh the whole page.
*/

$('#btn_reload').click(function() {
    	 location.removedByCodePen();
	});

/**
*@description Refresh the canvas only.
*/

function clear() {
	if($('#btn_clear').length > 0 ) {
 		return;
 	} else {
 	$('#colorDiv').append('');
 	$('#btn_clear').on('click', function() {
 	$('td').css('background-color','');
		});
	};
}

/**
*@description Required call back functions in order to proceed when the 'Submit' button is triggered.
*/

document.getElementById("btn_submit").addEventListener("click",function(event) {
	event.preventDefault();
	makeGrid();
	clear();
	disableMenu();
	$('#btn_submit').hide('slow');
	$('.container').show('fast');
});
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv