Survey Form - Build a Survey Form - Completion Percentage

HTML-CSS
1

Tell us what’s happening:
Hello! So I just successfully completed this assignment, but it shows it’s only 20% complete. I was wondering if it’s because it’s 20% of the projects required to get the certification or if there’s anything specific that I need to accomplish on my CSS to get to 100% completion.

Thank you!

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <title>freeCodeCamp Survey Form</title>
   <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <h1 id="title">freeCodeCamp Survey Form</h1>
     <p id="description">Thank you for taking the time to help us improve the platform</p>
     <form id="survey-form">

       <label id="name-label">
         Name
         <input type="text" id="name" placeholder="Enter your name" required/>
         </label>

       <label id="email-label">
         Email 
         <input type="email" id="email" placeholder="Enter your Email" required/>
         </label>

       <label id="number-label">
         Age(optional)
         <input type="number" id="number" min="13" max="120" placeholder="Age">
         </label>

<label id="dropdown-label">
 Which option best describes your current role?
 <select id="dropdown">
   <option>Select current role</option>
   <option>Student</option>
   <option>Full Time Job</option>
   <option>Full Time Learner</option>
   <option>Prefer not to say</option>
   <option>Other</option>
 </select>
 </label>

 <fieldset>
   <legend>Would your reccomend freeCodeCamp to a friend?</legend>
   <label><input type="radio" name="referral" value="1">Definitely</label>
   <label><input type="radio" name="referral" value="2">Maybe</label>
   <label><input type="radio" name="referral" value="3">Not sure</label>

   </fieldset>
 
 <fieldset>
   <legend>What would you like to see improved? (Check all that apply)</legend>
   <label><input type="checkbox" value="1">Front-end projects</label>
   <label><input type="checkbox" value="2">Back-end projects</label>
   <label><input type="checkbox" value="3">Data Visualization</label>
   <label><input type="checkbox" value="4">Challenges</label>
   <label><input type="checkbox" value="5">Open Source Community</label>
   <label><input type="checkbox" value="6">Gitter help rooms</label>
   <label><input type="checkbox" value="7">Videos</label>
   <label><input type="checkbox" value="8">City Meetups</label>
   <label><input type="checkbox" value="9">Wiki</label>
   <label><input type="checkbox" value="10">Forum</label>
   <label><input type="checkbox" value="11">Additional Courses</label>
   </fieldset>

   <label id="comments-label">
     Any comments or suggestions?
     <textarea placeholder="Enter your comment here..." rows="20"></textarea>
     <input type="submit" id="submit" value="Submit">
       </form>
     </body>
 </html>

/* file: styles.css */
body {
 background-color: #1b1b32;
 color: white;
 background-image:
     linear-gradient(rgba(136, 136, 206, 0.7), #1b1b32cc),
   url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
 font-family: 'Poppins', sans-serif;
 margin: 0 40px;
}

#title, #description {
margin: 0 auto;
text-align: center;
}

#title {
 font-weight: 500;
 margin-top: 2.5rem;
}

#description {
 font-size: 1.5em;
 text-shadow: 2px 2px 4px #00000077;
 font-style: italic;
 font-weight: 300;
}

#survey-form {
 background-color: #1b1b32aa;
 margin-top: 32px;
 padding: 32px;
 border-radius: 8px;
}

#name-label, #email-label, #number-label, #comments-label, #dropdown-label, legend {
 font-size: 24px;
 display: block;
 margin-top: 24px;
}

label {
 font-size: 24px;
 display: block;
} 

#name, #number, #email, select {
 width: 100%;
 height: 32px;
}

input[type="radio"], input[type="checkbox"] {
vertical-align: middle;
}

fieldset {
 border: none;
 padding: 0;
 margin-top: 24px;
}

input[type="submit"] {
 margin: 24px auto;
 display: block;
 height: 32px;
}

textarea {
 width: 100%;
}


   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Hi there. The 20% is how far you’ve come till you get the certification, and is not based on individual challenges alone.

1 Like
3

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