therealshabi/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker" onsubmit="makeGrid">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWeight" name="width" min="1" value="1">
        <input type="submit">
        <input type="reset" id="reset">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

## pixel-art-maker.markdown

      
    Raw
  

              pixel-art-maker.markdown
            
          
    Pixel Art Maker

A Pen by Shahbaz Hussain on CodePen.
License.

  
## script.js
// Select color input
// Select size input

//ready() is used to make a function available after the document is loaded
$(document).ready(function(){

  // When size is submitted by the user, call makeGrid()
  function makeGrid() {
    const n = Number($("#inputHeight").val());
    const m = Number($("#inputWeight").val());
    const canvas = $("#pixelCanvas");
    const colorPicker = $("#colorPicker");
    /*let variables & const are accessible in a block scope, while let is mutable,
      const is immutable.
    */
    let color = colorPicker.val();

    canvas.children().remove();

    for(var i=0;i<n;i++) {
      canvas.append("<tr></tr>");
    }
    for(var j=0;j<m;j++) {
      $("tr").append("<td id='pixel'></td>");
    }

    //Color the pixel on clicking the pixel
    $("#pixelCanvas").on("click", "td", function(e) {
      //Color with the specified color if not already colored
      //e.target means the exact element in which the event is invoken
      if (!$(e.target).attr("style")) {
      $(e.target).css("background-color",color);
      $(e.target).addClass("colored");
    }
    else {
      //if already colored remove the color from the pixel
      $(e.target).removeAttr("style");
      $(e.target).removeClass("colored");
    }
    });

    //On changing the color from colorpicker change the already colored pixels.
    colorPicker.on("change",function() {
      color = colorPicker.val();
      //$(".colored").css("background-color",color);
    });
  }

    //OnSubmitting form form the grid
    $("form").submit(function(e) {
      //Prevent submit button to reload the page (by default action)
      e.preventDefault();
      makeGrid();
    });

//Action on reset button
    $("#reset").on("click",function() {
      $("#pixelCanvas").children().remove();
      $("#colorPicker").val("#000000");
    });

});

## style.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;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pixel Art Maker!</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
	<link rel="stylesheet" href="styles.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>
	<h1>Lab: Pixel Art Maker</h1>

	<h2>Choose Grid Size</h2>
	<form id="sizePicker" onsubmit="makeGrid">
	Grid Height:
	<input type="number" id="inputHeight" name="height" min="1" value="1">
	Grid Width:
	<input type="number" id="inputWeight" name="width" min="1" value="1">
	<input type="submit">
	<input type="reset" id="reset">
	</form>

	<h2>Pick A Color</h2>
	<input type="color" id="colorPicker">

	<h2>Design Canvas</h2>
	<table id="pixelCanvas"></table>

	<script src="designs.js"></script>
	</body>
	</html>
	// Select color input
	// Select size input

	//ready() is used to make a function available after the document is loaded
	$(document).ready(function(){

	// When size is submitted by the user, call makeGrid()
	function makeGrid() {
	const n = Number($("#inputHeight").val());
	const m = Number($("#inputWeight").val());
	const canvas = $("#pixelCanvas");
	const colorPicker = $("#colorPicker");
	/*let variables & const are accessible in a block scope, while let is mutable,
	const is immutable.
	*/
	let color = colorPicker.val();

	canvas.children().remove();

	for(var i=0;i<n;i++) {
	canvas.append("<tr></tr>");
	}
	for(var j=0;j<m;j++) {
	$("tr").append("<td id='pixel'></td>");
	}

	//Color the pixel on clicking the pixel
	$("#pixelCanvas").on("click", "td", function(e) {
	//Color with the specified color if not already colored
	//e.target means the exact element in which the event is invoken
	if (!$(e.target).attr("style")) {
	$(e.target).css("background-color",color);
	$(e.target).addClass("colored");
	}
	else {
	//if already colored remove the color from the pixel
	$(e.target).removeAttr("style");
	$(e.target).removeClass("colored");
	}
	});

	//On changing the color from colorpicker change the already colored pixels.
	colorPicker.on("change",function() {
	color = colorPicker.val();
	//$(".colored").css("background-color",color);
	});
	}

	//OnSubmitting form form the grid
	$("form").submit(function(e) {
	//Prevent submit button to reload the page (by default action)
	e.preventDefault();
	makeGrid();
	});

	//Action on reset button
	$("#reset").on("click",function() {
	$("#pixelCanvas").children().remove();
	$("#colorPicker").val("#000000");
	});

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