Add knob

index.html

@@ -40,8 +40,8 @@
                 <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">
-                    <div class="range-knob" id="knob">
+                    <div class="knob" id="range-knob">
-                        <div class="range-knotch" id="knotch"></div>
+                        <div class="knotch" id="range-knotch"></div>
                     </div>
                 </div>
 

script.js

@@ -2,15 +2,16 @@ const container = document.querySelector(".container");
 const conWidth = container.clientWidth;
 const grid = document.createElement("div");
 const gridSlider = document.querySelector("#gridSlider");
+gridSlider.defaultValue = 16;
+const sliderLabel = document.querySelector("#sliderLabel");
+let numGrid;
 const buttons = document.querySelectorAll(".pen");
 const colorPicker = document.querySelector("#custom-color");
-const reset = document.querySelector("#reset");
-const backColorPicker = document.querySelector("#back-col-picker")
 let colorValue;
-let numGrid;
+const backColorPicker = document.querySelector("#back-col-picker");
-let sliderLabel = document.querySelector("#sliderLabel");
+const reset = document.querySelector("#reset");
-gridSlider.defaultValue = 16;
+const rangeKnob = document.querySelector("#range-knob");
-
+let isDragging;
 
 
 //the next few variables are set to be used to test if 
@@ -37,7 +38,20 @@ backColorPicker.addEventListener("input", pickBackground);
 reset.addEventListener("click", resetGrid);
 gridSlider.addEventListener("input", getGridDimensions);
 gridSlider.addEventListener("change", getGridDimensions);
+rangeKnob.addEventListener("mousedown", (e) => {
+    isDragging = true;
 
+    if (isDragging) {
+        document.addEventListener("mousemove", rotateKnob);
+    }
+
+    document.addEventListener("mouseup", () => {
+        isDragging = false;
+        document.removeEventListener("mousemove", rotateKnob);
+    });
+
+    console.log(isDragging);
+});
 
 function resetGrid() {
     gridSlider.value = gridSlider.defaultValue;
@@ -92,6 +106,18 @@ function createGrid() {
 }
 
 
+function rotateKnob(e) {
+    const knobBounds = rangeKnob.getBoundingClientRect();
+    const knobCenter = {
+        x: knobBounds.left + knobBounds.width/2,
+        y: knobBounds.top + knobBounds.height/2
+    }; 
+    let angle = Math.atan2(e.pageX - knobCenter.x, - (e.pageY - knobCenter.y) )*(180 / Math.PI);	    
+
+    rangeKnob.style.transform = `rotate(${angle}deg)`;  
+}
+
+
 function toggleGridView(gridItem) {
     if (gridItem.classList.contains("grid-on")){
         gridItem.classList.remove("grid-on");

style.css

@@ -61,9 +61,9 @@ button {
     align-items: center;
 }
 
-.range-knob {
+.knob {
-    width: 50px;
+    width: 80px;
-    height: 50px;
+    height: 80px;
     border-radius: 50%;
     border: 1px solid #111;
     cursor: pointer;
@@ -71,7 +71,7 @@ button {
     box-shadow: 1px 2px 10px 1px #555;
 }
 
-.range-knotch {
+.knotch {
     width: 10px;
     height: 10px;
     border-radius: 50%;