CODEWITHSUNDEEP
javascriptjquerycsscounterconditional-formatting
Kees de Jager
Kees de Jager

Reputation: 590

Countup.js color number by statement (positive, neutral, negative)

I would like to combine countup.js with an automatic css formatting (color). Where i have the following three conditions:

The sample file contains three numbers (negative, neutral and positive). In the CSS code states the color that I assigned manually to the number. I want this color to be automatically assigned based on the number that is shown. 

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: ".",
  prefix: "-"
};
var demo = new CountUp("red", 0, 1000, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: "."
};
var demo = new CountUp("black", 0, 0, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: "."
};
var demo = new CountUp("green", 0, 1000, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}
#prg-counter .prg-container {
  text-align: center;
  width: 80%;
  margin: auto;
}

#prg-head h1 {
  text-align: center;
}

.color_red {
  color: red;
}

.color_black {
  color: black;
}

.color_green {
  color: green;
}
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.8.5/countUp.min.js"></script>
  <div id="prg-counter">
  <section id="prg-head">
    <h1>Count-Up Color</h1>
    <hr/>
  </section>
  <div class="prg-container row">
    <div class="col-md-4">
      <h4 class="color_red" id="red"></h4>
      <h4 class="prg-count-title">red
        < 0 </h4>
    </div>
    <div class="col-md-4">
      <h4 class="color_black" id="black"></h4>
      <h4 class="prg-count-title">black = 0</h4>
    </div>
    <div class="col-md-4">
      <h4 class="color_green" id="green"></h4>
      <h4 class="prg-count-title">green > 0 </h4>
    </div>
  </div>
  <hr/>
</div>

Does anyone know how the formatting can take place automatically?

Thank you in advance!

Upvotes: 0

Views: 524

Answers (1)

evgeni fotia
evgeni fotia

Reputation: 4810

By using MutationObserver

var c = document.getElementsByClassName('color');
for(let i=0; i<c.length; i++){
   // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if(Number(mutation.target.innerHTML) < 0){
              mutation.target.style.color = "red"
            }else if(Number(mutation.target.innerHTML) > 0){
              mutation.target.style.color = "green"
            }else if(Number(mutation.target.innerHTML) == 0){
              mutation.target.style.color = "black"
            }
        });
    });

    var config = { attributes: true, childList: true, characterData: true }
    observer.observe(c[i], config);
}


var c = document.getElementsByClassName('color');
for (let i = 0; i < c.length; i++) {
  // create an observer instance
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (Number(mutation.target.innerHTML) < 0) {
        mutation.target.style.color = "red"
      } else if (Number(mutation.target.innerHTML) > 0) {
        mutation.target.style.color = "green"
      } else if (Number(mutation.target.innerHTML) == 0) {
        mutation.target.style.color = "black"
      }
    });
  });

  var config = {
    attributes: true,
    childList: true,
    characterData: true
  }
  observer.observe(c[i], config);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: ".",
  prefix: "-"
};
var demo = new CountUp("red", 0, 1000, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: "."
};
var demo = new CountUp("black", 0, 0, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ",",
  decimal: "."
};
var demo = new CountUp("green", 0, 1000, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}
#prg-counter .prg-container {
  text-align: center;
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}

#prg-head h1 {
  text-align: center;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.8.5/countUp.min.js"></script>

<div id="prg-counter">
  <section id="prg-head">
    <h1>Count-Up Color</h1>
    <hr/>
  </section>
  <div class="prg-container row">
    <div class="col-md-4">
      <h4 class="color" id="red"></h4>
      <h4 class="prg-count-title">red
        < 0 </h4>
    </div>
    <div class="col-md-4">
      <h4 class="color" id="black"></h4>
      <h4 class="prg-count-title">black = 0</h4>
    </div>
    <div class="col-md-4">
      <h4 class="color" id="green"></h4>
      <h4 class="prg-count-title">green > 0 </h4>
    </div>
  </div>
  <hr/>
</div>

this is codepen

Upvotes: 2

Related Questions