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

PRG July 26, 2022

Practical Aim: JavaScript and HTML code to check whether entered character is vowel or consonant using switch case

First, try at own

Video Tutorial: JavaScript to check whether entered character is vowel or consonant using switch case

Code

VowelorNot.html file [ switch case ]

Javascript - vowel or consonant using switch case
<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 >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z')) {
        switch (ch) {
          case 'a':
          case 'e':
          case 'i':
          case 'o':
          case 'u':
          case 'A':
          case 'E':
          case 'I':
          case 'O':
          case 'U':
            document.getElementById("result").innerHTML = "vowel character";
            break;
          default:
            document.getElementById("result").innerHTML = "Consonant character";
            break;
        }
      }
      else {
        document.getElementById("result").innerHTML = "Please Enter Character";
      }
    }
  </script>
</head>

<body>
  <div class="wrapper">
    <label>Enter The character: </label>
    <input id="char" placeholder="Enter character">
    <br><br>
    <button onclick="checkVowelornot()">Check</button>
    <p id="displayresult" style="display: block;">
      Output: <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

Tags:
PRG

Posted by: PRG

Post a Comment

0 Comments