// HTML

<div id="word-counter">
  <textarea id="input"></textarea>
  <div id="output">
    <p>Words: <span id="word-count"></span></p>
    <p>Characters: <span id="character-count"></span></p>
    <p>Sentences: <span id="sentence-count"></span></p>
    <p>Paragraphs: <span id="paragraph-count"></span></p>
    <p>Top words: <span id="top-words"></span></p>
    <p>Reading time: <span id="reading-time"></span></p>
    <p>Speaking time: <span id="speaking-time"></span></p>
  </div>
</div>


// CSS

#word-counter {
  width: 600px;
  margin: 0 auto;
}

#input {
  width: 100%;
  height: 200px;
}

// JS

const input = document.getElementById("input");
const output = document.getElementById("output");
const wordCount = document.getElementById("word-count");
const characterCount = document.getElementById("character-count");
const sentenceCount = document.getElementById("sentence-count");
const paragraphCount = document.getElementById("paragraph-count");
const topWords = document.getElementById("top-words");
const readingTime = document.getElementById("reading-time");
const speakingTime = document.getElementById("speaking-time");

input.addEventListener("input", function() {
  const text = input.value;

  // Count words
  const wordArray = text.split(" ");
  const wordCountValue = wordArray.length;

  // Count characters
  const characterCountValue = text.length;

  // Count sentences
  const sentenceCountValue = text.split(/[.!?]+/g).length - 1;

  // Count paragraphs
  const paragraphCountValue = text.split(/\n/g).length;

  // Find top words
  const wordFrequency = {};
  wordArray.forEach(function(word) {
    wordFrequency[word] = wordFrequency[word] ? wordFrequency[word] + 1 : 1;
  });

  const sortedWords = Object.keys(wordFrequency).sort(function(a, b) {
    return wordFrequency[b] - wordFrequency[a];
  });

  const topWordsValue = sortedWords.slice(0, 10).join(", ");

  // Calculate reading time
  const readingTimeValue = Math.ceil(wordCountValue / 250);

  // Calculate speaking time
  const speakingTimeValue = Math.ceil(wordCountValue / 150);

  // Update output
  wordCount.textContent = wordCountValue;
  characterCount.textContent = characterCountValue;
  sentenceCount.textContent = sentenceCountValue;
  paragraphCount.textContent = paragraphCountValue;
  topWords.textContent = topWordsValue;
  readingTime.textContent = readingTimeValue + " min";
  speakingTime.textContent = speakingTimeValue + " min";
});

// Note that this code uses the input event on the text area to update the word count, character count, sentence count, paragraph count, top words, reading time, and speaking time whenever the user types in the text area. And also the reading time and speaking time are calculated based on standard reading and speaking speed of 250 and 150 words per minute respectively.