HTML Editor - Edit Your Source Code Online

Source Code: (back to article)

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic To-Do List</title>
    <style>
        .info { color: darkgreen; }
    </style>
</head>
<body>
    <div id="todo-list">
        <h2>To-Do List</h2>
        <ul id="tasks">
            <li>Task 1</li>
            <li>Task 2</li>
        </ul>
        <input type="text" id="task-input" placeholder="Add a new task">
        <button id="add-button">Add Task</button>
    </div>

button.addEventListener('click', () => {
            const newTask = input.value.trim();
            if (newTask) {
                const li = document.createElement('li');
                li.textContent = newTask;
                tasks.appendChild(li);
                input.value = '';
                document.body.insertAdjacentHTML('beforeend', '<p class="info">Added new task to the to-do list</p>');
            }
        });
    </script>
</body>
</html>