DOM-TASK1

LIVE CLOCK

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1 id="clock">00:00:00</h1> 

    <script>
const clockNew=document.getElementById("clock");
function updateClock() {
    const time = new Date();
    const h = String(time.getHours()).padStart(2, '0');
    const m = String(time.getMinutes()).padStart(2, '0');
    const s = String(time.getSeconds()).padStart(2, '0');

    clockNew.innerText = h + ":" + m + ":" + s;
}
updateClock();
setInterval(updateclock, 1000); 
    </script>
</body>
</html>

Syntax:The padStart() method in JavaScript is used to pad a string with another string until it reaches the given length. The padding is applied from the left end of the string.

javascript
string.padStart(targetLength, padString)

DYNAMIC FONT SIZE CHANGER

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>

<body>
    <div style="height: 100px; text-align: center;">
        <h1 id="word">Hi Hello</h1>
    </div>

    <div style="text-align: center;">
        <input type="range" min="10" max="48" value="22" id="size">
    </div>

    <script>
        const word = document.getElementById('word');
        const size = document.getElementById('size');

        size.addEventListener('input', () => {
            // Appending 'px' ensures the CSS property applies correctly
            word.style.fontSize = size.value + 'px';
        });
    </script>
</body>

</html>

The addEventListener() method attaches an event handler function to a specified HTML element without overwriting existing event handlers.

ENABLE AND DISABLE SUBMIT BUTTON

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
   <input onclick="mysubmit()" type="checkbox" id="check" >
    <button id="btn" disabled>submit</button> 
    <script>
        const box =  document.getElementById("check");
        console.log(box);

        const button =   document.getElementById("btn");
        function mysubmit(){
            if (box.checked == true ){   //checked means enter (tick)
                button.disabled = false;
            }else{
                button.disabled = true;   //not clicked  disabled
            }
        }
    </script>  
</body>
</html>

UPPERCASE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <h1 id="h1" oninput="convert()"></h1> -->
    <input type="text"  id="h1" > 
    <button id="btn" onclick="convert()">convert</button>



</body>
<script>


    function convert()
    {
        document.getElementById("h1").value = document.getElementById("h1").value.toUpperCase();
    }


    // btn.addEventListener("click",()=>{document.getElementById("h1").value = document.getElementById("h1").value.toUpperCase();})
</script>
</html>