This is a solution to the Build a Survey Form FreeCodeCamp Project.
Build an app that is functionally similar to https://survey-form.freecodecamp.rocks. Do not copy this demo project.
- Solution URL: https://github.com/LucLhote/freeCodeCamp-Responsive-Web-Design-Certificate-Project-01-Build-a-Survey-Form-bis
- Live Site URL: https://luclhote.github.io/freeCodeCamp-Responsive-Web-Design-Certificate-Project-01-Build-a-Survey-Form-bis/
- You should have a page title in an
h1
element with anid
oftitle
- You should have a short explanation in a
p
element with anid
ofdescription
- You should have a
form
element with anid
ofsurvey-form
- Inside the form element, you are required to enter your name in an
input
field that has anid
ofname
and atype
oftext
- Inside the form element, you are required to enter your email in an
input
field that has anid
ofemail
- If you enter an email that is not formatted correctly, you will see an HTML5 validation error
- Inside the form, you can enter a number in an
input
field that has anid
ofnumber
- The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser).
- If you enter numbers outside the range of the number input, which are defined by the
min
andmax
attributes, you will see an HTML5 validation error - For the name, email, and number input fields, you can see corresponding
label
elements in the form, that describe the purpose of each field with the following ids:id="name-label"
,id="email-label"
, andid="number-label"
- For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field
- Inside the form element, you should have a
select
dropdown element with anid
ofdropdown
and at least two options to choose from - Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the
name
attribute - Inside the form element, you can select several fields from a series of checkboxes, each of which must have a
value
attribute - Inside the form element, you are presented with a
textarea
for additional comments - Inside the form element, you are presented with a
button
withid
ofsubmit
to submit all the inputs
- You should have an
h1
element with anid
oftitle
- Your
#title
should not be empty. - You should have a
p
element with anid
ofdescription
- Your
#description
should not be empty - You should have a
form
element with anid
ofsurvey-form
- You should have an
input
element with anid
ofname
- Your
#name
should have atype
oftext
- Your
#name
should requireinput
- Your
#name
should be a descendant of#survey-form
- You should have an
input
element with anid
ofemail
- Your
#email
should have atype
ofemail
- Your
#email
should require input - Your
#email
should be a descendant of#survey-form
- You should have an
input
element with anid
ofnumber
- Your
#number
should be a descendant of#survey-form
- Your
#number
should have atype
ofnumber
- Your
#number
should have amin
attribute with a numeric value - Your
#number
should have amax
attribute with a numeric value - You should have a
label
element with anid
ofname-label
- You should have a
label
element with anid
ofemail-label
- You should have a
label
element with anid
ofnumber-label
- Your
#name-label
should contain text that describes the input - Your
#email-label
should contain text that describes the input - Your
#number-label
should contain text that describes the input - Your
#name-label
should be a descendant of#survey-form
- Your
#email-label
should be a descendant of#survey-form
- Your
#number-label
should be a descendant of#survey-form
- Your
#name
should have aplaceholder
attribute and value. - Your
#email
should have aplaceholder
attribute and value - Your
#number
should have aplaceholder
attribute and value - You should have a
select
field with anid
ofdropdown
- Your
#dropdown
should have at least two selectable (not disabled)option
elements - Your
#dropdown
should be a descendant of#survey-form
- You should have at least two
input
elements with atype
ofradio
(radio buttons) - You should have at least two radio buttons that are descendants of
#survey-form
- All your radio buttons should have a
value
attribute and value - All your radio buttons should have a
name
attribute and value - Every radio button group should have at least 2 radio buttons
- You should have at least two
input
elements with atype
ofcheckbox
(checkboxes) that are descendants of#survey-form
- All your checkboxes inside
#survey-form
should have avalue
attribute and value - You should have at least one
textarea
element that is a descendant of#survey-form
- You should have an
input
orbutton
element with anid
ofsubmit
- Your
#submit
should have atype
ofsubmit
- Your
#submit
should be a descendant of#survey-form
- Email - luc.lhote@outlook.com
- Frontend Mentor - @LucLhote
- LinkedIn - Luc Lhote
- freeCodeCamp - @LucLh
- freeCodeCamp Forum - @LucLh