Skip to content

I found that putting the attributes of the HTML element in the wrong says "invalid syntax" #7427

Open
justgage opened this Issue · 9 comments

6 participants

@justgage

Challenge Add Placeholder Text to a Text Field has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="http://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 <a href="#">cat photos</a>.</p>

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

<input placeholder="cat photo URL" type="text">

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>

The main problem is this:

this does not work:

<input placeholder="cat photo URL" type="text">

this does:

<input type="text" placeholder="cat photo URL">

Both are perfectly valid html form what I understand.

Also I find it interesting that there's no talk of putting a " />" at the end.

@ltegman
Free Code Camp member

Looks like this regex is too particular about attribute order!

@justgage

If you tell me where the code is I could probably easily fix it.

@justgage justgage closed this
@BerkeleyTrue BerkeleyTrue removed the confirmed label
@justgage

Sorry didn't mean to close it

@justgage justgage reopened this
@alistermada

@justgage The code's in freecodecamp\seed\challenges\01-front-end-development-certification\html5-and-css.json on line 1867.

@jmmarco

Also I find it interesting that there's no talk of putting a " />" at the end.

The <input> is an void tag. It doesn't require an end tag.

@justgage

@jmmarco thanks for the reference. I learned something.

@paycoguy

Would changing the regular expression from

/URL\\s*[\"\\']\\s*\\/?>/gi
to
/\\s*[\"\\']\\s*\\/?>/gi

be a valid fix? Or is this too lenient?

@paycoguy

@justgage are you still working on a fix for this? If not, I can put a fix in.

@justgage

@paycoguy go ahead, I've been busy with school as of late

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.