Emoji-vote demo

Emoji-vote demo page

by fireyy

HTML

<script src="//unpkg.com/emoji-vote/dist/emoji-vote.cjs.js"></script>
<h2>Default emoji</h2>
<div class="emoji emoji1">
  <input type="radio" name="emojiVote" id="emojiVote_dissatisfied" value="dissatisfied">
  <label for="emojiVote_dissatisfied">不满</label>
  <input type="radio" name="emojiVote" id="emojiVote_general" value="general">
  <label for="emojiVote_general">一般</label>
  <input type="radio" name="emojiVote" id="emojiVote_satisfied" value="satisfied">
  <label for="emojiVote_satisfied">满意</label>
  <input type="radio" name="emojiVote" id="emojiVote_awesome" value="awesome">
  <label for="emojiVote_awesome">满意</label>
</div>
<div class="emoji emoji1">
  <input type="radio" name="emojiVote0" id="emojiVote0_dissatisfied" value="dissatisfied" checked>
  <label for="emojiVote0_dissatisfied">不满</label>
  <input type="radio" name="emojiVote0" id="emojiVote0_general" value="general">
  <label for="emojiVote0_general">一般</label>
  <input type="radio" name="emojiVote0" id="emojiVote0_satisfied" value="satisfied">
  <label for="emojiVote0_satisfied">满意</label>
  <input type="radio" name="emojiVote0" id="emojiVote0_awesome" value="awesome">
  <label for="emojiVote0_awesome">满意</label>
</div>
<div class="emoji emoji1">
  <input type="radio" name="emojiVote1" id="emojiVote1_dissatisfied" value="dissatisfied">
  <label for="emojiVote1_dissatisfied">不满</label>
  <input type="radio" name="emojiVote1" id="emojiVote1_general" value="general" checked>
  <label for="emojiVote1_general">一般</label>
  <input type="radio" name="emojiVote1" id="emojiVote1_satisfied" value="satisfied">
  <label for="emojiVote1_satisfied">满意</label>
  <input type="radio" name="emojiVote1" id="emojiVote1_awesome" value="awesome">
  <label for="emojiVote1_awesome">满意</label>
</div>
<h2>Custom emoji</h2>
<div class="emoji emoji2">
  <input type="radio" name="emojiVote2" id="emojiVote2_dissatisfied" value="dissatisfied">
  <label for="emojiVote2_dissatisfied">不满</label>
  <input type="radio"...

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.emoji {
  margin-bottom: 30px;
}

JavaScript

Array.prototype.slice.call(document.querySelectorAll('.emoji1')).forEach((el, i) => {
      emojiVote(el, {
        size: 30
      })
    })
    Array.prototype.slice.call(document.querySelectorAll('.emoji2')).forEach((el, i) => {
      emojiVote(el, {
        size: 30,
        emojis: [
          `
          <g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10">
            <g id="g12">
              <g transform="translate(15,20.5)" id="g24">
                <path id="path26" style="fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C 0,-1.934 -1.119,-3.5 -2.5,-3.5 -3.881,-3.5 -5,-1.934 -5,0 -5,1.933 -3.881,3.5 -2.5,3.5 -1.119,3.5 0,1.933 0,0"/>
              </g>
              <g transform="translate(28,20.5)" id="g28">
                <path id="path30" style="fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C 0,-1.934 -1.119,-3.5 -2.5,-3.5 -3.881,-3.5 -5,-1.934 -5,0 -5,1.933 -3.881,3.5 -2.5,3.5 -1.119,3.5 0,1.933 0,0"/>
              </g>
              <g transform="translate(24.4854,9.1211)" id="g32">
                <path id="path34" style="fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.012,0.044 -1.146,4.379 -5.485,4.379 -4.341,0 -5.475,-4.335 -5.485,-4.379 -0.053,-0.213 0.043,-0.431 0.231,-0.544 0.188,-0.112 0.433,-0.086 0.596,0.06 0.01,0.007 1.014,0.863 4.658,0.863 3.589,0 4.617,-0.83 4.656,-0.863 0.095,-0.09 0.219,-0.137 0.344,-0.137 0.084,0 0.169,0.021 0.246,0.064 C -0.043,-0.445 0.055,-0.218 0,0"/>
              </g>
            </g>
          </g>
          `,
          `
          <g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10">
            <g id="g12">
              <g transform="translate(15,23)" id="g24">
                <path id="path26" style="fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-1.657 -0.96,-3 -2.143,-3 -1.184,0 -2.143,1.343 -2.143,3 0,1.657 0.959,3 2.143,3 C -0.96,3 0,1.657 0,0"/>
              </g>
              <g transform="translate(27,23.2002)" id="g28">
                <path...