<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .todo-input { padding: 12px; width: 300px; border: 2px solid #ddd; border-radius: 10px; font-size: 16px; }
        .todo-btn { padding: 12px 25px; background: #2E86AB; color: white; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; margin-left: 10px; }
        .todo-list { list-style: none; padding: 0; max-width: 400px; margin: 20px auto; }
        .todo-list li { background: white; padding: 12px 15px; margin: 8px 0; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .todo-list li.done { text-decoration: line-through; opacity: 0.5; }
        .del-btn { background: #E84D3D; color: white; border: none; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
    </style>
</head>
<body>
    <h2>Todo Ilovasi</h2>
    <input type="text" id="todoInput" class="todo-input" placeholder="Yangi vazifa...">
    <button class="todo-btn" onclick="addTodo()">Qo'shish</button>
    <ul class="todo-list" id="todoList"></ul>

    <script>
        function addTodo() {
            let input = document.getElementById('todoInput');
            let text = input.value.trim();
            if (!text) return;

            let li = document.createElement('li');
            li.innerHTML = '<span onclick="this.parentElement.classList.toggle(\'done\')">' + text + '</span>' +
                '<button class="del-btn" onclick="this.parentElement.remove()">X</button>';
            document.getElementById('todoList').appendChild(li);
            input.value = '';
            input.focus();
        }

        document.getElementById('todoInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') addTodo();
        });
    </script>
</body>
</html>