finished JS Day wesbos#28

Author: kdipaolo

27 - Click and Drag/index-START.html

@@ -35,6 +35,37 @@
   </div>
 
 <script>
+
+const slider = document.querySelector('.items')
+
+let isDown = false;
+let startX;
+let scrollLeft;
+
+slider.addEventListener('mousedown', (e) => {
+  isDown = true;
+  startX = e.pageX;
+})
+
+slider.addEventListener('mouseup', () => {
+  isDown = false;
+  scrollLeft = slider.scrollLeft
+})
+
+slider.addEventListener('mouseleave', () => {
+  isDown = false;
+  scrollLeft = slider.scrollLeft
+})
+
+slider.addEventListener('mousemove', (e) => {
+  if(!isDown) return
+  const distance = startX - e.pageX;
+
+
+  slider.scrollLeft = (distance * 3) + scrollLeft
+})
+
+
 </script>
 
   </body>

28 - Video Speed Controller/index-START.html

@@ -15,6 +15,26 @@
   </div>
 
 <script>
+
+const speed = document.querySelector('.speed');
+const speedBar = document.querySelector('.speed-bar');
+const video = document.querySelector('.flex');
+
+
+
+speed.addEventListener('mousemove', function(e){
+  const y = e.pageY - this.offsetTop;
+  const [min, max] = [0.4,4]
+  const percent = y /this.offsetHeight;
+  const height = Math.round((y /this.offsetHeight) * 100) + '%';
+  const playBackRate = percent * (max - min) + min;
+  speedBar.style.height = height;
+  speedBar.textContent = playBackRate.toFixed(2)
+  video.playbackRate = playBackRate;
+  });
+
+  
+
 </script>
 </body>
 </html>