Re did Survey Project - Thoughts?

Hey guys, could I get a grading on my code here?

Codepen: https://codepen.io/dobs93/pen/mdeamBq
Web link: https://nervous-visvesvaraya-66c143.netlify.app/

A couple times I used Flexbox when in doubt for example for the radio and checkbox buttons their parent was already a flex container and displaying the items in a row. However I wanted the radio buttons and checkbox buttons side by side with the text ( in a column ) so I made a new flex container for them. Is that acceptable?



    <div class="radio">
                    <div class="radio1">
                        <input type="radio" name="question" id="definitely" value="definitely">
                        <label for="definitely">definitely</label>
                    </div>
                    <div class="radio2">
                        <input type="radio" name="question" id="maybe" value="maybe">
                        <label for="maybe">maybe</label>
                    </div>
                    <div class="radio3">
                        <input type="radio" name="question" id="not-sure" value="not-sure">
                        <label for="not-sure">not-sure</label>
                    </div>
                </div>


3 Likes

Great work. Just one thing…

You have the main form width at 50%. Add a media query to of max width 560px and set the same element to 100% or 90% and you’ll see how your form gets fit to the size when you access it in mobile.

1 Like

hi @Dobs,
its nice what you’ve done.:+1:t2:

i try to change the width inside main form element using vw instead of %
width: 90vw;

it look good on my mobile browser.
just a thought.

2 Likes

Thanks for the replies.

Can anyone also answer why my dev tools does this to me? When I click a mobile device its just a zoomed in view to the top left. I can’t work with it like this.

1 Like

Great, I just did that. That really makes a nice difference. Appreciate that tip. Fills the page way better now.

1 Like

Hey, thank you.

I tried that as well. Works nicely. Any advantage doing it that way?

Between the cursor icons, and the word “ELEMENTS”, there this icon that represents a phone and a tablet. You must have it active. Deselect it and it will go to normal.

1 Like

Try this:

@media (min-width:01px) and (max-width:560px) {
  
main {
  max-width: 100%;
}
  
  #survey-form {
  width: 100%;
  }
}
1 Like

Thanks that seemed to work with dev tools.

I tried that last code you provided but it made my survey more narrow. I prefer the max-width: 90%. It fills the iphone’s page nicely. Why that last bit you posted? Just a different way to do it?

I don’t use max width to direct the element. I only use max width to specify the media query. I only put it there because that’s what you’re using.

1 Like

When i open your pen with my phone, the form continues to be narrow, not at 100%. But Iif you like it that way and it fits your iPhone, excellent then.

1 Like

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

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects. (Yes, I know all the tests pass)
  • 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 coding errors you should address.

As an aside, the way your code is now with duplicate id's is a good example of why an id should be unique within the document. Bring up your form and click on the the first label of your checkboxes. That is, click on ‘HTML/CSS’ not the checkbox and notice that ‘definitely’ in your radio buttons gets selected. Then, click on the next label, ‘JavaScript’ and notice the ‘maybe’ radio button is selected.

1 Like

Thanks for all the help! Means a lot!

Thanks for this!

I am going to keep the test script for next project. I wasn’t sure if i should or not when sharing the project.

That W3C site is amazing!! saving it for sure, I can see the multiple ID’s now. Going to watch for this in the next project.

1 Like