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;

    var bold = "<strong>";
    var vowels = new Array ();
    vowels [0] = "countA";
    vowels [1] = "countE";
    vowels [2] = "countI";
    vowels [3] = "countO";
    vowels [4] = "countU";

    for (var i = 0; i < vowels.length; i++) {
    document.getElementById("result").innerHTML = i + vowels[i] + "<br />";
        
}
    // This code will output the results.
    document.getElementById("result").innerHTML = "";
    document.getElementById("result").innerHTML += "Total Letters: " + arrayOfLetters.length + "<br />";
    document.getElementById("result").innerHTML += "A's: " + countA + "<br />";
    document.getElementById("result").innerHTML += "E's: " + countE + "<br />";
    document.getElementById("result").innerHTML += "I's: " + countI + "<br />";
    document.getElementById("result").innerHTML += "O's: " + countO + "<br />";
    document.getElementById("result").innerHTML += "U's: " + countU + "<br />";
    document.getElementById("result").innerHTML += "Punctuation: " + countComma + "<br />";
}