From 6e8f18f4d2dc7f193aaa8a793bbf5058eb072215 Mon Sep 17 00:00:00 2001 From: Cynthia Date: Wed, 13 Nov 2019 19:02:02 -0500 Subject: [PATCH] added an answer button that redirects --- answer-form.html | 89 ++++++++++++++++++++++++++++++++++++++++++++++++ css/main.css | 56 ++++++++++++++++++++++++------ index.html | 2 +- js/main.js | 15 ++++++-- 4 files changed, 148 insertions(+), 14 deletions(-) create mode 100644 answer-form.html 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));*/