Add transparency slider for canvas background color and remove unnecessary bits of code

index.html

@@ -36,6 +36,8 @@
         
         <div class="grid-input">
             <h3 class="tool-labels">Grid Tools</h3>
+            <label class="sub-labels" for="canvas-trans">Canvas Transparency: <span id="trans-label"></span></label>
+            <input name="canvas-trans" id="canvas-trans" type="range" min="0" max="1" step=".1" value="1">
             <div class="grid-tools">
                 <div class="slider">
                     <label class="sub-labels" for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>

script.js

@@ -10,6 +10,8 @@ const buttons = document.querySelectorAll(".pen");
 const colorPicker = document.querySelector("#custom-color");
 let colorValue;
 const backColorPicker = document.querySelector("#back-col-picker");
+const transLabel = document.querySelector("#trans-label");
+const transSlider = document.querySelector("#canvas-trans");
 const reset = document.querySelector("#reset");
 
 
@@ -34,10 +36,9 @@ buttons.forEach((button) => {
 colorPicker.addEventListener("input", changeColor);
 colorPicker.addEventListener("change", changeColor);
 backColorPicker.addEventListener("input", pickBackground);
-reset.addEventListener("click", resetGrid);
+transSlider.addEventListener("input", adjustTransparency);
 
 gridSlider.addEventListener("input", getGridDimensions);
-gridSlider.addEventListener("change", getGridDimensions);
 rangeKnob.addEventListener("mousedown", (e) => {
     document.addEventListener("mousemove", rotateKnob);
     document.addEventListener("mouseup", () => {
@@ -45,6 +46,8 @@ rangeKnob.addEventListener("mousedown", (e) => {
     });
 });
 
+reset.addEventListener("click", resetGrid);
+
 
 function resetGrid() {
     gridSlider.value = gridSlider.defaultValue;
@@ -86,7 +89,6 @@ function updateGridSlider(angle) {
 
 
 function getGridDimensions(val) {   
-    //numGrid = gridSlider.value;
     numGrid = val;
     
     while (container.firstChild) {
@@ -144,6 +146,23 @@ function pickBackground() {
 }
 
 
+function adjustTransparency() {
+    const currentColor = container.style.backgroundColor;
+    let num = currentColor.match(/\d+/g);
+    let r;
+    let g;
+    let b;
+    let a;
+
+    r = +num[0];
+    g = +num[1];
+    b = +num[2];
+    a = transSlider.value;
+
+
+    container.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
+}
+
 function colorGrid() {
     if (isRgb) {
         this.style.backgroundColor = randomizeColor();
@@ -236,9 +255,9 @@ function tintColor(value) {
 
     let num = value.match(/\d+/g);
 
-    r = +num[0] + (0.25 * (255 - +num[0]));
+    let r = +num[0] + (0.25 * (255 - +num[0]));
-    g = +num[1] + (0.25 * (255 - +num[1]));
+    let g = +num[1] + (0.25 * (255 - +num[1]));
-    b = +num[2] + (0.25 * (255 - +num[2]));
+    let b = +num[2] + (0.25 * (255 - +num[2]));
 
     return`rgb(${r},${g},${b})`;
 }
@@ -250,9 +269,9 @@ function shadeColor(value) {
     }
     
     let num = value.match(/\d+/g);
-    r = +num[0] * .75;
+    let r = +num[0] * .75;
-    g = +num[1] * .75;
+    let g = +num[1] * .75;
-    b = +num[2] * .75;
+    let b = +num[2] * .75;
 
     return`rgb(${r},${g},${b})`;
 }