Freecodecamp: Letter case not considered when a color is mentioned in a class

[gsn16]

Challenge Name

https://www.freecodecamp.com/challenges/prioritize-one-style-over-another#?solution=%0A%3Cstyle%3E%0A%20%20body%20%7B%0A%20%20%20%20background-color%3A%20black%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%20%20color%3A%20green%3B%0A%20%20%7D%0A%20%20.pink-text%20%7B%0A%20%20%20%20color%3A%20PINK%3B%0A%20%20%7D%0A%20%20h1%20%7B%0A%20%20%20%20color%3A%20yellow%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%3Ch1%20class%3D'pink-text'%3EHello%20World!%3C%2Fh1%3E%0A

Issue Description

when the color in a class is mentioned in upper case, the output shown on the screen is already pink, but i cannot proceed by pressing ctrl+enter unless i mention the color in lower case text.

Browser Information

• Browser Name, Version: Chrome
• Operating System: Windows 8
• Mobile, Desktop, or Tablet: Laptop

Your Code

.pink-text {
color: PINK;
}

Screenshot

[erictleung]

@gsn16 thanks for the issue. Yes, this should be case insensitive. This line of code needs to be changed to something like:

"assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*[pP][iI][nN][kK]\\s*;\\s*\\}/g), 'message: Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class with its color set to pink.');",

Regex101: https://regex101.com/r/pW1gV9/3

@FreeCodeCamp/issue-moderators should we pursue this? And if so, is there a better way to just do case-insensitivity on just pink and not the whole CSS property without having to do character classes [pP][iI][nN][kK]?

[raisedadead]

CAPS is not a good practice IMHO, but then again we may accept test cases since its is valid code.

[erictleung]

@raisedadead agreed. CAPS shouldn't be a best practice but I guess we can accommodate for it.

[Manish-Giri]

I can make the highlighted change, if it's good to go.

[erictleung]

@Manish-Giri it's good to go if you want to take it!

[BKinahan]

Doesn't this issue have the larger scope of all the nearby challenges with similar style assignments? It seems odd to single out just this one for case insensitivity.

[erictleung]

@BKinahan mmm yes, it does span a larger scope. Maybe it would be best to break up the second test into two: one checking for the creation of the .pink-text class, and another checking the color of the element. Checking the color of an element will check the RGB value so that it's CAP-independent.