I'll supply links to the video on YouTube in addition to a cloneable, but here's a little CodePen and full explanation if that's more your style.
First, the code selects all the elements with an attribute name of wb-element and value of hue-rotate-score. This means that it will look for any HTML elements (like divs or spans) that have the attribute wb-element with a value of hue-rotate-score. It stores all of those elements in a variable called scoreElements. In Webflow, we can just give one of our collection items this custom attribute, and it will apply to all of them.
Then, the code goes through each element in the scoreElements list using a forEach loop. For each element, it calls a function called setElementColor and passes in the element as an argument.
The setElementColor function takes in the element that was passed to it and then gets the text content of that element (which should be a number between 0 and 100). It stores that number in a variable called score.
Next, it calculates the hue for that element by multiplying the score by 120 and dividing by 100. This means that if the score is 0, the hue will be 0 (which is red), and if the score is 100, the hue will be 120 (which is green). Hue value actually ranges from 0 (red) to 360 (red again!) - remember ROYGBIV from second grade? It then stores that hue in a variable called hue. How convenient!
After that, our code creates a string for the background color of the element using the hsl format, which stands for hue, saturation, and lightness. The hue variable is used for the hue value, 100% is used for saturation (which means the color is fully saturated), and 50% is used for lightness (which means the color is halfway between black and white).
If you publish the project now, you'll notice that the rating background color starts with a flash of white (or whatever is set by default in CSS i.e. Webflow designer). This effect is called Flash of "Unstyled Content", and we don't like it, so let's fix it.
Overall, this code is pretty cool because it changes the color of elements on a webpage based on their content, which can make the page more interesting and engaging for users.