Emoji Based Rating Plugin With jQuery - Emotion Ratings

Emoji Based Rating Plugin With jQuery - Emotion Ratings

Emotion Ratings is a lightweight jQuery plugin used to create a simple rating system using custom emoji Unicode characters.

1. Import jQuery JavaScript library and the jQuery Emotion Ratings plugin's script emotion-ratings.js into the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="emotion-ratings.js"></script>

2. Create a placeholder element for the rating system.

<div id="myRating"></div>

3. Define an array of emoji you want to use. All possible emoji:

var emotionsArray = {
    angry: "&#x1F620;",
    disappointed: "&#x1F61E;",
    meh: "&#x1F610;", 
    happy: "&#x1F60A;",
    smile: "&#x1F603;",
    wink: "&#x1F609;",
    laughing: "&#x1F606;",
    inLove: "&#x1F60D;",
    heart: "&#x2764;",
    crying: "&#x1F622;",
    star: "&#x2B50;",
};
var emotionsArray = ['angry','disappointed','meh', 'happy', 'inLove'];

4. The JavaScript to generate a basic rating system inside the container you just created.

$("#myRating").emotionsRating({
  emotions: emotionsArray
});

5. Customize the rating system with the following options.

$("#myRating").emotionsRating({
  // background emoji
  bgEmotion: "happy",
  // emoji array
  emotionsCollection: ['angry','disappointed','meh', 'happy', 'inLove'],
  // number of emoji
  count: 5,
  // color of emoji
  // gold, red, blue, green, black, 
  // brown, pink, purple, orange
  color: "red",
  // size of emoji
  emotionSize: 30,
  // input name
  inputName: "rating",
  // callback
  emotionOnUpdate: null
  
});

This awesome jQuery plugin is developed by YanNerio. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 08.11.2017
  • Source