How to Display a Random Encouragement Message in Webflow

(function() {
  var messages = [
    { text: 'Build something you’ll be proud of.', emoji: '🚀' },
    { text: 'Every great website started with a single page.', emoji: '✨' },
    { text: "The best time to launch was yesterday. The second best time is now.", emoji: '⚡' },
    { text: "Good design is when you don't notice it.", emoji: '🎨' },
    { text: "Perfection is the enemy of good. Publish, iterate.", emoji: '🎯' },
    { text: 'Your visitors don’t read — they scan. Make it easy.', emoji: '👀' },
    { text: 'Speed is a feature. Every second counts.', emoji: '⚡' },
    { text: "The best CTA is the one the user notices.", emoji: '🎯' },
  ];

  var el = document.getElementById('encouragement-msg');
  if (!el) return;

  function render(msg) {
    el.innerHTML = '' + msg.emoji + '' +
      '
"' + msg.text + '"
';
  }

  render(messages[Math.floor(Math.random() * messages.length)]);

  setInterval(function() {
    var newMsg = messages[Math.floor(Math.random() * messages.length)];
    el.style.opacity = '0';
    el.style.transition = 'opacity 0.4s';
    setTimeout(function() {
      render(newMsg);
      el.style.opacity = '1';
    }, 400);
  }, 8000);
})();