title: How to have a button that sorts and another button that reverses the word density of my text?
body: <p>I don't want to have something like this because it's ugly to see:
  <a href="https://i.stack.imgur.com/3F4sp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3F4sp.jpg" alt="enter image description here"></a></p>
  
  <p>But instead, I want my word density to get more organized and sorted out. How do I accomplish all this?</p>
  
  <ol>
  <li><em>Sort</em> from the <strong>highest word density first</strong> as a <em>default</em>.</li>
  <li>Have a button to <em>reverse</em> (or have the <strong>lowest word density first</strong>). </li>
  <li>And then another button that sorts the highest word density first (like the default).</li>
  </ol>
  
  <p>Here's my HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const displayText = () =&gt; {
    const inputPage = document.getElementById("input-page");
    const countPage = document.getElementById("count-page");
    const text = document.getElementById("text");
    const textValue = text.value;
  
    if (text.value !== "") {
      // normal flow will continue if the text-area is not empty
      inputPage.style.display = "none";
      document.getElementById("display-text").innerText = textValue;
      countPage.style.display = "block";
    } else {
      // if the text-area is empty, it will issue a warning.
      alert("Please enter some text first.");
    }
  
    const countWords = (str) =&gt; {
      return str.split(" ").length;
    };
    const wordCount = countWords(textValue);
  
    const renderWordCount = () =&gt; {
      const wordCountDiv = document.getElementById("word-count");
      wordCountDiv.innerHTML = "&lt;h1&gt; Words Counted: " + wordCount + "&lt;/h1&gt;";
    };
  
    const getWordDensity = (str) =&gt; {
      let wordList = {};
      str.split(/[\s.,—–]+/).forEach((word) =&gt; { // '\s.,—–' removes space or tab, periods, commas, em and en dashes from the text.
        if (typeof wordList[word] == "undefined") {
          wordList[word] = 1;
        } else {
          wordList[word]++;
        }
      });
      return wordList;
    };
    const wordDensity = getWordDensity(textValue);
  
    const renderWordDensity = () =&gt; {
      const wordDensityDiv = document.getElementById("word-density");
  
      let table = "&lt;table&gt;";
      for (let word in wordDensity) {
        table +=
          "&lt;tr&gt;&lt;td&gt;" + word + "&lt;/td&gt;&lt;td&gt;" + wordDensity[word] + "&lt;/td&gt;&lt;/tr&gt;";
      }
      table += "&lt;/table&gt;";
  
      wordDensityDiv.innerHTML = "&lt;h1&gt; Word Density: &lt;/h1&gt;" + table;
    };
  
    renderWordCount();
    renderWordDensity();
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Word Counter&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="input-page"&gt;
      &lt;h1&gt;Word Counter&lt;/h1&gt;
      &lt;form action=""&gt;
        &lt;textarea id="text" type="text" rows="22" cols="60"&gt;&lt;/textarea&gt;
        &lt;br /&gt;
      &lt;/form&gt;
      &lt;button onclick="displayText()"&gt;COUNT&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div id="count-page" style="display: none;"&gt;
      &lt;h1&gt;Your Text:&lt;/h1&gt;
      &lt;p id="display-text"&gt;&lt;/p&gt;
      &lt;div id="word-count"&gt;&lt;/div&gt;
      &lt;div id="word-density"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks a lot in advance!</p>