Certification Project-Build a Survey Form

HTML-CSS
1

I am having a problem completing this project. My work is almost done, but I can’t make the radios and checkbox with their corresponding text in one line and align left.

I’ve tried to change my coding according to GPT’s suggestion but nothing changed. Could anyone help me figure this out? Thanks a lot. :blush:

The test page link:https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form

MY HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Xinyu's Survey Form</title>
    <link rel="stylesheet" href="SurveyForm.css"/>
</head>
<body>
    <h1 id="title">Xinyu's Survey Form</h1>
    <p id="description">Thank you for taking the time to help me improve my works</p>
    <form id="survey-form">
        <fieldset>
            <label for="name">Name<input id="name" type="text" placeholder="Enter your name" required/></label>
            <label for="email">Email<input id="email" type="email" placeholder="Enter your email" required></label>
            <label for="age">Age(optional)<input id="age" type="number" min="10" max="120" placeholder="Age"></label>
        </fieldset>
        <fieldset>
            <label for="dropdown">How did you hear about me?
                <select id="dropdown" name="dropdown">
                    <option value="">(select one)</option>
                    <option value="1">Xinyu's Wechat Official Account</option>
                    <option value="2">Curionesty or KiidSchool</option>
                    <option value="3">Acquaintance</option>
                    <option value="4">Other</option>
                </select>
            </label>
            <label for="recommend">Would you recommend my works to a friend?</label>
            <label class="radio-label" for="Definitely">
                <input id="Definitely" name="recommend-option" type="radio">
                Definitely
              </label>
              
              <label class="radio-label" for="Maybe">
                <input id="Maybe" name="recommend-option" type="radio">
                Maybe
              </label>
              
              <label class="radio-label" for="No">
                <input id="No" name="recommend-option" type="radio">
                No
              </label>
              <label>Which platform do you prefer to use?</label>
              <label class="checkbox-label" for="prefer-answer">
                <input value="1" id="Wechat Official Account" type="checkbox">
                Wechat Official Account
              </label>
              
              <label class="checkbox-label" for="prefer-answer">
                <input value="2" id="Telegram Channel" type="checkbox">
                Telegram Channel
              </label>
              
              <label class="checkbox-label" for="prefer-answer">
                <input value="3" id="Matters" type="checkbox">
                Matters
              </label>
            <label for="comment">Any comments or suggestions?
                <textarea id="comment" name="comment" rows="3" cols="30" placeholder="o(=•ェ•=)m"></textarea>
                       </label>
        </fieldset>
        <input class="submit" id="submit" type="submit" value="Submit" />
        </form>
</body>
</html>

MY CSS CODE

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #662a91;
  color: #82bbbc;
  font-family: apple-system, sans-serif;
  font-size: 16px;
}

h1,
p {
  margin: 1em auto;
  text-align: center;
}

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

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #ecdb59;
}

fieldset:last-of-type {
  border-bottom: none;
}

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

.radio-group,
.checkbox-group {
  display: flex;
  align-items: center;
  margin: 0;
}

.radio-group label,
.checkbox-group label {
  margin-left: 8px;
  display: flex;
  align-items: center;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
  margin-right: 8px;
}

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

input[type="checkbox"],
input[type="radio"] {
  margin-left: 0;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  background-color: #774e93d6; 
  color: #82bbbc; 
  border: 0px;
}
.submit {
  background-color: #82bbbc;
  border: 0px;
  width: 150px; 
  height: 40px;
  margin: 0 auto;
  display: block;
}
2

Hey!
I ran your code,you have several unresolved issues. Kindly work on them first cause they’re many.
But one thing I have to highlight,is the external CSS link.

the href should link to the CSS file,which in your case is styles.css and not SurveyForm.css

3

Thanks, but I’ve tried styles.css first and it doesn’t work when I do it in my VScode, so I changed it to SurveyForm.css(the file name) and it linked to HTML file successfully.

4

I dont have time to look over the code, but what steph said is correct when you submit the challenge. styles.css is the css file name the challenge uses. It wouldnt work in vs code unless you named your css file styles.css, but since you named it something else then using styles.css in vs code wont work.

However, when submitting the actual challenge your reference to the css file in your html needs to be changed to styles.css

5

Yes you are right, I do need to change it when I submit my code on Freecodecamp.

6

Hey everyone, I’ve changed some of my code and solved the problem and also other problems. I just finished my project successfully！

1 Like
7

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