Revise paste 02. Phonebook

function attachEvents() {
    let phoneUl = document.getElementById("phonebook");
    let loadBtn = document.getElementById("btnLoad");
    let nameInput = document.getElementById("person");
    let numberInput = document.getElementById("phone");
    let createBtn = document.getElementById("btnCreate");

loadBtn.addEventListener("click", loadRecords);
    createBtn.addEventListener("click", submitRecord);

function loadRecords() {

let myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

let requestOptions = {
            method: 'GET',
            headers: myHeaders,
            redirect: 'follow'
        };

fetch("http://localhost:3030/jsonstore/phonebook", requestOptions)
            .then(response => response.json())
            .then(result => renderRecords(result))
            .catch(error => console.log('error', error));
    }

function renderRecords(result) {
        phoneUl.innerHTML = "";
        let recordsArr = Object.entries(result);
        //if response is empty obj
        if (recordsArr.length==0){
            phoneUl.textContent="No records available!"
        } else {
        recordsArr.forEach(r => {
           createSingleRecord(r[0],r[1].person, r[1].phone)
        });

}
    }

function deleteRecord(recordLi) {
        let myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

let requestOptions = {
            method: 'DELETE',
            headers: myHeaders,
            redirect: 'follow'
        };

fetch(`http://localhost:3030/jsonstore/phonebook/${recordLi.id}`, requestOptions)
            .then(response => response.text())
            //remove li after record is deleted, no need to make new request
            .then(result => recordLi.remove())
            .catch(error => phoneUl.textContent = "No records available!");
    }

function submitRecord() {
        let name = nameInput.value;
        let phone = numberInput.value;

let myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

let raw = JSON.stringify({ "person": name, "phone": phone });

let requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };

fetch("http://localhost:3030/jsonstore/phonebook", requestOptions)
            .then(response => response.json())
            //refresh right away
            .then(result => loadRecords())
            .catch(error => console.log('error', error));

nameInput.value="";
            numberInput.value="";
    }
}

attachEvents();