JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<body>
    <div id="health" style="background-color:green;min-height:5px;">20%!</div>
    <div style="background-color:#EEE;min-height:5px;width:100%;">100%</div>
    </body>

JavaScript

//head

$(function(){      //same as "onload" (jQuery)
    var hp = 500,
        max = 2500,
        perc = Math.round(hp/max * 100);
    if(perc > 100){
        perc = 100;
    }else if(perc < 0 ){
        perc = 0; 
    }
    //have to wait until DOM loaded
    d = document.getElementById('health');
    d.style.width= perc+"%";
    alert(perc+"%");   
});