I completed the "Survey Form" project; what's your opinion?

Code Feedback
1

Hey guys, I just completed my 2nd projects and I would like to hear your opinion. Positive or negative feedback is appreciated :slight_smile:

Flexboxes wouldn’t behave in an expected way on Chrome and Edge but they worked fine on Firefox. I came up with the solution to use inline-flex on the elements instead and now it seems to work on all 3 browsers.
The only issue left is the font size. I don’t understand why but Firefox displays the font slightly bigger and that messes up one of the fieldsets :face_with_raised_eyebrow:

Anyways, I hope I’ll find a fix for this soon :wink:

Here’s my codepen:

2 Likes
2

really nice especially the picking the color part, not a big fan of the colors of the site but thats my opinion haha

3

Thanks for your feedback!
My main objective with the colors was to find something that fits a dating survey (pink lol) and have colors that match.
Maybe I’ll revamp them a bit so they don’t seem too saturated ^^

4

Just add the test suite so we can see the tests passing :smiley:

Btw. picking the color is awesome :laughing:

– What’s your favorite color?
– #4287f5
– Well, I’m more of a rgb(66, 245, 69) type… I don’t think it’s going to work out for us.

1 Like
5

Hey there, thanks for your opinion :smiley:
I’ve added the test suite, now you should be able to see the tests passing :wink:

1 Like
6

Your form looks good @lcrosszeria13. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • Mentioning because the tests script is JS. It will not work if placed in the head element. It should be right before the closing body tag. (Codepen is forgiving which it why it works here.)
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should be aware of and address.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • Change the cursor to a pointer when hovering over the submit button.
1 Like
7

Wow, thank you so much. This is some very constructive feedback :smiley:
I’ll try my best to get this form error-free. The W3C validator seems to be very reliable!

EDIT:
I’ve implemented all your suggestions and corrected errors, thanks again :slightly_smiling_face: