JavaScript - Count Vowels and Consonant in a Sentence

Submitted by razormist on Monday, January 21, 2019 - 22:13.

In this tutorial we will create a Count Vowels and Consonant in a Sentence using Javascript. JavaScript is a scripting or programming language that allows you to implement complex things on web pages. It is widely used in designing a stunning website. It is an interpreted programming language that has a capabilities of Object-Oriented. So Let's do the coding..

Getting started:

This is the link for the bootstrap that i used for the layout design https://getbootstrap.com/.

The Main Interface

This code contains the interface of the application. To create this just write these block of code inside the text editor and save this as index.html.

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">JavaScript - Count Vowels and Consonant in a Sentence</h3>
                <hr style="border-top:1px dotted;"/>
                <div class="col-md-6">
                        <div class="form-group">
                                <textarea id="words" class="form-control" style="height:150px; resize:none;"></textarea>
                        </div>
                        <button onclick="countCheck();" class="btn btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Check</button>
                        <button onclick="reset();" class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span> Reset</button>
                </div>
                <div class="col-md-6">
                        <div id="result">
                        </div>
                </dvi>
        </div>
<script src="js/script.js"></script>
</body>
</html>

Creating the Script

This code contains the script of the application.This code will count all the vowels and consonant in a word. To do this just copy and write these block of codes as shown below inside the text editor and save it as script.js inside the js folder.

function reset(){
        document.getElementById('words').value = "";
        document.getElementById('result').innerHTML = "";
}
 
function countCheck(){
        var words = document.getElementById('words').value;
        
        if(words == ""){
                document.getElementById('result').innerHTML = "<center><label class='text-danger'>Please enter some word</label></center>";
        }else{
                document.getElementById('result').innerHTML = "<label style='font-size:24px;'>Vowels:</label> <label style='font-size:20px;' class='text-success'>"+vowels(words)+"</label><br /><label style='font-size:24px;'>Consonant:</label> <label style='font-size:20px;' class='text-success'>"+consonant(words)+"</label>";
        }
}
 
function vowels(str){
        var vowels = "AEIOUaeiou";
        var count = 0;
        
        for(var i=0; i < str.length; i++){
                if(vowels.indexOf(str[i]) !== -1){
                        count++;
                }
        }
        
        return count;
}
 
function consonant(str){
        var consonant = "BCDFGHJKLMNPQRSTVWXYZbcdfghjklmnpqrstvwxyz";
        var count = 0;
        
        for(var i=0; i < str.length; i++){
                if(consonant.indexOf(str[i]) !== -1){
                        count++;
                }
        }
        
        return count;
}

There you have it we successfully created a Count Vowels and Consonant in a Sentence using Javascript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

Add new comment

112 views