Advertisement
EntropyStarRover

03 Rest. Phonebook

Nov 9th, 2019
192
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.     let loadBtn = document.getElementById("btnLoad");
  3.     let createBtn = document.getElementById("btnCreate");
  4.     let phoneBookUl = document.getElementById("phonebook");
  5.     let personInp = document.getElementById("person");
  6.     let phoneInp = document.getElementById("phone")
  7.  
  8.    
  9.     createBtn.addEventListener("click", function () {
  10.         create();
  11.     })
  12.  
  13.     loadBtn.addEventListener("click", function () {
  14.         load()
  15.     });
  16.  
  17.     function create() {
  18.  
  19.         let person = personInp.value;
  20.         let phone = phoneInp.value;
  21.         let newEnt = {
  22.             person,
  23.             phone
  24.         }
  25.  
  26.         fetch("https://phonebook-nakov.firebaseio.com/phonebook.json", {
  27.                 method: 'post',
  28.                 headers: {
  29.                     'Content-type': 'application/json'
  30.                 },
  31.                 body: JSON.stringify(newEnt),
  32.             });
  33.             console.log(`${newEnt} sent`)
  34.  
  35.         load();
  36.         personInp.value = "";
  37.         phoneInp.value = "";
  38.     }
  39.  
  40.     function load() {
  41.         phoneBookUl.textContent = "";
  42.         console.log("reloading")
  43.         fetch('https://phonebook-nakov.firebaseio.com/phonebook.json')
  44.             .then(res => res.json())
  45.             .then(data => {
  46.                       let arrayResponse = Object.entries(data);
  47.                 arrayResponse.forEach(r => {
  48.                     let name = r[1].person;
  49.                     let ph = r[1].phone;
  50.                     let id = r[0];
  51.  
  52.                     let deleteBtn = document.createElement("button");
  53.                     deleteBtn.textContent = "DELETE";
  54.                     deleteBtn.addEventListener("click", function () {
  55.                         del(id);
  56.                     })
  57.                     let newEntry = document.createElement("li");
  58.                     let infoP = document.createElement("p");
  59.                     infoP.textContent = `${name}:${ph}`;
  60.                     newEntry.appendChild(infoP);
  61.                     newEntry.appendChild(deleteBtn);
  62.                     phoneBookUl.appendChild(newEntry)
  63.  
  64.                 })
  65.             })
  66.             .catch(e => {
  67.                 console.log("something went wrong")
  68.             })
  69.  
  70.     }
  71.  
  72.  
  73.     function del(id) {
  74.         console.log("entry deleted");
  75.         console.log(id);
  76.         fetch(`https://phonebook-nakov.firebaseio.com/phonebook/${id}.json`, {
  77.             method: 'DELETE'
  78.         }).then(() => {
  79.             console.log('removed');
  80.         }).catch(err => {
  81.             console.error(err)
  82.         });
  83.     }
  84. }
  85.  
  86. attachEvents();
Advertisement
RAW Paste Data Copied
Advertisement