DOM TASK

TASK 1:

COUNTER:

• when a plus button is clicked it should increment the count.
• when a sub(-) button is clicked it should decrement the count.
• when a reset button is pressed it should be turn back to "0"

PROGRAM:

<h1>count <span id="count"> 0</span></h1>
        <button id="increment" onclick="addition()">+</button>
        <button id="decrement" onclick="subraction()">-</button>
        <button id="reset" onclick="reset()">reset</button>
        <script>
            let count=0;
            function addition(){
                const element = document.getElementById("count");
                count++;
                element.innerText = count;
            }
            function subraction(){
                const element = document.getElementById("count");
                count--;
                element.innerText = count;
            }
            function reset(){
                const element = document.getElementById("count");
                count=0;
                element.innerText = count;
            }
        </script>

OUTPUT:

TASK 2:
LIVE CHARACTER COUNT:

<input id="userinput" 
        oninput="character()"  type="text" >
       <h1 id="result">0</h1>

       <script>

        function character(){
            const inputbox= document.getElementById("userinput").value.length;
            const  result = document.getElementById("result");
            result.innerText = inputbox;
        } 

       </script>

OUTPUT:

TASK 3:

PASSWORD SHOW AND HIDE WITH 2 BUTTONS:

<input id="user-input" type="password" >
       <button id="show" onclick="getshow()">show</button>
       <button id="hide" onclick="gethide()">hide</button>

       <script>

        function getshow(){
            const element= document.getElementById("user-input");
            if(element.type=="password"){
                element.type="text";
            }
        }
        function gethide(){
            const element= document.getElementById("user-input");
             if(element.type=="text"){
                element.type="password";
            }
        }

       </script> 

OUTPUT:

TASK 4:
show/hide password with icon:

<div class="div">

            <input id="one" type="password">

            <button onclick="showtext()" id="btn"><i id="three" style="padding: 20px;font-size: xx-large;" class="fa-solid fa-eye"></i></button>
        </div>
        <script>
         function showtext(){
        const showbtn = document.getElementById("one")
        const btn2 = document.getElementById("btn");
        if(showbtn.type == "password"){
            showbtn.type = "text"
            btn2.innerHTML = '<i style="padding: 20px;font-size: xx-large;" class="fa-solid fa-eye-slash"></i>' 
        }else{
            showbtn.type = "password";
            btn2.innerHTML = '<i id="three" style="padding: 20px;font-size: xx-large;" class="fa-solid fa-eye"></i>'
        }
        console.log(document.getElementById("three")); 
    }
    </script>

OUTPUT:

HIDE:

SHOW: