How to Count Vowels and Consonants using JavaScript

0 9,233

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.

Count Number Of Vowels And Consonants Using Javascript

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.

Download Source Code

Leave A Reply

Your email address will not be published.