LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

Rod's Pixel Art Maker!

 

Choose Grid Size

Grid Height:

Grid Width:

Pick A Color

Design Canvas

CSS
body {
    background: lightgrey;
    margin:0;
    padding: 0;  
}
.title-container {
  display: inline-block;
  background-color: #263238;
  color: #fff;
  margin: 0;
  padding: 0;
  top: 0px;
  min-width: 100vw;
}
.bar {
  background-color: #000a12;
  padding: 0;
  margin: 0;
}
h1, h2 {
  text-align: center;
}
.bold {
  font-weight: bold;
}

.selector {
  margin: 0px;
  background: #4f5b62;
  padding: 0px 5px;
  min-height: 100vh;
}

.selector h2, .selector h3 {
  color:white;
}

.canvas {
  display: flex;
  flex-grow: 3;
  justify-content: center;
}

h1 {
    font-family: 'VT323', monospace;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    font-family: 'VT323', monospace;
    font-size: 45px;
    margin: 1em 0 0.25em;
}

h2:first-of-type {
   font-family: : helvetica, arial, sans-serif;
    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;
}
.mt20 {
  margin-top: 20px;
}
.pt10 {
  padding-top: 10px;
}
.pt20 {
  padding-top: 20px;
}
.clear {
  clear: both;
}
JS
  // Select color input
  // Select size input
  $(document).ready(function() {
  // $('#sizePicker').on('submit', function(event) {
  //   makeGrid();
  //
  // });  // When size is submitted by the user, call makeGrid()
  const table =  $('#pixel_canvas');
  let height;   // variable declartion for the input Height
  let width;    // variable declaration for the input width
  let color;    // variable declaration for the color picker
  let board;    // variable declaration for the HTML element where the board will be drawn.

  function makeGrid() {
    $('#submit').click(function(event) {
      event.preventDefault();
        color = $('#colorPicker').val();

        $('#colorPicker').on('change', function() {
          color = $('#colorPicker').val();      // assigns the value of the color selector to the variable color
        });

        height = $('#input_height').val();     // assigns the value of the height input to the variable height
        width = $('#input_width').val();       // assigns the value of the Width input to the variable width

        $('#pixel_canvas tr').remove();         // removes all previous drawn rows so that the table doesn't keep adding
        for (var r = 0; r < height; r++ ) {     // external loop to create table rows
          $(table).append('');
            for (var c = 0; c < width; c++) {   //internal loop which appends the table cells to the last created row
              $('tbody').children().last('tr').append('');
            }                                  //end of cell loop
        }                                      // end of row loop
    });                                        //end of submit function
  }                                            //  END of makeGrid();
makeGrid();
  $(table).on('mousedown', 'td', function() {
      $(this).css('background', color);
//      console.log(this);
  });
});                                             // End of jQuery DOM Ready function
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv