Survey Form - Build a Survey Form

I’m new to this so I’m sure there’s a lot wrong with my code but i wanted to make this the best I possibly can, I’m not sure if I was meant to make the exact same survey as freecodecamp but I made my own with the same functionality and I used their instructions to do it, but when I run the code literally nothing happens, it doesn’t show me what’s wrong or right in the checklist and nothing changes and I’m not sure what to do.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <h1 id="title">Planet cafe Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the cafe</p>
  </head>
  <body>
    <div class="survey">
<form id="survey-form">
  <br>
  <label id="name-label">
    Enter your name:
    <br>
    <input class="emails" placeholder="Your name..." required id="name" type="text"/>
    <br>
    <br>
    </label>
<label id="email-label">
  Enter your email:
  <br>
  <input class="emails" placeholder="Your email..." required type="email" id="email"/>
  <br>
  <br>
  </label>
<label id="number-label">
  Enter your age:
  <br>
  <input class="emails" placeholder="Your age..." min="13" max="111" type="number" id="number"/>
  <br>
  <br>
   </label>
    <label>
      How much time do you spend here?
      <br>
  <select id="dropdown">
    <option value="">(select option)</option>
    <option value="1">0-2 hours per day</option>
    <option value="2">3-5 hours per day</option>
    <option value="3">6-8 hours per day</option>
    <option value="4">other</option>
    </select>
    <br>
    <br>
    </label>
    <label for="yes">
            Do you go just for the wifi?
            <br>
      <input id="yes" type="radio" class="inline" name="answer"/>Yes
      <br>
      <input id="no" type="radio" class="inline" name="answer"/>No
      <br>
      <br>
      </label>
      <label for="improvement" name="improvement">
        What improvements would you like to see?
        <br>
        <input value="" type="checkbox" id="improve" class="inline"/>
        None
        <br>
        <input value="1" type="checkbox" id="improve" class="inline"/>
           Better quality coffee
           <br>
         <input value="2" type="checkbox" id="improve" class="inline"/>
         Faster internet speeds
          <br>
           <input value="4" type="checkbox" id="improve" class="inline"/>
           More variety of food options
           <br>
           <br>
           </label>
          Any other comments?
          <br>
           <textarea id="additional-comments" rows="3" name="additional-comments" cols="30" placeholder="Additional comments..."></textarea>
            <br>
            <br>
             <input class="stone" type="submit" value="submit"/>
           </div>
  </body>


</form>
  </html>
/* file: styles.css */
body {
 background-image: url(file:///C:/Users/xhant/Downloads/134101981-internet-cafe-logo-design-vector-illustration.webp);
 display: block;
 width: 100%;
 font-size: 25px;
 background-attachment: fixed;
 background-position: center;

}
.survey {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
  background: rgba(222,184,135,0.6);
  border: solid white;
  border-radius: 10px;
  color: rgb(255,100,50);
}

h1,p {
  font-family: sans-serif;
  text-align: center;
  color: brown;
}
select {
  width: 100%;
  height: 40px;
  background-color: black;
  border-radius: 10px;
  border: solid white;
}

textarea {
  background-color: black;
  width: 100%;
  height: 100px;
  border-radius: 10px;
}
img {
  display: block;
  background-repeat: no-repeat;
}
.emails {
  width: 100%;
  height: 40px;
  background-color: black;
  border: solid white;
  border-radius: 10px;
}
.stone {
  background-color: brown;
  width: 100%;
  height: 50px;
  border-radius: 10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 OPR/91.0.4516.72

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

i copied your code into the challenge area and I can see both the preview and the errors.
What is it that you have tried that is not working?

my problem is that when i do it, nothing happens.

never mind I figured it out, it seems it doesn’t work when I use opera gx but when I switch to Firefox or chrome its fine, thanks.

1 Like

sometimes the darkmode add-ons mess with the tests.
(I mention it only because I noticed the dark background in your screen shot)

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