var attempts = 0;
    var word = '';

    const submit = document.getElementById('submit');
    const input = document.getElementById('userInput');

    (function setup() {
        generateRandomWord()
        showFirstLetter()
    })()

    // This function generates a random word from the array.
    function generateRandomWord () {
        // Get a random number from the length of the array to set as the generated word.
        word = words[Math.floor(Math.random() * words.length)]
        log(new Date(), word)
    }

    function showFirstLetter () {
        // Show the first letter of the generated word to the user.
        document.getElementById('word').innerHTML = word.charAt(0);
    }

    function addUserGuess(parameter) {
        const parent = document.getElementsByTagName('ul')[0]
        var element = document.createElement('li')

        // Add values from the array to the element.
        for (var i = 0; i < parameter.length; i++) {
            if (parameter[i].length == 1)
                parameter[i] = '<span class="blue">' + parameter[i] + '</span>'
            element.innerHTML += parameter[i];
        }


        // Give the element a class.
        element.setAttribute('class', 'guess')
        // Place the element in the browser
        parent.appendChild(element)
    }

    function resetPage () {
        // Reset the word.
        word = ''
        // Reset the attempts.
        attempts = 0
        // Reset the input value.
        input.value = ''

        // Get all elements which have the tag name 'li'
        var elements = document.getElementsByTagName('li')
        // While elements.length is true and the element we want to delete has the classname 'guess' at index 0.
        while (elements.length && elements[0].classList[0] == 'guess')
            // Remove the first element in the array.
            elements[0].remove()

        // Toggle the page.
        togglePage()
    }

    function togglePage () {
        var wrapper = document.getElementById('game_wrapper')
        if (wrapper.style.display =='none')
            wrapper.style.display = 'block'
        else
            wrapper.style.display = 'none'
    }

    input.onkeypress = function() {
        // Making sure the user can't insert numbers.
        if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode > 122)
            return false
    }

    submit.onclick = function () {

        // Checking if there even is a word to guess, if not return.
        if (!word.length)
            return

        var userGuess = []

        // The length of the users guess has to be the same as the length of the generated word.
        if (input.value.length != word.length) {
            alert('The length of your guess must be ' + word.length + ' characters long.')
            return
        }

        // Increase the amount of attempts after we know for sure that they haven't guessed the word.
        attempts++;
        // Check if the amount of attempts is w5, if so they lost the game.
        if (attempts == 5) {
            alert('You have reached the maxmimum amount of attempts! The word was ' + word)
            // Reset the page to start a new game.
            resetPage()
            return;
        }

        // Now we know that the length of the users input is correct.
        if (input.value == word) {
            // User has won the game.
            if (attempts > 1)
                alert('You have guessed the word within ' + attempts + ' attempts.')
            else
                alert('You have guessed the word within ' + attempts + ' attempt.')

            resetPage()
            return
        }

        // Loop over the length of the generated word.
        for (var i = 0; i < word.length; i++) {
            // Check if the letter of the users input at index i is equal to the
            // letter at index i of the generated word.
            if (input.value.charAt(i) == word.charAt(i)) {
                // We now know the letter is at the right place in the word so we mark it red.
                userGuess.push('<span class="red">' + input.value.charAt(i) + '</span>')
                continue
            }

            // The letter was not at the right place so we add it.
            userGuess.push(input.value.charAt(i))
        }

        // Loop over the length of the generated word.
        var wordCopy = word;
        for (var i = 0; i < userGuess.length; i++) {
            // If the letter isn't on the right place it gets pushed into the userGuess array
            // which means that we can check if the userGuess is equal to the words letter at index i
            if (wordCopy.includes(userGuess[i])) {
                for (var j = 0; j < wordCopy.length; j++) {
                    // If the char at index i is the same as the value of the array and the value of the array is not equal to the char at index 0
                    // then go on.
                    if (wordCopy.charAt(j) === userGuess[i] && userGuess[i] != word.charAt(0)) {
                        userGuess[i] = '<span class="yellow">' + input.value.charAt(i) + '</span>'

                        // Splitting the wordCopy.
                        var wordCopySplit = wordCopy.split("");

                        // Setting the index to nothin.
                        wordCopySplit[j] = '';
                        // Add all elements of the array.
                        wordCopySplit.join("");

                        wordCopy = '';

                        for (var k = 0; k < wordCopySplit.length; k++)
                            wordCopy += wordCopySplit[k]

                        continue;
                    }
                }
            }
        }

        addUserGuess(userGuess)
        console.log(userGuess)
        input.value = ''
    }

    function log (date, string) {
        console.log('[' + date.getHours() + ':' + date.getMinutes() + ":" + date.getSeconds() + '] ' + string)
    }