Change grid size with slider

index.html

@@ -8,7 +8,13 @@
 </head>
 <body>
     <h1>Etch-A-Sketch</h1>
+
+
     <div class="area">
+        <div class = "user-input">
+            <input id = "gridSlider" type="range" min="1" max="100" value="16">
+        </div>
+        
         <div class="container">
 
         </div>

script.js

@@ -4,6 +4,8 @@ const container = document.querySelector(".container");
 const conWidth = container.clientWidth;
 const conHeight = container.clientHeight
 const grid = document.createElement("div");
+const gridSlider = document.querySelector("#gridSlider");
+
 
 function createGrid() {
     const gridArea = numGrid ** 2;
@@ -24,13 +26,22 @@ function createGrid() {
         item.addEventListener("mouseover", colorGrid);
     });
 
+    gridSlider.addEventListener("change", getGridDimensions);
+
+}
+
+
+function getGridDimensions() {    
+    numGrid = gridSlider.value;
+    while (container.firstChild) {
+        container.removeChild(container.lastChild);
+    }
+    console.log(numGrid);
+    createGrid();
 }
 
 function colorGrid() {
     this.style.background = "blue";
 }
 
-
-createGrid();
-
-
+createGrid();

style.css

@@ -4,6 +4,7 @@ body{
 }
 .area{
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 90vh;
@@ -19,4 +20,6 @@ body{
 .grid {
     border: 1px solid #bbb;
     box-sizing: border-box;
+    min-height: 0;
+    overflow: hidden;
 }