I want to know how js or css can know when something like text in a html span is changed [closed]-CodePudding

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.

enter image description here

CodePudding user response：

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.

CodePudding user response：

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>