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;
}

h1 {
  font-family: Monoton;
  font-size: 70px;
  margin: 0.2em;
}

h2 {
  margin: 1em 0 0.25em;
}

h2:first-of-type {
  margin-top: 0.5em;
}

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
// Select color input
// Select size input

// When size is submitted by the user, //call makeGrid()
function makeGrid() {
  // Your code goes here!
  //get pixel canvas
  var table = $("#pixel_canvas");

  //get rows and cols input
  var inputH = $("#input_height").val();
  var inputW = $("#input_width").val();

  //reset to empty table if we already created
  table.children().remove();

  //create rows
  for (var i = 1; i < inputH; i++) {
    table.append("");
    //create cols
    for (var j = 1; j < inputW; j++) {
      table.children()
        .last()
        .append("");
    }
  }
  //listen for cel clicks
  table.on("click", "td", function() {
    //get color from colorPicker
    var colorPick = $("input[type='color']").val();
    //apply color to cell
    $(this).attr("bgcolor", colorPick);
  });
}

//listen for btn clicks to trigger makeGrid()
$("form input:nth-child(3)").on("click", function(event) {
  event.preventDefault(); //required to
  // avoid submit and page reloaded
  makeGrid();
});
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv