html.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
        }
        #todo-container {
            width: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
        #new-task {
            width: calc(100% - 70px); /* Adjust width for button */
            padding: 5px;
            margin-right: 5px;
            border: 1px solid #ccc;
        }
        #add-button {
            padding: 5px 10px;
            background-color: #4CAF50; /* Green */
            color: white;
            border: none;
            cursor: pointer;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin-top: 10px;
        }
        li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        li span { /* Style the task text */
           word-break: break-all; /* Prevent long words from overflowing */
        }
        .delete-button {
            margin-left: 10px;
            background-color: #f44336; /* Red */
            color: white;
            border: none;
            padding: 4px 8px;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <h1>To-Do List</h1>

    <div id="todo-container">
        <input type="text" id="new-task" placeholder="Enter a new task">
        <button id="add-button">Add</button>

        <ul id="task-list">
            </ul>
    </div>

    <script>
        const newTaskInput = document.getElementById('new-task');
        const addButton = document.getElementById('add-button');
        const taskList = document.getElementById('task-list');

        addButton.addEventListener('click', () => {
            const taskText = newTaskInput.value.trim();
            if (taskText !== "") {
                addTask(taskText);
                newTaskInput.value = ""; // Clear the input field
            }
        });

        newTaskInput.addEventListener('keyup', (event) => {
          if (event.key === 'Enter') { // Trigger add on Enter key press
            const taskText = newTaskInput.value.trim();
            if (taskText !== "") {
                addTask(taskText);
                newTaskInput.value = ""; // Clear the input field
            }
          }
        });


        function addTask(taskText) {
            const listItem = document.createElement('li');
            const taskSpan = document.createElement('span'); // Add span for task text
            taskSpan.textContent = taskText; // Set the task text
            listItem.appendChild(taskSpan); // Append span to list item

            const deleteButton = document.createElement('button');
            deleteButton.textContent = 'Delete';
            deleteButton.classList.add('delete-button');
            deleteButton.addEventListener('click', () => {
                taskList.removeChild(listItem);
            });
            listItem.appendChild(deleteButton);
            taskList.appendChild(listItem);
        }
    </script>

</body>
</html>