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


Click to draw and double-click to delete!

Design a Canvas

CSS
body{
  text-align: center;
  background-color: #ffffff;
}

.outer-container {
  display: grid;
  width: 80em;
  height: 60em;
  border: 0.1em solid #00293C;
  margin: 2em auto;
  grid-template-columns: 25% auto;
  grid-template-rows: 15% 15% auto;
  box-shadow: 0.3em 0.3em 0.6em  #00293C;
}

.title-container {
  grid-area: 1/1/2/3;
  background-color: #1E656D;
  border-bottom: 0.1em solid #00293C;
  color: #00293C;
}

.options-container {
  grid-area: 2/1/4/2;
  text-align: center;
  font-size: 1.25em;
  background-color: #1E656D;
  color: #00293C;
  border-right: 0.05em solid #00293C;
}

.grid-container {
  grid-area: 2/2/4/3;
  font-size: 1.25em;
  background-color: #F1F3CE;
  color: #00293C;
}

h1{
  font-family: 'VT323', monospace;
  font-size: 80px;
}

h2{
  font-family: 'VT323', monospace;
  font-style: bold;
  font-size: 50;
}

h3{
  font-family: 'VT323', monospace;
  font-size: 20;
}

form{
  font-family: 'Open Sans', sans-serif;
}

input[type=number]{
  font-family: 'Open Sans', sans-serif;
  background-color: #1E656D;
  color: #F1F3CE;  
  font-size: 20px;
  border-color: #1E656D;
  border: 1px solid;
  
}

input[type=submit]{
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}

input[type=color]{
  width: 3.9em;
  height: 1.9em;
}

p{
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}

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

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

tr {
    height: 20px;
}

td {
    width: 20px;
}
JS
// function to make the grid
function makeGrid(height, width) {

  var height = $("#heightPicker").val();
  var width = $("#widthPicker").val();

  // clear canvas each time you run makeGrid
  $("#canvas").html('');

  // add the rows of the grid
  for(var i=0; i");
  };

  // for each row add columns and define the resulting spaces as a 'cell' each
  for(var j=0; j");
    });
  };

  // when user clicks on an individual cell, color the cell
    $(".cell").click(function(event){
     var cellColor = $("#colorPicker").val();
     $(event.target).attr('bgcolor',cellColor);
   });
  
  // when user double-clicks on an individual cell, color is cleared
  $(".cell").dblclick(function(event) {
    $(event.target).attr('bgcolor','');
  });  

};

function randomCanvas() {
  
  // clear canvas each time you run makeGrid
  $("#canvas").html('');
  
  // generate blank canvas
  var randHeight = 1 + Math.floor(Math.random() * 30);
  var randWidth = 1 + Math.floor(Math.random() * 30);
  
  // add the rows of the grid
  for(var i=0; i");
  };

  // for each row add columns and define the resulting spaces as a 'cell' each
  for(var j=0; j");
    });
  };

  // when user clicks on an individual cell, color the cell
    $(".cell").click(function(event){
     var cellColor = $("#colorPicker").val();
     $(event.target).attr('bgcolor',cellColor);
   });
  
  // when user double-clicks on an individual cell, color is cleared
  $(".cell").dblclick(function(event) {
    $(event.target).attr('bgcolor','');
  }); 
    
};


$(document).ready(function() {
  randomCanvas()
  
  // when the form is submited, make the grid and color cells as needed
  $("#dimentionsPicker").submit(function(event) {
    makeGrid();
    event.preventDefault();
    });
  
  $("#random-button").click(function(event) {
    randomCanvas();
    //event.preventDefault();
    });

});

Description

Pixel Art Maker
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv