Coding Survey Form. Please give feedback

Coding Survey Form. Please give feedback
0
#1

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.

#2

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
#4

Thank you, @usaspiff

Now a github view is available.

#5

Hey!
Your page looks good! :clap:
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 :sweat_smile:

  • Try to use ‘Tidy’ option, it’s easier to read code if you do that:

    TIDY
    TIDY1300×598 81.8 KB

  • 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 :star_struck:
Happy coding!

1 Like
#6

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.
:smiley::smiley::grin::grin:

1 Like
#8

I did it that way
It’s my own project. I could fix some things there, but maybe later :stuck_out_tongue:
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