I’ve restarted freecodecamp to get a good review and I’ve gotten a lot more experience with programming. I’ve made this survey form:
Here is the Github link:
https://conner1115.github.io/survey-form/
Thanks to @usaspiff for helping me fix the thirteenth test.
Any and all feedback is appreciated.
Thanks.
It looks like the user story #13 doesn’t pass because the radio buttons “Yes”, “No” and “Maybe” in the “Would you recommend freecodecamp to a friend?” section don’t have a value input, only a type and a name.
Try to add a value input set to their field for each one and see if it works.
You can check out this link if you are stuck:
https://www.w3schools.com/tags/att_input_type_radio.asp
Good luck!
1 Like
Thank you, @usaspiff
Now a github view is available.
Hey!
Your page looks good!
It’s responvise
-
Only ‘Would you recommend freecodecamp to a friend?’ answers have some problems on smaller screens. I would use flex in this case, I have no simple idea for you without it yet, not enough experience
-
Try to use ‘Tidy’ option, it’s easier to read code if you do that:
-
I don’t think using <br>
for spacings is a good idea
You can use container like <section></section>
or just <div class="container"></div>
and then add margins to get the same result. Use any approprierate name for that class
-
That <span>....................</span>
from there:
<input type = "checkbox" value = "0">HTML <span>....................</span>
CSS<input type = "checkbox" value = "1"><br>
-
can be replaced by sth better. Try using classes: class="checkbox-left"
and class="checkbox-rigth"
and then add some margins to them
You could also use CSS Flex / Grid
-
Add more space for the footer, it collides with submit button on small screens
Your page is really well done so far
Happy coding!
1 Like
Okay. I’ll try my best to do what you asked. The checkboxes had to be aligned that way with invisible rows of periods because I don’t really know any other way to align them. I’ve tried like fifty times and failed every single time except when I did it like that.
I’ll try using section tags to space things out.
Yeah. Responsiveness was one of my enemies when I started coding. I always resize the editor to see if it works. I will tidy my code.
Thanks for the feedback.
1 Like
I did it that way
It’s my own project. I could fix some things there, but maybe later
What important is this:
<div class="grid_wrapper">
<div>
<input type="checkbox" id="action" value="on">
<label for="action">Action</label>
</div>
<div>
<input type="checkbox" id="adventure" value="on">
<label for="adventure">Adventure</label>
</div>
...
</div>
and this:
.grid_wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr) );
}
Just set different values in minmax() function and use margins or max-width
attribute
For reference:
repeat() on MDN
CSS Grid guide