added subcollection answers

answer-form.html

@@ -27,32 +27,16 @@
 
   <!-- Add your site or application content here -->
   <div class="container">
-    <h2>Answer Me</h2>
+    <h2>Answer the question: <span id='qName'></span></h2>
       <form id="answer-form">
           <input id='answer' type="text" placeholder="an answer" required/>
           <button type="submit" class='button' id='asubmit'>Submit</button>
         </form>
+        </div>
 
-<!-- FireBase -->
-<script>
 
-function logSubmit(event) {
-  event.preventDefault();
-   //console.log('submitted');
-   document.location.href = 'index.html';
-   /*var answer = document.getElementById('answer').value;
-   var answpara = document.createElement('p'); 
-   let node = document.createTextNode(answer);
-   document.body.appendChild(answpara);   
-   answpara.appendChild(node);*/
-
-
-
-}
-const form2 = document.getElementById('answer-form');
 
-form2.addEventListener('submit', logSubmit);
-</script>
+        <!-- FireBase -->
 <script>
   // Your web app's Firebase configuration
   var firebaseConfig = {

index.html

@@ -67,7 +67,7 @@
         </div>
       </div>-->
     </div>
-    
+
   </div>
 
 <!-- FireBase -->

js/main.js

@@ -2,26 +2,68 @@
   const items = document.querySelectorAll(".accordion a");
 const questionsList = document.querySelector('#accordion');
 const form = document.querySelector('#my-form');
-
+const form2 = document.getElementById('answer-form');
 
 
   function toggleAccordion(){
     this.classList.toggle('active');
     this.nextElementSibling.classList.toggle('active');
   }
 
-//saving data
-form.addEventListener('submit', (e) => {
-	e.preventDefault();
-	db.collection('questions').add({
-		question: form.input.value.trim(),
-		answer: form.input2.value.trim(),
-		timestamp: new Date()
+function getUrlParameter(name) {
+    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+    var results = regex.exec(location.search);
+    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+};
+
+
+if (form !== null) {
+	//saving data
+	form.addEventListener('submit', (e) => {
+		e.preventDefault();
+		/*db.collection('questions').add({
+			question: form.input.value.trim(),
+			answer: form.input2.value.trim(),
+			timestamp: new Date()
+		});*/
+		db.collection('questions').add({
+			question: form.input.value.trim(),
+			description: form.input2.value.trim(),
+			//answer: form.input2.value.trim(),
+			timestamp: new Date()
+		});
+		//reset the form
+		form.input.value = "";
+		form.input2.value = "";
+
+	})
+}
+if(form2 !== null) {
+		document.getElementById("qName").innerHTML = getUrlParameter('question');
+		form2.addEventListener('submit', (e) => {
+		e.preventDefault();
+
+		let docId = getUrlParameter('id');
+		var questionRef = db.collection("questions").doc(docId);
+		var answerText = document.querySelector("#answer").value;
+		//form2.input3.value = "";
+		// Set the "capital" field of the city 'DC'
+		return questionRef.collection("answers").add({
+			text: answerText
+		})
+
+		.then(function() {
+			console.log("Document successfully updated!");
+			document.location.href = 'index.html'
+					})
+		.catch(function(error) {
+			// The document probably doesn't exist.
+			console.error("Error updating document: ", error);
+		});
+
 	});
-	//reset the form
-	form.input.value = "";
-	form.input2.value = "";
-})
+}
 
 function renderAccordion(doc) {
 	let div = document.createElement("div");
@@ -31,35 +73,59 @@ function renderAccordion(doc) {
 	let div2 = document.createElement("div");
     div2.classList.add("content");
 	let p = document.createElement('p');
+	//let p2 = document.createElement('p');
 	var btn = document.createElement("BUTTON"); 
 	btn.innerHTML = "Answer";  
 	btn.classList.add("button2"); 
 
 	document.body.appendChild(btn);   
 	//retrieve data from database and store it in nodes
 	let node = document.createTextNode(doc.data().question);
-	let node2 = document.createTextNode(doc.data().answer);
-
+	let node2 = document.createTextNode(doc.data().description);
+	//let node3 = document.createTextNode(doc.data().text);
+
+	//get answers to appear on this page
+	/*let answersDiv = document.getElementById('answersDiv');
+	let p2 = document.createElement('p');
+	let node3 = document.createTextNode(doc.data().text);
+	answersDiv.appendChild(p2);
+	p2.appendChild(node3);*/
+
 	div.appendChild(a);
 	a.appendChild(node);
 	div2.appendChild(p);
+	//div2.appendChild(p2);
 	div2.appendChild(btn);
 	p.appendChild(node2);
+	//p2.appendChild(node3);
 	div.appendChild(div2);
 	questionsList.appendChild(div);
 
 	btn.addEventListener("click", function(){
-		document.location.href = 'answer-form.html';
-	});
+		document.location.href = 'answer-form.html?question='+doc.data().question+'&id='+doc.id;
+			});
 }
 
 
 //real-time listener to update changes
+/*db.collection('questions').orderBy('timestamp').onSnapshot(snapshot => {
+	let changes = snapshot.docChanges();
+	changes.forEach(change => {
+		if (change.type == 'added') {
+			renderAccordion(change.doc);
+		} else if (change.type == 'removed') {
+			let li = cafeList.querySelector('[data-d=' + change.doc.id + ']');
+			cafeList.removedChild(li);
+		}
+	})
+})*/
+
 db.collection('questions').orderBy('timestamp').onSnapshot(snapshot => {
 	let changes = snapshot.docChanges();
 	changes.forEach(change => {
 		if (change.type == 'added') {
 			renderAccordion(change.doc);
+			//getUrlParameter('id');document.getString("question");
 		} else if (change.type == 'removed') {
 			let li = cafeList.querySelector('[data-d=' + change.doc.id + ']');
 			cafeList.removedChild(li);