title: Changing color of element depending on dynamic value using jQuery
body: <p>So, I want to change the color on a button which displays a value which is fetched from a database. The value can be between -10 and 10.
  I would like to display 5 shades of red and 5 shades of green.</p>
  
  <p>This is what I've come up with so far:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>            &lt;button class="scoreTicker"&gt;{{ $score }} &lt;/button&gt;
  </code></pre>
  
  <p><strong>js</strong>          </p>
  
  <pre><code>            var scoreTicker = parseInt($('.scoreTicker').innerHTML());
  
              if(scoreTicker &lt; 0){
                  $('.scoreTicker').css('background', 'red');
              }
              else(scoreTicker &gt; 0){
                  $('.scoreTicker').css('background', 'green');
              }
  </code></pre>
  
  <p>I was thinking of making elseif statements for every shade, this would result in 10 conditional statements which seems a bit overkill. Is there a smarter way of doing this?</p>