Mood Picker — Emoji Face Satisfaction Selector

<form class="mp-card" id="mpForm">
  <h3>How was your experience?</h3>
  <div class="mp-faces" id="mpFaces" role="radiogroup" aria-label="Mood">
    <button type="button" class="mp-face" data-value="1" data-label="Awful" role="radio" aria-checked="false" aria-label="Awful">
      <svg viewBox="0 0 48 48"><circle class="mp-bg" cx="24" cy="24" r="21"/><circle cx="17" cy="20" r="2.4"/><circle cx="31" cy="20" r="2.4"/><path class="mp-mouth" d="M16 33 Q24 26 32 33"/></svg>
    </button>
    <button type="button" class="mp-face" data-value="2" data-label="Bad" role="radio" aria-checked="false" aria-label="Bad">
      <svg viewBox="0 0 48 48"><circle class="mp-bg" cx="24" cy="24" r="21"/><circle cx="17" cy="20" r="2.4"/><circle cx="31" cy="20" r="2.4"/><path class="mp-mouth" d="M16 31 Q24 28 32 31"/></svg>
    </button>
    <button type="button" class="mp-face" data-value="3" data-label="Okay" role="radio" aria-checked="false" aria-label="Okay">
      <svg viewBox="0 0 48 48"><circle class="mp-bg" cx="24" cy="24" r="21"/><circle cx="17" cy="20" r="2.4"/><circle cx="31" cy="20" r="2.4"/><path class="mp-mouth" d="M16 30 L32 30"/></svg>
    </button>
    <button type="button" class="mp-face" data-value="4" data-label="Good" role="radio" aria-checked="false" aria-label="Good">
      <svg viewBox="0 0 48 48"><circle class="mp-bg" cx="24" cy="24" r="21"/><circle cx="17" cy="20" r="2.4"/><circle cx="31" cy="20" r="2.4"/><path class="mp-mouth" d="M16 29 Q24 35 32 29"/></svg>
    </button>
    <button type="button" class="mp-face" data-value="5" data-label="Great" role="radio" aria-checked="false" aria-label="Great">
      <svg viewBox="0 0 48 48"><circle class="mp-bg" cx="24" cy="24" r="21"/><circle cx="17" cy="20" r="2.4"/><circle cx="31" cy="20" r="2.4"/><path class="mp-mouth" d="M15 27 Q24 38 33 27"/></svg>
    </button>
  </div>
  <p class="mp-label" id="mpLabel">Pick the face that fits</p>
  <button class="mp-submit" type="submit" id="mpSubmit" disabled>Send feedback</button>
</form>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;display:flex;justify-content:center;padding:40px 20px}

.mp-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:26px;width:100%;max-width:380px;text-align:center;box-shadow:0 12px 32px -20px rgba(0,0,0,.3)}
.mp-card h3{font-size:16px;font-weight:800;color:#0f172a;margin-bottom:18px}

.mp-faces{display:flex;justify-content:space-between;gap:6px}
.mp-face{background:none;border:none;cursor:pointer;padding:2px;border-radius:50%;width:54px;height:54px;transition:transform .15s}
.mp-face svg{width:100%;height:100%;display:block}
.mp-face .mp-bg{fill:#e2e8f0;transition:fill .15s}
.mp-face svg circle:not(.mp-bg){fill:#64748b}
.mp-face .mp-mouth{fill:none;stroke:#64748b;stroke-width:2.4;stroke-linecap:round;transition:stroke .15s}
.mp-face:hover{transform:translateY(-3px) scale(1.06)}
.mp-face.mp-on{transform:translateY(-3px) scale(1.12)}
.mp-face.mp-on .mp-bg{fill:#fde68a}
.mp-face.mp-on svg circle:not(.mp-bg),.mp-face.mp-on .mp-mouth{fill:#92400e;stroke:#92400e}
.mp-face:focus-visible{outline:2px solid #6366f1;outline-offset:2px}

.mp-label{margin:16px 0 18px;font-size:14px;font-weight:700;color:#475569;min-height:20px}
.mp-submit{width:100%;background:#0f172a;color:#fff;border:none;border-radius:10px;padding:11px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s}
.mp-submit:disabled{opacity:.4;cursor:not-allowed}
.mp-submit:not(:disabled):hover{opacity:.9}

var faces = Array.prototype.slice.call(document.querySelectorAll('.mp-face'));
var label = document.getElementById('mpLabel');
var submit = document.getElementById('mpSubmit');
var current = 0;

function paint(value) {
  faces.forEach(function (f) {
    var v = parseInt(f.getAttribute('data-value'), 10);
    f.classList.toggle('mp-on', v === value);
    f.setAttribute('aria-checked', String(v === current));
  });
}

function preview(face) { paint(parseInt(face.getAttribute('data-value'), 10)); label.textContent = face.getAttribute('data-label'); }
function commit(face) {
  current = parseInt(face.getAttribute('data-value'), 10);
  submit.disabled = false;
  paint(current);
  label.textContent = face.getAttribute('data-label');
}

faces.forEach(function (face, i) {
  face.addEventListener('mouseenter', function () { preview(face); });
  face.addEventListener('focus', function () { preview(face); });
  face.addEventListener('click', function () { commit(face); });
  face.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowRight') { e.preventDefault(); var n = faces[Math.min(i + 1, faces.length - 1)]; n.focus(); commit(n); }
    if (e.key === 'ArrowLeft') { e.preventDefault(); var p = faces[Math.max(i - 1, 0)]; p.focus(); commit(p); }
  });
});

document.getElementById('mpFaces').addEventListener('mouseleave', function () {
  if (current) { paint(current); label.textContent = faces[current - 1].getAttribute('data-label'); }
  else { paint(0); label.textContent = 'Pick the face that fits'; }
});

document.getElementById('mpForm').addEventListener('submit', function (e) {
  e.preventDefault();
  label.textContent = 'Thanks for the feedback!';
});