<!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