Points

by Emmanuel Garcia

HTML

<ul class="selected-color">
    <li class="week">1</li>
    <li class="week">2</li>
        <li class="week">3</li>
         <li class="week">4</li>
   <li class="week">5</li>
      <li class="week">6</li>
      <li class="week">7</li>
      <li class="week">8</li>
       <li class="week">9</li>
        <li class="week">10</li>
</ul>
<ul class="selected-color">
    <li class="value">Chocolate</li>
    <li class="value">silver</li>
        <li class="value">gold</li>
         <li class="value">LightSlateGray</li>
   <li class="value">DeepSkyBlue</li>
      <li class="value">MediumSeaGreen</li>
      <li class="value">red</li>
      <li class="value">white</li>
      <li class="value">black</li>
      <li class="value">white</li>
</ul>




<div>
<cite class="fn">culero</cite>
</div>

CSS

li {width:8%; height:70px; font-size:.5px; opacity:0.9; }

ul li{
  display: inline-block; 
}

.week{
  display: inline-block;  color:black !important; font-size:20px !important; background-color:#f2f2f2; text-align:center; line-height:70px; 
}

value{
  display: inline-block; 
}

ul{ margin:0; padding:0; width:100%; }

.selected-color{top:0; margin-top:0; padding-top:0;}

JavaScript

$(".selected-color .value ").each(function() {

      var value=  $(this).text();
      $(this).css("background-color", value);
      $(this).css("color", value);
      
      setTimeout(function(){ $("div:empty").hide(); }, 1000);
});




$('cite.fn').filter(function () {
    return $(this).text() == 'culero';
}).css('color', 'green');;