Run Test feature in first project seems to be all over the place

I am completing the first certification which is, “ Build a Survey Form”
I ran the test and it said I had one error. It was a spelling error for the “min” input attribute I wrote as “mine”, so it said there was no “min” attribute. That made sense. I fixed the error and ran the test again. This time it says I have errors all over the place. I checked where it says I have errors and there dont seem to be any. It says I have almost 75% errors when previously it only selected one.

Please help
Thank you

It would help if you posted your code with the challenge link so we can see the errors

I hope this is how its done!

I realize it is not error free of course, but some of the errors the test told me make no sense.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<head>
  <html lang=en>
  <meta charset="utf-8">
  <title>Hair Salon Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="title">Hair Salon Form</h1>
  <p id="description">Please fill out this form so we can better assist you :)</p>
    <form id="survey-form">
      <fieldset>
        <label id="name" for="name">Enter your name (last, first):</label><input placeholder="Last Name, First Name" id="name" type="text" required>
        <label id="email" for="email">Enter your Email:</label><input placeholder="Email" type="email" id="email" required>
        <label for="number" id="number">Enter your mobile number:</label><input placeholder="Mobile Number" type="number" max="10" min="10" id="number" required>
      </fieldset> 
      <fieldset>Which stylist would you like to work with?
        <label for="Francis" class="test"><input type="radio" name="stylist" id="Francis" class="names" checked value="francis">Francis</label>
        <label for="Katia" class="test"><input type="radio" name="stylist" id="Katia" class="names" value="katia">Katia</label>
        <label for="Barbra" class="test"><input type="radio" name="stylist" id="Barbra" class="names" value="barbra">Barbra</label><br>
        What would you like us to do for you?<br>(choose as many as you like, or send us your desired hair and current hair as an image):
        <label for="color"><input type="checkbox" class="goal" name="goal" value="color" id="color" value="color" checked>Coloring</label>
        <label for="extensions"><input type="checkbox" class="goal" name="goal" value="extensions" id="extensions">Extensions</label>
        <label for="curling"><input type="checkbox" class="goal" name="goal" value="curling" id="curling">Curling</label>
        <label for="cut"><input type="checkbox" class="goal" name="goal" value="cut" id="cut">Cutting</label><br>
        <label for="current">Upload a picture of <strong>your</strong> hair: <input id="current" type="file" name="current"/></label><br>
        <label for="desired">Upload a picture of <strong>your desired</strong> hair: <input id="desired" type="file" name="desired"/></label>
      </fieldset>
      <fieldset>
        <label>How often do you wet your hair?</label>
          <select id="dropdown" class="dropdown">
            <option value="1">1-2 times a week</option>
            <option value="2">3-4 times a week</option>
            <option value="3">Everyday</option>
            <option value="4">Once every two weeks</option>
            <option value="5">Twice a month</option>
          </select>
        <label>Tell us about your hair routine:</label><textarea id="routine" class="routine" placeholder="Weekly or daily routine"></textarea>

      </fieldset> 
      <input type="submit" id="submit"><br>
      </form>
</body>
</html>
/* file: styles.css */
body {
  background-color: #041C08;
  color: white;
  font-family: serif;
  width: 100%;
}

h1, p {
  text-align: center;
  margin-top: 20px;
  text-shadow: 2px 2px black;
}

label {
  display: block;
}

input, select, textarea {
  width: 100%;
  margin: 10px 0 10px 0;
  min-height: 2em;

}

input, textarea{
  background-color: #031406;
  color: white;
}

textarea {
  min-height: 8em;
}

.dropdown {
  max-width: 150px;
}

fieldset {
  border: none;
  border-bottom: 3px #B87333 solid; 
  padding-top: 20px;
  padding-bottom: 20px;
  
}


form {
  width: 60vw;
  margin: 0 auto;
  height: 2em;
  max-width: 500px;
  min-width: 300px;
  padding-bottom: 2em;
}

.names {
  width: unset;
  margin-right: 0.75em;
  vertical-align: middle;  
  }
  

  .goal {
  width: unset;
  margin-right: 0.75em;
  vertical-align: middle;  
  }

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1em;
  background-color: #031807;
  border-color: #B87333;
  max-width: 100px;
  min-width: 100px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

It looks like you have a lot of duplicate ids in your html and it is confusing the tests.

For example you have this

You will need to remove the first id="name" from the label element. The id should be for the input only.

You will need to remove the other duplicate ids you have.

That should resolve the issues you are having with the tests

1 Like

Yea right now I am making the IDs in the label elements as id=name-label id=“email-label” etc

Should that do it?

yes those are the correct id names for the labels

IT WORKED
THANK YOU SO MUCH

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.