03 Rest. Phonebook

function attachEvents() {
    let loadBtn = document.getElementById("btnLoad");
    let createBtn = document.getElementById("btnCreate");
    let phoneBookUl = document.getElementById("phonebook");
    let personInp = document.getElementById("person");
    let phoneInp = document.getElementById("phone")


    createBtn.addEventListener("click", function () {
        create();
    })

    loadBtn.addEventListener("click", function () {
        load()
    });

    function create() {

        let person = personInp.value;
        let phone = phoneInp.value;
        let newEnt = {
            person,
            phone
        }

        fetch("https://phonebook-nakov.firebaseio.com/phonebook.json", {
                method: 'post',
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(newEnt),
            });
            console.log(`${newEnt} sent`)

        load();
        personInp.value = "";
        phoneInp.value = "";
    }

    function load() {
        phoneBookUl.textContent = "";
        console.log("reloading")
        fetch('https://phonebook-nakov.firebaseio.com/phonebook.json')
            .then(res => res.json())
            .then(data => {
                      let arrayResponse = Object.entries(data);
                arrayResponse.forEach(r => {
                    let name = r[1].person;
                    let ph = r[1].phone;
                    let id = r[0];

                    let deleteBtn = document.createElement("button");
                    deleteBtn.textContent = "DELETE";
                    deleteBtn.addEventListener("click", function () {
                        del(id);
                    })
                    let newEntry = document.createElement("li");
                    let infoP = document.createElement("p");
                    infoP.textContent = `${name}:${ph}`;
                    newEntry.appendChild(infoP);
                    newEntry.appendChild(deleteBtn);
                    phoneBookUl.appendChild(newEntry)

                })
            })
            .catch(e => {
                console.log("something went wrong")
            })

    }


    function del(id) {
        console.log("entry deleted");
        console.log(id);
        fetch(`https://phonebook-nakov.firebaseio.com/phonebook/${id}.json`, {
            method: 'DELETE'
        }).then(() => {
            console.log('removed');
        }).catch(err => {
            console.error(err)
        });
    }
}

attachEvents();