Read time calculator
javascript
This code is designed to calculate an estimated read time for blog post text. This code can be embedded anywhere inside the post & customized!
How this works
This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.
This code will calculate the number of minutes it will take the average reader to read all of the text in the blog post. The estimated read time will be displayed on a gray box with a border; it uses your paragraph text font and can hve customized colors.
How to use this code
This code is designed to work on any Squarespace blog post. Copy this code using the copy button on the right. It’s recommended that you add it to a code block inside your blog post above or below the content.
<!-- Estimated Read Time Code from CustomCodey.com -->
<div id="read-time-estimate" style="
background-color: #f8f9fa; /* Light gray background */
border: 1px solid #ccc; /* Solid border */
padding: 10px;
margin: 10px 0;
font-family: var(--body-font-line-height);
font-size: 1rem;
color: #333; /* Dark gray text */
text-align: center;
border-radius: 4px; /* Slightly rounded corners */
"></div>
<script>
// Function to calculate read time
function calculateReadTime(selector) {
const wordsPerMinute = 200; // Average reading speed
const contentElement = document.querySelector(selector);
const outputElement = document.getElementById("read-time-estimate");
if (contentElement) {
const textContent = contentElement.innerText || "";
const wordCount = textContent.split(/\s+/).filter(word => word.length > 0).length; // Word count
const readTime = Math.ceil(wordCount / wordsPerMinute); // Calculate read time
// Display result
outputElement.innerText = `Estimated Read Time: ${readTime} minute${readTime === 1 ? "" : "s"}`;
} else {
outputElement.innerText = "No content found to calculate read time.";
}
}
// Run the function on page load
document.addEventListener("DOMContentLoaded", function () {
calculateReadTime(".blog-item-content");
});
</script>