TypeWriter

    const sentences = [
        'This is the first example sentence in this array.',
        'This is the second example sentence in this array.',
        'This is the third example sentence in this array.',
        'This is the fourth example sentence in this array.',
        'This is the fifth example sentence in this array.'
    ]

    var charAt = 0
    var index = 0

    const area = document.getElementById('area')
    var interval

    var isAnimationRunning = false
    var isButtonClicked = false

    function getFormattedDate(date) {
        return '[' + date.getHours() + ':' + date.getMinutes() + ":" + date.getSeconds() + ']'
    }

    function TypeWriter(event) {

        // This returns the element that was clicked on.
        var target = event.target

        // Checking if the clicked elements first class is called 'start'
        if (target.classList[0] === 'start') {
            // Setting the elements content to an empty string.
            area.innerHTML = ''
            requestAnimation()
        } else {
            // If an animation is already running, we want to skip the animation and show the full sentence
            if (isAnimationRunning)
                stopAnimation()
            else {
                // If no animation is currently running, we want to start a new animation.
                area.innerHTML = ''
                // Request a new animation.
                requestAnimation()
            }
        }
    }

    function stopAnimation() {
        console.log(getFormattedDate(new Date()) + ' Stopped the animation.')
        // Clearing the interval to make sure we stop the animation.
        clearInterval(interval)
        // Setting the elements content to the full sentence at once.
        area.innerHTML = sentences[index]
        // Reset the variables for the next time we start an animation.
        resetVariables()
        index++
        return
    }

    function resetVariables() {
        console.log(getFormattedDate(new Date()) + ' Reset the variables.')
        isAnimationRunning = false
        charAt = 0
    }

    function requestAnimation() {
        console.log(getFormattedDate(new Date()) + ' Started the animation.')
        // Starting an interval to start the animation.
        interval = setInterval(function() {
            // Checking if the length of the sentence is the same amount as charAt,
            // If this is the case then it means that has been fully animated.
            if (sentences[index] != null) {
                if (sentences[index].length == charAt) {
                    // Only if the animation is running we clear the interval and reset the stuff.
                    if (isAnimationRunning) {
                        clearInterval(interval)
                        resetVariables()
                        index++
                        return
                    }
                } else {
                    // Checking if there even is a sentence to animate.
                    if (sentences[index] != null) {
                        // As long as the charAt variable is smaller than the length of the sentence, we do stuff.
                        if (charAt < sentences[index].length) {
                            isAnimationRunning = true
                            // Set the element equal to the current element content plus the new letter.
                            area.innerHTML += sentences[index][charAt]
                            charAt++
                        }
                    }
                }
            } else {
                // If we got here that means that there are no more sentences in the array to animate so we reset the whole thing.
                alert('There are no more sentences to animate.')
                // Stop the interval from running.
                clearInterval()
                // Resetting the variables again.
                resetVariables()
                index = 0
            }
        }, 100)
    }

    window.onclick = function(event) {
        var target = event.target

        if (target.classList[0] == 'start') {
             // Setting the clicked elements display property to none which makes it dissapear.
             target.style.display = 'none'
            isButtonClicked = true
        } else {
            if (isButtonClicked)
                TypeWriter(event)
        }

    }