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: