utkarshbhatt12 · March 18, 2018 14:00 · Mar 18, 2018
diff --git a/drawNote.js b/drawNote.js
@@ -0,0 +1,52 @@
+
+/**
+ * Takes in a doc ref and displays a note by reading its title, 
+ * body and timestap in the viewport
+ * @param {object} doc firestore document reference
+ */
+const drawNote = (doc) => {
+
+    let title, body, timestamp, id, data, hr, h2, h6, p, aDelete, aEdit;
+
+    // these nodes are created for each document
+    hr = document.createElement('hr');
+    h2 = document.createElement('h2');
+    h6 = document.createElement('h6');
+    p = document.createElement('p');
+    aDelete = document.createElement('a');
+    aEdit = document.createElement('a');
+
+    // data() method contains the document data
+    data = doc.data();
+    // the .(dot) id property gives us the auto-id of the document in context
+    id = doc.id;
+
+    // we can access each property with their appropirate name with the
+    // . (dot) operator
+    title = data.title;
+    body = data.body;
+    timestamp = data.timestamp;
+
+    // setting the text of the nodes from the Firestore data
+    h2.innerText = title;
+    h6.innerText = timestamp;
+    p.innerText = body;
+
+    // adding a delete method to the notes
+    aDelete.innerText = 'delete';
+    aDelete.href = '#';
+    aDelete.setAttribute('onclick', `deleteDoc("${id}")`);
+
+    aEdit.innerText = ' | edit';
+    aEdit.href = '#';
+    aEdit.setAttribute('onclick', `editDoc("${id}", "${title}", "${body}")`);
+
+    // finally, we append each element in the div to make them
+    // show up in our page
+    displayNotesDiv.appendChild(h2)
+    displayNotesDiv.appendChild(h6);
+    displayNotesDiv.appendChild(p);
+    displayNotesDiv.appendChild(aDelete);
+    displayNotesDiv.appendChild(aEdit);
+    displayNotesDiv.appendChild(hr);
+};