Survey Form - Build a Survey Form

HTML-CSS
1

When I click on run tests, it runs endlessly. Please help!

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"/>
    <title>Survey Form</title>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
  </head>
  <body>
    <div>
      <form id="survey-form">
        <fieldset>
          <legend>Introduce yourself</legend>
          <label id="name-label">Name
            <input id="name" type="text" placeholder="Write name here" required>
          </label>
          <label id="email-label">Email
            <input id="email" type="email" placeholder="Write email here" required>
          </label>
          <label id="number-label">Age (optional)
            <input id="number" type="number" min="10" max="50" placeholder="Write age here" required>
          </label>
        </fieldset>
        <hr>
        <fieldset>
          <legend>Feedback</legend>
          <label>How did you hear about us?
            <select id="dropdown">
              <option>Web</option>
              <option>Friend</option>
              <option>TV</option>
            </select>
          </label>
          <label for="positive negative">Would you recommend us?
            <input id="positive" type="radio" name="advice">Yes
            <input id="negative" type="radio" name="advice">No
          </label>
          <label for="more less">How can we improve?
            <input id="more" name="more" value="increase" type="checkbox">More content
            <input id="less" name="less" value="decrease" type="checkbox">Less content
          </label>
        </fieldset>
        <hr>
        <fieldset>
          <legend>We are listening!</legend>
          <label for="comments">Comments: <textarea id="comments" name="comments" rows="2" cols="34" placeholder="Type comments here"></textarea>
          </label>
          <button type="submit" id="submit">Submit</button>
        </fieldset>
      </form>
    </div>
  </body>
</html>

/* file: styles.css */
body{
  background-color: orange;
  font-family: Serif;
}

div{
  background-color: red;
  font-size: 15px;
  width: 80%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  padding-top: 30px;
}

h1{
  text-align: center;
}

p{
  text-align: center;
}

legend{
  text-align: center;
  box-shadow: 5px 5px 5px red;
}

label{
  display: block;
  margin: 0.5rem 0;
}

textarea{
  vertical-align: middle;
}

hr{
  height: 5px;
  background: linear-gradient(90deg, rgb(255,0,0), rgb(0,255,0));
  border-color: black;
  opacity:0.5;
}

button[type="submit"]{
  margin-left: 150px;
  margin-top: 10px;
  margin-bottom: 5px;
  height: 2em;
  font-size: 1.1rem;
}

form{
  background-color: yellow;
  border: 5px solid black;
}

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:

2

Your code is not passing because one test is failing:

All your radio buttons should have a value attribute and value.

Fix this and you will have completed the project!

3

Thank you! This was very helpful. I added the value attribute to the radio buttons and was able to run the tests.

The console now shows 3 errors:

  1. All your radio buttons should have a value attribute and value.
  2. Every radio button group should have at least 2 radio buttons.
  3. Your #name-label should be a descendant of #survey-form.

How is this possible, considering the html already has 2 radio buttons and all label elements are descendants of the form element?

4

Your code passed all tests for me when I submitted it with the value attributes added to these radio elements.

5

I accidentally changed the name attribute, which is why it was showing the errors. It’s working now!

Thank you for the speedy reply!

6

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