main.js

"use strict";
  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');
  }

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);
		});

	});
}

function renderAccordion(doc) {
	let div = document.createElement("div");
	div.classList.add("accordion-item");
	let a = document.createElement('a');
	a.addEventListener('click', toggleAccordion);
	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().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?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);
		}
	})
})

// Add the event listener to all EXISTING anchors
/*items.forEach(item => item.addEventListener('click', toggleAccordion));*/