LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


    
    
    Pixel Art Maker!
     
    
    
    



	
	

PANEL

Enter your title

Choose Grid Size

Pick a color

Click on cell to change color

Clear project

Print project

Lab: Pixel Art Maker

CSS
body {
    width: 98%;
    padding-right: 2%;
    padding-bottom: 40px;
    text-align: center;
    margin: 0;
    background-color: #424647;
    color: #fff;
    font: 1em arial, tahoma, verdana, serif;
}

h1 {
	width: auto;
    font-family: "Russo One", sans-serif;
    font-size: 60px;
    margin: 30px 0 20px 245px;
    color: #eee;
}


/* Canvas table */

table {
    border-collapse: collapse;
    border-width: 3px;
    margin: 0 auto;
    box-shadow: 10px 15px 20px #000;    
}

tr {
    height: 20px;
}

td {
    width: 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #fff;
}

td:hover {
    background-color: #bbb;
}


/* Panel of tools */
.panel {
    display: block;
    float: left;
    width: 225px;
    background-color: #000;
    text-align: center;
    margin: -30px 20px 0 0;
    padding: 20px 5px 20px 0;
	  height: auto;
}

h2 {
    font-size: 1.3em;
    color: #15c0ef;
    margin: 0 0 10px 0;
}

h3 {
    font-size: 1.1em;
    color: #15c0ef;
    margin: 0 0 10px 0;
	font-weight: normal;
}

.small {
    font-size: 0.8em;
}

.boxLine {
    display: inline;
}

label {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1em;
	margin-bottom: 10px;
}

p {
	margin-bottom: 20px;
}

input {
    width: 210px;
    font-size: 1em;
    border: 1px solid #555;
    padding: 7px;
    margin-left: 5px;
    margin-bottom: 10px;
    color: #eee;
    background-color: #2d3030;
}

input[type=number] {
    font-weight: normal;
    border: 1px solid #888;
    color: #444;
    background-color: #eee;
    width: 50px;
    height: 15px;
}

input[type=text] {
    width: 192px;
	color: #444;
	background-color: #eee;
	
}

input[type=color] {
    font-weight: normal;
    height: 40px;
    width: 95%;
    background-color: #fefefe;
	padding: 3px;
}

input[type=color]:hover {
    box-shadow: 3px 3px 10px #888;
}

input[type=button]:hover {
    color: #4cbee2;
    cursor: pointer;
    border: 1px solid #888;
    box-shadow: 3px 3px 10px #555;
	background-color: #444;
}


@media print {
  @page {
      margin:1cm;
  }

  @page rotated {
    size: landscape;
  }

  table {
    page: rotated;
  }

  html, 
  body {
      float: none;
      position: static;
      height: auto;
      width: auto;
      margin: 0;
      padding :0;
      border: none;
      font-size: 20pt;
  }

  .panel {
      display: none;
  }

  h1 {
      font-size: 15pt;
      text-align: center;
  }

  h2,
  form, 
  input, 
  p {
      display: none;
  }

  td {
    padding: none;
  }
}
JS
const pixelCanvas = document.getElementById('pixel_canvas');
const heightInput = document.getElementById('input_width');
const widthInput = document.getElementById('input_height');
const colorPicker = document.getElementById('colorPicker');
const submitInput = $('#input_submit');
const resetColor = $('#input_reset');
const bgInput = $('#input_background');
const headerColorInput = $('#input_header');
const printInput = $('#input_print');
const canvasColorInput = $('#input_canvas');
const cellInput = $('#input_cell');
let titleInput = $('#input_title');
let reloadInput = $('#input_reload');

/**
* @description Make a grid
* @param {number} 
* @param {number} 
* @returns {object} Table
*/
const makeGrid = () =>{
	const width = widthInput.value;
  const height = heightInput.value;
  
	// TODO: make a table
	for (let x = 0; x < width; x++) {
		const tr = pixelCanvas.insertRow(x);
			for (let y = 0; y < height; y++) {
				const td = tr.insertCell(y);
				
				// TODO: change color a clicked cell
				td.onclick = () => {
				td.style.backgroundColor = colorPicker.value;
			};
  	}
	}
};

/**
* @description Choose and change color selected elements on page
* @param {}
* @param {}
* @returns {} New color for selected elements on page when click aproppriate button
*/
function chooseColor(){
	
	// TODO: change color all cells
    $(canvasColorInput).click(function(){
        $('table tr td').css('background-color', colorPicker.value);
    });
	
	// TODO: reset color all cells
    $(resetColor).click(function(){
        $('table tr td').css('background-color', '#fff');
    });
	
	// TODO: change a background color
	$(bgInput).click(function(){
        $('body').css('background-color', colorPicker.value);
    });
	
	// TODO: change a h1 color
	$(headerColorInput).click(function(){
        $('h1').css('color', colorPicker.value);
    });
	
	// TODO: change a cell border color
	$(cellInput).click(function(){
        $('table tr td').css('border-color', colorPicker.value);
    });
    
	// TODO: change a cell color with onclick mouse button and moving mouse
   $('td').mousedown(function(event){
        if(event.buttons){
            $(this).css('background-color', colorPicker.value);
        }
    });
    $('td').mouseover(function(event){
        if(event.buttons){
            $(this).css('background-color', colorPicker.value);
        }
    });
};

/**
* @description Change text in element h1
* @param {}
* @param {}
* @returns {} New text in h1
*/
function changeTitle(){
    titleInput = $('#title').val();
    $('h1').text(titleInput);
};

/**
* @description Print page
* @param {}
* @param {}
* @returns {} Opened panel to print page
*/
function printProject(){
    $('#input_print').click(function(){
        window.print();
    });
};

// TODO: create a grid by click button 
submitInput.on('click', function(){
    makeGrid();
    chooseColor();
});

// TODO: change text in h1
titleInput.on('click', function(){changeTitle();});

// TODO: open panel to print
printInput.on('click', function(){printProject();});

// TODO: reload page
reloadInput.on('click', function(){location.removedByCodePen();});
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv