Adrian-Samuel/index.html

## index.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">
</head>
<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="input_height" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="input_width" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">
	<input type="reset" value="Reset the form">

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

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

## pixel-art-maker.markdown

      
    Raw
  

              pixel-art-maker.markdown
            
          
    Pixel Art Maker

A Pen by Adrian Samuel on CodePen.
License.

  
## script.js
$('#pixel_canvas').on("click", "td", function() {
																				$(this).css("background-color", $("input[type='color']").val());
																				});

$('#sizePicker').submit(function(){
let rows = $("#input_height").val();
let columns = $("#input_width").val();
var table = $('#pixel_canvas');

for(x = 0; x <= rows; x++) {
	var row = $('<tr></tr>').appendTo(table);

  for(y = 0; y <= columns; y++) {
  var column = $('<td> </td>').appendTo(row);
  }
}
return false;
});


$("input[type='reset']").click(function(){

	$('tr td').remove();
	$("#sizePicker").trigger("reset");
})

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

## style.scss
table {
	margin: 0 auto;
}

tr, td {
	border: 1px solid black;


}
tr  {
	width: auto;
	height: auto;

}

td {
	height: 50px;
	width: 50px;

}
	<html>
	<head>
	<title>Pixel Art Maker!</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<h1>Lab: Pixel Art Maker</h1>

	<h2>Choose Grid Size</h2>
	<form id="sizePicker">
	Grid Height:
	<input type="number" id="input_height" name="height" min="1" value="1">
	Grid Width:
	<input type="number" id="input_width" name="width" min="1" value="1">
	<input type="submit">
	</form>

	<h2>Pick A Color</h2>
	<input type="color" id="colorPicker">
	<input type="reset" value="Reset the form">

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

	<script src="designs.js"></script>
	</body>
	</html>
	$('#pixel_canvas').on("click", "td", function() {
	$(this).css("background-color", $("input[type='color']").val());
	});

	$('#sizePicker').submit(function(){
	let rows = $("#input_height").val();
	let columns = $("#input_width").val();
	var table = $('#pixel_canvas');

	for(x = 0; x <= rows; x++) {
	var row = $('<tr></tr>').appendTo(table);

	for(y = 0; y <= columns; y++) {
	var column = $('<td> </td>').appendTo(row);
	}
	}
	return false;
	});


	$("input[type='reset']").click(function(){

	$('tr td').remove();
	$("#sizePicker").trigger("reset");
	})
	table {
	margin: 0 auto;
	}

	tr, td {
	border: 1px solid black;


	}
	tr {
	width: auto;
	height: auto;

	}

	td {
	height: 50px;
	width: 50px;

	}