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