Bug in Question : Create a Horizontal Line Using the hr Element

Tell us what’s happening:

Hello

there is a small bug on the page
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element/

It prevents from passing right the exam.

The Error: when it is done correctly, an error shows:
“The hr tag should come between the title and the paragraph.”

but the solution is right and should pass.


Investigating the issue, I have found in the following file the test condition:

https://learn.freecodecamp.org/path---responsive-web-design-applied-visual-design-create-a-horizontal-line-using-the-hr-element-77f07da18d78a12ddde9.js

Here is the bug in the RegEx:
Line 17

                        testString: "assert(code.match(/<\\/h4>\\s*?<hr(>|\\s*?\\/>)\\s*?<em>/gi), 'The <code>hr</code> tag should come between the title and the paragraph.');"

So the RegEx will validate the following, which is wrong:


The Solution:

File :: https://learn.freecodecamp.org/path---responsive-web-design-applied-visual-design-create-a-horizontal-line-using-the-hr-element-77f07da18d78a12ddde9.js

Line 17 :: testString: “assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?

/gi), ‘The hr tag should come between the title and the paragraph.’);”

Your code so far


<style>
  h4 {
    text-align: center;
    height: 25px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google Alphabet</h4>
      <hr />
      <em>
      <p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
    </div>    
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element/

1 Like

It was fixed on github but not yet here on the website:
fix(challenges): fix test in hr challenge #189

1 Like

I am quite inexperienced at programming but I have done the first 435 challenges. I was wondering why this challenge (Create a Horizontal Line Using the hr Element) worked fine when I did it but now is not working (I have just tried it again and I get the spurious error message: “The hr tag should come between the title and the paragraph.”

It seems unlikely that the challenge would have been altered if it was working fine so why would it have been altered? Alternatively if it was not altered what other reason could be causing it to fail now when it was working before?