JSFiddle - React, Tailwind, and code Playground

by Matthew Pye

HTML

<div style="text-align: center;">
<h1> Vowel Counter </h1>
Please enter text for your vowel count:
<br>
<textarea id="text" rows="10" style="width: 100%;">Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a orner, "Oh my ears and whiskers, how late it's getting!" She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof</textarea>
<br>
<button onclick="countVowels();">Count Vowels</button>
<p id="result"></p>

JavaScript

function countVowels() {

    var text = document.getElementById("text").value;

    var arrayOfLetters = text.split("");

    // These are the counters for the program to find the vowels.
    var countA = text.match(/[Aa]/g).length;
    var countE = text.match(/[Ee]/g).length;
    var countI = text.match(/[Ii]/g).length;
    var countO = text.match(/[Oo]/g).length;
    var countU = text.match(/[Uu]/g).length;
    var countComma = text.match(/[,.!": ;?)(]/g).length;
    vowelCount = { A: countA, E: countE, I: countI, O:countO, U:countU };
    
    // Find vowel with maximum appearances
    var vowelMaxCount = -1;
    var vowelMostPopular = -1;
    for(vowel in vowelCount) {
        if(vowelCount[vowel] > vowelMaxCount) {
            vowelMaxCount = vowelCount[vowel];
            vowelMostPopular = vowel;
        }
    }
    
    // This code will output the results.
    document.getElementById("result").innerHTML = "";
    document.getElementById("result").innerHTML += "Total Letters: " + arrayOfLetters.length + "<br />";
    for(vowel in vowelCount) {
        v = (vowel == vowelMostPopular)?"<strong>"+vowel+"</strong>":vowel;
        document.getElementById("result").innerHTML += v+"'s: " + vowelCount[vowel] + "<br />";
    }
    document.getElementById("result").innerHTML += "Punctuation: " + countComma + "<br />";
  
}