For creating a user directory

scripts.js

let names = [];
let firstNameInput = document.getElementById("addFnameInput");
let addLnameInput = document.getElementById("addLnameInput");
let addItembtn = document.getElementById("addItembtn");
let deletSelected = document.getElementById("deletSelected");

function onPageLoad(){
    names = JSON.parse(localStorage.getItem("localtask")) || [];
}

addItembtn.addEventListener("click", function () {
    firstNameInputVal = firstNameInput.value;
    lastNameInputVal = addLnameInput.value;
    if (firstNameInputVal.trim() != 0 || lastNameInputVal.trim() != 0) {
        names.push({ 'firstName': firstNameInputVal, 'lastName': lastNameInputVal });
        localStorage.setItem("localtask", JSON.stringify(names));
        addFnameInput.value = '';
        addLnameInput.value = '';
    }
    showtask();
})

// showtask
function showtask() {
    let html = '';
    let addedItemList = document.getElementById("addedItemlist");
    names.forEach((item, index) => {
        let firstNameElement = `<td>${item.firstName}</td>`;
        let lastNameElement = `<td>${item.lastName}</td>`;
        html += `<tr>
                    <th scope="row"><input type="checkbox" name="checkBox" value="${index}"> </th>
                    ${firstNameElement}
                    ${lastNameElement}
                    <td><button type="button" class="btn btn-success" onclick="edittask(${index})" >Edit</button></td>
                    <td><button type="button" class='btn btn-danger' onclick="deleteitem(${index})">Delete</button></td>
                </tr>`;
    });
    addedItemList.innerHTML = html;
}

// edittask
function edittask(index) {
    let saveindex = document.getElementById("saveindex");
    let addItembtn = document.getElementById("addItembtn");
    let saveItembtn = document.getElementById("saveItembtn");
    saveindex.value = index;
    addFnameInput.value = names[index]['firstName'];
    addLnameInput.value = names[index]['lastName'];
    addItembtn.style.display = "none";
    saveItembtn.style.display = "block";
}

// savetask
let saveItembtn = document.getElementById("saveItembtn");
saveItembtn.addEventListener("click", function () {
    let addItembtn = document.getElementById("addItembtn");
    let saveindex = document.getElementById("saveindex").value;

    for (keys in names[saveindex]) {
        if (keys == 'firstName') {
            names[saveindex].firstName = addFnameInput.value;
        }
        if (keys == 'lastName') {
            names[saveindex].lastName = addLnameInput.value;
        }
    }
    saveItembtn.style.display = "none";
    addItembtn.style.display = "block";
    localStorage.setItem("localtask", JSON.stringify(names));
    addFnameInput.value = '';
    addLnameInput.value = '';
    showtask();
})

// deleteitem
function deleteitem(index) {
    names.splice(index, 1);
    localStorage.setItem("localtask", JSON.stringify(names));
    showtask();
}


//check all
function selectAll(source) {
    //var x = document.getElementById("myCheck").value;
    console.log("source :" + source);
    deletSelected.style.display = "block";
    console.log("inside selectAll");
    checkboxes = document.getElementsByName('checkBox');
    for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = source.checked;
    }
}

//Delete Selected Items
function deleteSelectedItems() {
    var checkboxes = document.getElementsByName("checkBox");
    var selected = Array.prototype.slice.call(checkboxes).filter(ch => ch.checked == true).map(element => element.value);
    selected.map(value => deleteitem(value));
    // var checkboxesChecked = [];
    // // loop over them all
    // for (var i=0; i<checkboxes.length; i++) {
    //    // And stick the checked ones onto an array...
    //    if (checkboxes[i].checked) {
    //       checkboxesChecked.push(checkboxes[i]);
    //    }
    // }
    // Return the array if it is non-empty, or null
    console.log(selected, names);
}

onPageLoad();
showtask();