Skip to content

Adds support to submit feedback #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Adds support to submit feedback #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b934ec9
[UPDATE] index.html, style.css, main.js
Rocker2102 Dec 20, 2020
d06d36b
[REFACTOR] main.js
Rocker2102 Dec 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down Expand Up @@ -678,4 +689,4 @@ main {
.welcome-msg {
font-size: 14px;
}
}
}
78 changes: 59 additions & 19 deletions assets/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ $(document).ready(function(){
$(".tabs").tabs();
$(".collapsible").collapsible();
$(".tooltipped").tooltip();
$(".modal").modal();

fetchRepos();
fetchTeam();
Expand Down Expand Up @@ -90,17 +91,17 @@ function fetchRepos(force = false) {
function updateRepos(data){
const repoContainer = document.querySelector(".repo-container");
data.forEach((val) => {
// Creating Repo card
/* Creating Repo card */
let repoItem = createElement("div", {class: "col-md-6 col-lg-4 repo-item"});
let box = createElement("div", {class: "box"});
let icon = createElement("div", {class: "icon"});

// Fetching image for repository
/* Fetching image for repository */
let iconImg = val.name.split("-")[0].toLowerCase();
let imgSource = "";

if (iconImg === "website") {
// For devcans website repo
/* For devcans website repo */
imgSource = "assets/img/icon.png"
} else {
if (iconImg === "web") {
Expand All @@ -122,7 +123,7 @@ function updateRepos(data){
repoContainer.appendChild(repoItem);
});

// Setting up listener for show more button
/* Setting up listener for show more button */
const button = document.querySelector(".more-btn");
button.addEventListener("click", () => {
button.childNodes[1].classList.toggle("more-btn-inactive");
Expand Down Expand Up @@ -231,7 +232,7 @@ function createElement(tag, options = {}, html = "") {
return e;
}

// Slider
/* Slider */
let index = 1;
let slideContainer;
let slider;
Expand Down Expand Up @@ -362,54 +363,93 @@ class TypeWriter {
this.type();
}

// Type method
/* Type method */
type() {
// current index of word
/* current index of word */
const current = this.wordIndex % this.words.length;
// Get full text of current word
/* Get full text of current word */
const fullText = this.words[current];

// Check if deleting
/* Check if deleting */
if (this.isDeleting) {
// Remove char
/* Remove char */
this.text = fullText.substring(0, this.text.length - 1);
} else {
// Add char
/* Add char */
this.text = fullText.substring(0, this.text.length + 1);
}

// Insert text into element
/* Insert text into element */
this.textElement.innerHTML = this.text;

// Initial type Speed
/* Initial type Speed */
let typeSpeed = 250;

if (this.isDeleting) {
typeSpeed /= 2;
}

// If word is complete
/* If word is complete */
if (!this.isDeleting && this.text === fullText) {
// Make pause at end
/* Make pause at end */
typeSpeed = this.wait;
// Set delete to true
/* Set delete to true */
this.isDeleting = true;
} else if (this.isDeleting && this.text === "") {
this.isDeleting = false;
//
this.wordIndex++;
// Pause before start typing
/* Pause before start typing */
typeSpeed = 500;
}
setTimeout(() => this.type(), typeSpeed);
}
}

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"));
const wait = textElement.getAttribute("data-wait");
// init TypeWriter
/* init TypeWriter */

new TypeWriter(textElement, words, wait);
}
34 changes: 33 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down