Breaking News: Grepper is joining You.com. Read the official announcement!

todolist example

Pramu Ayesh answered on March 16, 2023 Popularity 7/10 Helpfulness 1/10

answer todolist example

todolist example

Comment

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tasks</title>
        <script>
            // This app allow users to add tasks to a list.
            document.addEventListener('DOMContentLoaded', () => {
                // Get the submit button and input
                const submit = document.querySelector("#submit");
                const newTask = document.querySelector("#task");

                // Set up a key up event handler for input
                newTask.onkeyup = () => {

                    // Make sure user typed something to the input
                    if (newTask.value.length > 0) {
                        submit.disabled = false;
                    } else {
                        submit.disabled = true;
                    }

                }

                // Listen for submission for form
                document.querySelector('form').onsubmit = () => {

                    // Get the user typed task 
                    const task = newTask.value;

                    // Create a list item
                    const li = document.createElement('li');

                    // Change the inner HTML to the current task
                    li.innerHTML = task;

                    // Add the task to the unordered list
                    document.querySelector('#tasks').append(li);

                    // Clear the input field
                    newTask.value = "";

                    // Disable the submit button again
                    submit.disabled = true;

                    // Stop form from submitting
                    return false;
                }

            });
        </script>
    </head>
    <body>
        <h1>Todolist</h1>
        <ul id="tasks"></ul>
        <form>
            <input type="text" placeholder="Task" id="task"/>
            <input type="submit" id="submit"/>
        </form>
    </body>
</html>

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Mar 16 2023

Pramu Ayesh

0 Answers Avg Quality 2/10

todolist example

Contents

More Related Answers

todolist example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.