js8

<html>
    <head>
        <title>js8</title>
    </head>
    <script>
        function  f1()
        {
            var i,n1,count=0;
            n1=document.getElementById("c1").value;
            for(i=0;i<=n1.length;i++)
            {
                if(n1[i]=="A" || n1[i]=="E" || n1[i]=="I" || n1[i]=="O" || n1[i]=="U" || n1[i]=="a" || n1[i]=="e" || n1[i]=="i" || n1[i]=="o" || n1[i]=="u"  )
                {
                    count++;
                }


            }
            document.getElementById("state").innerHTML=count;
        }
    </script>
    <style>
        body
        {
            background-image:url("file:///D:/backgrounds/50.jpg");
            background-color:pink;
            background-attechment:fixed;
            backdrop-filter:blur(7px);
            height:100vh;
            background-size:100% 100%;
            margin:0;
            padding:0;
            background-repeat:no-repeat;

        }
        .s1
        {
            width:100%;
            height:70px;
            border-color:#ff66d9;
            background:black;
            color:white;
            font-size:25px;

        }
        .s2
        {
            border-radius:0%;
            border-color:red;
            background:black;
            color:white;
            font-size:35px;

        }

    </style>
    <body   text="White">
        <center>
            <h1 > Checking vowels</h1>
            <stamp class="s1" style="background:transparent;color:yellow">*Press tab after giving data*<stamp>
        </center>
        <table border="1" align="center" cellspacing="15" cellpadding="70" width="70%" style="border-color:transparent">
            <form >
                <tr  >
                    <td colspan="2">
                            <input  type="textbox" class="s1"  id="c1" onchange="f1()" placeholder="Enter the Statement">
                    </td>

                </tr>
                <tr>
                    <td> <label class="s2"> No of Vowels =</label></td>
                    <td > <label class="s2" id="state"  >0</label></td>

                </tr>
            </form>
        </table>
    </body>

</html>