LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    
    Pixel Art Maker!
    
    



  

Lab: Pixel Art Maker

Choose Grid Size

Pick A Color

Design Canvas

CSS
@import url("https://fonts.googleapis.com/css?family=Lato");
@import url("https://fonts.googleapis.com/css?family=Monoton");
@import url("https://fonts.googleapis.com/css?family=Nunito");

body {
    text-align: center;
}

div {
  margin: 1em;
}

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

h2 {
    font-family: Lato;
    margin: 1em 0 0.25em;
}

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

form {
      font-family: Nunito;
}

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

table {
    border-collapse: collapse;
    box-shadow: 5px 5px 2.5px 0px rgba(0,0,0,0.5);
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
    font-family: Nunito;
    text-align: center;
    content: attr(data-icon);
}

input[type=submit] {
    width: 100px;
    height: 40px;
    font-family: Nunito;
    font-weight: bold;
    color: #fff;
    border-color: rgb(0, 128, 255);
    border-radius: 4px;
    border-style: solid;
    background-color: rgb(0, 128, 255);
}

input[type=submit]:hover {
    background-color: rgb(0, 190, 0);
    border-color: rgb(0, 190, 0);
}

input[type=number]:invalid {
  color: red;
  border-color: red;
  border-style: solid;
}

input[type=number]:active {
  border-color: rgb(0, 128, 255);
  border-style: solid;
}
JS
// When size is submitted by the user, call makeGrid()
$("#input_button").on("click", function(event){
  event.preventDefault();
  makeGrid();
})

/**
* @description Creates a grid of submitted size
*/

function makeGrid() {

  // Remove existing grid and assign input values to variables
  const existingGrid = $("table").children().remove()
  const gridWidth = $("#input_width").val();
  const gridHeight = $("#input_height").val();
  const table = $("table");

  if (gridWidth === "" || gridHeight === "") {
      alert("Fill out both input fields");
      return;
  }

  // Add row element to the table element
  for (let row = 0; row < gridHeight; row++) {
      table.append("");
  }

  // Add columns to each row
  $(".tr").each( function () {
    for (column = 0; column < gridWidth; column++) {
      $( this ).append("");
    }
  })

  // Let the user know that the canvas has been created and it can be played width
  alert("Canvas created, show it some love! Have fun ;)");

  // Listen for clicking on td element and assign background-color
  const checkTable = $("td");
  $(".td").on("click", function(event) {
    event.preventDefault();
    const selectedColor = $("#colorPicker").val();
    const index  = $("td").index(this);
    $(this).css("background-color", selectedColor);
  });

}


$("#remove_table").on("click", function(event){
  event.preventDefault();
  const existingGrid = $("table").children().remove()
})

$("#clear_table").on("click", function(event){
  event.preventDefault();
  $(".td").css("background-color", "");
})
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv