JS 2500

var temp = document.querySelector('.time');
     var button = document.querySelector("button");
     var box = document.querySelector(".box");
    var words = document.querySelector(".words");
    var timerDiv = document.querySelector(".time");
     var scoreDiv = document.querySelector(".score");
     var outer = document.querySelector(".outerWrap");
     var man = document.getElementById("man");
    var points = 0;
    var spans;
     var typed;
     var pos=-130;
     var seconds =60;
     var modal = document.querySelector(".modal");
     var content = document.querySelector(".content");
    var trigger = document.querySelector(".trigger");
    var closeButton = document.querySelector(".close-button");
function loader(){

    outer.style.display='none';
}

     function countdown() {
        points = 0;


        var timer = setInterval(function(){
            button.disabled = true;
           seconds--;
           temp.innerHTML = seconds;
           if (seconds === 0) {

               scoreDiv.innerHTML = "0";
               words.innerHTML = "";
               button.disabled = false;
               var m = setInterval(move,60);

               content.innerHTML="Your score is "+points;
              function move(){
               box.style.visibility='hidden';
               pos=pos+10;
               man.style.left = pos+'px';
               if (pos >950){
                clearInterval(m);

         }
        }
               clearInterval(timer);
               move();
               seconds = 60;
               timerDiv.innerHTML = "60";
               button.disabled = false;
           }
        }, 1000);
     }

     function random() {
    words.innerHTML = "";
    var random = Math.floor(Math.random()*list.length);

    var wordArray = list[random].split("");
    for (var i = 0; i < wordArray.length; i++) { //building the words with spans around the letters
        var span = document.createElement("span");
        span.classList.add("span");
        span.innerHTML = wordArray[i];
        words.appendChild(span);
    }
    spans = document.querySelectorAll(".span");
}


const list = ['EXERCISE','EXERTION','EXERCISING', 'PRACTICE','GYM','TRAINING','TRAINER','MUSCLE','MEETING','ADJUST','ADJUSTING','ADJUSTMENT','RESTRUCTURING','MOVEMENT','CRANKING','RESTRUCTURE',
'REGULATION','READJUSTMENT','SMACK','CORRECTION','SLIDE','SOLO', 'SPECULATION','SPIRIT','SPORTS', 'SPORTSMANSHIP', 'SQUAD', 'SQUAT', 'STABILITY', 'STAMINA', 'STATISTICS', 'STEPPER', 'STRATEGY', 'STREAK', 'STRENGTH', 'STRETCHING', 'STRIDE', 'STRONG',  'SUPINATION', 'SUPPORT','SUSPENSION', 'SWIMMING', 'SYMPTOMS',
'TACKLE', 'TARGETS', 'TEAM', 'TEAMMATE', 'TECHNICAL', 'TENNIS', 'TEST', 'THERAPEUTIC', 'THERAPY', 'TIMEOUT', 'TIMING', 'TONE', 'TORSO', 'TOURNAMENT', 'TRAINER', 'TRAINING', 'TRANSFORM', 'TRANSFORMATION', 'TREADMILL',
'UNBELIEVABLE', 'UNUSUAL', 'USUAL','VACCINATION', 'VALIANT', 'VICTORY', 'VIOLATION', 'VITAMINS'];


    button.addEventListener("click", function(e){
        outer.style.display='block';
          var i = setInterval(moveRight,80);
        function moveRight() {
            man.style.display='block';
            pos=pos+10;
           if (pos >120){
           clearInterval(i);
        box.style.display='block';
        countdown();
    }
            man.style.left = pos+'px'; // pseudo-property code: Move right by 10px

        }
        var modal=document.querySelector(".modal");
        modal.style.display='none';


          random();

        button.disabled = true;
    });


    function typing(e) {
            typed = String.fromCharCode(e.which);
            for (var i = 0; i < spans.length; i++) {
                if (spans[i].innerHTML === typed) { // if typed letter is the one from the word
                    if (spans[i].classList.contains("bg")) { // if it already has class with the bacground color then check the next one
                        continue;
                    } else if (spans[i].classList.contains("bg") === false && spans[i-1] === undefined || spans[i-1].classList.contains("bg") !== false ) { // if it dont have class, if it is not first letter or if the letter before it dont have class (this is done to avoid marking the letters who are not in order for being checked, for example if you have two "A"s so to avoid marking both of them if the first one is at the index 0 and second at index 5 for example)
                        spans[i].classList.add("bg");
                        break;
                    }
                }
            }
            var checker = 0;
            for (var j = 0; j < spans.length; j++) { //checking if all the letters are typed
                if (spans[j].className === "span bg") {
                    checker++;
                }
                if (checker === spans.length) { // if so, animate the words with animate.css class

                    words.classList.add("animated");
                      words.classList.add("fadeOut");
                      setTimeout(display,100);
                      function display(){
                        box.style.display = 'none';
                      }



                    points++; // increment the points
                    scoreDiv.innerHTML = points; //add points to the points div
                    document.removeEventListener("keydown", typing, false);
                    setTimeout(function(){
                        words.className = "words"; // restart the classes
                          random(); // give another word

                          box.style.display='block';
                        document.addEventListener("keydown", typing, false);
                    }, 400);
                }

            }
    }

    document.addEventListener("keydown", typing, false);