diff --git a/week-4/firestore.html b/week-4/firestore.html
index 1585384..e551180 100644
--- a/week-4/firestore.html
+++ b/week-4/firestore.html
@@ -28,7 +28,10 @@
My Shopping List:
-
+
+
@@ -71,61 +74,22 @@
- const addBtn = document.getElementById('add');
+ const shoppingForm = document.getElementById('shoppingForm');
const inputBox = document.getElementById('item');
const list = document.getElementById('shopping-list');
const listName = document.querySelector("#listName");
- addBtn.addEventListener('click', function (){
- if (typeof arg === 'string') {
- item = arg;
- } else {
- item = inputBox.value;
- }
-
- // docRef.set({
- // list: [item]
- // }, { merge: true });
-
- // Create list item
- let li = document.createElement('li');
- li.className = "list-item";
-
- // Create an input element
- let input = document.createElement('input');
- input.type = "checkbox";
- input.name = "items";
-
- // Create a span element
- let span = document.createElement('span');
- span.innerText = item;
-
- // Create an anchor
- let a = document.createElement('a');
- a.innerText = "x";
- a.href = "";
- a.addEventListener('click', function (event) {
- this.parentNode.remove();
-
- // Need to delete item from Firebase
-
- event.preventDefault();
- });
-
- // Append each element to our list item
- li.appendChild(input);
- li.appendChild(span);
- li.appendChild(a);
-
- // Append our list item to the
- list.appendChild(li);
-
-
- inputBox.value = "";
- inputBox.focus();
-
+ shoppingForm.addEventListener('submit', function (event){
+ let item = inputBox.value;
+ docRef.update({
+ list: firebase.firestore.FieldValue.arrayUnion(item)
+ }).then(function(){
+ addItem(item);
+ })
+
+ event.preventDefault();
});
function addItem(arg){
@@ -154,9 +118,14 @@
a.innerText = "x";
a.href = "";
a.addEventListener('click', function (event) {
- this.parentNode.remove();
-
- // Need to delete item from Firebase
+ let item = this.previousSibling.innerText;
+ let a = this;
+ docRef.update({
+ list: firebase.firestore.FieldValue.arrayRemove(item)
+ }).then( function(){
+ a.parentNode.remove();
+ // this.parentNode.remove();
+ })
event.preventDefault();
});