Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #16 from lmc15106/add_answer_button 
added an answer button that redirects
  • Loading branch information
@cyr15103
cyr15103 committed Dec 11, 2019
2 parents fd0195e + 5a082a6 commit 9b01cf3
Show file tree
Hide file tree
Showing 4 changed files with 210 additions and 33 deletions.
73 changes: 73 additions & 0 deletions answer-form.html
View file
@@ -0,0 +1,73 @@
<!doctype html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<!--what is going on here-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-firestore.js"></script>

<meta name="theme-color" content="#fafafa">
</head>

<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

<!-- Add your site or application content here -->
<div class="container">
<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>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAS_r5mMbyjZg-5WvdLmXBjT74GD9MjfG0",
authDomain: "dmdwebqa.firebaseapp.com",
databaseURL: "https://dmdwebqa.firebaseio.com",
projectId: "dmdwebqa",
storageBucket: "dmdwebqa.appspot.com",
messagingSenderId: "1028880412838",
appId: "1:1028880412838:web:6aafb42294f60c226bc467"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//db is an object that we use in order to interact with the database.
const db = firebase.firestore();
db.settings({timestampsInSnapshots: true});
</script>

<script src="js/vendor/modernizr-3.7.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>


<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>

</html>
56 changes: 45 additions & 11 deletions css/main.css
View file
Expand Up @@ -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;
Expand All @@ -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;
}



Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Expand Up @@ -31,7 +31,7 @@
<form id="my-form">
<input id='input' type="text" placeholder="a question" required/>
<input id='input2' type="text" placeholder="a description" required/>
<button type="submit">Submit</button>
<button type="submit" class='button'>Submit</button>
</form>
<h2>Frequently Asked Questions</h2>

Expand Down Expand Up @@ -67,7 +67,7 @@
</div>
</div>-->
</div>

</div>

<!-- FireBase -->
Expand Down
110 changes: 90 additions & 20 deletions js/main.js
View file
Expand Up @@ -2,30 +2,66 @@
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();
if (form.input.value.trim() == '' && form.input2.value.trim() == ''){
console.log('empty');
}else{
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, ' '));
};

//reset the form
form.input.value = "";
form.input2.value = "";
})

if (form !== null) {
//saving data
form.addEventListener('submit', (e) => {
e.preventDefault();
if (form.input.value.trim() == '' && form.input2.value.trim() == ''){
console.log('empty');
}else{
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 = "";
})
}
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");
Expand All @@ -35,25 +71,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?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);
Expand All @@ -62,4 +132,4 @@ db.collection('questions').orderBy('timestamp').onSnapshot(snapshot => {
})

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

0 comments on commit 9b01cf3

Please sign in to comment.