Emoji

const MOODS = {
  '🤬': { max: 1 },
  '😡': { max: 10 },
  '😠': { max: 20 },
  '😦': { max: 30 },
  '☹️': { max: 40 },
  '🙁': { max: 50 },
  '😐': { max: 60 },
  '🙂': { max: 70 },
  '😊': { max: 80 },
  '😄': { max: 90 },
  '😃': { max: 100 },
  '😍': { min: 100 }
},
  _MOOD = document.getElementById('mood'),
  _FORM = _MOOD.parentNode,
  _MOUT_CURRENT = document.getElementById('current'),
  _MOUT_PREVIOUS = document.getElementById('previous');

let val = null;

let curMout = '';

function updateVal() {
  let newval = +_MOOD.value;

  if (val !== newval) {
    _FORM.style.setProperty('--val', val = newval);

    for (let k in MOODS)
      if ((!MOODS[k].min || (MOODS[k].min <= val)) &&
        (!MOODS[k].max || (MOODS[k].max > val))) {

        // Check if value needs to be changed
        if (k !== curMout) {
          _MOUT_PREVIOUS.textContent = _MOUT_CURRENT.textContent;
          _MOUT_CURRENT.textContent = k;

          curMout = k;

          // Restart animation
          _MOUT_PREVIOUS.style.animation = "none";

          _MOUT_PREVIOUS.style.animation = null;
        }
        break
      }
  }
};

export default updateVal;