From 07e267b3ab879b71586414284c8c06ae54334241 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Thu, 9 Nov 2023 22:46:13 -0700
Subject: [PATCH] Add buttons and logic for color changes

---
 index.html |  8 ++++++++
 script.js  | 36 +++++++++++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index e09d246..cc9143b 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,14 @@
 
     <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="erase">Erase</button>
+
             <div class="slider">
                 <label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
                 <input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
diff --git a/script.js b/script.js
index 6957aaf..63e96a5 100644
--- a/script.js
+++ b/script.js
@@ -3,9 +3,15 @@ const container = document.querySelector(".container");
 const conWidth = container.clientWidth;
 const grid = document.createElement("div");
 const gridSlider = document.querySelector("#gridSlider");
+const buttons = document.querySelectorAll("button");
+let colorValue = "black";
 let numGrid = gridSlider.value;
 let sliderLabel = document.querySelector("#sliderLabel");
 
+buttons.forEach((button) => {
+    button.addEventListener ("click", changeColor);
+});
+
 
 function createGrid() {
     const gridArea = numGrid ** 2;
@@ -40,7 +46,35 @@ function getGridDimensions() {
 }
 
 function colorGrid() {
-    this.style.background = "blue";
+    this.style.background = colorValue;
+}
+
+function changeColor() {
+    const buttonID = this.id;
+
+    switch (buttonID) {
+        case "rgbColor":
+            colorValue = "red";
+            break;
+        case "whiteColor":
+            colorValue = "white";
+            break;
+        case "shade":
+            colorValue = "#333";
+            break;
+        case "tint":
+            colorValue = "#eee";
+            break;
+        case "opacity":
+            colorValue = "blue";
+            break;
+        case "erase": 
+            colorValue = "transparent";
+            break;
+        default:
+            colorValue = "black";
+            break;
+    }
 }
 
 createGrid();
\ No newline at end of file