title: How can I change the color of the value base on the amount of the value?
body: <p>I have this HTML table and JS</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var example = document.getElementid('*Numerical Value*');
  var exampledbref = firebase.database().ref().child('example').child('value');
  exampledbref.on('value'
    snap =&gt; expample.innerText = snap.val());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;table width="200" border="1"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;String&lt;/td&gt;
          &lt;td&gt;String&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;*Numerical Value*&lt;/td&gt;
          &lt;td&gt;*Numerical Value*&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt; &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>This model works and does it needs to do which is fetch and display data on the table from firebase.</strong> </p>
  
  <p>My question,
  How can I change the color of value based on the amount of the value being fetched from firebase?</p>
  
  <p>For example, I am thinking of a parameter where if the value is less than <code>5</code> the color of the value itself changes to the color red. Now if it is more than <code>5</code> the color of the value is <code>green</code>.</p>
  
  <p>If the data being fetched has the value of <code>4</code>, how can it change so that the value is being displayed in <code>red</code> and furthermore if its more than <code>5</code> the color of the value becomes <code>green</code>? How can I make this work?</p>