The project 'Build a Survey Form' from FreeCodeCamp.
Objective: Build an app that is functionally similar to https://survey-form.freecodecamp.rocks
User Stories:
- You should have a page title in an
h1element with anidoftitle. - You should have a short explanation in a
pelement with anidofdescription. - You should have a
formelement with anidofsurvey-form. - Inside the
formelement, you are required to enter your name in aninputfield that has anidofnameand atypeoftext. - Inside the
formelement, you are required to enter your email in aninputfield that has anidofemail. - 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 aninputfield that has anidofnumber. - 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
minandmaxattributes, you will see an HTML5 validation error. - For the name, email, and number input fields, you can see corresponding
labelelements 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
formelement, you should have aselectdropdown element with anidofdropdownand at least two options to choose from. - Inside the
formelement, you can select an option from a group of at least two radio buttons that are grouped using thenameattribute. - Inside the
formelement, you can select several fields from a series of checkboxes, each of which must have avalueattribute. - Inside the
formelement, you are presented with atextareafor additional comments. - Inside the
formelement, you are presented with a button withidofsubmitto 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.