Skip to content

Instantly share code, notes, and snippets.

Created Oct 12, 2020
What would you like to do?
/* inline styling for rating buttons
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;
(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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment