main.js

"use strict";
  const items = document.querySelectorAll(".accordion a");
const questionsList = document.querySelector('#accordion');
const form = document.querySelector('#my-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()
	});
	//reset the form
	form.input.value = "";
	form.input2.value = "";
})

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');
	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);
	
	div.appendChild(a);
	a.appendChild(node);
	div2.appendChild(p);
	div2.appendChild(btn);
	p.appendChild(node2);
	div.appendChild(div2);
	questionsList.appendChild(div);
	
	btn.addEventListener("click", function(){
		document.location.href = 'answer-form.html';
	});
}


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

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