riderjensen/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exmaple</title>
</head>

<body>
     <p id="wordDelete"></p>

    <script src="/assets/js/main.js"></script>
    <script>
        var myNewWord = new wordDeleteObj({
            // ID of the HTML element where the words are placed
            // default: wordDelete
            selector: 'wordDelete',
            // array of phrases or words
            phrases: ["Join the Tale Stitch community.", "Writing together.", "The community that creates together stays together.", "Our story is your story.", "One chapter at a time...", "Many words, one destiny.", "High fives, rub elbows, tell stories.", "Your writing in print.", "What happens next? You decide.", "Play it cool man.", "Keep Tale Stitch weird.", "Daisy is best dog."],
            // delay in ms of how long it takes each letter to be printed
            // default: 300
            typeDelay: 300,
            // delay in ms of how long it takes each letter to be deleted
            // default: 150
            deleteDelay: 300,
            // delay in ms for how long the phrase stays up before deleting
            // default: 3000
            wordCompleteDelay: 3000,
            // delay in ms for how long after a word is deleted but before another one stars
            // default: 3000
            wordStartDelay: 5000
        });
        myNewWord.init();
    </script>
</body>

</html>

## typesim.js
function wordDeleteObj(config) {
  this.arrayOfSayings = config.phrases || ['Please pass in phrases or words to display in an array'];
  this.typeDelay = config.typeDelay || 300;
  this.deleteDelay = config.deleteDelay || 150;
  this.wordCompleteDelay = config.wordCompleteDelay || 3000;
  this.wordStartDelay = config.wordStartDelay || 3000;
  this.selector = config.selector || 'wordDelete';
  this.wordDelete = document.getElementById(this.selector);
  this.arrayCounter = 0;
  this.startWordAdd = function (word) {
    const wordArray = word.split("");
    let i = 0;
    const myTimeOut = setInterval(() => {
      this.addLetter(wordArray[i]);
      i++;
      if (i > wordArray.length - 1) {
        clearInterval(myTimeOut);
        this.addOrDeleteComplete();
        setTimeout(() => {
          this.startWordDelete(word);
        }, this.wordCompleteDelay)
      }
    }, this.typeDelay);
  };
  this.startWordDelete = function (word) {
    wordDelete.innerHTML = word;
    const wordArray = word.split("");
    let i = 0;
    const myTimeOut = setInterval(() => {
      this.deleteLetter();
      i++;
      if (i > wordArray.length - 1) {
        clearInterval(myTimeOut);
        this.addOrDeleteComplete();
      }
    }, this.deleteDelay);
  },
  this.addOrDeleteComplete = function () {
    this.wordDelete.innerHTML = `${this.wordDelete.innerHTML}<span></span>`
  };
  this.deleteLetter= function () {
    const wordArray = wordDelete.innerHTML.split("");
    if (wordArray.length >= 2) {
      wordArray.pop();
      wordDelete.innerHTML = wordArray.join("");
    } else {
      wordDelete.innerHTML = '';
      setTimeout(() => {
        this.wordDelete.innerHTML = '';
        if (this.arrayCounter >= this.arrayOfSayings.length - 1) {
          this.arrayCounter = 0;
        } else {
          this.arrayCounter++;
        }
        this.startWordAdd(this.arrayOfSayings[this.arrayCounter])
      }, this.wordStartDelay)
    }
  };
  this.addLetter = function (letter) {
    this.wordDelete.innerHTML = `${this.wordDelete.innerHTML}${letter}`
  };
  this.init = function () {
    // add the css to the page
    if(this.wordDelete) {
      var styleTag = '<style>' + '#' + this.selector + '{position: relative;display: block;}' + '#'+ this.selector + ' span {height: 24px;margin-bottom: -2px;width: 2px;background: black;opacity: 0;display: inline-block;animation: blink 0.6s linear infinite alternate;} @keyframes blink{50%{opacity: 0;}100%{opacity: 1;}}</style>'
      document.getElementById(this.selector).insertAdjacentHTML('beforebegin', styleTag);
      this.startWordAdd(this.arrayOfSayings[this.arrayCounter])
    }
  }
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Exmaple</title>
	</head>

	<body>
	<p id="wordDelete"></p>

	<script src="/assets/js/main.js"></script>
	<script>
	var myNewWord = new wordDeleteObj({
	// ID of the HTML element where the words are placed
	// default: wordDelete
	selector: 'wordDelete',
	// array of phrases or words
	phrases: ["Join the Tale Stitch community.", "Writing together.", "The community that creates together stays together.", "Our story is your story.", "One chapter at a time...", "Many words, one destiny.", "High fives, rub elbows, tell stories.", "Your writing in print.", "What happens next? You decide.", "Play it cool man.", "Keep Tale Stitch weird.", "Daisy is best dog."],
	// delay in ms of how long it takes each letter to be printed
	// default: 300
	typeDelay: 300,
	// delay in ms of how long it takes each letter to be deleted
	// default: 150
	deleteDelay: 300,
	// delay in ms for how long the phrase stays up before deleting
	// default: 3000
	wordCompleteDelay: 3000,
	// delay in ms for how long after a word is deleted but before another one stars
	// default: 3000
	wordStartDelay: 5000
	});
	myNewWord.init();
	</script>
	</body>

	</html>
	function wordDeleteObj(config) {
	this.arrayOfSayings = config.phrases \|\| ['Please pass in phrases or words to display in an array'];
	this.typeDelay = config.typeDelay \|\| 300;
	this.deleteDelay = config.deleteDelay \|\| 150;
	this.wordCompleteDelay = config.wordCompleteDelay \|\| 3000;
	this.wordStartDelay = config.wordStartDelay \|\| 3000;
	this.selector = config.selector \|\| 'wordDelete';
	this.wordDelete = document.getElementById(this.selector);
	this.arrayCounter = 0;
	this.startWordAdd = function (word) {
	const wordArray = word.split("");
	let i = 0;
	const myTimeOut = setInterval(() => {
	this.addLetter(wordArray[i]);
	i++;
	if (i > wordArray.length - 1) {
	clearInterval(myTimeOut);
	this.addOrDeleteComplete();
	setTimeout(() => {
	this.startWordDelete(word);
	}, this.wordCompleteDelay)
	}
	}, this.typeDelay);
	};
	this.startWordDelete = function (word) {
	wordDelete.innerHTML = word;
	const wordArray = word.split("");
	let i = 0;
	const myTimeOut = setInterval(() => {
	this.deleteLetter();
	i++;
	if (i > wordArray.length - 1) {
	clearInterval(myTimeOut);
	this.addOrDeleteComplete();
	}
	}, this.deleteDelay);
	},
	this.addOrDeleteComplete = function () {
	this.wordDelete.innerHTML = `${this.wordDelete.innerHTML}<span></span>`
	};
	this.deleteLetter= function () {
	const wordArray = wordDelete.innerHTML.split("");
	if (wordArray.length >= 2) {
	wordArray.pop();
	wordDelete.innerHTML = wordArray.join("");
	} else {
	wordDelete.innerHTML = '';
	setTimeout(() => {
	this.wordDelete.innerHTML = '';
	if (this.arrayCounter >= this.arrayOfSayings.length - 1) {
	this.arrayCounter = 0;
	} else {
	this.arrayCounter++;
	}
	this.startWordAdd(this.arrayOfSayings[this.arrayCounter])
	}, this.wordStartDelay)
	}
	};
	this.addLetter = function (letter) {
	this.wordDelete.innerHTML = `${this.wordDelete.innerHTML}${letter}`
	};
	this.init = function () {
	// add the css to the page
	if(this.wordDelete) {
	var styleTag = '<style>' + '#' + this.selector + '{position: relative;display: block;}' + '#'+ this.selector + ' span {height: 24px;margin-bottom: -2px;width: 2px;background: black;opacity: 0;display: inline-block;animation: blink 0.6s linear infinite alternate;} @keyframes blink{50%{opacity: 0;}100%{opacity: 1;}}</style>'
	document.getElementById(this.selector).insertAdjacentHTML('beforebegin', styleTag);
	this.startWordAdd(this.arrayOfSayings[this.arrayCounter])
	}
	}
	}