DOM TASKS

oninput:

• The oninput event in JavaScript fires immediately when the value of an input or textarea element changes.
• It is the ideal choice for tracking real-time user modifications like live searches, character counters, or instant form validation.

ondblclick:

• The ondblclick event attribute in JavaScript fires when a user rapidly clicks twice on a single HTML element.

task 1 - Live character counter

<input id="new" oninput="character()"type="text">
<h1 id="div">0</h1>

<script>
    function character(){
        const newcharacter = document.getElementById("new").value.length;
        const result = document.getElementById("div");
        result.innerText = newcharacter
    }  
</script>

output:

task 2 - show/hide password

<input id="one" type="password">
<button id="two" onclick="showtext()">show</button>
<button id="three" onclick="hidetext()">hide</button>

<script>
    function showtext(){
        const showbtn = document.getElementById("one")
        showbtn.type = "text";
    }
    function hidetext(){
        const showbtn = document.getElementById("one")
        showbtn.type = "password";
    }
</script>

output:

task 3 - 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: