LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    Pixel Art Maker!
    
    
    



PIXEL ART

MAKER

by brikson

Choose Grid Size

Height:
+
10
-
Width:
+
10
-

Pick A Color

CSS

body {
    text-align: left;
    background-color: #262626;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
}

h1 {
    font-family: Orbitron,  Times, serif;
    
    font-size: 70px;
    
}
p {
    font-size: 20px;
}


.block {
    border: 1px solid rgba(192, 191, 191, 0.116);
    width: 5px;
    height: 5px;
    float: left;    
}
.block:hover {
    box-shadow: 0px 1px 1px 1px rgba(0, 255, 217, 0.829);
}
.container {
    margin: auto;
    width: 300px;
    height: 300px;
}

.description {
    color: #262626;
    display: block;
    padding: 5% 7%;
    
}

.wrapper{
    display: flex;
    height: 100vh;
    min-height: 850px;
}
.leftPane {
    flex: column;
    width: 30%;
    min-width: 500px;
    height: 100%;
    color: #262626;
    background-color: #B29013;
}
.grid {
    display: flex;
    justify-content: center;
    width: 100%;
}

.widtAndHeight {
    font-size: 20px;
    text-align: left;
    display: block;
    padding: 2% 7%;
}
.addCount {
    cursor: pointer;
    display: inline;
    outline: none;
}
#heightLabel, #widthLabel, #heightCounter, #widthCounter {
    cursor: default;
}
#input_width {
    margin-left: 8px;
}
/* buttons */
.textPosition {
    display: block;
    padding: 3% 7%;
    
}
.gridder {
    /* font */
    color: #FFC801;
    font-size: 20px;
    font-family: Orbitron;
    
    /* remove blue underline */
    text-decoration: none;
    
    /* border */
    border: 1px solid #FFC801;
    border-radius: 10px;
    
    /* transitions */
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .2s;
    
    /* other */
    background-color: #262626;
    padding: 2% 35%;
    margin-left: 7%;
    margin-right: 5%;
    margin-top: 5%;
    outline: none;
  }
  
  .gridder:hover {
    /* update text color and background color */
    color: #262626;
    background-color: #FFC801;
    
     /* transitions */
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .2s;
  }
  
  button.gridder {
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .colorPickerDiv {
      margin-top: 5%;

  }

  #colorPicker {
      display: block;
      margin: 5% 7%;
  }
JS
// Select color input
var colorPicker = $("#colorPicker");
// Select size input
var inputHeight = $("#heightCounter");
var inputWidth = $("#widthCounter");
// When size is submitted by the user, call makeGrid()
var isRight = false;//checks if left or right mouse button
var isDown = false; // Tracks status of mouse button
var heightCounterVal = 35; //set grid height
var widthCounterVal = 35; //set grid width

//declaration for '+' sign funcionality - incrementing grid width/height
function addOnClick(counterType, selector) {
  counterType += 5; //increase ich row/column by 5
//max value limit
  if (counterType === 75) {
    alert("Max value is 70");
    counterType = 70;
  }
  selector.text(counterType); //update displayed value
  return counterType;
}
//declaration for '-' sign funcionality - decrementing grid width/height
function remOnClick(counterType, selector) {
  counterType -= 5;
//min value limit
  if (counterType === 0) {
    alert("Min value is 0");
    counterType = 5;
  }
  selector.text(counterType); //update displayed value
  return counterType;
}
/*********DRAW GRID DEFINITION*******/
function makeGrid() {
  var color = $("#colorPicker").val();
  var height = inputHeight.val();
  var width = inputWidth.val();
  var cell = $(".block");
  cell.remove(); //clear grid 
  for (var h = 0; h < heightCounterVal; h++) {
        $(".container").css("width", 7 * widthCounterVal + "px"); //set container's width: 5x5px div + 2x1px for border = 7px each * inserterd width val
    for (var w = 0; w < widthCounterVal; w++) {
      $('
').appendTo(".container"); //add clas for each div for styling } } } /*******INIT VALUES*******/ inputHeight.text(heightCounterVal); //init height inputWidth.text(widthCounterVal); //init width /***** CUSTOM INPUTS *****/ //add 5 rows on each click $("#input_height").on("click", function(evt) { evt.preventDefault(); heightCounterVal = addOnClick(heightCounterVal, inputHeight); }); //remove 5 rows on each click $("#heightMinCount").on("click", function(evt) { evt.preventDefault(); heightCounterVal = remOnClick(heightCounterVal, inputHeight); }); //add 5 columns on each click $("#input_width").on("click", function(evt) { evt.preventDefault(); widthCounterVal = addOnClick(widthCounterVal, inputWidth); }); //remove 5 columns on each click $("#widthMinCount").on("click", function(evt) { evt.preventDefault(); widthCounterVal = remOnClick(widthCounterVal, inputWidth); }); //set event listener on "submit" button $("#mkGrd").on("click", function(evt) { evt.preventDefault(); //don't reload page makeGrid(); //draw grid //set event listener on each grid's div //and listen if left mouse button is down $(".block").mousedown(function(evt) { isDown = true; //set flag if(evt.button === 2) { isRight = true; //set flag for right mouse button //remove context menu on right click $(this).contextmenu(function(){ return false; }); //set color to background $(this).css("background", "#262626"); } else { //set div's color to selected one $(this).css("background", colorPicker.val()); } }); $(".block").mouseup(function() { isDown = false; //remove flag if mouseup isRight = false; //remove flag }); $(".block").mouseover(function() { if (isDown) { if(isRight){ $(this).contextmenu(function(){ return false; }); $(this).css("background", "#262626"); } else { // Only change css if mouse is down $(this).css("background", colorPicker.val()); } } }); });
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv