Profile

all-questions.html

@@ -36,9 +36,10 @@
     </ul>
 </div>
 
-<script  type="text/javascript" src="scripts/queries.js"></script>
-<script  type="text/javascript" src="scripts/questions.js"></script>
-<script  type="text/javascript" src="scripts/all-questions.js"></script>
-<script defer type="text/javascript" src="scripts/misc.js"></script>
+<script type="text/javascript" src="scripts/misc.js"></script>
+<script  defer type="text/javascript" src="scripts/queries.js"></script>
+<script  defer type="text/javascript" src="scripts/auth.js"></script>
+<script  defer type="text/javascript" src="scripts/questions.js"></script>
+<script  defer type="text/javascript" src="scripts/all-questions.js"></script>
 </body>
 </html>

ask-question.html

@@ -36,17 +36,15 @@ <h3>Ask a question</h3>
     <form method="post" onsubmit="return false" class="ask-question-form">
         <label for="ask-question-title">Title</label><br>
         <input onchange="checkValidQuestion()"  type="text" name="question_title" id="ask-question-title"><br>
-        <label id="ask-question-body-label" for="ask-question-body">Enter your Question here:</label><br>
-        <textarea onchange="checkValidQuestion()" name="question" id="question-body" aria-invalid="false"> </textarea>
+        <label id="ask-question-body-label" for="question-body">Enter your Question here:</label><br>
+        <textarea onmouseout="checkValidQuestion()" onchange="checkValidQuestion()" name="question" id="question-body" aria-invalid="false"> </textarea>
         <input type="hidden" name="user_id" id="featured-question-id"><br>
-        <button id="ask-question-submit-button" disabled="true" onclick="submitQuestion()">Submit</button>
+        <button id="ask-question-submit-button"  onclick="submitQuestion()">Submit</button><span id="saving-question-text">saving...</span>
     </form>
 </div>
 
-
-<script  type="text/javascript" src="scripts/queries.js"></script>
-<script  type="text/javascript" src="scripts/questions.js"></script>
-<!-- <script  type="text/javascript" src="scripts/app.js"></script> -->
-<script defer type="text/javascript" src="scripts/misc.js"></script>
+<script type="text/javascript" src="scripts/misc.js"></script>
+<script  defer type="text/javascript" src="scripts/ask-question.js"></script>
+<script  type="text/javascript" src="scripts/auth.js"></script>
 </body>
 </html>

css/main.css

@@ -189,4 +189,4 @@ footer {
 	width: 44vw;
 	height: 4em;
 	border-radius: 20px;
-}
+}

css/profile.css

@@ -0,0 +1,3 @@
+.profile{
+    visibility: hidden;
+}

css/question.css

@@ -25,5 +25,8 @@ height: 2em
 }
 #ask-question-submit-button:hover{
 	background: #f3f3f3;
-	cursor: not-allowed;
+	/*cursor: not-allowed;*/
+}
+#saving-question-text{
+	visibility: hidden;
 }

index.html

@@ -34,9 +34,7 @@
   <hr class="hr">
 <section>
 
-    <h2 style="float: right;">
-
-    </h2>
+
         <!--heading-->
         <!--<h2 class="featured-heading">Featured question</h2>-->
         <h1 class="featured-question-title" id="featured-question-title"></h1>
@@ -78,9 +76,9 @@ <h3 id="answer-title">Answer this question</h3>
     <!--container for social links-->
 
   </footer>
-  <script defer type="text/javascript" src="scripts/misc.js"></script>
-  <script  type="text/javascript" src="scripts/queries.js"></script>
-  <script  type="text/javascript" src="scripts/app.js"></script>
+  <script type="text/javascript" src="scripts/misc.js"></script>
+  <script defer type="text/javascript" src="scripts/app.js"></script>
+  <script defer type="text/javascript" src="scripts/queries.js"></script>
   <script defer type="text/javascript" src="scripts/main.js"></script>
   <script defer type="text/javascript" src="scripts/auth.js"></script>
 </body>

login.html

@@ -42,9 +42,8 @@
     </form>
 </div>
 
-
-<script  type="text/javascript" src="scripts/queries.js"></script>
-<script defer type="text/javascript" src="scripts/misc.js"></script>
+<script type="text/javascript" src="scripts/misc.js"></script>
+<script defer  type="text/javascript" src="scripts/queries.js"></script>
 <script defer type="text/javascript" src="scripts/auth.js"></script>
 </body>
 </html>

my-questions.html

@@ -36,8 +36,8 @@
         fetchAllQuestions()
     });
 </script>
-<script  type="text/javascript" src="scripts/queries.js"></script>
-<script  type="text/javascript" src="scripts/questions.js"></script>
-<script defer type="text/javascript" src="scripts/misc.js"></script>
+<script type="text/javascript" src="scripts/misc.js"></script>
+<script defer  type="text/javascript" src="scripts/queries.js"></script>
+<script defer type="text/javascript" src="scripts/questions.js"></script>
 </body>
 </html>

profile.html

@@ -30,13 +30,17 @@
     </div>
 </header>
 <hr class="hr">
-<div class="Profile">
-
+<div class="profile">
+    <h3 id="profile-intro">My Profile</h3>
+    <span id="profile-email"></span>
+    <span id="profile-firstName"></span>
+    <span id="profile-lastName"></span>
+    <br>
+    <button>Change password</button>
 </div>
 
-<script  type="text/javascript" src="scripts/queries.js"></script>
-<script defer type="text/javascript" src="scripts/misc.js"></script>
+<script type="text/javascript" src="scripts/misc.js"></script>
+<script defer  type="text/javascript" src="scripts/queries.js"></script>
 <script defer type="text/javascript" src="scripts/profile.js"></script>
-</script>
 </body>
 </html>

scripts/all-questions.js

@@ -1,8 +0,0 @@
-document.addEventListener("DOMContentLoaded", function(){
-    fetchAllQuestions().then(
-        console.log('all questions fetched')
-            .catch(err =>{
-                console.log(err);
-            })
-    )
-});

scripts/ask-question.js

@@ -0,0 +1,74 @@
+// document.addEventListener("DOMContentLoaded", function(){
+   // fetchAllQuestions();
+    // .then(
+    //     console.log('all questions fetched')
+    //         .catch(err =>{
+    //             console.log(err);
+    //         })
+    // )
+// });
+
+const url = baseUrl+"questions";
+   let text;
+
+    function submitQuestion(){
+        const values = pluckFormValues();
+    console.log(values.question);
+    console.log(Authorization);
+    const body =  'question_title'+'='+values.title+'&'+'question'+'='+values.question+'&id'+'=1'+'&Authorization'+'='+localStorage.Authorization;
+    document.getElementById('saving-question-text').style.visibility='visible';
+    postQuestion(url,body);
+}
+
+function checkValidQuestion(){
+    const values = pluckFormValues();
+    console.log(values.question);
+    const submitQuestionButton = document.getElementById('ask-question-submit-button');
+    console.log(values.title);
+ if (values.title === "" || values.question.trim().length < 5) {
+    submitQuestionButton.style.cursor='disabled';
+     submitQuestionButton.setAttribute('disabled', 'disabled');
+ }else{
+    submitQuestionButton.style.cursor='default';
+    submitQuestionButton.style.background='#0b948d';
+    submitQuestionButton.removeAttribute('disabled');
+     submitQuestionButton.setAttribute('cursor', 'grab');
+   }
+
+ }
+
+ function pluckFormValues(){
+     const title = document.getElementById('ask-question-title').value;
+     const question = document.getElementById('question-body').value;
+     return {
+         title: title,
+         question: question
+     };
+ }
+
+function postQuestion(url, body) {
+    if (!('fetch' in window)) {
+        console.log('Fetch API not found, try including the polyfill');
+        alert('fetch is disabled in your browser');
+        return;
+    }
+    fetch(url,
+        {
+            method: 'post',
+            headers: {
+                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
+            },
+            body:body
+        })
+        .then(response => {
+            document.getElementById('saving-question-text').innerText='saved';
+            return response.json();
+        }).then(data => {
+        // Work with JSON data here
+        Authorization = data
+    }).catch(err => {
+        document.getElementById('saving-question-text').innerText='failed to save! Login and try again';
+        console.log(err);
+        // Do something for an error here
+    });
+}

scripts/misc.js

@@ -1,5 +1,5 @@
-//const baseUrl = 'http://localhost:3000/api/v1/';
-const baseUrl = 'https://dev-pool.herokuapp.com/api/v1/';
+const baseUrl = 'http://localhost:3000/api/v1/';
+//const baseUrl = 'https://dev-pool.herokuapp.com/api/v1/';
 
 const authText =  document.getElementById('auth-text');
 let Authorization,
@@ -15,9 +15,29 @@ if(Authorization === null || Authorization === "" || Authorization === undefined
 }
 
 
-//set title for profile page
-function setProfileTitle(argument) {
-	document.title = localStorage.firstName+' '+localStorage.lastName+"'s profile | StackOverflow-Lite";
+function postQuery(url, body) {
+    if (!('fetch' in window)) {
+        console.log('Fetch API not found, try including the polyfill');
+        alert('fetch is disabled in your browser');
+        return;
+    }
+    fetch(url,
+        {
+            method: 'post',
+            headers: {
+                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
+            },
+            body:body
+        })
+        .then(response => {
+            return response.json();
+        }).then(data => {
+        // Work with JSON data here
+        Authorization = data
+    }).catch(err => {
+        console.log(err);
+        // Do something for an error here
+    });
 }
 
 

scripts/profile.js

@@ -1,4 +1,9 @@
 setProfileTitle();
-// document.addEventListener("DOMContentLoaded", function(){
+document.addEventListener("DOMContentLoaded", function(){
 
-// });
+});
+
+//set title for profile page
+function setProfileTitle() {
+	document.title = localStorage.firstName+' '+localStorage.lastName+"'s profile | StackOverflow-Lite";
+}

scripts/queries.js

@@ -19,34 +19,34 @@ function getQuery(url, data) {
 }
 
 
-
-function postQuery(url, data) {
-    if (!('fetch' in window)) {
-        console.log('Fetch API not found, try including the polyfill');
-        alert('fetch is disabled in your browser');
-        return;
-    }
-   // const url = 'http://localhost:3000/api/v1/questions';
-// const x =  fetch(url);
-// console.log(x);
-    fetch(url,
-        {
-            method: 'post',
-            headers: {
-                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
-            },
-            body: ''
-        })
-        .then(response => {
-            return response.json();
-        }).then(data => {
-        // Work with JSON data here
-        console.log(data[1]['id']);
-    }).catch(err => {
-        console.log(err);
-        // Do something for an error here
-    });
-}
+//
+// function postQuery(url, data) {
+//     if (!('fetch' in window)) {
+//         console.log('Fetch API not found, try including the polyfill');
+//         alert('fetch is disabled in your browser');
+//         return;
+//     }
+//    // const url = 'http://localhost:3000/api/v1/questions';
+// // const x =  fetch(url);
+// // console.log(x);
+//     fetch(url,
+//         {
+//             method: 'post',
+//             headers: {
+//                 "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
+//             },
+//             body: ''
+//         })
+//         .then(response => {
+//             return response.json();
+//         }).then(data => {
+//         // Work with JSON data here
+//         console.log(data[1]['id']);
+//     }).catch(err => {
+//         console.log(err);
+//         // Do something for an error here
+//     });
+// }
 
 function fetchQuestionId(){
     return document.getElementById('featured-question-id').textContent();