DOM TASK

TASK - 1 : LIVE CHARACTER COUNT

    <input id="type" type="text" oninput="show()">
    <p >charater count: <span id="res"></span> </p>
    <script>

        function show(){
           const character= document.getElementById("type");
           console.log(character.value.length)
           const result=document.getElementById("res");
           result.innerText=character.value.length;
            }

output:

In this code I used the oninput event for to get the value of the input . This event is used to track the live count ,searches...

TASK - 2 : PASSWORD SHOW AND HIDE WITH 2 BUTTONS

<input id="pass" type="password">
    <button id="show" onclick="Open()">Show</button>
    <button id="hide" onclick="Close()">hide</button>
    <script>
           const passshow = document.getElementById("pass");
        function Open(){
           if(passshow.type=="password"){
            passshow.type="text";
           } 
        }
        function Close(){
            if(passshow.type=="text"){
                passshow.type="password";
            }
        }
    </script>

output:

TASK -3: PASSWORD SHOW AND HIDE IN SINGLE ICON

 <input id="password" type="password">
    <button id ="eye"  onclick="eyeopen()"><i  class="fa-solid fa-eye"></i></button>


    <script>
        function eyeopen(){
            const Eye=document.getElementById("password");
            if(Eye.type=="password"){
                Eye.type="text";  
                const openeye = document.getElementById("eye")
                openeye.innerHTML = '<i class="fa-solid fa-eye-low-vision"></i>' 
            }
            else{
                Eye.type="password";
                const openeye = document.getElementById("eye")
                openeye.innerHTML='<i  class="fa-solid fa-eye"></i>'
            }
        }
    </script> 

output: