From 4fe377d9e155f31c7e27436a390cf0b4bf9a9297 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Fri, 10 Nov 2023 13:28:36 -0700
Subject: [PATCH] Add reset button

---
 index.html | 17 +++++++++--------
 script.js  | 13 ++++++++-----
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 09dbc6f..af415b4 100644
--- a/index.html
+++ b/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>
diff --git a/script.js b/script.js
index 3a3156a..67d92de 100644
--- a/script.js
+++ b/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;
@@ -190,7 +196,4 @@ function makeTransparent(value) {
     }
     
     return num;
-}
-
-
-createGrid();
\ No newline at end of file
+}
\ No newline at end of file