Hello Friend in this article we are going to tell you How to Count Vowels and Consonants using Javascript of Any String and Words. Sometime it maybe usefull to know how many vowels and consonats in a String and words so we can find a tools who count vowels and consonant easily. if you find this type of tool now you can find here. i will going to create a source code step by step in JavaScript which help Count any string who has How many vowels and cansonats. So lets start coding Now. Follow these step Carefully .
How to Count Vowels and Consonants using JavaScript
Step 1 – Creating A Teaxt Area Field where Type Something and Submit to Get Result
Next step is creating a textarea field using HTML. in this step creating a textarea and submit button to use type and get result. copy the below source code and paste in HTML Editor like Notepad++ and save it is as “index.html“.
<form>
<b>Enter a word or a sentence</b>
<br />
<br />
<textarea id='User_Enter' autofocus="autofocus"></textarea>
<br><br>
<input type='button' onclick='VowelsConsonants_Counts()' value='Count'/>
<input type='button' onclick='clear_now()' value='Clear'/>
</form>
<br />
<br />
<br />
<div class="results" id='word_string'></div>
<br />
<br />
<div class="results" id='vowels'> </div>
<div class="results" id='consonants'> </div>
</form>
Step 2 – Styling the Form and Buttons
in this step we are going to make attractive textarea fields, buttons and text formating using css. copy the below source code and save it is as “style.css“.
body {
margin:auto;
width:300px;
}
b {
font-family:arial;
color:black;
font-size:18px;
}
.results {
font-weight: bold;
font-family:arial;
font-size:18px;
color:black;
}
textarea {
width: 360px;
height: 100px;
display: block;
font-family: arial;
font-size: 18px;
border-radius: 2px;
box-shadow: 5px 5px 5px green;
border:black 1px solid;
text-indent:10px;
}
textarea:focus {
outline: none;
border:green 2px dotted;
}
input[type=button] {
padding:10px;
background:azure;
border:black 1px solid;
cursor:pointer;
-webkit-border-radius: 12px;
box-shadow: 5px 5px 5px green;
border-radius: 5px;
font-family: arial;
font-size: 18px;
}
Step 3 – Count Vowels and Consonants of Any String and Words using JavaScript
Thsis is final step. in this step we are going to validate the textarea fields and count vowels and Consonants using JavaScript. Copy the Below Source Code and paste in you HTML Editor and save it is as “js.js“.
function VowelsConsonants_Counts()
{
var TextVar = document.getElementById('User_Enter').value;
if (TextVar.length==0) {
document.getElementById('User_Enter').focus();
alert("Sorry cannot be empty");
}
else {
document.getElementById('word_string').innerHTML = "The word or sentence is <br />"
+ "<font color='green'>" +TextVar + ".</font>";
document.getElementById('vowels').innerHTML = "<font color='green'>Number of Vowels :</font> "
+ vowel_count(TextVar);
document.getElementById('consonants').innerHTML = " <font color='green'>Number of Consonants :</font> "
+ consonants_count(TextVar);
}
}
function clear_now()
{
document.getElementById('User_Enter').value="";
document.getElementById('word_string').innerHTML="";
document.getElementById('vowels').innerHTML="";
document.getElementById('consonants').innerHTML="";
document.getElementById('User_Enter').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;
}
Preview
After complete all step your result looks like this.
If you like download complete source then you can Download Complete Source code in zip formate clicking after Download Now Button Given Below and Don’t forget to Subscribe for Newsletter.