Skip to content

Instantly share code, notes, and snippets.

@mhawksey
Created Oct 12, 2020
Embed
What would you like to do?
<style>
/* inline styling for rating buttons
#rate-tag{
text-align: center;
font-weight: 700;
}
#rating-tag a{
font-size: 2em;
filter: grayscale(100%);
}
#rating-tag a:hover, #rating-tag a.sent{
filter: unset;
}
</style>
<script>
(function() {
// Object with our ratings buttons and Google Analytics event data
var ratings = [{text:'😠', label:'Very Poor', value: 1},
{text:'☹️', label:'Poor', value: 2},
{text:'😐', label:'Neutral', value: 3},
{text:'😊', label:'Very Good', value: 4},
{text:'😍', label:'Excellent', value: 5}];
// Create a new div element
var div = document.createElement('div');
div.setAttribute("id", "rate-tag");
// Add the text content
div.innerHTML = "Rate this article:<div id='rating-tag'></div>";
// Getting a page element to add the rating block
var article = document.querySelector('article');
// Inject the new element at the end of the article tag
if (article) {
article.parentElement.insertBefore(div, article.nextSibling);
// Add rating buttons/links
var rate = document.getElementById('rating-tag');
ratings.forEach(function(el) {
var a = document.createElement('a');
a.innerText = el.text;
a.setAttribute('alt', el.label);
a.setAttribute('data-label', el.label);
a.setAttribute('data-value', el.value);
a.addEventListener('click', {{JS - Rating Event Callback}}, true);
rate.appendChild(a);
});
}
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment