Pixel-Art-Maker-Xmas Edition

In this example below you will see how to do a Pixel-Art-Maker-Xmas Edition with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by gabrielcmoraru, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gabrielcmoraru ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pixel-Art-Maker-Xmas Edition</title>
  		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/FileSaver.js" target="_blank""></script>
		<script src="jscolor.js"></script>
		<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
		<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
		<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
		<link href="https://fonts.googleapis.com/css?family=Lobster|Mountains+of+Christmas" rel="stylesheet">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="styles.css">
  
  <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--
Created by Gabriel Moraru
Email: gabrielcmoraru@gmail.com
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Pixel Art Maker!</title>
	</head>
	<body>
		<body>
		<h1>Lab: Pixel Art Maker</h1>
		<h2>Christmas Edition</h2>
		<div class="centerArea">
		<div class="vertical-menu-left">
			<a class="title">
				<h3>Dynamic Grid<span class="tips">Useful info<span class="tipstext">
				<p>1. All the sliders can be fine tuned using the keyboard arrows after selecting them </p>
				<p>2. Double left click = 1 horizontal line of the selected color</p>
				<p>3. Right click = replace box with white (can hold down too)</p>
				<p>4. Middle click will remove the selected row from the table even if it was painted</p>
				<p>The rest I will let you find out on your own :)</p></span></span>
				</h3>
			</a>
				<a>
				<form id="sizePicker" >
					<p>Grid Height: </p>
					<input type="range" id="input_height" name="height" step="1" value="1" min="1" max="40" onchange="showHeight(this.value)"><span id="heightValue">0</span>
					<p>Grid Width:</p>
					<input type="range" id="input_width" name="width" step="1" value="1" min="1" max="40" onchange="showWidth(this.value)"><span id="widthValue">0</span>
				</form>
			</a>
			<a>
				<p>Opacity</p>
				<input type="range" name="canvas_opacity" id="canvas_opacity"  min="0" step="0.05" value="1" max="1" onchange="showOpacity(this.value)"><span id="opacityValue">1</span>
			</a>
			<a>
				<p>Border size</p>
				<input type="range" name="canvas_border_size" id="canvas_border_size" min="0" step="0.5" value="1" max="30" onchange="showSize(this.value)"><span id="borderSizeValue">3</span>
			</a>
			<a>
				<button type="button" id="canvas_shadow_left" name="canvas_shadow_left">Shadow Left</button>
			</a>
			<a>
				<button type="button" id="canvas_shadow_right" name="canvas_shadow_right">Shadow Right</button>
			</a>
			<a>
				<button type="button" name="canvas_remove_lines" id="canvas_remove_lines">Remove/Add Lines</button>
			</a>
		</div>
		<table id="pixel_canvas" oncontextmenu="return false;" style="background-color: #ffffff"></table>
		<div class="vertical-menu-right">
			<a class="title">
				<h3>Color Pickers</h3>
			</a>
			<a>
				<p> Border</p>
				<input class="jscolor" name="canvas_border_color" id="canvas_border_color" value="af4462">
			</a>
			<a>
				<p> Inner</p>
				<input class="jscolor" name="canvas_inner_color" id="canvas_inner_color" value="beaa2f">
			</a>
			<a>
				<button name="colorSelector" id="colorSelector" class="jscolor {valueElement:null,value:'#87cefa'}">Paint Brush</button>
			</a>
			<a class="title"><h3>Extras</h3></a>
			<a>
				<button type="button" name="save_to_html" id="save_to_html">Save to HTML(Beta)</button>
			</a>
			<a>
				<button type="button" name="grinch_edition" class="grinch_edition">End Christmas</button>
			</a>
		</div>
	</div>
	<footer id="footer">
	<p>Created by: Gabriel C. Moraru, available on &nbsp;<a href="https://github.com/gabrielcmoraru/pixel-art" target="_blank" title="GitHub" ><i class="devicon-github-plain-wordmark colored" ></i></a>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="https://codepen.io/gabrielcmoraru/pen/ypOgGe" target="_blank" title="Code Pen" ><i class="fa fa-codepen" ></a></i>
	&nbsp;&nbsp;designed and fully tested on &nbsp;&nbsp;
	<a href="https://www.google.com/chrome/index.html" target="_blank" title="Download Chrome"><i class="devicon-chrome-plain-wordmark colored" ></i></a></p>
	<p>Follow me on &nbsp;&nbsp;
	<a href="https://twitter.com/GabrielCMoraru" target="_blank" title="Twitter"><i class="devicon-twitter-plain colored" ></i></a>
	&nbsp;&nbsp;or just pop an
	<a href="mailto:gabrielcmoraru@gmail.com" title="Email">Email</a></p>
</footer>
<script src="designs.js"></script>
</body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/gabrielcmoraru/pixel-art-maker-xmas-edition-ypOgGe */
/*
Created by Gabriel Moraru
Email: gabrielcmoraru@gmail.com
 */

body {
	background-image: url("https://images.unsplash.com/photo-1480412904173-931fd2ecfccb?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=81e94ab7938d77b70e751afc57a4d4a7");
	background-size: cover;
	position:  relative;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}

h1 {
	font-family: 'Mountains of Christmas', cursive;
	font-size: 70px ;
	margin: 0.2em;
	color: white;
}

h2 {
	font-family: 'Mountains of Christmas', cursive;
	font-size: 30px ;
	margin: 0.2em;
	color: white;
}

h3{
	margin-top: 3px;
	margin-bottom: 3px;
	color: white;
}

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

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

tr {
	height: 20px;
}

td {
	width: 20px;
}

span {
	box-decoration-break: clone;
	margin: 2px;
	padding: 5px;
	border: 1px solid black;
}

p {
	font-family: 'comic Sans', cursive;
}

a{
	text-decoration: none;
}

button {
	font-family: 'comic Sans', cursive;
	border-radius: 5px;
	border: 1px solid black;
}

i {
	font-size: 45px;
}

i.fa-codepen {
	font-size: 45px;
}

i.devicon-twitter-plain {
	font-size: 25px;
}

button.jscolor{
	border:1px solid black;
	border-radius: 10px;
	width: 175px;
	margin-top: 5px;
	margin-bottom: 5px;
}

table.pixel_canvas{
	flex-direction: column;
}

input.jscolor{
	width:100px;
	height:40px;
	text-align: center;
	margin: 0px;
	padding: 5px;
}

button.grinch_edition{
	color: black;
	background-color: yellowgreen;
	font-size:20px;
}

#footer {
	background-color: #efefef;
	padding: 5px;
	opacity: 0.80;
}

.tips {
	margin: 10px;
	padding: 10px;
	border: 2px solid red;
	color: blue;
	background-color: yellow;
	position: absolute;
	z-index: 1;
	opacity: 0.9;
}

.tips .tipstext {
	visibility: hidden;
	width: 270px;
	background-color: yellow;
	color: black;
	text-align: center;
	border-radius: 10px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: 125%;
	left: 175%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 1s;
}

.tips:hover .tipstext {
	visibility: visible;
	opacity: 1;
}

.centerArea{
	display: flex;
	flex: 1 0 auto;
	flex-wrap: wrap;
	align-items: flex-start;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 20px;
}

.vertical-menu-left {
	width: 200px;
	border: 1px solid black;
	font-family: 'comic Sans', cursive;
}

.vertical-menu-left a {
	background-color:lightseagreen ;
	color: black;
	display: block;
	padding: 10px;
	text-decoration: none;
/* lightcoral */
/* lightseagreen */
/* lightskyblue */
/* lemonchiffon */
}

.vertical-menu-left a:hover {
	background-color: #ff9800;
}

.vertical-menu-left a.title {
	background-color: #673ab7;
}

.vertical-menu-right {
	width: 200px;
	border: 1px solid black;
	font-family: 'comic Sans', cursive;
}

.vertical-menu-right a {
	background-color: lightseagreen;
	color: black;
	display: block;
	padding: 10px;
	text-decoration: none;
}

.vertical-menu-right a:hover {
	background-color: #ff9800;
}

.vertical-menu-right a.title {
	background-color: #673ab7;
	color: black;
}


/*Downloaded from https://www.codeseek.co/gabrielcmoraru/pixel-art-maker-xmas-edition-ypOgGe */
// Created by Gabriel Moraru
// Email: gabrielcmoraru@gmail.com


// Get range value for size input so it can be dispalyed in real time
function showHeight(newValue)
	{
	document.getElementById('heightValue').innerHTML=newValue;
	}

function showWidth(newValue)
	{
	document.getElementById('widthValue').innerHTML=newValue;
	}

function showOpacity(newValue)
	{
	document.getElementById('opacityValue').innerHTML=newValue;
	}

function showSize(newValue)
	{
	document.getElementById('borderSizeValue').innerHTML=newValue;
	}


//Grid
// --------------------------------------------------
function makeGrid() {

	//Gets height and width
	const trow = $('#input_height').val();
	const tcell = $('#input_width').val();

	//Resets canvas
	$('#pixel_canvas').children().remove();

	//Creates table tr and td
	for (var x = 0; x < trow; x++) {
	 $('#pixel_canvas').append("<tr></tr>");
		for (var y = 0; y < tcell; y++) {
			$('#pixel_canvas').children().last().append("<td></td>");
		}
	}

//Adds the selected color on the whole table row
$('#pixel_canvas').on('dblclick', 'tr', function(event) {
	event.preventDefault();
		const colorGenerator = $('#colorSelector').css('background-color');
	$(this).css('background-color', colorGenerator);
});

//Swaps the mouse cursor for a pointer when mouse is over Canvas
$('#pixel_canvas').mouseover(function(event) {
	$(this).css('cursor', 'pointer');
});

//Adds the selected color on the selected table cell
$('td').mousedown(function(firstClk) {
	if(firstClk.which === 1){
	event.preventDefault();
	const colorGenerator = $('#colorSelector').css('background-color');
		$(this).css('background-color', colorGenerator);
	}
});

//Adds the selected color on the selected table cells
//while holding down first click
$('td').mousemove(function(paint) {
	if (paint.which === 1) {
	event.preventDefault();
	const colorGenerator = $('#colorSelector').css('background-color');
		$(this).css('background-color', colorGenerator);
	}
});

//Adds the color white(erases colors) on selected cell
$('td').mousedown(function(secondClk) {
	if(secondClk.which === 3){
	event.preventDefault();
	const colorGenerator = $('#colorSelector').css('background-color');
		$(this).css('background-color', '#FFFFFF');
	}
});

//Adds the color white(erases colors) on selected cell
//while holding down second click
$('td').mousemove(function(paint) {
	if (paint.which === 3) {
	event.preventDefault();
	const colorGenerator = $('#colorSelector').css('background-color');
		$(this).css('background-color', '#FFFFFF');
	}
});

//Removes a whole line(tr) from the table
$('tr').mousedown(function(middleClk) {
	if(middleClk.which === 2){
	event.preventDefault();
		$(this).remove();
	}
});
}

//Update the Grid Size when change is detected
//Clears all cells
$("#sizePicker").change(function(event) {
	event.preventDefault();
	makeGrid();
});

// Canvas beautify
// ----------------------------------------------------

//Update the canvas border color
$('#canvas_border_color').on('change', function(event) {
	const borderColor = $("option:selected", $(this));
	const borderColorValue = '#' +this.value;
	 $('#pixel_canvas').css('border-color', borderColorValue);
});

//Update the canvas inner color
$('#canvas_inner_color').on('change', function(event) {
	const innerColor = $("option:selected", $(this));
	const innerColorValue = '#' +this.value;
	 $('#pixel_canvas').css('background-color', innerColorValue);
});

//Update the canvas opacity
$('#canvas_opacity').on('change', function(event){
	event.preventDefault();
	const opacityCanvas = $('#canvas_opacity').val();
		$('#pixel_canvas').css('opacity', opacityCanvas);
});

//Update the canvas border sieze
$('#canvas_border_size').on('change', function(event){
	event.preventDefault();
	const borderSize = $('#canvas_border_size').val();
		$('#pixel_canvas').css('border-width', borderSize);
});

//Remove the canvas inner lines
$('#canvas_remove_lines').click(function(event) {
	event.preventDefault();
	const buttonPressed = $(this);
	$(this).toggleClass('off');
	 if (buttonPressed.is('.off')){
			$('#pixel_canvas td, tr').css('border', '0px');
		} else{
			$('#pixel_canvas td, tr').css('border', '1px solid black');
	 }
});

//Add shadow left to canvas
$('#canvas_shadow_left').click(function(event) {
	$('#pixel_canvas').css({
				'-webkit-box-shadow': '-24px -18px 15px 0px rgba(0,0,0,0.61)',
				'-moz-box-shadow': '-24px -18px 15px 0px rgba(0,0,0,0.61)',
				'box-shadow': '-24px -18px 15px 0px rgba(0,0,0,0.61)'
			});
});

//Add shadow right to canvas
$('#canvas_shadow_right').click(function(event) {
	$('#pixel_canvas').css({
				'-webkit-box-shadow': '24px -18px 15px 0px rgba(0,0,0,0.61)',
				'-moz-box-shadow': '24px -18px 15px 0px rgba(0,0,0,0.61)',
				'box-shadow': '24px -18px 15px 0px rgba(0,0,0,0.61)'
			});
});

//Extra
// ----------------------------------------------------

//Save canvas to HTML(BETA VERSION..)
$("#save_to_html").click( function(save) {
	var picToFrame = $("#pixel_canvas").prop('outerHTML');
	var filename = $("#input-fileName").val();
	var blob = new Blob([picToFrame], {type: "charset=utf-8"});
	saveAs(blob, filename+".html");
});

//Revert to a basic theme (aka Grinch Edition)
$('.grinch_edition').click(function(grinch) {
	$('body').css('background-image', 'url()');
	$('h1').css({
		'color': '#99B2B7',
		'font-family': 'Lobster'
	});
	$('h2').css({
		'color': '#99B2B7',
		'font-family': 'Lobster'
	});
	$('h2').html('Not very Christmassy now...is it?');
	$('.vertical-menu-left a').css('background-color', '#6D9DA6');
	$('.vertical-menu-left a.title').css('background-color', '#746767');
	$('.vertical-menu-right a').css('background-color', '#6D9DA6');
	$('.vertical-menu-right a.title').css('background-color', '#746767');
	$('.vertical-menu-right').children('a').last().remove();
});

Comments