Any feedback on survey form appreciated

Code Feedback
1

Hi Folks, I’m back after having to take an enforced break. Any feedback on my survey form greatly appreciated.

https://codepen.io/ronimac52/full/qQjWBO

2

Hi @ronimac52, it looks good. There are a few things you may want to revisit;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right and then click on the respective ‘Analyze’ link. There are some things in HTML and CSS you may want to clean up. On a side note, while it kinda works most times the double slashes are not a valid way to comment out a line in CSS. Rather, use /* */ for commenting out a line or making a comment.
  • Users are able to select either the checkbox or the label in the allergy part. Do the same in the how likely section. Allow users to click on the label.
  • it’s a nit but if you’ve ever filled out a form on-line you may have noticed that required fields are marked with an asterisk. If a field is not required, remove the asterisk.
  • change the cursor to a pointer when hovering over the submit button.

In the HTML section codepen only expects the code that you’d put between the <body> </body> tags. If you want to add something to the <head> click on the ‘Settings’ button and add it there.

3

Thanks for the feedback Roma,

I didn’t know about those validators. Had a quick look and TBH I’m not sure what errors they are pointing out. I’ll check it out properly and implement your suggestions after the weekend.

1 Like
4

You’re welcome. I’ll explain a little but you’ll be able to see better when you look at it this weekend.

The one error it points out in CSS;
background-color: #333;// rgb(250, 250, 250);
unknown word (
is as I mentioned because of the way you’ve commented out rgb. Your CSS declaration has a property: value; The next thing expected is another property: value; but it’s seeing // which is not a valid word (property). If you remove that and then run the validator again you’ll see it complain about all the others too. And it may be a good idea to clean it up because you have a couple of duplicates in your CSS and a couple of unknown properties.

In the HTML section, codepen only expects the code you’d put between the <body> </body> tags. Just like you don’t include the <style> </style> tags in the CSS section.
If you need to add anything to the <head> (maybe a link to a font family) click on the ‘Settings’ button and add it there.
codepen will give you a warning that the script should appear before but closing body tag which is correct but if you put FCC’s script as the first thing in your HTML section it won’t give you the warning message. That one you can ignore if you choose.

As for the type not being valid in the label element take a look at your label for Age versus your labels for Name and Email.
I think you’ll be able to figure out the others :wink:

Have a good weekend, happy coding!
(I have some things going on this weekend but if you’ve any further questions I’ll reply as soon as I can)

1 Like