In this article I will show you how to count the number of vowels and consonants in Javascript what the program will do is to ask the user to enter a word or string and then the program will count the number of vowels and consonants given by the user.
If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Vowels and Consonants Counter</title>
</head>
<body bgcolor="lightgreen">
<SCRIPT>
function count_now()
{
var TextVar = document.getElementById('userInput').value;
if (TextVar.length==0) {
document.getElementById('userInput').focus();
alert("Sorry cannot be empty");
}
else {
document.getElementById('word_string').innerHTML = "The word or string is "
+ "<font color='red'>" +TextVar + ".</font>";
document.getElementById('vowels').innerHTML = " Number of Vowels : "
+ vowel_count(TextVar);
document.getElementById('consonants').innerHTML = " Number of Consonants : "
+ consonants_count(TextVar);
}
}
function clear_now()
{
document.getElementById('userInput').value="";
document.getElementById('word_string').innerHTML="";
document.getElementById('vowels').innerHTML="";
document.getElementById('consonants').innerHTML="";
document.getElementById('userInput').focus();
}
function vowel_count(str1)
{
var vowel_list = 'aeiouAEIOU';
var vcount = 0;
for(var x = 0; x <str1.length ; x++)
{
if (vowel_list.indexOf(str1[x]) !== -1)
{
vcount += 1;
}
}
return vcount;
}
function consonants_count(str1)
{
var consonant_list = ' bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ';
var c_count = 0;
for(var x = 0; x <str1.length ; x++)
{
if (consonant_list.indexOf(str1[x]) !== -1)
{
c_count += 1;
}
}
return c_count;
}
</SCRIPT>
<style>
b {
font-family:arial;
color:blue;
font-size:18px;
}
.for_div
{
font-weight: bold;
font-family:arial;
font-size:18px;
color:blue;
}
input[type="text"] {
display: block;
margin: 0;
width: 35%;
font-family: arial;
font-size: 18px;
appearance: none;
border-radius: 2px;
box-shadow: 10px 10px 7px #888888;
}
input[type="text"]:focus {
outline: none;
}
input[type=button] {
padding:12px 31px;
background:yellow; border:10px;
cursor:pointer;
-webkit-border-radius: 12px;
box-shadow: 10px 10px 7px #888888;
border-radius: 5px;
font-family: arial;
font-size: 18px;
}
</style>
</head>
<body>
<b> Vowels and Consonants Counter </b> <br><br>
<form name="myform" action="">
<b> Enter a word or a sentence </b><br><br>
<input type='text' id='userInput' placeholder="enter text here" value='' size="30" required/>
<br><br>
<input type='button' onclick='count_now()' title="Click here to count the vowels and consonants" value='OK'/>
<input type='button' onclick='clear_now()' title="Click here to clear the textbox." value='CLEAR'/>
</form>
<br><br><br>
<div class="for_div" id='word_string'></div> <br><br>
<div class="for_div" id='vowels'> </div>
<div class="for_div" id='consonants'> </div>
</body>
</html>
