Add reset button

index.html

@@ -12,14 +12,15 @@
 
     <div class="area">
         <div class="user-input">
-            <button id="rgbColor">RGB</button>
-            <button id="blackColor">Black</button>
-            <button id="whiteColor">White</button>
-            <button id="shade">Shade</button>
-            <button id="tint">Tint</button>
-            <button id="opacity">Opacity</button>
-            <button id="trans">Transparent</button>
-            <button id="erase">Erase</button>
+            <button class="pen" id="rgbColor">RGB</button>
+            <button class="pen" id="blackColor">Black</button>
+            <button class="pen" id="whiteColor">White</button>
+            <button class="pen" id="shade">Shade</button>
+            <button class="pen" id="tint">Tint</button>
+            <button class="pen" id="opacity">Opacity</button>
+            <button class="pen" id="trans">Transparent</button>
+            <button class="pen" id="erase">Erase</button>
+            <button id="reset">Reset</button>
 
             <div id = col-picker>
                 <label for="custom-color">Pick a color:</label>

script.js

@@ -2,8 +2,9 @@ const container = document.querySelector(".container");
 const conWidth = container.clientWidth;
 const grid = document.createElement("div");
 const gridSlider = document.querySelector("#gridSlider");
-const buttons = document.querySelectorAll("button");
+const buttons = document.querySelectorAll(".pen");
 const colorPicker = document.querySelector("#custom-color");
+const reset = document.querySelector("#reset");
 let colorValue = "black";
 let numGrid = gridSlider.value;
 let sliderLabel = document.querySelector("#sliderLabel");
@@ -20,6 +21,9 @@ let isWhite;
 let isErase;
 
 
+createGrid();
+
+
 buttons.forEach((button) => {
     button.addEventListener ("click", changeColor);
 });
@@ -31,6 +35,8 @@ colorPicker.addEventListener("change", changeColor);
 colorPicker.addEventListener("input", changeColor);
 colorPicker.addEventListener("click", changeColor);
 
+reset.addEventListener("click", getGridDimensions);
+
 
 function createGrid() {
     const gridArea = numGrid ** 2;
@@ -191,6 +197,3 @@ function makeTransparent(value) {
     
     return num;
 }
-
-
-createGrid();