ammaratef45/designs.js

## designs.js
//imports useful elements, and assigns them to variables
var canvas = document.getElementById("pixelCanvas");
var color = document.getElementById("colorPicker");
var sizePicker = document.getElementById("sizePicker");
var height = document.getElementById("inputHeight");
var width = document.getElementById("inputWidth");
var toggle = document.getElementById("gridToggle");
var save = document.getElementById("saveArt");

//function to create grid and assign event listeners to all cells on creation
function makeGrid(height, width) {
    for (let y = 0; y < height; y++) {
        let row = canvas.insertRow(y);
        for (let x = 0; x < width; x++) {
            let cell = row.insertCell(x);
            cell.addEventListener("mousedown", function(evt) {
                cell.style.backgroundColor = color.value;
            cell.addEventListener("contextmenu", function(evt) {
                evt.preventDefault();
                cell.style.backgroundColor = "white";
            } )
            } )
        }
    }
}

//function to toggle on/off grid within the design canvas
toggle.addEventListener("click", function() {
    var elementsTd = document.getElementsByTagName("td");
    var elementsTr = document.getElementsByTagName("tr");
    for (var i=0; i<elementsTd.length; ++i) {
        elementsTd[i].classList.toggle("off");
    }
    for (var j=0; j<elementsTr.length; ++j) {
        elementsTr[j].classList.toggle("off");
    }
});

//function that uses the size picker submit to call makeGrid() funtion
sizePicker.addEventListener("submit", function(evt) {
    evt.preventDefault();
    while (canvas.hasChildNodes()) {
        canvas.removeChild(canvas.lastChild);
    }
    makeGrid(height.value, width.value);
});

//function that saves the art as canvas
save.addEventListener("click", function(evt) {
    evt.preventDefault();
    html2canvas(canvas).then(canvas => {
        document.body.appendChild(canvas)
    });
});

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

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

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

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>
        <h3>Toggle Grid: <button button type="button" id="gridToggle">On/Off</button></h3>

    <h2>Click to <span class="fill">Fill</span> / Right-Click to <span class="erase">Erase</span></h2>
    <button button type="button" id="saveArt">Save</button>

    <script src="designs.js"></script>
    <script src="html2canvas.js"></script>
</body>
</html>
	//imports useful elements, and assigns them to variables
	var canvas = document.getElementById("pixelCanvas");
	var color = document.getElementById("colorPicker");
	var sizePicker = document.getElementById("sizePicker");
	var height = document.getElementById("inputHeight");
	var width = document.getElementById("inputWidth");
	var toggle = document.getElementById("gridToggle");
	var save = document.getElementById("saveArt");

	//function to create grid and assign event listeners to all cells on creation
	function makeGrid(height, width) {
	for (let y = 0; y < height; y++) {
	let row = canvas.insertRow(y);
	for (let x = 0; x < width; x++) {
	let cell = row.insertCell(x);
	cell.addEventListener("mousedown", function(evt) {
	cell.style.backgroundColor = color.value;
	cell.addEventListener("contextmenu", function(evt) {
	evt.preventDefault();
	cell.style.backgroundColor = "white";
	} )
	} )
	}
	}
	}

	//function to toggle on/off grid within the design canvas
	toggle.addEventListener("click", function() {
	var elementsTd = document.getElementsByTagName("td");
	var elementsTr = document.getElementsByTagName("tr");
	for (var i=0; i<elementsTd.length; ++i) {
	elementsTd[i].classList.toggle("off");
	}
	for (var j=0; j<elementsTr.length; ++j) {
	elementsTr[j].classList.toggle("off");
	}
	});

	//function that uses the size picker submit to call makeGrid() funtion
	sizePicker.addEventListener("submit", function(evt) {
	evt.preventDefault();
	while (canvas.hasChildNodes()) {
	canvas.removeChild(canvas.lastChild);
	}
	makeGrid(height.value, width.value);
	});

	//function that saves the art as canvas
	save.addEventListener("click", function(evt) {
	evt.preventDefault();
	html2canvas(canvas).then(canvas => {
	document.body.appendChild(canvas)
	});
	});
	<!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">
	</head>
	<body>
	<h1>Pixel Art Maker</h1>

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

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

	<h2>Design Canvas</h2>
	<table id="pixelCanvas"></table>
	<h3>Toggle Grid: <button button type="button" id="gridToggle">On/Off</button></h3>

	<h2>Click to <span class="fill">Fill</span> / Right-Click to <span class="erase">Erase</span></h2>
	<button button type="button" id="saveArt">Save</button>

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