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

table {
  border-collapse: collapse;
  margin: 0 auto;
  cursor:url('https://www.office-vender.com/favicon.png') 0 16 ,auto;

}

tr {
  height: 20px;
}

td {
  width: 20px;
  box-sizing: border-box;
}

input[type=number] {
  width: 6em;
}
JS
  jQuery(function($) {

    //@description Take the DOM objects and set them as constants
    const inputHeight = $('#input_height');
    const inputWidth = $('#input_width');
    const colorPicker = $('#colorPicker');
    const tableCanvas = $('#pixel_canvas');

    //@description Holds the state of the mouse button - clicked (true) or not clicked (false)
    let isMouseDown = false;

    //@description Makes the cursor change the background of each cell
    function drawWithCursor() {

      //@description When the mouse button is held down, the @param isMouseDown is set to true. This will allow user to draw continuously on the grid/canvas
      $('td').mousedown(function() {
        isMouseDown = true;
      });

      //@description When the mouse button is released the user will not be able to draw on the grid/canvas
      $('td').mouseup(function() {
        isMouseDown = false;
      });

      //@description If the mouse button is released outside the grid/canvas, the cursor will NOT continue to draw when it is back on the grid/canvas.
      //@description Solved the unexpected behaviour. Comment this event to examine the unexpected behaviour.
      tableCanvas.mouseleave(function functionName() {
        isMouseDown = false;
      });

      //@description The background from the color picker is applied on the clicked cell.
      function draw(e) {
        let colorChoosed = colorPicker.val();

        let cellClicked = $(e.target);

        cellClicked.css('background', colorChoosed);
      }

      //@description Allows the continuously drawing on the grid/canvas when mouse button is held (extra behaviour).
      //@param {event lsitener object} e
      tableCanvas.on('mouseenter', 'td', function(e) {
        if (isMouseDown) {
          draw(e);
        }
      });

      //@description Draw on the pixel/cell on single click of the mouse button (standard behaviour).
      tableCanvas.on('click', 'td', function(e) {
        draw(e);
      });
    }

    //@description Creates the canvas (grid)
    function makeGrid() {
      //@description If there is already Grid created, remove it and create new one.
      $('tr').remove();

      //@description Get the input value for height of the Grid.
      let row = inputHeight.val();

      //@description Get the input value for width of the Grid.
      let colomns = inputWidth.val();

      //@description Nested loop to create the canvas (Grid) taking the input values.
      for (let n = 0; n < row; n++) {

        //@description Create table row element.
        tableCanvas.append('');
        for (let m = 0; m < colomns; m++) {

          //@description Create table cell (pixel).
          $('tr').last().append('');
        }
      }

      //@description Sets the drawing behaviour of the cursor
      drawWithCursor();
    }

    //@description Get the form and on click of 'submit' button call makeGrid() function.
    //@param {event lsitener object} e
    $('form').submit(function(e) {
      makeGrid();
      e.preventDefault();
    });
  });

Description

My Pixel Art Maker Project for Udacity's front end developers program.
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv