[UPDATE] index.html, style.css, main.js

adds frontend to collect user feedback

Author: Rocker2102

assets/css/style.css

@@ -651,6 +651,17 @@ main {
     color: #DDDDDD;
 }
 
+button.btn-selectable.selected {
+    color: #000 !important;
+    background-color: lightgreen !important;
+}
+
+#feedback-modal {
+    width: fit-content;
+    min-width: 300px;
+    height: fit-content;
+}
+
 /* Media Queries */
 @media(max-width: 800px) {
     .container{
@@ -678,4 +689,4 @@ main {
     .welcome-msg {
         font-size: 14px;
     }
-}
+}

assets/js/main.js

@@ -41,6 +41,7 @@ $(document).ready(function(){
     $(".tabs").tabs();
     $(".collapsible").collapsible();
     $(".tooltipped").tooltip();
+    $(".modal").modal();
 
     fetchRepos();
     fetchTeam();
@@ -405,6 +406,46 @@ class TypeWriter {
     }
 }
 
+function showToast(htmlData, classData = "blue white-text", icon = "info") {
+    let toastIcon = getMaterialIcon(icon, "left", false);
+    return M.toast({html: toastIcon + htmlData, classes: classData});
+}
+
+$("button.btn-selectable").click(function() {
+    $(this).toggleClass("selected").siblings().removeClass("selected");
+});
+
+$("#feedback-form").on("submit", function(e) {
+    e.preventDefault();
+
+    let form = $(this);
+    let submitBtn = form.find("button[type='submit']");
+    let modal = $("#feedback-modal");
+    let formdata = new FormData(this);
+    let quickFeedback = $("#feedback-form button.btn-selectable.selected").attr("data-value");
+    quickFeedback = (typeof quickFeedback == "undefined") ? "none" : quickFeedback;
+    formdata.append("quick-feedback", quickFeedback);
+
+    $.ajax({
+        url: "url-to-submit-feedback",
+        data: formdata,
+        method: "POST",
+        timeout: 15000,
+        contentType: false,
+        processData: false,
+        beforeSend: function() {
+            submitBtn.html("Submitting...").attr("disabled", true);
+        }
+    }).done(function() {
+        showToast("Feedback Submitted!", "green", "done");
+    }).fail(function() {
+        showToast("Failed to submit feedback!", "red", "error");
+    }).always(function() {
+        modal.modal("close");
+        submitBtn.html("Submit").attr("disabled", false);
+    });
+});
+
 function init() {
     const textElement = document.querySelector(".txt-type");
     const words = JSON.parse(textElement.getAttribute("data-words"));

index.html

@@ -139,6 +139,36 @@ <h4 class="title">Members</h4>
         </section>
     </main>
 
+    <div id="feedback-modal" class="modal">
+        <div class="modal-content">
+            <h4>Add your feedback</h4>
+
+            <form id="feedback-form" method="POST">
+                <div class="form-row mb-3">
+                    <button type="button" class="tooltipped btn-floating mx-1 white btn-selectable" data-value="liked"
+                        data-name="quick-feedback" data-position="top" data-tooltip="Liked it"><i
+                            class="material-icons text-dark">mood</i></button>
+                    <button type="button" class="tooltipped btn-floating mx-1 white btn-selectable" data-value="disliked"
+                        data-name="quick-feedback" data-position="top" data-tooltip="Disliked it"><i
+                            class="material-icons text-dark">mood_bad</i></button>
+                </div>
+                <div class="form-row mb-3">
+                    <div class="input-field col s12">
+                        <i class="material-icons prefix">feedback</i>
+                        <textarea id="feedback-msg" name="user-message" class="materialize-textarea" required></textarea>
+                        <label for="feedback-msg">Write here</label>
+                    </div>
+                </div>
+                <div class="form-row mb-3">
+                    <div class="col-12 center-align">
+                        <button type="button" class="btn btn-danger waves-effect modal-close">Cancel</button>
+                        <button type="submit" class="btn btn-success waves-effect">Submit</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <footer id="footer" class="section-bg">
         <div class="container footer-container">
             <div class="row">
@@ -168,10 +198,12 @@ <h4>Contact Us</h4>
                 <div class="col-lg-4 col-md-6 col-sm-6 col-12 footer-feedback">
                     <h4>Feedback</h4>
                     <p>We are happy to hear from you.</p>
-                    <button type="button" class="btn btn-primary waves-effect">Give Feedback</button>
+                    <button type="button" class="btn btn-primary waves-effect modal-trigger" data-target="feedback-modal">Give
+                        Feedback</button>
                 </div>
             </div>
         </div>
+
         <div class="footer-bottom">
             <div class="container">
                 <div class="copyright">