<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

<h1>Type a Phrase, Count the Vowels!</h1>
<p>Author: Jozef Jarosciak</p>

<br>

<fieldset>
    <legend>Please type 10 or more characters to get the vowels count!</legend>
    <div>
        <textarea id="textFromInput" placeholder="Here goes your text..."></textarea>
    </div>
    <button id="randomButton" onclick="randomText();">Generate Text</button>
</fieldset>

<p id="validation"></p>

<button onclick="countVowels()">Count Vowels</button>


<br><br><br>

<fieldset class="resultGroup">
    <legend>The Number of Vowels!</legend>
    <div>
        <label>Letter A:</label>
        <br>
        <label for="vowelA"></label><input type="text" id="vowelA"><label id="vowelAlabel"></label>
        <br>
        <br>
        <label>Letter E:</label>
        <br>
        <label for="vowelE"></label><input type="text" id="vowelE"><label id="vowelElabel"></label>
        <br>
        <br>
        <label>Letter I:</label>
        <br>
        <label for="vowelI"></label><input type="text" id="vowelI"><label id="vowelIlabel"></label>
        <br>
        <br>
        <label>Letter O:</label>
        <br>
        <label for="vowelO"></label><input type="text" id="vowelO"><label id="vowelOlabel"></label>
        <br>
        <br>
        <label>Letter U:</label>
        <br>
        <label for="vowelU"></label><input type="text" id="vowelU"><label id="vowelUlabel"></label>
    </div>
</fieldset>

<br>

<fieldset class="resultGroup">
    <legend>Total # of All Vowels:</legend>
    <div>
        <p id="vowelAll"></p>
    </div>
</fieldset>


<br>

<fieldset class="resultGroup">
    <legend>Vowels by Count:</legend>
    <div>
        <p id="sorted"></p>
    </div>
</fieldset>


</body>

</html>
// PRINCIPAL FUNCTION
function countVowels() {

    // GET TEXT FROM TEXT AREA AND CONVERT TO LOWERCASE
    var text = document.getElementById("textFromInput").value.toLowerCase(); // get text from textarea
    var entryLength = text.length; // get length of text from textarea

    // VALIDATION FOR 10 CHARACTERS
    if (validateLength(entryLength) === false) {return;}

    // INITIALIZE COUNTERS / RESET COUNTERS
    var countA; var countE; var countI; var countO; var countU;
    countA=countE=countI=countO=countU = 0;

    // COUNT OCCURRENCE OF EACH VOWEL
    for (var i = 0; i < text.length; i++) {
        if (text[i] === "a") {countA++;}
        if (text[i] === "e") {countE++;}
        if (text[i] === "i") {countI++;}
        if (text[i] === "o") {countO++;}
        if (text[i] === "u") {countU++;}
    }

    // TOTAL VOWELS COUNT
    var countAll = countA + countE + countI + countO + countU;

    // PUT ALL VARS INTO ARRAY AND SORT
    var array = [
        [countA, "A"],
        [countE, "E"],
        [countI, "I"],
        [countO, "O"],
        [countU, "U"]
    ];

    // SORT TWO DIMENTIONAL ARRAY
    array.sort(function (a, b) {
        // sorting 2-dimentional array
        return a[0] - b[0];
    });

    // PRINT RESULT BOX: COUNT FOR EACH VOWEL
    document.getElementById("vowelA").value = countA;
    document.getElementById("vowelE").value = countE;
    document.getElementById("vowelI").value = countI;
    document.getElementById("vowelO").value = countO;
    document.getElementById("vowelU").value = countU;

    // PRINT RESULT BOX: TOTAL # OF ALL VOWELS
    document.getElementById("vowelAll").innerHTML = "There is a total of <b>"
                            + countAll + "</b> vowel(s) in your text!";

    // PRINT RESULT BOX: VOWELS BY COUNT
    var sortedResultsPrintOut = ""; // initialize empty
    for (var x = 4; x >= 0; x--) {
        // build the message for print out
        sortedResultsPrintOut += "Vowel <b>" + array[x][1]
                              + "</b> appeared <b>" + array[x][0] + "</b> times.<br>";
        // reset background
        document.getElementById("vowel" + array[x][1]).style.background = "white";
        //reset pointer
        document.getElementById("vowel" + array[x][1] + "label").innerHTML = "";
    }
    // PRINT IT SORTED VOWEL COUNTS
    document.getElementById("sorted").innerHTML = sortedResultsPrintOut;

    // HIGHLIGHT BACKGROUND OF THE MOST OCCURRING VOWEL
    document.getElementById("vowel" + array[4][1]).style.background = "yellow";
    document.getElementById("vowel" + array[4][1] + "label").innerHTML = " << Highest count!";
}


// Validation Function
function validateLength(inputLength) {
    if (inputLength < 10) {
        var charsNeeded = 10 - inputLength;
        // print message
        document.getElementById("validation").innerHTML = "You've entered <b>" + inputLength
            + "</b> of <b>10</b> required characters. Please enter <b>" + charsNeeded + "</b> more character(s)!";
        // set the red color
        document.getElementById("validation").style.color = "red";
        // input is not validated, hide result fieldset boxes
        showHideResults("show");
        // did not pass validation - return
        return false;
    } else {
        // PRINT VALIDATION
        document.getElementById("validation").innerHTML = "Thank you! You've entered <b>" + inputLength
                              + "</b> characters! Please see the results below.";
        document.getElementById("validation").style.color = "green";
        // input was validated show result boxes
        showHideResults("show");
        // message is longer or equal to 10 characters - return true
        return true;
    }
}

// Show or Hide Result Fieldsets Function
function showHideResults(command) {
    var elementsShow = document.getElementsByClassName("resultGroup");
    for (var i = 0; i < elementsShow.length; i++) {
        if (command==="show") {
            elementsShow[i].style.display = 'block';
        } else if (command==="hide") {
            elementsShow[i].style.display = 'none';
        }
    }
}

// Random Text Input Generator Function
function randomText() {
    var textRandom = "";
    var characterSet = "abcdefghijklmnopqrstuvwxyz ";
    for (var i = 0; i < (Math.floor(Math.random() * 100) + 10); i++) {
        textRandom += characterSet.charAt(Math.floor(Math.random() * characterSet.length));
    }
    document.getElementById("textFromInput").value = textRandom;
}
textarea {
    width: 100%;
    margin: 15px 0;
    height: 100px;
}

input {
    font-weight: bold;
    font-size: 15px;
}

legend {
    font-weight: bold;
}

#randomButton {
    float: right;
}
Count the Vowels using JavaScript
2016 © Jozef Jarosciak