finished JS Day wesbos#9, wesbos#10, wesbos#11

kdipaolo · kdipaolo · commit d02a5d69e619 · 2017-03-30T08:04:04.000-04:00
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
@@ -25,12 +25,13 @@
 function draw(e){
   if(!isDrawing) return;
   ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`
-  ctx.lineWidth = hue;
+
   ctx.beginPath();
   ctx.moveTo(lastX, lastY);
   ctx.lineTo(e.offsetX, e.offsetY)
   ctx.stroke();
   hue++
+  ctx.lineWidth++
 
 }
 
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
@@ -20,6 +20,7 @@
     // Regular
 
     // Interpolated
+    console.log("%c Hello this is a console", 'color: green; background-color: #cef7ce; border-left: 5px solid green;')
 
     // Styled
 
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
@@ -99,6 +99,31 @@
   </div>
 
 <script>
+  const checkboxes = document.querySelectorAll('.inbox input');
+  checkboxes.forEach(item => {
+    item.addEventListener('click', handleCheck)
+  })
+
+  let lastChecked;
+
+  function handleCheck(e){
+    let inBetween = false;
+    if(e.shiftKey && this.checked){
+      checkboxes.forEach(checkbox => {
+        if(checkbox === this || checkbox === lastChecked){
+          inBetween = !inBetween;
+          console.log('starting to check them inbetween')
+        }
+        if(inBetween){
+          checkbox.checked = true;
+        }
+      })
+    }
+    lastChecked = this;
+
+  }
+
+
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -23,5 +23,6 @@
    </div>
 
   <script src="scripts.js"></script>
+  
 </body>
 </html>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
@@ -0,0 +1,51 @@
+const video = document.querySelector('.player__video');
+const range = document.querySelectorAll('input[type="range"]');
+const player = document.querySelector('.viewer');
+const toggle = document.querySelector('.toggle');
+const progressBar = document.querySelector('.progress');
+const progress = document.querySelector('.progress__filled');
+const playerButton = document.querySelector('.toggle');
+const skipButtons = document.querySelectorAll('button[data-skip]');
+
+function scrub(e){
+  const percentage = e.offsetX / video.videoWidth
+  video.currentTime = video.duration * percentage
+}
+
+function playVideo(){
+  video.paused ? video.play() : video.pause();
+}
+
+function skip(){
+  video.currentTime = video.currentTime + Number(this.dataset.skip);
+}
+
+function configChange(){
+  if(this.name == 'volume'){
+    video.volume = this.value;
+  }else{
+    video.playbackRate = this.value
+  }
+}
+
+function videoPlaying(){
+  progress.style.flexBasis = (video.currentTime / video.duration) * 100 + "%";
+}
+
+function updateButton(){
+  toggle.innerHTML = video.paused ? '►' : '||';
+}
+
+player.addEventListener('click', playVideo)
+video.addEventListener('timeupdate', videoPlaying)
+video.addEventListener('pause', updateButton)
+video.addEventListener('play', updateButton)
+playerButton.addEventListener('click', playVideo)
+progressBar.addEventListener('mousedown', scrub)
+skipButtons.forEach(button => {
+  button.addEventListener('click', skip)
+})
+range.forEach(item => {
+  item.addEventListener('mousedown', configChange)
+  item.addEventListener('mousemove', configChange)
+})
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
@@ -98,10 +98,10 @@ body {
 }
 
 .progress__filled {
-  width:50%;
+  width:0%;
   background:#ffc600;
   flex:0;
-  flex-basis:50%;
+  flex-basis:0%;
 }
 
 /* unholy css to style input type="range" */

-Original file line number
+Diff line change
    </div>
   <script src="scripts.js"></script>
++
 </body>
 </html>
Original file line number	Diff line number	Diff line change
`@@ -98,10 +98,10 @@ body {`
`98`	`98`	`}`
`99`	`99`
`100`	`100`	`.progress__filled {`
`101`		`- width:50%;`
	`101`	`+ width:0%;`
`102`	`102`	`background:#ffc600;`
`103`	`103`	`flex:0;`
`104`		`- flex-basis:50%;`
	`104`	`+ flex-basis:0%;`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`/* unholy css to style input type="range" */`