skrece22/design.js

## design.js
$(window).on("load", function() {
  $("button").attr("disabled", "disabled");
});

//Variables
const form = $("form");
const pixelCanvas = $("#pixel_canvas");
const colorPicker = $("#colorPicker");

let gridHeight = document.getElementById("input_height").value;
let gridWidth = document.getElementById("input_width").value;
let pixelSize = document.getElementById("input_pixel").value;
let color = document.getElementById("colorPicker").value;

let mouseDown = false;
let borderRemoved = false;
let eraserOn = false;

//Setting default Color for colorPickers
colorPicker.val("#aabbcc");
$("#bgColor").val("#fcfc10");

//Colorpicker Listener
colorPicker.change(function(evt) {
  if (!eraserOn) {
    color = evt.target.value;
  } else {
    resetEraser();
  }
});

// Mouse Listeners for performing drawing
pixelCanvas.on("mousedown", "td", function(evt) {
  evt.preventDefault();
  $(evt.target).css("background-color", color);
  mouseDown = true;
});

$("html").on("mouseup", function(evt) {
  mouseDown = false;
});

pixelCanvas.on("mouseover", "td", function(evt) {
  if (mouseDown) {
    $(evt.target).css("background-color", color);
  }
});

// Adding or Removing border
$(".border").click(function() {
  var $this = $(this);
  borderRemoved = !borderRemoved;
  removeBorder();
  if (borderRemoved) {
    $this.text("Add Border");
  } else {
    $this.text("Remove Border");
  }
});

// A function to remove table, td, tr border
function removeBorder() {
  $("td").toggleClass("removedBorder");
  $("table").toggleClass("removedBorder");
  $("tr").toggleClass("removedBorder");
}

// Enable or Disable Eraser
$(".eraser").click(function() {
  var $this = $(this);
  eraserOn = !eraserOn;
  if (eraserOn) {
    color = "#FFFFFF";
    $this.text("Click to Draw!");
  } else {
    color = colorPicker.val();
    $this.text("Click to Erase!");
  }
});

//Form
form.submit(function(evt) {
  evt.preventDefault();
  resetBorder();
  resetEraser();
  gridHeight = evt.target.height.value;
  gridWidth = evt.target.width.value;
  pixelSize = evt.target.pixel.value;
  makeGrid(gridHeight, gridWidth, color);
  setPixelSize();
});

//make grid function
function makeGrid(height, width) {
  pixelCanvas.children().remove();
  let td = "";
  for (let j = 0; j < width; j++) {
    td += "<td></td>";
  }
  for (let i = 0; i < height; i++) {
    pixelCanvas.append(`<tr>${td}</tr>`);
  }
}

//reset border

function resetBorder() {
  $("button").removeAttr("disabled");
  if ($(".border").text() === "Add Border") {
    borderRemoved = false;
    $(".border").text("Remove Border");
    removeBorder();
  }
}

//resetEraser

function resetEraser() {
  if ($(".eraser").text() === "Click to Draw!") {
    eraserOn = false;
    $(".eraser").text("Click to Erase!");
  }
  color = colorPicker.val();
}

//set Pixel size

function setPixelSize() {
  $("tr").css("height", pixelSize);
  $("td").css("width", pixelSize);
}

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link href="https://fonts.googleapis.com/css?family=Finger+Paint" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script src="https://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" class="box-layout">
        <div class="box-layout-item">
            Grid Height:
            <input class="input"type="number" id="input_height" name="height" min="1" value="10">
        </div>
        <div class="box-layout-item">
            Grid Width:
            <input class="input" type="number" id="input_width" name="width" min="1" value="10">
        </div>
        <div class="box-layout-item">
            Pixel size:
            <input class="input" type="number" id="input_pixel" name="pixel" min="1" value="20">
        </div>
        <div class="box-layout-item">
            <input class="button" type="submit" value="Create Grid">
        </div>
    </form>

    <div class="box-layout">
        <div class="box-layout-item">
            <h2>Pick A Color</h2>
            <input class="input-color"id="colorPicker" type="color" name='colorPicker'>
        </div>
        <div class="box-layout-item">
            <h2>Border</h1>
            <button class="border button" disabled>Remove Border</button>
        </div>
        <div class="box-layout-item">
            <h2>Eraser</h1>
            <button class="eraser button" disabled>Click to Erase!</button>
        </div>
    </div>
    <h2>Design Canvas</h2>
    <table id="pixel_canvas"></table>

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

## styles.css
body{
    text-align: center;
    background-color: #cefef5;
}

h1 {
    font-family: 'Finger Paint', cursive;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    font-family: 'Mountains of Christmas', cursive;
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 0.2px solid #c9c9c9;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    margin-top: 10px;
    margin: 0 auto;
    background: white;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

.removedBorder{
    border: 0;
}

.box-layout {
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    justify-content: center;
}

.box-layout-item {
    margin: 0 10px;
    justify-content: center;
}

.button{
    background: #1c88bf;
    border: 0;
    color: white;
    display: inline-block;
    font-size: 18px;
    font-weight: 300;
    padding: 10px;
}

.button:disabled{
    background: #cecece;
    pointer-events: none;
}

.button:hover{
    background: #105577;
}

.input {
    border: 1px solid #cacccd;
    font-size: 16px;
    font-weight: 300;
    padding: 10px;
}

.input-color {
    border: 1px solid #cacccd;
    background: white;
    height: 42px;
    padding: 5px;
}

.input-color:hover{
    background: #e6e6e6;
}
	$(window).on("load", function() {
	$("button").attr("disabled", "disabled");
	});

	//Variables
	const form = $("form");
	const pixelCanvas = $("#pixel_canvas");
	const colorPicker = $("#colorPicker");

	let gridHeight = document.getElementById("input_height").value;
	let gridWidth = document.getElementById("input_width").value;
	let pixelSize = document.getElementById("input_pixel").value;
	let color = document.getElementById("colorPicker").value;

	let mouseDown = false;
	let borderRemoved = false;
	let eraserOn = false;

	//Setting default Color for colorPickers
	colorPicker.val("#aabbcc");
	$("#bgColor").val("#fcfc10");

	//Colorpicker Listener
	colorPicker.change(function(evt) {
	if (!eraserOn) {
	color = evt.target.value;
	} else {
	resetEraser();
	}
	});

	// Mouse Listeners for performing drawing
	pixelCanvas.on("mousedown", "td", function(evt) {
	evt.preventDefault();
	$(evt.target).css("background-color", color);
	mouseDown = true;
	});

	$("html").on("mouseup", function(evt) {
	mouseDown = false;
	});

	pixelCanvas.on("mouseover", "td", function(evt) {
	if (mouseDown) {
	$(evt.target).css("background-color", color);
	}
	});

	// Adding or Removing border
	$(".border").click(function() {
	var $this = $(this);
	borderRemoved = !borderRemoved;
	removeBorder();
	if (borderRemoved) {
	$this.text("Add Border");
	} else {
	$this.text("Remove Border");
	}
	});

	// A function to remove table, td, tr border
	function removeBorder() {
	$("td").toggleClass("removedBorder");
	$("table").toggleClass("removedBorder");
	$("tr").toggleClass("removedBorder");
	}

	// Enable or Disable Eraser
	$(".eraser").click(function() {
	var $this = $(this);
	eraserOn = !eraserOn;
	if (eraserOn) {
	color = "#FFFFFF";
	$this.text("Click to Draw!");
	} else {
	color = colorPicker.val();
	$this.text("Click to Erase!");
	}
	});

	//Form
	form.submit(function(evt) {
	evt.preventDefault();
	resetBorder();
	resetEraser();
	gridHeight = evt.target.height.value;
	gridWidth = evt.target.width.value;
	pixelSize = evt.target.pixel.value;
	makeGrid(gridHeight, gridWidth, color);
	setPixelSize();
	});

	//make grid function
	function makeGrid(height, width) {
	pixelCanvas.children().remove();
	let td = "";
	for (let j = 0; j < width; j++) {
	td += "<td></td>";
	}
	for (let i = 0; i < height; i++) {
	pixelCanvas.append(`<tr>${td}</tr>`);
	}
	}

	//reset border

	function resetBorder() {
	$("button").removeAttr("disabled");
	if ($(".border").text() === "Add Border") {
	borderRemoved = false;
	$(".border").text("Remove Border");
	removeBorder();
	}
	}

	//resetEraser

	function resetEraser() {
	if ($(".eraser").text() === "Click to Draw!") {
	eraserOn = false;
	$(".eraser").text("Click to Erase!");
	}
	color = colorPicker.val();
	}

	//set Pixel size

	function setPixelSize() {
	$("tr").css("height", pixelSize);
	$("td").css("width", pixelSize);
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pixel Art Maker!</title>
	<link href="https://fonts.googleapis.com/css?family=Finger+Paint" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
	<link rel="stylesheet" href="styles.css">
	<script src="https://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" class="box-layout">
	<div class="box-layout-item">
	Grid Height:
	<input class="input"type="number" id="input_height" name="height" min="1" value="10">
	</div>
	<div class="box-layout-item">
	Grid Width:
	<input class="input" type="number" id="input_width" name="width" min="1" value="10">
	</div>
	<div class="box-layout-item">
	Pixel size:
	<input class="input" type="number" id="input_pixel" name="pixel" min="1" value="20">
	</div>
	<div class="box-layout-item">
	<input class="button" type="submit" value="Create Grid">
	</div>
	</form>

	<div class="box-layout">
	<div class="box-layout-item">
	<h2>Pick A Color</h2>
	<input class="input-color"id="colorPicker" type="color" name='colorPicker'>
	</div>
	<div class="box-layout-item">
	<h2>Border</h1>
	<button class="border button" disabled>Remove Border</button>
	</div>
	<div class="box-layout-item">
	<h2>Eraser</h1>
	<button class="eraser button" disabled>Click to Erase!</button>
	</div>
	</div>
	<h2>Design Canvas</h2>
	<table id="pixel_canvas"></table>

	<script src="designs.js"></script>
	</body>
	</html>
	body{
	text-align: center;
	background-color: #cefef5;
	}

	h1 {
	font-family: 'Finger Paint', cursive;
	font-size: 70px;
	margin: 0.2em;
	}

	h2 {
	font-family: 'Mountains of Christmas', cursive;
	margin: 1em 0 0.25em;
	}

	h2:first-of-type {
	margin-top: 0.5em;
	}

	table,
	tr,
	td {
	border: 0.2px solid #c9c9c9;
	box-sizing: border-box;
	}

	table {
	border-collapse: collapse;
	margin-top: 10px;
	margin: 0 auto;
	background: white;
	}

	tr {
	height: 20px;
	}

	td {
	width: 20px;
	}

	input[type=number] {
	width: 6em;
	}

	.removedBorder{
	border: 0;
	}

	.box-layout {
	align-items: center;
	width: 100%;
	margin-bottom: 20px;
	display: flex;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	justify-content: center;
	}

	.box-layout-item {
	margin: 0 10px;
	justify-content: center;
	}

	.button{
	background: #1c88bf;
	border: 0;
	color: white;
	display: inline-block;
	font-size: 18px;
	font-weight: 300;
	padding: 10px;
	}

	.button:disabled{
	background: #cecece;
	pointer-events: none;
	}

	.button:hover{
	background: #105577;
	}

	.input {
	border: 1px solid #cacccd;
	font-size: 16px;
	font-weight: 300;
	padding: 10px;
	}

	.input-color {
	border: 1px solid #cacccd;
	background: white;
	height: 42px;
	padding: 5px;
	}

	.input-color:hover{
	background: #e6e6e6;
	}