Freecodecamp: Nest the existing img element within an a element "not working "

Created on 1 Apr 2017  路  8Comments  路  Source: freeCodeCamp/freeCodeCamp

Challenge Turn an Image into a Link has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 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>Click here for cate photos <a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera. "></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>
<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>

discussing

Most helpful comment

The challenge requires the nested image to have the smaller-image class in order to pass the first test.

The upcoming beta got rid of that requirement.

All 8 comments

@Jagwani thanks for the issue. Yes, it appears you have nested an img element within an anchor tag. We could modify the instructions to say you should nest the existing img element within a new anchor tag.

cc/ @freeCodeCamp/moderators my jQuery skills are lacking to come up with a programmatic way of searching through the HTML elements. Or should we just mention to create a new anchor tag.

@erictleung How about using a combination of .find() and .has()? Somewhat like .find("a").has("img").

FFG

The challenge requires the nested image to have the smaller-image class in order to pass the first test.

The upcoming beta got rid of that requirement.

The code isn't triggering like it should and I know it's right because I have a friend who is the lead programmer for a TOP 500 who says it looks fine.

image

@s3csh3n8 this issue has nothing with your problem. by the way, this is the different challenge.
Please use the Help chat room for getting challenge related help.

Happy Coding.

@Manish-Giri I tried a .find() and it didn't work. But I didn't try the .has() yet. If you're able to get it working, feel free to contribute! :smile: If I have time, I'll give it another shot as well.

@erictleung All right! I'll give it a go and see what I can find.

Was this page helpful?
0 / 5 - 0 ratings