Refactor the function to get the number of pixels. Remove input event…

… listener, keep keydown eventlistener. Create a function to validate the number. Get as a result improve performance and reduce lag/freeze when the number of pixels increase

index.html

@@ -18,7 +18,7 @@
         </div>
         <div class="popup-box">
             <p id="popup-text">Enter the number of squares per side and click ENTER:</p>
-            <input type="text">
+            <input type="text" placeholder="Enter a number (max 100)">
             <button id="cancel">CANCEL</button>
         </div>
 

script.js

@@ -1,6 +1,7 @@
 const container = document.querySelector(".container");
 const btnPopup = document.querySelector("button");
 const popupBox = document.querySelector(".popup-box");
+const input = document.querySelector("input");
 let pixelNumber = 16;
 let pixelBoxes;
 
@@ -43,28 +44,35 @@ function activateSketching() {
 // Create a button that pops a box up to prompt the user for a grid size.
 btnPopup.addEventListener("click", function() {
     popupBox.style.visibility = "visible";
-    const btnCancel = document.querySelector("#cancel");
-    btnCancel.addEventListener("click", function() {
+});
+
+//Close the pop-up when pressing cancel button.
+const btnCancel = document.querySelector("#cancel");
+
+btnCancel.addEventListener("click", function() {
         popupBox.style.visibility = "hidden";
         pixelNumber = 0;
         console.log(pixelNumber);
-    });
-    const input = document.querySelector("input");
-    input.addEventListener("input", function(event) {
-        pixelNumber = Number(event.target.value);
-        input.addEventListener("keydown", function(event){
-            if (event.key === "Enter") {
-                popupBox.style.visibility = "hidden";
-                deleteGrid();
-                createGrid();
-                console.log(pixelNumber);
-            };      
-        });
-
-        console.log(pixelNumber);
-        console.log(typeof(pixelNumber));
-    });
 });
 
+input.addEventListener("keydown", validateNumber);
 
+//Create a function to validate that is a number <= 100;
+function validateNumber(event) {
+    if (event.key === "Enter") {
+        pixelNumber = Number(event.target.value);
+        if (!isNaN(pixelNumber) && pixelNumber <= 100) {
+            deleteGrid();
+            createGrid();
+            console.log(pixelNumber);
+            console.log(typeof(pixelNumber));
+            popupBox.style.visibility = "hidden";
+        }
+        else {
+            alert("Invalid input. Please enter a number less than 100.");
+        }               
+    };    
+};
+
 
+