script.js

let touchStartX = 0;
let touchEndX = 0;
let touchStartY = 0;
let touchEndY = 0;

// Select elements
const inputBox = document.getElementById('input-box');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');

// Listen for touch start
document.addEventListener('touchstart', function(event) {
    touchStartX = event.changedTouches[0].screenX;
    touchStartY = event.changedTouches[0].screenY;
}, false);

// Listen for touch end
document.addEventListener('touchend', function(event) {
    touchEndX = event.changedTouches[0].screenX;
    touchEndY = event.changedTouches[0].screenY;
    handleGesture(event);
}, false);

// Handle swipe gestures
function handleGesture(event) {
    if (touchEndY > touchStartY + 100) { // Detect downward swipe
        showInputBox();
    } else if (touchEndX < touchStartX - 50) { // Detect leftward swipe
        const li = event.target.closest('li');
        if (li) {
            li.classList.add('swiped-left');
            setTimeout(() => {
                li.remove();
                applyGradient(); // Reapply gradient after removal
            }, 300); // Auto-remove after animation
        }
    }
}

// Function to show the input box
function showInputBox() {
    inputBox.style.top = '0'; // Slide the input box down into view
    taskInput.focus(); // Focus on the input field to bring up the keyboard
}

// Listen for Enter key to add a task
taskInput.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') { // Check if Enter key is pressed
        addTask(taskInput.value);
        taskInput.value = ''; // Clear the input field
        hideInputBox(); // Hide the input box after adding the task
        taskInput.blur(); // Blur the input field to close the keyboard
    }
});

// Function to add a new task
function addTask(task) {
    if (task.trim()) { // Ensure task is not empty
        const li = document.createElement('li');
        li.textContent = task;

        // Add delete button for swipe-left action
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '×';
        deleteButton.className = 'delete';
        deleteButton.addEventListener('click', () => {
            li.remove();
            applyGradient(); // Reapply gradient after removal
        });

        li.appendChild(deleteButton);

        // Add the new task at the top of the list
        taskList.prepend(li);

        applyGradient(); // Apply gradient after adding a new task
    }
}

// Function to hide the input box
function hideInputBox() {
    inputBox.style.top = '-50px'; // Slide the input box up and out of view
}

// Function to apply dynamic gradient to task list
function applyGradient() {
    const items = taskList.querySelectorAll('li');
    const maxLightness = 50;  // Lightness for the first item
    const minLightness = 90;  // Lightness for the last item

    items.forEach((item, index) => {
        const lightness = maxLightness - (index / (items.length - 1)) * (maxLightness - minLightness);
        item.style.backgroundColor = `hsl(0, 100%, ${lightness}%)`;
    });
}