CodePen.io link: https://codepen.io/pen?template=qBgMjqr
This is the certification project of freeCodeCamp.
This is one of the required projects to earn certification.
For this project, you will build a survey form to collect data from users.
Objective: Build an app that is functionally similar to https://survey-form.freecodecamp.rocks
User Stories:
- You should have a page title in an
h1`` element with an
idof
title``` - You should have a short explanation in a
p
element with anid
ofdescription
- You should have a
form
element with an id 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 with
id
ofsubmit
to submit all the inputs
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
Note: Be sure to add <link rel="stylesheet" href="styles.css">
in your HTML to link your stylesheet and apply your CSS