0
213
ViewsI want to know how js or css can know when something like text in a html span is changed
I am working on a graph that I want to change in color when the number changes. I don't know how to do this sadly. Maybe someone can help me in the right direction of looking at least. The numbers with styling I want: 20<= green, >20 or ==30 yellow, >30 red.
·
Juan Pablo Isaza
2 answers
Answer question0
You can use a MutationObserver to get information when something changes in span. or even better from where it's changing the project pending number, you should be able to trigger a function to change the colors.
·
Juan Pablo Isaza
Report
0
You will need a mix of JS and CSS variables. This is one of the many ways to approach this.
const colorGreen = "#64ed7b";
const colorYellow = "#ffed13";
const colorRed = "#eb4444";
const projectCount = Number(document.querySelector(".project-count").textContent);
function setColor(hex) {
document.documentElement.style.setProperty('--projects', hex);
}
if (projectCount > 30) {
setColor(colorRed);
} else if (projectCount > 20) {
setColor(colorYellow);
} else {
setColor(colorGreen);
}:root {
--projects: #eb4444;
}
.projects-pending {
border: 10px solid var(--projects);
color: var(--projects);
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}<div class="projects-pending">
<span class="project-count">21</span>
<span>projects pending<span>
</div>
·
Juan Pablo Isaza
Report
Answer question