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