There is simple form with stars which has 2 icons: star & star_border (star is for marked one and star_border is for an empty).
The form is very simple itself:
<div class="star-input">
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
</div>
When form being loaded stars constantly changing between marked and empty while visitor haven't pressed on it. As soon as he pressed on some star the status being frozen and some stars are filled while other are empty (depending on marks). So this way ranking being formed. It is clear for me.
However I try to make a solution to clear a form to initial state after it being submitted. If you open it after a submittion now with no reload a page there is still past value being stored.
Here is JavaScript's function code:
prepareThemes.prototype.initReviewDialog = function() {
const dialog = document.querySelector("#dialog-add-review");
this.dialogs.add_review = new mdc.dialog.MDCDialog(dialog);
this.dialogs.add_review.listen("MDCDialog:accept", () => {
let pathname = this.getCleanPath(document.location.pathname);
let id = pathname.split("/")[2];
if (
!dialog.querySelector("#text").value ||
!dialog.querySelector("#textwhoareyou").value
) {
alert("No text");
return;
} else {
this.addRating(id, {
rating,
text: dialog.querySelector("#text").value,
userName: dialog.querySelector("#textwhoareyou").value,
timestamp: new Date(),
userId: firebase.auth().currentUser.uid
}).then(() => {
this.rerender();
});
dialog.querySelector("#text").value = "";
dialog.querySelector("#textwhoareyou").value = "";
}
});
let rating = 0;
dialog.querySelectorAll(".star-input i").forEach(el => {
const rate = () => {
let after = false;
rating = 0;
[].slice.call(el.parentNode.children).forEach(child => {
if (!after) {
rating++;
child.innerText = "star";
} else {
child.innerText = "star_border";
}
after = after || child.isSameNode(el);
});
};
el.addEventListener("mouseover", rate);
});
};
Thanks for any advice. Good day to everyone.
Easy solution is to rebuild your div again after your form is submitted so You can do something like this:
function doRate() {
document.querySelectorAll('.star-input i').forEach(el => {
const rate = () => {
let after = false;
rating = 0;
[].slice.call(el.parentNode.children).forEach(child => {
if (!after) {
rating++;
child.innerText = 'star';
} else {
child.innerText = 'star_border';
}
after = after || child.isSameNode(el);
});
};
el.addEventListener('mouseover', rate);
});
};
doRate();
document.querySelector('#my-form')
.addEventListener('submit', function(e) {
e.preventDefault();
// Do you logic here
// And after that rebuild your div
var myDiv = document.querySelector('.star-input');
myDiv.innerHTML = `
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>`;
doRate();
})
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<form id="my-form">
<div class="star-input">
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
<i class="material-icons">star_border</i>
</div>
<button id="my-button">Rate!</button>
</form>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments