Add buttons and logic for color changes

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">

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