<!-- CSS Code -->
<style type="text/css" scoped="">
#container {
 text-align: left;
}

#text {
 display: inline-block;
 vertical-align: center !important;
   color: rgba(0,0,0,1);
    line-height: 1.5;
    letter-spacing: 0em;
    font-size: 25px;
    text-align: left;
    font-family: 'Zonda Regular';
    font-weight: 400;
    font-style: normal;
}

#cursor {
 display: inline-block;
 vertical-align: left !important;
 width: 0px;
 height: 50px;
 background-color: #ffffff;
 animation: blink .75s step-end infinite;

}
</style>

<!-- HTML Code -->
<div id="container">
 <div id="text"></div><div id="cursor"></div>
</div>

// List of sentences
var _CONTENT = [  
 "Tune in for marketing advice",
 "Tune in for business mentoring",
 "Tune in for content ideas", 
 "Tune in for pricing advice",
 "Tune in for client management advice",
];

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Cursor element 
var _CURSOR = document.querySelector("#cursor");

// Implements typing effect
function Type() { 
 // Get substring with 1 character added
 var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
 _ELEMENT.innerHTML = text;
 _PART_INDEX++;

 // If full sentence has been displayed then start to delete the sentence after some time
 if(text === _CONTENT[_PART]) {
  // Hide the cursor
  _CURSOR.style.display = 'none';

  clearInterval(_INTERVAL_VAL);
  setTimeout(function() {
   _INTERVAL_VAL = setInterval(Delete, 50);
  }, 1000);
 }
}

// Implements deleting effect
function Delete() {
 // Get substring with 1 characater deleted
 var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
 _ELEMENT.innerHTML = text;
 _PART_INDEX--;

 // If sentence has been deleted then start to display the next sentence
 if(text === '') {
  clearInterval(_INTERVAL_VAL);

  // If current sentence was last then display the first one, else move to the next
  if(_PART == (_CONTENT.length - 1))
   _PART = 0;
  else
   _PART++;
  
  _PART_INDEX = 0;

  // Start to display the next sentence after some time
  setTimeout(function() {
   _CURSOR.style.display = 'inline-block';
   _INTERVAL_VAL = setInterval(Type, 100);
  }, 200);
 }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);