How to display user input in new task created?

April 12, 2022

I am trying to get the list that the user inputs to display, but for some reason, it is not doing so. I am not sure if I am missing an element here:

const createTask = () => {
    const id = createId()
    const task = elements.input.value;
    const date = elements.cal.value;

    if(!task && !date) return alert("Please fill in task and select date");
    if(!task) return alert("Please fill in task");
    if(!date) return alert("Please select date");

    const tasks = document.createElement("div");

    tasks.innerHTML = `
    <div class="task" date-id = "${id}">
        <div class="content">
            <input type ="checkbox" class="tick">
            <input class = text id = "text" readonly>
            <label class = "due-date" for ="text">${date}</label>
        </div>

        <div class = "action">
            <button class="edit" data-id="${id}>Edit</button>
            <button class="delete" data-id="${id}>Delet</button>
        </div>
    </div>
    `

    elements.list.appendChild(tasks)
    return tasks
}

I added event listner that listens for this click of the submit, along with checking for the click of the edit and delete button.

/******************************************************
 * Event that listens for the edit and delete button  *
 ******************************************************/

elements.list.addEventListener('click',event => {
    const {target} = event;

    const {id} = target.dataset
    const task = id ? document.querySelector('[data-id="${id}"]'): null
    const displayText =  document.querySelector()

    const type = {
        edit: event.target.classList.contains('edit'),
        delete: event.target.classList.contains('delete'),
    }

    const isFromSaveLabel = target.innerText.toLowerCase() === 'save'

    if(tasks && type.edit && isFromSaveLabel){
        const text = tasks.querySelector('text')
        target.innerText = 'Edit'
        text.addAttribute('readonly')
        return
    }

    if(tasks && type.edit){
        const text = task.querySelector('text')
        target.innerText = 'Save'
        text.removeAttribute('readonly')
        text.focus()
        return
    }

    if(tasks && type.delete){
        return
    }
});

const submitHandler = (event) =>{
    event.preventDefault();
    createTask();
}

elements.form.addEventListener("submit", submitHandler);

This is currently what is happening with the output. As you can see no user
input text appears nore the delete and edit button appears.