How to Display a Dynamic Remaining Reading Time in Webflow

(function() {
  var content = document.querySelector('.article-content');
  var display = document.getElementById('reading-time-left');
  if (!content || !display) return;

  var words = content.innerText.trim().split(/\s+/).length;
  var WPM = 200;
  var totalMin = Math.ceil(words / WPM);

  function update() {
    var scrolled = window.scrollY;
    var docH = document.documentElement.scrollHeight - window.innerHeight;
    var pct = Math.min(1, scrolled / docH);
    var wordsRead = Math.floor(words * pct);
    var remaining = Math.ceil((words - wordsRead) / WPM);
    if (remaining <= 0) {
      display.textContent = 'Article finished ✓';
    } else if (remaining === totalMin) {
      display.textContent = totalMin + ' min read';
    } else {
      display.textContent = remaining + ' min remaining' + (remaining > 1 ? 's' : '');
    }
  }

  update();
  window.addEventListener('scroll', update, { passive: true });
})();