Add buttons and logic for color changes

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();