Help (Survey Project) -- Edit: My Third survey page

Code Feedback
1

Hey everyone,
I finally completed my first “survey project”. Since it was my first survey page project, I did it with the help of freecodecamp; but… as you can see some problems I have in css (i guess)

Firstly, here is my link : https://codepen.io/ayhanizmir/full/oNbjNmq

Edit: Hello again everyone, after I completed first one, decided to make another page; because I felt that I need more practice… and here is my second page’s link:

Second Survey Page: https://codepen.io/ayhanizmir/full/KKVVaKG

Edit: Hey guys, me again :grin: I wanted to make survey page last time. Actually I made very fast and easy; but I faced some problems…

Firstly: Here is my 3rd survey page: https://codepen.io/ayhanizmir/full/ExPPJro

**Questions: **
1) How can I place the radiobuttons to one below the other? As you can see in my page they are not in the same direction (vertical)

2) How can I separate radio buttons 2 or more column (for less space)

3) In every question (radio-button question) I want it’s not to accept without choice. I add required but it did not work. What sould I do?

4) In html part, after “question-5” they become colorless (just green and yellow) and when I press enter they go 1.5 line. Why?

2

Very good job on your first project.

  1. Check your rule for h1, p {}. The left margin declaration is impacting all paragraphs
  2. Add the follow CSS rule label {display:block;} to force them onto new lines
  3. This is the same as #1. Change your <p> to a <span> and your footer will work like you desire.

Some other things.

  • Check your ids again. Each one should be unique, but you have a couple repeats.
  • <input type="expenses" <— I’m pretty sure you meant =“text”. CodePen is a little lenient and will render your page even if the CSS, JS or HTML isn’t 100% correct, but you should always check it yourself.

NOTE: You have 2 more tests to pass, but they’re very simple and I’m sure you’ll be able to figure those out. If not, just post in this thread and one of us will help you out.

3

Thank you very much
I will edit it again with consideration to your advices.

4

Hello again,
I just made second “Survey Page” and checked with script code. It seems 17/17 :sweat_smile:

Is there a place that we can make it more useful in CSS codes? Unwittingly (even if it doesn’t affect the look), maybe something I did a long way. I want to make myself more practical.

5

Nice job on your second page. Overall, your code looks good. Just two things.

  • You forgot to close out your <form> element in your HTML
  • This isn’t required AT ALL, but you could use shorthand to consolidate some of your rules (example below)
form {
  color: white;
  border-color: black;
  border-width: 0.09rem;
  border-style: solid;...}

can become

form {
  color: white;
  border: .09 rem solid black;..}

Good job!

6

They look okay @ayhanisidici.

  • The first one doesn’t pass all the user stories
  • For both of them, 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 address.
  • Second one, use external styling. Don’t use in-line style
  • First one, don’t use <br> to force line breaks
  • Second one, if you’ve ever filled out a form on-line you may have noticed that required fields are marked with an asterisk. You have fields marked that aren’t required. Remove the asterisk
  • Second page needs to be responsive
    • there are fields that overflow the container on smaller screens
7

Thank you very much both of you. I will keep in my mind. @Roma @JohnJohn

8

guys anyone know how to do things that I mentioned at topic (3rd part)

9

Explain exactly what you mean by this please

10

Hi @Roma
When no one commented, I did as I know; but let me explain as follows.
When I want to position the RadioButtons vertically in the center, an image like this appears

              Button: answer
        Button: answer
                     Button: answer
           Button: answer

You probably understood what I meant (sorry I couldn’t bring it back to the old-wrong looks in codepen).

Another question, let’s say I want to sort these radiobuttons in 2 columns. How can I do it?

11

I just did a quick Google search and came up with this sample for you. Probably easier to do with Bootstrap but I don’t know if you’re familiar with that yet.

12

@Roma This is exactly what I was looking for. Thank you very much

13

hi @ayhanisidici,

sorry to add what Roma said, if you haven’t familiar with bootstrap as im not yet, you might take a look to what i’ve done to have 2 columns radio button, with plain css and html.

https://codepen.io/sobadrdb/full/YzyRgmo

1 Like
14

Wow, it is actually good idea… 2 radio list side by side. Thank you @sobadrdb