<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<link href="03-00Scope-Styles1forWBS.css" rel="stylesheet" type="text/css" />
<script> 
 $(document).ready(function(){
  
  var mc = {
    '0-0'     : 'WBS1',
    '20-59'    : 'WBS2',
    '60-100'   : 'WBS3'
  };
  
function between(x, min, max) {
  return x >= min && x <= max;
}
  

  
  var dc;
  var first; 
  var second;
  var th;
  
  $('p').each(function(index){
    
    th = $(this);
    
    dc = parseInt($(this).attr('data-color'),10);
    
    
      $.each(mc, function(name, value){
        
        
        first = parseInt(name.split('-')[0],10);
        second = parseInt(name.split('-')[1],10);
        
        console.log(between(dc, first, second));
        
        if( between(dc, first, second) ){
          th.addClass(value);
        }

    
    
      });
    
  });
});
</script>


 
 
<meta charset="utf-8">
<title>Conditional CSS</title>
</head>
<body>
<div>
  
  <!-- ie. if value is less than 20 == red 
    if value is between 20 - 60 == orange , 
    if value is greater than 60 to 100 == green. -->
   <p data-color="0">Lorem 0</p>  
  <p data-color="19">Lorem 19</p>
  <p data-color="25">Lorem 25</p>
  <p data-color="55">Lorem 55</p>
  <p data-color="60">Lorem 60</p>
  <p data-color="61">Lorem 61</p>
  <p data-color="100">Lorem 100</p>
  
</div>
</body>
</html>