JSFiddle - React, Tailwind, and code Playground

by denov

HTML

what is your temp <input type="text" id="temp"></input>
<Br>
your state is:
<div id="tempOutput"></div>

JavaScript

// this is a POC for https://stackoverflow.com/questions/38360004/switch-with-min-max-elements/38360368#38360368

var tempValues = {
   'hypothermia': { background: 'yellow', color: 'blue', text: 'hypothermia' },
   'healthy': { background: 'white', color: 'black', text: ''  },
   'hyperthermia': { background: 'yellow', color: 'black', text: 'hyperthermia' },
   'pyrexia': { background: 'red', color: 'black', text: 'pyrexia'  }     
}


document.getElementById('temp').addEventListener("change", tempChange);


function tempChange() {
    var vals = getValuesFortemp(parseInt(document.getElementById('temp').value, 10) || 0),
        node = document.getElementById('tempOutput');
   
   updateDom(node, vals);    
}

function getValuesFortemp(temp) {
    if (temp <= 36) return tempValues.hypothermia
    else if (temp == 37) return tempValues.healthy
    else if (temp == 38) return tempValues.hyperthermia
    else if (temp >= 39) return tempValues.pyrexia 
}

function updateDom(node, values) {
    node.style.background = values.background || '',
    node.style.color = values.color || '',
    node.innerHTML = values.text || '';
}