Lesson 3: Building Site Subtitles in Squarespace (5:10)

<!-- Subtitle Cycle from Will-Myers.com -->
<script>
(function() {
  const options = [
    "Woof around the world.",
    "Where in the woof am I?",
    "Your Pawsport to adventure.",
    "A walk in the bark.",
    "Embark on pawsome adventures."
  ];

  //Build Subtitle Element
  const siteTitle = document.querySelector('.header-display-desktop #site-title') || document.querySelector('.header-display-desktop .header-title-logo');
  const subtitle = document.createElement('div');
  subtitle.classList.add('cycle-subtitle');
  siteTitle.append(subtitle);

  let index = 0; // Initialize with the first option

  const setNewSubTitle = () => {
    subtitle.innerHTML = options[index];
    index += 1;       
    if (index > options.length - 1) { index = 0 }
  }

  siteTitle.addEventListener('mouseenter', setNewSubTitle);
  setNewSubTitle();
}());
</script>