Freecodecamp: Nest an Anchor Element within a Paragraph

Created on 9 Oct 2015  路  16Comments  路  Source: freeCodeCamp/freeCodeCamp

I dont know what to do. It's saying that i need to add space after "view more". But i already added it
11

Most helpful comment

nesting

I am new at it but above is what I did to clear the stage

All 16 comments

The test is not passing after you did that?

@srikarsams thanks for posting this issue!
This is caused by the way we are checking if your p element contains the text "View more ". The test is as follows: $(\"p\").text().match(/^\\s*View\\smore\\s/gi). $("p").text() returns concatenated text contents of all p elements, in this case:
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.View more cat photos.
Note that "View more cat photos" is at the end.
Next we use a regular expression to check if your p element begins with "View more ". This is done because one were able to pass the test with this: <p><a href="http://www.freecatphotoapp.com">cat photos</a>View more </p> which is incorrect. So, what is the problem. $("p").text() doesn't begin with "View more " that is why you can't pass that test. If you move this p element before "Kitty inpsum dolor..." paragraph you'll be able to pass the test.
Also this is from the tests' section:

Your a element should be nested within your new p element.

So the test wants you actually to put your existing a element in a new p element only and not move that new p element anywhere.
Hopefully this clarifies the issue. I'll let it open for a while, waiting for suggestions.


Please review the Guidelines for Contributing, thank you!.


Closing this issue. Feel free to reopen if you still experience problems, thanks.

Below is my HTML code, but I'm also observing the same issue, though I moved the new p element to top.

CatPhotoApp

cat photos

View more cat photos

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the

Below is the screen shot,
screenshot from 2015-12-02 08 23 01

Your a element should be nested within your new p element. -please help

I was getting this same issue because I was creating a new href element when you're actually supposed to use the existing href in the code already, not create a new one. I just didn't read close enough.

screen shot 2016-03-10 at 3 04 01 pm
what am i doing wrong

Remove the second link for cat photos. You are only suppose to have a single link. If you read closely the instructions say to use the current link, not make a new one.

nesting

I am new at it but above is what I did to clear the stage

Thank you ckbrewer15, you're the man bro!!!

removing the other link like ckbrewer15 said fixed the issue!!!

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;
}

CatPhotoApp

View more cat photos

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

<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>

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

<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">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>
`


CatPhotoApp

View more cat photos

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

`

CatPhotoApp

cat photos

A cute orange cat lying on its back.

View more cat photos


Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.


Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

Was this page helpful?
0 / 5 - 0 ratings