Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>Article Reading Tracker</title>
  </head>
  <style>
  article {
    width: 50%;
    margin: 0 auto;;
    font-size: 30px;
    line-height: 20px;
    line-height: 1.5;
    padding: 20px;
    color: #333;
    background-color: #f8f8f8;
  }
  #reading-tracker {
    font-size: 14px;
    color: #999;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #eee;
    padding: 10px;
    height: auto;
  }
</style>

  <body>
    <article>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum rhoncus enim, non sodales sem. Ut facilisis arcu ligula, a iaculis libero tempor sed. Pellentesque vel diam vitae felis posuere semper. Ut placerat dolor non libero dapibus imperdiet. Mauris sed est nec odio vehicula porttitor ut id enim. Nam scelerisque nec enim ac iaculis. Praesent aliquet gravida sapien, sit amet fringilla dui mollis id. Nullam at dignissim nibh, quis sollicitudin mi. Donec purus mauris, blandit nec felis in, sollicitudin venenatis erat. Maecenas bibendum eu diam quis ornare.
<br>
      Curabitur ipsum libero, hendrerit at porttitor id, vulputate blandit est. Quisque pulvinar tempor ultricies. Suspendisse luctus nisi eu sagittis consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut id est massa. Mauris ante augue, elementum sit amet neque nec, rutrum condimentum quam. Sed vulputate ipsum sed nisl consequat, eu maximus nisi cursus. Pellentesque hendrerit posuere ex, non imperdiet augue. Mauris malesuada, ligula at condimentum sollicitudin, libero ex faucibus purus, vitae dignissim eros diam quis eros. Nunc a imperdiet nisl, quis porttitor lorem.

      Suspendisse at augue nisi. Nullam id suscipit turpis. Vivamus efficitur laoreet purus, at efficitur magna vulputate a. Duis luctus posuere sapien id pretium. Maecenas eget lectus eu nibh sodales bibendum. Sed sed massa varius, cursus tellus eu, convallis sapien. Duis quis est augue.
      <br>
      Nam laoreet eros sit amet nisi tincidunt vestibulum. Integer vitae magna non lacus varius eleifend. Quisque maximus lectus nec placerat tincidunt. Mauris at lectus tristique, pretium justo at, tristique dolor. Pellentesque id porta elit. Suspendisse consectetur mi nec massa mollis, eget finibus sapien suscipit. <br>Suspendisse commodo, neque eu feugiat pharetra, nunc justo tristique tortor, a pharetra odio magna bibendum tortor. Nulla at rutrum nulla, et lobortis massa. Donec faucibus at mi at molestie. Quisque sit amet nunc et felis sagittis tempor. Donec et vehicula ipsum, et blandit tellus. Praesent blandit aliquam ligula eu dictum. Pellentesque bibendum mattis eros, at aliquam ex elementum vitae.
      <br>
      Vivamus vitae consectetur erat. Sed auctor commodo mauris, eleifend viverra eros dignissim a. Morbi sodales dapibus risus eu fringilla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus fermentum cursus lacus a tincidunt. Pellentesque a congue purus, ac faucibus sapien. Vivamus placerat tortor turpis, in posuere eros aliquam eu. Proin mi turpis, cursus a risus ac, pharetra tempus arcu. Nam gravida non dolor nec lobortis. Donec nec semper orci. Proin non rutrum nunc, in euismod felis.

      Vestibulum eget nibh eleifend, vestibulum leo et, hendrerit lacus. Sed pellentesque ante id tristique malesuada. Aenean posuere turpis in neque facilisis, sit amet imperdiet mauris sollicitudin. Maecenas vel tortor sodales, consequat ipsum at, eleifend est. Pellentesque nec odio a eros interdum tristique ut eget lorem. Mauris gravida diam in erat hendrerit sagittis. Quisque erat velit, varius non tortor at, blandit elementum arcu. Suspendisse scelerisque erat ligula, sed dapibus ipsum auctor in. Fusce eu nunc sit amet felis cursus vulputate faucibus sed ipsum. In iaculis lectus sed euismod convallis. Vivamus tempor ipsum at aliquam consequat.
      <br>
      Etiam mollis tortor tortor, a laoreet eros lobortis ut. Aenean bibendum vel ex in vehicula. Nunc volutpat dignissim tincidunt. Donec a neque bibendum, varius leo ut, dictum enim. Sed vitae neque porttitor, ultrices justo eu, tristique eros. Nullam elementum iaculis enim eget convallis. Integer cursus mi eu urna euismod tincidunt. Maecenas mattis ac dolor id porttitor. Mauris efficitur nisi eget posuere hendrerit. Nam velit nulla, dictum vitae consectetur in, fringilla ut magna. Maecenas eleifend augue eget felis gravida, a dapibus velit euismod.
      <br>
      Praesent egestas non turpis sed rutrum. Pellentesque a turpis quis mi cursus rutrum. Cras sapien massa, tristique a blandit at, interdum sed enim. Sed suscipit, nisl id luctus vestibulum, nisi metus varius urna, eget convallis lectus sapien aliquam quam. Cras risus quam, malesuada sit amet vulputate non, consequat ut magna. Sed et ultrices lacus, a maximus sem. Curabitur volutpat, massa vel scelerisque venenatis, libero elit laoreet est, ac gravida velit massa quis arcu. Nullam finibus lectus purus, non maximus sapien maximus id. Ut egestas viverra magna eu interdum. Vestibulum vel euismod libero, a suscipit lacus. Nunc consequat tortor non justo tempor, ac suscipit mi elementum. Integer quis consectetur sapien. Praesent tempor nisl vel urna volutpat, at vulputate enim facilisis. Phasellus egestas congue leo. Morbi lobortis convallis rhoncus.
      <br>
      Mauris maximus condimentum tortor. Proin dignissim justo in lacus auctor hendrerit. Phasellus condimentum suscipit bibendum. Morbi dictum dui lectus, eget cursus magna volutpat vel. Etiam finibus quis lorem non maximus. Morbi finibus consequat lacus eget tempus. Donec viverra enim quis augue tincidunt, et venenatis tellus luctus. Mauris ullamcorper porta dui, vitae dictum purus luctus suscipit. <br>Quisque eleifend quis ex sit amet mattis. Ut quis magna malesuada, semper diam sit amet, feugiat eros. Ut sed sem tempus, tincidunt ante quis, tempus lacus. Phasellus vehicula nulla sit amet aliquam elementum. Nulla cursus, dui ac consequat fringilla, augue est luctus justo, nec maximus ante nulla nec est.
      <br>
      Phasellus libero purus, ultricies vitae velit vel, varius tincidunt dolor. Quisque viverra bibendum arcu porttitor tempus. Morbi consequat neque ornare luctus pharetra. Sed scelerisque, urna eu tincidunt commodo, eros nisi ultrices justo, vel ultrices sem eros sed ligula. Donec cursus odio eu nulla elementum facilisis. <br>Aliquam ultrices, lorem et mollis dapibus, nunc felis dignissim diam, a viverra ipsum lectus et augue. Quisque semper augue in purus dapibus maximus et non velit. Suspendisse justo massa, laoreet nec vestibulum fringilla, ullamcorper vel dolor. Proin ultricies gravida neque, vel suscipit nulla. Vestibulum efficitur rhoncus volutpat. Etiam volutpat nisi nec felis efficitur, interdum efficitur nisl hendrerit. Nulla porttitor nunc at sollicitudin rhoncus.
    </article>
    <div id="reading-tracker"></div>
    <script>
  let timeSpent = 0;
    let startTime;

    // get article content
    const article = document.querySelector("article");
    const articleContent = article.textContent;

    // calculate word count
    const wordCount = articleContent.split(" ").length;

    // estimate time to read
    const averageReadingSpeed = 200; // words per minute
    const estimatedTime = Math.ceil(wordCount / averageReadingSpeed);

    // update reading tracker
    const readingTracker = document.querySelector("#reading-tracker");
    readingTracker.innerHTML = `Estimated time to read: ${estimatedTime} minutes`;

    // track reading progress
    let wordsRead = 0;

    window.addEventListener("scroll", function () {
      const articleHeight = article.offsetHeight;
      const articlePosition = article.getBoundingClientRect().top;
      const windowHeight = window.innerHeight;
      const percentRead = (windowHeight - articlePosition) / articleHeight;
      wordsRead = Math.ceil(percentRead * wordCount);

      // start timer if the article is in view
      if (percentRead > 0 && percentRead < 1 && !startTime) {
        startTime = Date.now();
      }

      // stop timer if the article is not in view
      if (percentRead <= 0 || percentRead >= 1) {
        startTime = null;
      }

      // calculate time spent
      if (startTime) {
        timeSpent += (Date.now() - startTime) / 1000;
        startTime = Date.now();
      }

      let answer = `Words read: ${wordsRead} / ${wordCount} (${Math.floor(percentRead * 100)}%) - Time spent: ${Math.ceil(timeSpent)} seconds - Estimated time to read: ${Math.ceil(estimatedTime * (1 - percentRead))} minutes`;
      readingTracker.innerHTML = answer;
      console.log('Answer = ', answer);
    });

</script>
  </body>
</html>