Survey project suggestion

Hellow campers,

I have just started my survey project and this is where i am stuck and i have no idea on how to go throug. I would need your suggestion please.

What helped me allot was looking at other peoples work to get ideas and inspiration. You have everything you need, you just have to think about your layout and how you want to space things.


Exactly what @gabeskates has said. What sort of a layout are you looking to build? Your HTML is very very close to complete, only a few small suggestions:

  • Wrap your radio buttons in some sort of element, whether a div or (preferred) a fieldset. Doing so, they’ll be treated as a single unit, allowing easy positioning of them as a block.

  • Some of your labels are separate from the inputs, with a for= attribute defined on them, while others wrap. And you’re wrapping the right ones: checkboxes and radio buttons work well with wrapped labels. But do it on the rest (you’re missing about half the checkboxes).

Once you’ve got that done, you can start smacking around the CSS. That’s really the time you get to PLAY!

I took your code and forked it, and then made three simple CSS changes: I added a grid layout to the form, a width to all textual inputs, and a width to the submit button. Rather than show you the code, necessarily, I’ll show you a snapshot, maybe get you thinking:


1 Like

i like it. I have delated all the css codes and i will go back to it after finishing with the small html parts remained. Thank you alot

NOOOO!!! Lol

You didn’t need to delete your current CSS, that was a pretty solid starting point. If you are interested in moving it toward what I’d built, I’ll gladly help walk you through the steps between what you have and what I built.

They’re VERY tiny steps, and maybe five of them. :wink:

the css codes are still there i hope it kinda improves

So what do you want for basic layout? Two-column, similar to what I’d showed?

yes thats what i want

One thing, remove the div wrapping the form. It serves no useful purpose whatsoever. put the id=survey-form on the form itself, it will render EXACTLY the same, but without the pointless nesting.

Okay, so have you encountered CSS grids yet? I used a simple two-column grid to define that. To do so, I added a couple lines to your #survey-form CSS:

display: grid;
grid-template-columns: /* Here you define what you want the column widths to be */

To keep it flexy and responsive, I used fr, which are "some portion of the available space. So if I’d made two columns like this:

grid-template-columns: 1fr 1fr;

Then I’d have two equal columns. But that’s not what we want here, instead we want the left to be maybe a third of the available space, and the right to be two-thirds. A rule to do something like that might look like:

grid-template-columns: 1fr 2fr;

That says “take the available space and divide it into three equal parts (1fr+2fr), then assign one to the first column, and two to the second.”

Start with that, see where you get.

Hi @Abdi1
It looks like you might benefit from the FreeCodeCamp Test Suite. This is a program that shows you the requirements and which ones have passed or not. Here’s how to add it:

  1. Click on “Settings”
  2. Choose “Javascript”
  3. Find “Add External Scripts/Pens”. Find the first open slot and paste in
  4. Click Close
  5. You can now click the FCC Test Suite button
  6. Choose “Survey Form” in the drop-down
  7. Click “Run Tests”
  8. Click on 59%20AM to see a detailed view of which tests worked
  9. You’ll see a checklist like this:

Hope this helps!

am there now it has some changes

right thank you i can see i have passed 13/17

I think your email and name element needs to be required.
I think they’re also looking for a number input, not tel.

More info in the Survey Form test details window.

make that css rule grid-template-columns, rather than `grid-template-column". You’ll see a big change. :wink:

yes i have corrected them well there

type='tel' is perfectly okay, per the MDN. It’s a type defined for telephone numbers. Neat bit is, you can actually include a regex pattern. I may start using this one more.

awesome i had the same problem of writing column instead of columns in the challenges

1 Like

True, but the tests require a num input, it seems.

1 Like

Crud-monkeys, you’re right. sigh.

Notice how your select element is being pushed into the left column? It has no element before it, whether a label or a p, to tell what its purpose is.