diff --git a/answer-form.html b/answer-form.html
new file mode 100644
index 0000000..1ed51b7
--- /dev/null
+++ b/answer-form.html
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Answer Me
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 2236acf..9f2befc 100755
--- a/css/main.css
+++ b/css/main.css
@@ -237,15 +237,35 @@ textarea {
}
- #my-form button {
- color:#4d5974;
- background-color:white;
- border:1px solid #4d5974;
- border-radius:20px;
- margin-left:40px;
- padding:10px 10px 10px 10px;
+ .button {
+ color:#4d5974;
+ background-color:white;
+ border:1px solid #4d5974;
+ border-radius:20px;
+ margin-left:40px;
+ padding:10px 10px 10px 10px;
+ }
+
+ .button:hover {
+ color:#03b5d2;
+ border:1px solid #03b5d2;
}
+ .button2 {
+ color:#4d5974;
+ background-color:white;
+ border:1px solid #4d5974;
+ border-radius:20px;
+ padding:10px 10px 10px 10px;
+ float:right;
+ }
+
+ .button2:hover {
+ color:#03b5d2;
+ border:1px solid #03b5d2;
+ }
+
+
#my-form input {
color:#4d5974;
background-color:white;
@@ -258,10 +278,24 @@ textarea {
color:#7288a2;
}
- #my-form button:hover {
- color:#03b5d2;
- border:1px solid #03b5d2;
- }
+ #answer-form {
+ display:block;
+ padding:20px;
+ margin-bottom:60px;
+
+ }
+
+ #answer-form input {
+ color:#4d5974;
+ background-color:white;
+ border:1px solid #4d5974;
+ margin-right:20px;
+ padding:10px 10px 10px 10px;
+ }
+
+ #answer-form ::placeholder {
+ color:#7288a2;
+ }
diff --git a/index.html b/index.html
index 0873baa..d4eec6e 100755
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
Frequently Asked Questions
diff --git a/js/main.js b/js/main.js
index 86aab69..80aa935 100755
--- a/js/main.js
+++ b/js/main.js
@@ -4,6 +4,7 @@ const questionsList = document.querySelector('#accordion');
const form = document.querySelector('#my-form');
+
function toggleAccordion(){
this.classList.toggle('active');
this.nextElementSibling.classList.toggle('active');
@@ -30,7 +31,11 @@ function renderAccordion(doc) {
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);
@@ -38,11 +43,17 @@ function renderAccordion(doc) {
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();
@@ -57,4 +68,4 @@ db.collection('questions').orderBy('timestamp').onSnapshot(snapshot => {
})
// Add the event listener to all EXISTING anchors
-/*items.forEach(item => item.addEventListener('click', toggleAccordion));*/
\ No newline at end of file
+/*items.forEach(item => item.addEventListener('click', toggleAccordion));*/