Freecodecamp: Correct solution fails without correct boilerplate HTML - Nest an Anchor Challenge

[danjumaharjan]

Challenge Nest an Anchor Element within a Paragraph has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>View More <a href= "http://www.freecatphotoapp.com"> cat photos</a></p>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">

[ghost]

This is issue with test cases or not enough infromation about that is being tested.

I tried editing your phase with the content from my solution and it passes the test while replacing your HTML with following:

<h2 class="red-text">CatPhotoApp</h2>
<p>View more <a href="http://www.freecatphotoapp.com">cat photos</a></p>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere  shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">


<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Your test cases are different than mine but as the above HTML solves the issue this is a bug.

[LukeGeneva]

The initial code has two <p> elements pre-filled. The test cases are expecting these to still be present, but they appear to be missing from your solution code.

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

[no-stack-dub-sack]

@danjumaharjan it looks like @LukeGeneva is correct, the test cases are expecting the 2 <p> tags that you removed to still be there. Other than that your code is right.

@freeCodeCamp/moderators this is interesting. Anyone want to weigh in on this? I think either we should modify the tests so that they pass even if other non-required elements are deleted, or have an an additional test case that says no other code should be modified.

[muguira-james]

Interesting...

I refreshed the page and did the assignment from scratch.

View more

I guess the test app froze for this page. The refresh solved it

[Margaret2]

It passes for me if I put in two empty p elements, so apparently the tests are just looking for at least 3 p elements, with or without the kitty ipsum text. So maybe some text could be added that says:
There should be 3 p elements total.

[danjumaharjan]

Thank You everyone for the help. I wrote it again from the scratch and now it passes. Its the same code, but this time it passes. I do not know what the issue was. But I really appreciate everyone for your help. Thank You.

[no-stack-dub-sack]

@danjumaharjan Glad you got this resolved, however, I'm going to reopen this issue as there is still a problem with the challenge here.

[no-stack-dub-sack]

@raisedadead This may be a silly question, but if Staging is now Beta - if we wanted to fix this on current production FCC, how would we do that? Make a PR to master branch instead?

I just realized I haven't changed anything in production since Beta went live since most efforts have been focused there.

[no-stack-dub-sack]

To summarize the problem, this code passes:

<h2>CatPhotoApp</h2>
<main>

  <p>View more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a></p>

  <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
  <p></p>
  <p></p>

</main>

while this code does not:

<h2>CatPhotoApp</h2>
<main>

  <p>View more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a></p>

  <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">

</main>

Only difference being that the 2 <p> tags present in the original boilerplate have been removed in the version that fails the tests.

This is the line causing the problem as it is looking for > 2 <p>s:

"assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new <code>p</code> element around your <code>a</code> element.');",

I think we can solve this just by adding (there should be at least 3

tags total) to the same test case's message as @Margaret2 pointed out.

I think we can open this up to beginners only to solve the problem in beta, but would like to hear @raisedadead's input first before doing so since I am unsure how this would be solved in prod.

[raisedadead]

@no-stack-dub-sack thanks for the tag.

For fixes to production website (freecodecamp.com), you could open a PR against backup/staging, but keep in mind that we are keeping such changes only for critical show-stopper issues (something that breaks the site for all users alike or security issues, etc.), and may or may not be fixed in staging already.

Any changes to codebase should be pushed to staging first and if above is valid too, to backup as well after confirming.

Also note, that changes to backup branches are likely to be overwritten when beta, is shipped.
If the change is not present on staging and it's not a show-stopper, then we should be making a PR against staging instead, so that it's guaranteed to be present in the codebase even in the future, when we push beta to production.

Now coming, to your specific case, I can confirm that issue exists on the staging site too but is not a show-stopper. So this should be tagged for opening a fix against staging only.

[no-stack-dub-sack]

@raisedadead thanks! You answered all of my questions, and that totally makes sense!

I think this could also be first timers only since it's a pretty easy fix - the specific task to change this test case from:

"assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new <code>p</code> element around your <code>a</code> element.');",

to:

"assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.');",

Please see the Contributing Guide or ask if you have any questions!

[infinityl00p]

hi @no-stack-dub-sack, first-timer here! If its okay with you i'd like to take on this issue :) 💯

[infinityl00p]

hi @no-stack-dub-sack, i followed the guidelines and created a PR. :)

[no-stack-dub-sack]

@infinityl00p Great! Let me check it out

[ghost]

Oops, I realized was bit late in the party. I didn't realize the PR was made for this, feel free to close mine if earlier PRs fixes the issue.