Coloring Cells Jquery

by Kate

HTML

<!-- <table class="maandrendementen">
  <tr>
    <th>jan</th>
    <th>feb</th>
    <th>mar</th>
    <th>apr</th>
    <th>may</th>
    <th>jun</th>
    <th>jul</th>
    <th>aug</th>
    <th>sep</th>
    <th>oct</th>
    <th>nov</th>
    <th>dec</th>
  </tr>
  <tr>
    <td>-0,23%</td>
    <td>0,57%</td>
    <td>0,39%</td>
    <td>-1,24%</td>
    <td>-0,59%</td>
    <td>-1,37%</td>
    <td>-0,85%</td>
    <td>0,80%</td>
    <td>1,94%</td>
    <td>0,68%</td>
    <td>-1,35%</td>
    <td>2,69%</td>
  </tr>
</table> -->

<div class="list-view" style="display:flex; flex-wrap:wrap">
  <div class="list-item" value="23">23</div>
  <div class="list-item" value="10">10</div>
  <div class="list-item" value="39">39</div>
  <div class="list-item" value="88">88</div>
  <div class="list-item" value="57">57</div>
  <div class="list-item" value="94">94</div>
  <div class="list-item" value="69">69</div>
</div>

CSS

.list-item {
  flex-grow:1; 
  width: 300px; 
  padding:20px; 
  border: 1px solid white; 
}

JavaScript

$(document).ready(function () {

var cell = $('.list-item');

cell.each(function() {
var cell_value = parseFloat($(this).attr("value"));

// Positief

if ((cell_value >= 0) && (cell_value <= 10)) {
    $(this).css({'background-color' : 'rgba(255,0,0,0.5)'});   
} 
else if ((cell_value > 10) && (cell_value <= 20)) {
    $(this).css({'background-color' : 'rgba(255,77,0,0.5)'});
} 
else if ((cell_value > 20) && (cell_value <= 30)) {
    $(this).css({'background-color' : 'rgba(255,128,0,0.5)'});
} 
else if ((cell_value > 30) && (cell_value <= 40)) {
    $(this).css({'background-color' : 'rgba(255,179,0,0.5)'});
}
else if ((cell_value > 40) && (cell_value <= 50)) {
    $(this).css({'background-color' : 'rgba(255,230,0, 0.5)'});
}
else if ((cell_value > 50) && (cell_value <= 60)) {
    $(this).css({'background-color' : 'rgba(229,255,0,0.5)'});
}
else if ((cell_value > 60) && (cell_value <= 70)) {
    $(this).css({'background-color' : 'rgba(179, 255, 0, 0.5)'});
}
else if ((cell_value > 70) && (cell_value <= 80)) {
    $(this).css({'background-color' : 'rgba(128, 255, 0, 0.5)'});
}
else if ((cell_value > 80) && (cell_value <= 90)) {
    $(this).css({'background-color' : 'rgba(77, 255, 0, 0.5)'});
}
else if (cell_value > 90) {
    $(this).css({'background-color' : 'rgba(0,255,0,0.5)'});
}

});

});