daily pastebin goal
15%
SHARE
TWEET

TypeWriter

a guest Dec 7th, 2017 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.     const sentences = [
  2.         'This is the first example sentence in this array.',
  3.         'This is the second example sentence in this array.',
  4.         'This is the third example sentence in this array.',
  5.         'This is the fourth example sentence in this array.',
  6.         'This is the fifth example sentence in this array.'
  7.     ]
  8.  
  9.     var charAt = 0
  10.     var index = 0
  11.  
  12.     const area = document.getElementById('area')
  13.     var interval
  14.  
  15.     var isAnimationRunning = false
  16.     var isButtonClicked = false
  17.  
  18.     function getFormattedDate(date) {
  19.         return '[' + date.getHours() + ':' + date.getMinutes() + ":" + date.getSeconds() + ']'
  20.     }
  21.  
  22.     function TypeWriter(event) {
  23.  
  24.         // This returns the element that was clicked on.
  25.         var target = event.target
  26.  
  27.         // Checking if the clicked elements first class is called 'start'
  28.         if (target.classList[0] === 'start') {
  29.             // Setting the elements content to an empty string.
  30.             area.innerHTML = ''            
  31.             requestAnimation()
  32.         } else {
  33.             // If an animation is already running, we want to skip the animation and show the full sentence
  34.             if (isAnimationRunning)
  35.                 stopAnimation()
  36.             else {
  37.                 // If no animation is currently running, we want to start a new animation.
  38.                 area.innerHTML = ''
  39.                 // Request a new animation.
  40.                 requestAnimation()
  41.             }
  42.         }
  43.     }
  44.  
  45.     function stopAnimation() {
  46.         console.log(getFormattedDate(new Date()) + ' Stopped the animation.')
  47.         // Clearing the interval to make sure we stop the animation.
  48.         clearInterval(interval)
  49.         // Setting the elements content to the full sentence at once.
  50.         area.innerHTML = sentences[index]
  51.         // Reset the variables for the next time we start an animation.
  52.         resetVariables()
  53.         index++
  54.         return
  55.     }
  56.  
  57.     function resetVariables() {
  58.         console.log(getFormattedDate(new Date()) + ' Reset the variables.')
  59.         isAnimationRunning = false
  60.         charAt = 0
  61.     }
  62.  
  63.     function requestAnimation() {
  64.         console.log(getFormattedDate(new Date()) + ' Started the animation.')
  65.         // Starting an interval to start the animation.
  66.         interval = setInterval(function() {
  67.             // Checking if the length of the sentence is the same amount as charAt,
  68.             // If this is the case then it means that has been fully animated.
  69.             if (sentences[index] != null) {
  70.                 if (sentences[index].length == charAt) {
  71.                     // Only if the animation is running we clear the interval and reset the stuff.
  72.                     if (isAnimationRunning) {
  73.                         clearInterval(interval)
  74.                         resetVariables()
  75.                         index++
  76.                         return
  77.                     }
  78.                 } else {
  79.                     // Checking if there even is a sentence to animate.
  80.                     if (sentences[index] != null) {
  81.                         // As long as the charAt variable is smaller than the length of the sentence, we do stuff.
  82.                         if (charAt < sentences[index].length) {
  83.                             isAnimationRunning = true
  84.                             // Set the element equal to the current element content plus the new letter.
  85.                             area.innerHTML += sentences[index][charAt]
  86.                             charAt++
  87.                         }
  88.                     }
  89.                 }
  90.             } else {
  91.                 // If we got here that means that there are no more sentences in the array to animate so we reset the whole thing.
  92.                 alert('There are no more sentences to animate.')
  93.                 // Stop the interval from running.
  94.                 clearInterval()
  95.                 // Resetting the variables again.
  96.                 resetVariables()
  97.                 index = 0
  98.             }
  99.         }, 100)
  100.     }
  101.  
  102.     window.onclick = function(event) {
  103.         var target = event.target
  104.        
  105.         if (target.classList[0] == 'start') {
  106.              // Setting the clicked elements display property to none which makes it dissapear.
  107.              target.style.display = 'none'
  108.             isButtonClicked = true
  109.         } else {
  110.             if (isButtonClicked)
  111.                 TypeWriter(event)
  112.         }
  113.  
  114.     }
RAW Paste Data
Top