繼續挑戰，這週希望能自己有些想法，可以邊做邊去挑戰。

1. HTML5 Video Player

• 算是綜合到目前為主複雜度最高的，頗有挑戰性。
• 可能要多做幾次＆把挑戰：做出一個全螢幕的button

// Get elements

const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');
const toggle = player.querySelector('.toggle');
const skipButton =player.querySelectorAll('[data-skip]')
const ranges = player.querySelectorAll('.player__slider')

// function
function togglePlay(){
  if(video.paused){video.play()}
  else {video.pause()}
}

function updateButton(){
  const icon = this.paused ?  '►' : '❚ ❚';
  toggle.textContent = icon ;
}
//no playing property , only paused

function skip(){
  console.log(this.dataset.skip);
  video.currentTime += parseFloat(this.dataset.skip);
}

function handleRangeUpdate(){
  video[this.name] = this.value;
}

function handleProgess(){
  const percent = (video.currentTime / video.duration) * 100 ;
  progressBar.style.flexBasis = `${percent}%` ;
}
function scrub(e){
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}

// Hook up event listener
video.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause',updateButton);
video.addEventListener('timeupdate',handleProgess);

toggle.addEventListener('click', togglePlay);
skipButton.forEach(button => button.addEventListener('click', skip));

ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));

let mousedown = false ;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown' ,() => mousedown = true);
progress.addEventListener('mouseup' ,() => mousedown = false);

2. Key Sequence Detection - Konami Code

• 重點：push() , splice(), .join('').includes()
• 幽默的library cornify.js

const pressed = [] ;
const secretCode = 'frank';

window.addEventListener('keyup', (e) => {
  pressed.push(e.key);
  pressed.splice(-secretCode.length-1 ,pressed.length - secretCode.length);
  console.log(pressed);

  if (pressed.join('').includes(secretCode)) {
    console.log('!!!YAYAYA!!!');
    cornify_add(); /// cornify.js的效果
  }
})