issue-85 attached event listeners to the canvas size inputs and limited the number allowed to be inputed to 5000. Also added a div with a simple message detailing the limit that appears once a user has hit the limit

css/_new-pixel.scss

@@ -25,6 +25,10 @@
 	}
 }
 
+.canvasError {
+	display: none;
+}
+
 #no-palette-button {
 	display: none;
 }

css/_splash-page.scss

@@ -214,6 +214,9 @@
 		.sp-np-entry {
 			width:100%;
 			text-align:center;
+			.canvasError {
+				display: none;
+			}
 		}
 
 		input {

js/pixel-editor.js

@@ -72,13 +72,32 @@
 
 // Controls execution of this preset module
 PresetModule.instrumentPresetMenu();
-
+const canvasSizeInputs = null;
 //when the page is done loading, you can get ready to start
 window.onload = function () {
 	// First cursor update
     ToolManager.currentTool().updateCursor();
-	// Apply checkboxes
 
+    // select all inputs that affect canvas size in order to limit it
+    const canvasSizeInputs = document.querySelectorAll('.size-input')
+    if (canvasSizeInputs) {
+        // apply a listener to each input
+        for (let i = 0; i < canvasSizeInputs.length; i++) {
+            canvasSizeInputs[i].addEventListener('keyup', e => {
+                const maxCanvasSize = 5000;
+                if (e.target.value > maxCanvasSize) {
+                    e.target.value = maxCanvasSize;
+                    // Display a simple error message to inform the user of the canvas size limit
+                    let canvasError = document.querySelector('.canvasError')
+                    canvasError.style.display = 'block';
+                }
+            }, true);
+        }
+        // let canvasWidth = canvasSizeInputs[0]
+        // canvasSizeInputs.addEventListener('size-input', validateInput)
+    }
+
+	// Apply checkboxes
     ////console.log('window.location.pathname === ',window.location.pathname);
 
     ////console.log('window.location === ',window.location);
@@ -149,6 +168,10 @@ window.onload = function () {
     }
 }
 
+function validateInput(canvasSize) {
+    console.log(canvasSize);
+}  
+
 //prevent user from leaving page with unsaved data
 // window.onbeforeunload = function() {
 //     if (EditorState.documentCreated)

views/popups/new-pixel.hbs

@@ -9,7 +9,8 @@
 	<div id="preset-menu" class="dropdown-menu"></div>
 
 	<h2>Size</h2>
-	<input id="size-width" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
+	<h4 class="canvasError">Max canvas size is 5000px</h4>
+	<input id="size-width" class="size-input" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" class="size-input" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
 	<h2>Palette</h2>
 	<button id="palette-button" class="dropdown-button">Choose a palette...</button>
 	<div id="palette-menu" class="dropdown-menu"><button id="no-palette-button">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>

views/popups/splash-page.hbs

@@ -25,7 +25,8 @@
 
 				<h2>Size</h2>
 				<div class="sp-np-entry">
-					<input id="size-width-splash" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height-splash" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
+					<h4 class="canvasError">Max canvas size is 5000px</h4>
+					<input id="size-width-splash" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" class="size-input"/>{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height-splash" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" class="size-input"/>
 				</div>
 				
 				<h2>Palette</h2>