Version 2

Code

<!DOCTYPE html>

<head>

<title>Interactive To-Do List</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

color: #333;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.container {

width: 400px;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

}

h1 {

text-align: center;

color: #ff6f61;

}

.todo-input {

width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

margin-bottom: 10px;

font-size: 1rem;

}

.todo-list {

list-style-type: none;

padding: 0;

}

.todo-item {

display: flex;

justify-content: space-between;

align-items: center;

background-color: #fafafa;

margin-bottom: 10px;

padding: 10px;

border-radius: 5px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.btn {

padding: 5px 10px;

background-color: #ff6f61;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

}

.btn:hover {

background-color: #ff3f2f;

}

</style>

</head>

<body>

</div>

document.getElementById("todoInput").addEventListener("keypress", function(event) {

if (event.key === 'Enter') {

addTodo();

}

});

function addTodo() {

const input = document.getElementById("todoInput");

const taskText = input.value.trim();

if (!taskText) return;

const todoList = document.getElementById("todoList");

const todoItem = document.createElement("li");

todoItem.className = "todo-item";

todoItem.innerHTML = `${taskText} <button class="btn" onclick="removeTodo(this)">Done</button>`;

todoList.appendChild(todoItem);

input.value = '';

}

function removeTodo(button) {

button.parentElement.remove();

}

</script>

</body>

</html>

Press enter to submit task

Does not work on mobile phone use version 1