JavaScript and HTML code to check whether entered character is vowel or consonant using if else ladder - Practical [ SWPD 4311603 ]

Practical Aim: JavaScript and HTML code to check whether entered character is vowel or consonant using if else ladder.

First, try at own


Video Tutorial: JavaScript to check whether entered character is vowel or consonant using if else ladder.


Code

VowelorNot.html file

JavaScript and HTML code to check whether entered character is vowel or consonant using if else ladder. - Practical [ SWPD 4311603 ]

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vowel or Not</title>
<style>
.wrapper{
padding:10px;
margin: 20px;
background-color: blue;
}
input{
height: 20px;
}
button{
padding: 10px;
}
label{
color: aliceblue;
font-weight: bold;
}
p{
color: aliceblue;
font-weight: bold;
}
</style>

<script>
function checkVowelornot(){
var ch;
ch = document.getElementById("char").value;
//window.alert(ch);

if(ch){
temp = document.getElementById("displayresult");
temp.style.display = "block";

if((ch>='a' && ch<='z') || (ch>='A' && ch<='Z')){
if( ch =='a' || ch =='e' || ch == 'i' || ch == 'o' || ch =='u')
{
document.getElementById("result").innerHTML = "a Vowel";
}
else if (ch =='A' || ch =='E' || ch == 'I' || ch == 'O' || ch =='U')
{
document.getElementById("result").innerHTML = "a Vowel";
}
else{
document.getElementById("result").innerHTML = "a Consonant";
}
}else{
document.getElementById("result").innerHTML= "neither Vowel nor Consonant";

}

}

}
</script>
</head>
<body>
<div class="wrapper" >
<label>Enter The character: </label>
<input id="char">
<br><br>
<button onclick="checkVowelornot()">Check</button>
<p id="displayresult" style="display: none;">
It is <span id="result"></span>
</p>
</div>

</body>
</html>


Try here

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<h1> Try your code here</h1>
</body>
</html>



Output


Post a Comment

0 Comments