Code Snippet for a Read timer in header

[Heiss]

Hey,

i want to share a small snippet i made for my garden. It adds a read timer and icon in the timestamps-box after the creation and modified dates.

I placed it in "src/site/_includes/components/user/notes/header/001-readtimer.njk".

<script>
const readspeed = 170;
let element = document.createElement("div");
element.innerHTML = '<i icon-name="book-open"></i>';
document.getElementsByClassName("timestamps")[0].append(element);

function addReadtimer() {
  const minutes = Math.ceil(document.getElementsByClassName("content")[0].textContent.split(/\s+/).length / readspeed);
  let elem = document.createElement("span");
  elem.innerHTML = minutes + ' min read';
  element.append(elem);
}

document.addEventListener("DOMContentLoaded", addReadtimer);
</script>

It is a little complicated, but it works great for my case. I need the workaround, because the content was not loaded correctly without the delay. The icon is right in place while loading and the text will be added after some moments. It is fine for me. :)
Feel free to adjust it to your needs and give back your thoughts. :)