Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Andrii Kodola
Full Stack JavaScript Techdegree Student 16,870 PointsTest mistake in regex code challenge
There seems to be a mistake in test for regex code challenge:
Assignment: In this challenge you'll write a validator for a hexadecimal string used to set a CSS color. Hexadecimal values for css colors start with a pound sign, or hash (#), then six characters that can either be a numeral or a letter between A and F, inclusive. Two examples of these strings would be #FF4569 and #578E9A.
For this step of the challenge, write a regular expression that will match any hexadecimal string and store it in a variable named hexRegEx. The regex should be case-insensitive. Assume that the string will always be 7 characters.
I was trying different variants, and suddenly next code worked for me: /^#[0-9A-Za-z]{6}$/ I think it doesn't include tests for lower case letters and symbols after F.
1 Answer
kayla bressem
Full Stack JavaScript Techdegree Student 6,502 PointsI agree, i think this challenge should be simplified and fixed to reflect what was taught, reviewing the video along with regexpal was not enough to reach the answer. (i mean, yeah, developers use stackoverflow IRL but usually treehouse challenges follow the preceding subject matter taught)
I had an answer to fit hex values, but this failed:
const hexRegEx =/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})*$/
the purpose to include the hash, and only include the letters a-f (i tried to flag it with "i" but it was not evaluating that to true, so i just added both cases when it came to the letters, and the answer i got was "this code will return true, however may provide more than hex values" - however, my thinking was that i was trying to evaluate both statements with the | (or) so in case 3 letters or numbers were typed, or six, it would still work. (i am a dev myself and know i have used "#fff" or "#333" a number of times, and the css output would return the correct value in either case)
I got stuck on a) limiting the string length b) i had to do a lot of outside research on lookbehind and lookaheads which were not taught in the preceding course, making this challenge really difficult. c) this particular piece of code, now that I have studied it further, could potentially need the aforementioned that wouldn't be supported in all browsers - therefore its use case would be limited. its supported in chrome as of 2018 so i would hesitate to use this in production, c pt 2) it ALSO eliminates the ability for the end-user to input an rgb value, an rgba value, a color blend and a lot of other color options the current CSS specification offers.
this code ended up working for the challenge, i just took out the unnecessary letters that would produce invalid hex values:
/^#[0-9A-Fa-f]{6}$/
this makes the string 7 long, however, like stated above, i think if I actually used this, I would want to evaluate as much as possible when it comes to color etc, other fields like email/password might be simpler because emails will always have an @ sign, and you can set arbitrary rules for the password, but when it comes to UI, the statements need to account for variations. if they don't, you then need to modify your own UI to tell the user they can only type in #FFFFFF format, or something similar to that, which is more complexity than needed on the frontend.