tasks.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tasks</title>
    
    <script>

        document.addEventListener('DOMContentLoaded', function(){

            //by default submit button should be disabled 
            document.querySelector('#submit').disabled = true;

            //when user type something, it should be enabled
            document.querySelector('#task').onkeydown = function(){
                if(document.querySelector('#task').value.length > 0){
                    document.querySelector('#submit').disabled = false;
                }else{
                    document.querySelector('#submit').disabled = true;
                }
            }

            document.querySelector('form').onsubmit = function(){

                const task = document.querySelector('#task').value;
                
                const li = document.createElement('li');
                li.innerHTML = task;

                document.querySelector('#tasks').append(li);

                document.querySelector('#task').value = '';
                document.querySelector('#submit').disabled = true;

                //stop form from submitting
                return false;
            }

        })

    </script>

</head>
<body>
    <h1>Tasks</h1>
    <ul id="tasks"></ul>
    <form>
        <input type="text" id="task" autofocus placeholder="New Task">
        <input type="submit" id="submit">
    </form>
</body>
</html>