const inp = document.getElementById('list-input').value;

const ul = document.getElementById('list-container');

const ulData = document.getElementById('data-container');

const resetForm = document.getElementById('form-ku')

​

document.getElementById('addBtn').addEventListener('click', addTodo);

​

const createNewTask = function (val) {

​

    //create element li

    const listItem = document.createElement('li');

    //create element button for edit

    // const editBtn = document.createElement('button')

    //create element button for delete

    const deleteBtn = document.createElement('button')

    //create node for value

    const valNode = document.createTextNode(val)

​

    //Modified each element

    // editBtn.innerText = 'Edit';

    deleteBtn.innerText = 'Delete';

    deleteBtn.className = 'delete';

​

    //append each child

    listItem.appendChild(valNode)

    listItem.appendChild(deleteBtn)

    // listItem.appendChild(editBtn)

    //return

    return listItem;

}

​

function addTodo(e) {

    //prevent page loading

    e.preventDefault()

​

    //get value

    const val = getValue('list-input');

​

    //new element created

    const li = createNewTask(val);

​

    //append to ul child

    ul.appendChild(li);

​

    //Reset form

    resetForm.reset();

​

    return ul

}

​

const getValue = (id) => {

    const val = document.getElementById(id).value;

    return val;

}

​