added an answer button that redirects

lmc15106 · Nov 14, 2019 · 6e8f18f · 6e8f18f
1 parent 50be61a
commit 6e8f18f
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 14 deletions.
diff --git a/answer-form.html b/answer-form.html
@@ -0,0 +1,89 @@
+<!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 Me</h2>
+      <form id="answer-form">
+          <input id='answer' type="text" placeholder="an answer" required/>
+          <button type="submit" class='button' id='asubmit'>Submit</button>
+        </form>
+
+<!-- FireBase -->
+<script>
+
+function logSubmit(event) {
+  event.preventDefault();
+   //console.log('submitted');
+   document.location.href = 'index.html';
+   /*var answer = document.getElementById('answer').value;
+   var answpara = document.createElement('p'); 
+   let node = document.createTextNode(answer);
+   document.body.appendChild(answpara);   
+   answpara.appendChild(node);*/
+
+
+
+}
+const form2 = document.getElementById('answer-form');
+
+form2.addEventListener('submit', logSubmit);
+</script>
+<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>
diff --git 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
@@ -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>
 

diff --git 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,19 +31,29 @@ 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);
 
 	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));*/
+/*items.forEach(item => item.addEventListener('click', toggleAccordion));*/