@@ -22,6 +22,7 @@
      </div>
    </div>
 
-  <script src="scripts-FINISHED.js"></script>
+  <!-- <script src="scripts-FINISHED.js"></script> -->
+  <script src="scripts.js"></script>
 </body>
 </html>
@@ -0,0 +1,52 @@
+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 skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+
+function tooglePlay() {
+  const method = video.paused ? 'play' : 'pause';
+  video[method]();
+}
+
+function updateButton() {
+  const icon = this.paused ? '►' : '❚ ❚';
+  toggle.textContent = icon;
+}
+
+function skip() {
+  video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function rangeUpdate() {
+  video[this.name] = this.value;
+}
+
+function handleProgress() {
+  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;
+}
+
+
+video.addEventListener('click', tooglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+
+toggle.addEventListener('click', tooglePlay);
+skipButtons.forEach(btn => btn.addEventListener('click',skip));
+ranges.forEach(range => range.addEventListener('change',rangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove',rangeUpdate));
+
+let mousedown = false;
+progress.addEventListener('click',scrub);
+progress.addEventListener('mousemove',(e)=> mousedown && scrub(e));
+progress.addEventListener('mousedown', ()=> mousedown = true);
+progress.addEventListener('mouseup',()=> mousedown = false);
@@ -3,10 +3,23 @@
 <head>
   <meta charset="UTF-8">
   <title>Key Detection</title>
+  <p>try to press the secretCode</p>
   <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
 </head>
 <body>
 <script>
+  const pressed = [];
+  const secretCode = 'helloworld';
+  window.addEventListener('keyup', (e)=>{
+    console.log(e.key);
+    pressed.push(e.key);
+    //splice(start-index(included),deletecount); 
+    pressed.splice(-secretCode.length-1, pressed.length - secretCode.length);
+    if(pressed.join('').includes(secretCode)) {
+      cornify_add();
+    }
+    console.log(pressed);
+  })
 </script>
 </body>
 </html>
@@ -58,6 +58,26 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const slideImages = document.querySelectorAll('.slide-in');
+    function checkSlide(e) {
+      slideImages.forEach(img => {
+        const slideInAt = (window.scrollY + window.innerHeight) - img.height /2;
+        const imgBottom = img.offsetTop + img.height;
+
+        // scroll halfway through the image
+        const isHalfShow = slideInAt > img.offsetTop;
+        // the image not scroll out of the window yet
+        const isNotScrollPast = window.scrollY < imgBottom;
+        
+        if(isHalfShow && isNotScrollPast) {
+          img.classList.add('active');
+        }else{
+          img.classList.remove('active');
+        }
+      })
+    }
+
+    window.addEventListener('scroll',debounce(checkSlide));
   </script>
 
   <style>