Change result color based on the calculation result

Ask the Community Customization
1

Can I change the container result depending on the result?

2 Likes
2

Hi there, @Weronika_Pezda :wave:

Did you mean the container color? If I misunderstood you, please describe your idea in more detail :slightly_smiling_face:

1 Like
3

I’ve calulated the result based on the selected answers. Each answer has a weight …
I wanted to change the color of the percentage depends on the result.
So if percentage is between 0% - 40% result appears in red etc.

I want to change color of this class depends on the result: animated-number__Content-sc-fba78cc7-0 kQlfGE

2 Likes
5

Got it, thanks!

I’ll discuss this case with the devs and will let you know if it’s feasible tomorrow :slightly_smiling_face:

1 Like
6

Our devs came up with a custom script that should be added to the Custom JS field on the Settings tab of your widget’s settings:

const CONFIG = {
  0: "red",
  41: "orange",
  66: "lightgreen",
  86: "darkgreen"
};

const waitForElement = (selector, root = document) => new Promise(res => {
    let i = 0;

    const check = () => {
        const component = root.querySelector(selector);

        if (component) {
            res(component);
        } else if (i !== 50) {
            setTimeout(check, 100);
            i++;
        }
    };

    check();
});

waitForElement("[class*='results__Container-sc']").then((results) => {
    const numberCallback = (mutationList, observer) => {
      mutationList.forEach(({ addedNodes: [addedNode] }) => {
        const percentage = addedNode.textContent.replace(/\D/g, "");
        if (!percentage) {
          return;
        }
        
        let color = CONFIG[0];
        Object.entries(CONFIG).forEach(([minPercentage, colorValue]) => {
          if (percentage >= minPercentage) {
            color = colorValue;
          }
        });
        
        observer.disconnect();
        const parent = addedNode.parentNode;
        parent.innerHTML = `${percentage}<span style="color: ${color}">%</span>`;
        observer.observe(parent, { childList: true });
      });
    };
    const numberObserver = new MutationObserver((mutationList) => numberCallback(mutationList, numberObserver));
    
    const resultsCallback = (mutationList) => {
        mutationList.forEach(({ addedNodes: [addedNode] }) => {
            if (!addedNode) {
              return;
            }
          
            const number = addedNode.querySelector("[class*='animated-number__Content-sc']");
            if (!number) {
              return;
            }
            
            numberObserver.observe(number, { childList: true });
        });
    };

    const observer = new MutationObserver(resultsCallback);
    observer.observe(results, { childList: true });
});

Here you can set the minimal percent and assign the needed color to the range:

image
image600×440 13.8 KB


Try it out and let me know how it worked for you :slightly_smiling_face:

1 Like
7

Yes, it works! Thank you.

1 Like
8

No problem!

In the meantime, we’d like to invite you to join our new challenge, where you can win 3 FREE months for your subscription. Check the details and participate :wink: - March Challenge: Share your results with Elfsight & win 3 FREE months!:rocket: