[JS] Day12 - KeySequence Detection

demo:

https://danji-ya.github.io/JS_javascript30/12-KeySequenceDetection/

Day12 - KeySequence Detection

🎯 기능 요구사항

• wesbos라는 단어가 완성되면 이벤트를 실행한다.
• +typing effect를 구현한다.

🚀 배운 점

splice의 Parameters

• splice(start, deleteCount)

const checkKey = (function(){
    const myArr = [];
    const secretCode = 'wesbos';

    return function(e){
        myArr.push(e.key);
        
   	myArr.splice(-(secretCode.length + 1), myArr.length - secretCode.length);
        if(myArr.join('').includes(secretCode)) {
            console.log('Done...');
        }
    }
})();

key가 입력될 때마다 해당 함수가 실행되는데 이 때, 목표는 myArr내에 6개의 요소만 존재해야한다. 그렇기 때문에 splice함수의 첫번째 인자로 secretCode.length + 1의 음수로 하여
항상 myArr의 배열의 첫번째 요소를 시작으로 하여 두번째 인자로 잘라낼 길이만큼인데 이때 0 이하라면 어떤 요소도 제거하지 않는 특성을 이용하여 secretCode보다 길어지는 만큼만 잘라내기 때문에 계속 6개의 요소만 존재 할 수 있다.

Typing Effect

const typingText = (function(){
        const typedTextSpan = document.querySelector(".typed-text");
        const cursorSpan = document.querySelector(".cursor");

        const textArr = ["Press Your Key..."];
    
        const typingDelay = 200;
        const erasingDelay = 100;
        const endingDelay = 1000;
    
        let textArrIdx = 0;
        let charIdx = 0;

        return {
            typing: function(){
                if(charIdx < textArr[textArrIdx].length){
                    if(!cursorSpan.classList.contains('typing')) cursorSpan.classList.add('typing');
                    typedTextSpan.textContent += textArr[textArrIdx].charAt(charIdx);

                    charIdx++;
                    setTimeout(typingText.typing, typingDelay);
        
                } else {
                    // console.log('typing End...');
                    cursorSpan.classList.remove('typing');

                    // start erasing
                    setTimeout(typingText.erasing, endingDelay);
                }
        
            },
            erasing: function() {
                if(charIdx > 0) {
                    if(!cursorSpan.classList.contains('typing')) cursorSpan.classList.add('typing');
                    typedTextSpan.textContent = textArr[textArrIdx].substring(0, charIdx-1);

                    charIdx--;
                    setTimeout(typingText.erasing, erasingDelay);
                } else {
                    // console.log('erasing End..');
                    cursorSpan.classList.remove('typing');

                    // restart
                    setTimeout(typingText.typing, endingDelay);
                }
            }
        }
})();