Reading Time Calculator Tool with colorful styling and all its features use any free library...

 

Reading Time Calculator

Estimated Reading Time:

* { box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #e0f7fa; color: #333; margin: 0; padding: 20px; } .container { max-width: 600px; margin: 0 auto; padding: 20px; border-radius: 8px; background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #00796b; } textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 0; resize: none; } button { display: block; width: 100%; padding: 10px; background-color: #00796b; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #00695c; } .output { margin-top: 20px; } #reading-time { font-size: 1.5em; color: #00796b; text-align: center; } document.getElementById('calculate-btn').addEventListener('click', function() { const inputText = document.getElementById('input-text').value; const readingTimeDisplay = document.getElementById('reading-time'); if (!inputText) { readingTimeDisplay.innerText = "Please enter some text."; return; } const wordsPerMinute = 200; // Average reading speed const textLength = inputText.split(/\s+/).filter(word => word.length > 0).length; // Count words const readingTimeInMinutes = Math.ceil(textLength / wordsPerMinute); if (readingTimeInMinutes === 0) { readingTimeDisplay.innerText = "Please enter more text."; } else if (readingTimeInMinutes === 1) { readingTimeDisplay.innerText = "Estimated reading time: 1 minute."; } else { readingTimeDisplay.innerText = `Estimated reading time: ${readingTimeInMinutes} minutes.`; } });