Freecodecamp: Hover State of Anchor Tag Test Insufficient

[erictleung]

Challenge Name

http://beta.freecodecamp.com/en/challenges/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag

Issue Description

This challenge was updated recently with PR https://github.com/freeCodeCamp/freeCodeCamp/pull/13604. The second test now only requires that you change the color of the tag while hovering to blue.

The anchor tag should have a color of blue on hover.

This test only checks for the word blue. The instructions only ask for blue, but do not specify how it should be blue i.e. RGB? Hex code?

Proposed Changes

So I propose the regex be something like this.

- /a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi
+ /a:hover\s*?{\s*?color:\s*?(blue|#0000ff|#00f)\s*;\s*?}/gi

Test Regex: https://regex101.com/r/mCY6xJ/2

Which means this line should be changed to include something like this

- code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi)
+ code.match(/a:hover\\s*?{\\s*?color:\\s*?(blue|#0000ff|#00f)\\s*;\\s*?}/gi)

Browser Information

• Browser Name, Version: Chrome 56.0.2924.87 (64-bit)
• Operating System: Linux
• Mobile, Desktop, or Tablet: Desktop

Screenshot

[szib]

Can I do this?

[mahboobshah]

can I?

[systimotic]

@erictleung There are so many options:
From @szib:

rgba(0,0,255,1)
rgb(0%,0%,100%)
hsl(240,100%,50%)
hsla(240,100%,50%,1)

Thus also

rgba(0, 0, 255, 1)
rgba(0%, 0%, 100%, 1)
rgb(0%, 0%, 100%)
rgb(0, 0, 255)
hsl(240, 100%, 50%)
hsla(240, 100%, 50%, 1)

and your originals

#0000FF
#00F
blue

While the last three plus rgb(0, 0, 255) will cover most of the cases, maybe it would be a better idea to change the description to require use of the keyword blue

[erictleung]

@systimotic mmm yeah, good point. Should we just change the seed code to use black instead of #000 to make it consistent?

[BhaveshSGupta]

@erictleung @systimotic once we are able to solve #10749 then we can use $('a').hover().css('color'), which would check for all the cases

[erictleung]

@BhaveshSGupta thanks for looking at this! I neglected to do my due diligence on looking at past issues and think a bit before posting :stuck_out_tongue_closed_eyes: Mmm so I guess this issue should just be blocked until #10749 gets resolved. I might have to play around with this issue a bit more. I'll keep this issue blocked for now.

[mahboobshah]

Thanks everyone. I will pick this issue after it is unblocked.

[systimotic]

@BhaveshSGupta Good idea!
@erictleung I don't think we need to wait for that issue. That issue appears only in Firefox, and for all CSS tests. If we can get this to work in Chrome, it should also work in Firefox once that issue is resolved.

[BhaveshSGupta]

@systimotic I am trying to figure out vanilla, version for this, Still not close, If we do it by vanilla js it may also work on Firefox. And that could be used for other challenges where this #10749 issue is there.

[systimotic]

@BhaveshSGupta If you have a working jQuery solution, that would be fine as well! Once we solve #10749, that would mean that it would make your test work in Firefox as well.

[BhaveshSGupta]

@systimotic jQuery version is ready I can change whenever that get solved

[systimotic]

@BhaveshSGupta The issue has been resolved! Can you submit a PR to fix this?

[BhaveshSGupta]

@systimotic I think I have made a mistake here, using $(a).hover().css(color) wont work, I am still trying to figure out a solution for this.

[prateekgoel]

@erictleung @systimotic @BhaveshSGupta
Hello everyone,
It seems jQuery doesn't have a solution for getting css properties of :hover without triggering the hover.
I was reading about this and came across this http://jsfiddle.net/3FYz6/.
This vanilla JS solution seems to work.
We can use this but It seems unnecessary to me to have a JS solution for this. I think we can just include the possible color values mentioned above in the regular expression and that would suffice. There's almost no possibility of a camper trying to use some other color value.

I can submit the PR with updated the regex if you guys agree.

[systimotic]

Too bad that there isn't a simple JS solution for this. I guess you can go ahead with adding more color values to the regex @prateekgoel 👍

[prateekgoel]

Thanks @systimotic . I am on it,

[prateekgoel]

Can anyone please review the PR?

[QuincyLarson]

I'm closing this issue as stale since it hasn't been active lately. If you think this is still relevant to the newly updated platform, please explain why, then reopen it.

[ghost]

you have to add 'link' to the first rule i.e; a: link {}