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();