Feat:Add feedback button (#106)

Author: littlestar642

public/css/styles.css

@@ -14,6 +14,9 @@
   margin-bottom: 2.5px;
   margin-top: 2.5px;
 }
+.feed{
+  font-size: 2em;
+}
 
 .white-text {
   color: #ffffff;
@@ -72,8 +75,12 @@
 
 .ui.mini.modal {
   margin-top: -5%;
+  text-align: center;
 }
 
+#feedbtn{
+  margin-left:10px;
+}
 #msgs .one .right,
 #msgs .one .left {
   position: relative;
@@ -131,4 +138,7 @@
     height: auto;
     align-self: auto
   }
+  #feedbtn{
+    margin-left:0;
+  }
 }

public/js/chat.js

@@ -15,6 +15,10 @@
   let newbtn = document.querySelector('#newbtn');
   let close = document.querySelector('#close');
   let cancel = document.querySelector('#cancel');
+  let cancelFeed = document.querySelector('#cancelFeed');
+  let feedback = document.querySelector('#feedback');
+  let feedBtn = document.querySelector('#feedbtn');
+  let confirm = document.querySelector('#confirm');
   socket.emit('privateRoom', {
     "room": "private room"
   });
@@ -82,15 +86,19 @@
   });
 
   endbtn.addEventListener('click', () => {
-    let confirm = document.querySelector('#confirm');
     confirm.classList.add('visible');
   });
+  feedBtn.addEventListener('click', () => {
+    feedback.classList.add('visible');
+  });
 
   cancel.addEventListener('click', () => {
-    let confirm = document.querySelector('#confirm');
     confirm.classList.remove('visible');
   });
-
+  cancelFeed.addEventListener('click', () => {
+    feedback.classList.remove('visible');
+  });
+  
   close.addEventListener('click', () => {
     let confirm = document.querySelector('#confirm');
     message.classList.add('hide');

views/chat.hbs

@@ -46,6 +46,10 @@
         <i class="fitted send icon"></i>
         <span class="txt">Send</span>
       </button>
+      <button class="ui teal labeled icon button" id="feedbtn">
+        <i class="user icon"></i>
+        <span class="txt">Feedback</span>
+      </button>
       <a href="/">
         <button class="ui red icon button right-float hide" id="homebtn">
           <span>Home</span>
@@ -70,6 +74,20 @@
       </div>
     </div>
   </div>
+  <div class="ui mini modal transition tada" id="feedback">
+    <div class="header sty">
+      Did Something Happened?
+    </div>
+    <div class="content sty">
+      <p> &#128562; Trouble Encountered &#128562;</p>
+      <p><a target="_blank" href="https://github.com/wdlsvnit/omeclone/issues">Click Here</a> &#10165; Submit your issue &#10165; We will take care</p>
+      </div>
+    <div class="actions">
+      <div class="ui teal button" id="cancelFeed">
+        Return To Chat
+      </div>
+    </div>
+  </div>
 </body>
 <script src="/bower_components/Autolinker.js/dist/Autolinker.min.js"></script>
 <script src="/bower_components/jquery/dist/jquery.min.js"></script>