Friday, 1 February 2019

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:

  • Red if smaller than 0
  • Black if equal to 0
  • Green if greater than 0

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!



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

No comments:

Post a Comment