Advertisement
EntropyStarRover

Fisher_working on it

Nov 12th, 2019
183
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.  
  3.     let anglerInp = document.getElementById("anglerVal");
  4.     let weightInp = document.getElementById("weightVal");
  5.     let speciesInp = document.getElementById("speciesVal");
  6.     let locationInp = document.getElementById("locationVal");
  7.     let baitInp = document.getElementById("baitVal");
  8.     let captureTimeInp = document.getElementById("captureTimeVal");
  9.     let catchesDiv = document.getElementById("catches");
  10.  
  11.  
  12.     let addBtn = document.getElementsByClassName("add")[0];
  13.     //this works
  14.     addBtn.addEventListener("click", function () {
  15.         let angler = anglerInp.value;
  16.         let weight = weightInp.value;
  17.         let species = speciesInp.value;
  18.         let location = locationInp.value;
  19.         let bait = baitInp.value;
  20.         let captureTime = captureTimeInp.value;
  21.         let newCatch = {
  22.             angler,
  23.             weight,
  24.             species,
  25.             location,
  26.             bait,
  27.             captureTime
  28.         }
  29.  
  30.         fetch("https://fisher-game.firebaseio.com/catches.json", {
  31.             method: 'post',
  32.             headers: {
  33.                 'Content-type': 'application/json'
  34.             },
  35.             body: JSON.stringify(newCatch)
  36.         });
  37.     })
  38.  
  39.  
  40.     let loadBtn = document.getElementsByClassName("load")[0];
  41.  
  42.     loadBtn.addEventListener("click", function () {
  43.         catchesDiv.innerHTML = "";
  44.         fetch("https://fisher-game.firebaseio.com/catches.json")
  45.             .then(result => result.json())
  46.             .then(data => {
  47.                 let dataArr = Object.entries(data);
  48.                 console.log(dataArr);
  49.                 dataArr.forEach(c => {
  50.                     let newDiv = document.createElement("div");
  51.                     // newDiv.setAttribute("data-id", `${c[0]}`);
  52.                     newDiv.setAttribute("id", `${c[0]}`)
  53.                     newDiv.className = "catch";
  54.                    
  55.                     //angler
  56.                     let anglLab = document.createElement("label");
  57.                     anglLab.textContent = "Angler";
  58.                     newDiv.appendChild(anglLab);
  59.  
  60.                     let anglInp = document.createElement("input");
  61.                     anglInp.value = `${c[1].angler}`
  62.                     anglInp.className = "input";
  63.                     newDiv.appendChild(anglInp);
  64.                    newDiv.appendChild(document.createElement("hr"));
  65.  
  66.                     //  weight
  67.                     let wLab = document.createElement("label");
  68.                     wLab.textContent = "Weight";
  69.                     newDiv.appendChild(wLab);
  70.  
  71.                     let wInp = document.createElement("input");
  72.                     wInp.value = `${c[1].weight}`
  73.                     wInp.className = "input";
  74.                     wInp.setAttribute("type", "number")
  75.                     newDiv.appendChild(wInp);
  76.                     newDiv.appendChild(document.createElement("hr"));
  77.              
  78.  
  79.                     //species
  80.                     let sLab = document.createElement("label");
  81.                     sLab.textContent = "Species";
  82.                     newDiv.appendChild(sLab);
  83.  
  84.                     let sInp = document.createElement("input");
  85.                     sInp.value = `${c[1].species}`
  86.                     sInp.className = "input";
  87.                     newDiv.appendChild(sInp);
  88.                     newDiv.appendChild(document.createElement("hr"));                
  89.  
  90.                     //location
  91.                     let lLab = document.createElement("label");
  92.                     lLab.textContent = "Location";
  93.                     newDiv.appendChild(lLab);
  94.  
  95.                     let lInp = document.createElement("input");
  96.                     lInp.value = `${c[1].location}`
  97.                     lInp.className = "input";
  98.                     newDiv.appendChild(lInp);
  99.                     newDiv.appendChild(document.createElement("hr"));
  100.  
  101.                     //bait
  102.                     let bLab = document.createElement("label");
  103.                     bLab.textContent = "Bait";
  104.                     newDiv.appendChild(bLab);
  105.  
  106.                     let bInp = document.createElement("input");
  107.                     bInp.value = `${c[1].bait}`
  108.                     bInp.className = "input";
  109.                     newDiv.appendChild(bInp);
  110.                     newDiv.appendChild(document.createElement("hr"));
  111.  
  112.                     //capture time
  113.                     let cLab = document.createElement("label");
  114.                     cLab.textContent = "Capture time";
  115.                     newDiv.appendChild(cLab);
  116.  
  117.                     let cInp = document.createElement("input");
  118.                     cInp.value = `${c[1].captureTime}`
  119.                     cInp.className = "input";
  120.                     cInp.setAttribute("type", "number")
  121.                     newDiv.appendChild(cInp);
  122.                     newDiv.appendChild(document.createElement("hr"));
  123.  
  124.                     //update
  125.                     let updateBtn = document.createElement("button");
  126.                     updateBtn.className = "button";
  127.                     updateBtn.textContent = "UPDATE";
  128.                     newDiv.appendChild(updateBtn)
  129.                    
  130.                     //delete
  131.                     let deleteBtn = document.createElement("button");
  132.                     deleteBtn.className = "button";
  133.                     deleteBtn.textContent = "DELETE";
  134.                     deleteBtn.addEventListener("click", function () { del(newDiv.id) })
  135.                     newDiv.appendChild(deleteBtn)
  136.  
  137.                     //append the new div
  138.                     catchesDiv.appendChild(newDiv)
  139.                 });
  140.             })
  141.     })
  142.  
  143.     //this works too
  144.     function del(id) {
  145.  
  146.         fetch(`https://fisher-game.firebaseio.com/catches/${id}.json`, {
  147.             method: 'DELETE'
  148.         })
  149.             .then(() => {
  150.                 let divToDelete = document.getElementById(id);
  151.                 divToDelete.remove();
  152.             })
  153.             .catch(err => {
  154.                 console.error(err)
  155.             });
  156.     }
  157.  
  158. }
  159.  
  160. attachEvents();
Advertisement
RAW Paste Data Copied
Advertisement